/* Saitum how page styles. */
/* ===== DESIGN SYSTEM (перенесено с главной Saitum) ===== */

/* ===== HEADER ===== */

/* ===== MOCK ELEMENTS (вайрфрейм, как на главной) ===== */
.window-bar{display:flex;align-items:center;gap:6px;height:51px;border-bottom:1px solid var(--edge);margin-bottom:0}

.mock-title{font-size:23px;line-height:1.18;letter-spacing:-.04em;color:var(--frost)}

/* ===== REVEAL MOTION ===== */

/* ===== PAGE HERO (спокойный, для внутренней страницы) ===== */

/* ===== STICKY SUB-NAV ===== */

/* ===== FOOTER ===== */

/* ===== FILM GRAIN ===== */

/* ===== HEADING MASK REVEAL ===== */

/* ============================================================
   SECTION: ГЛАВНЫЙ ПРИНЦИП — «Сначала показываем — потом делаем»
   ============================================================ */
.principle-head{max-width:720px;margin-bottom:50px}
.principle-head h2{max-width:640px}
.principle-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.principle-copy p{font-size:15.5px;line-height:1.78;margin-bottom:18px}
.principle-accent{margin-top:26px;max-width:470px;font-size:18px;line-height:1.6;color:var(--moon);border-left:1px solid rgba(182,217,252,.4);padding-left:20px}

.draft-scene{position:relative}
.draft-scene:before{content:'';position:absolute;inset:-40px -30px;background-image:linear-gradient(rgba(182,217,252,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(182,217,252,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 74%);z-index:-1;pointer-events:none}
.draft-window{overflow:hidden;border-radius:18px;background:linear-gradient(165deg,rgba(28,38,60,.96),rgba(10,14,26,.99))}
.draft-chrome{padding:16px 24px 0}
.draft-url{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:999px;padding:7px 15px;font:10px var(--mono);letter-spacing:.06em;color:var(--fog);background:rgba(5,6,15,.5)}
.draft-url i{width:5px;height:5px;border-radius:50%;background:#87cbb0;box-shadow:0 0 8px #87cbb055}
.draft-frame{padding:20px 24px 24px}
.draft-frame .mock-title{font-size:21px}
.draft-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--edge);padding:14px 24px;font:10.5px var(--mono);letter-spacing:.09em;color:var(--fog)}
.draft-caption b{color:var(--blue);font-weight:400}
.draft-caption .draft-days{color:var(--moon);letter-spacing:.04em}

/* ===== КРАТКАЯ СХЕМА ПРОЦЕССА (pipeline) ===== */
.map-label{display:flex;align-items:center;gap:16px;margin-top:76px;color:rgba(199,211,234,.75);font:11px var(--mono);letter-spacing:.09em}
.map-label:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
.pipeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:30px}
.pipeline:before{content:'';position:absolute;top:6px;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(182,217,252,.3) 7%,rgba(182,217,252,.3) 93%,transparent)}
.p-step{position:relative;padding-top:34px;display:flex;flex-direction:column;gap:5px}
.p-dot{position:absolute;top:0;left:0;width:13px;height:13px;transform:rotate(45deg);background:var(--canvas);border:1px solid rgba(182,217,252,.55);box-shadow:0 0 12px rgba(182,217,252,.15)}
.p-step:last-child .p-dot{background:rgba(182,217,252,.3)}
.p-num{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--blue)}
.p-name{font-size:14.5px;color:var(--frost);letter-spacing:-.01em}

/* ============================================================
   SECTION: ЭТАПЫ 01–06 — главы с номерной рельсой
   ============================================================ */

.stage{display:grid;grid-template-columns:170px minmax(0,1fr) 300px;gap:32px 60px;padding:70px 0;border-top:1px solid var(--edge)}
.stage:first-of-type{border-top:0;padding-top:44px}
.stage-rail{display:flex;flex-direction:column;gap:12px}
.stage-big{font-size:98px;line-height:.9;font-weight:500;letter-spacing:-.05em;color:rgba(199,211,234,.13);font-variant-numeric:tabular-nums;user-select:none}
@supports(-webkit-text-stroke:1px #000){.stage-big{color:transparent;-webkit-text-stroke:1px rgba(186,215,247,.28)}}
.stage-frac{color:rgba(157,167,186,.6)}
.stage-body h3{font-size:clamp(23px,2.3vw,29px);margin-bottom:18px;max-width:560px}
.stage-body p{font-size:15px;line-height:1.78;margin-bottom:16px;max-width:640px}
.accent-quote{margin-top:26px!important;max-width:520px!important;font-size:17px;line-height:1.6;color:var(--moon);border-left:1px solid rgba(182,217,252,.4);padding-left:20px}
.stage-aside{padding-top:14px}

.aside-list li{position:relative;padding:9px 0 9px 24px;font-size:13.5px;color:var(--moon);line-height:1.65;border-bottom:1px solid rgba(186,215,247,.05)}
.aside-list li:last-child{border-bottom:0}
.aside-list li:before{content:'—';position:absolute;left:0;top:9px;color:#7d93b8;font-size:12px}
.aside-list.check li:before{content:'✓';color:#9eb8dc}
.aside-stat{font-size:34px;color:var(--frost);letter-spacing:-.03em;line-height:1.1;margin:14px 0 10px;font-variant-numeric:tabular-nums}
.aside-note{font-size:12.5px;color:var(--fog);line-height:1.65}

/* ============================================================
   SECTION: ЧТО ВЫ ПОЛУЧАЕТЕ — три колонки без карточек
   ============================================================ */
.deliverables{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px}
.deliverable{padding:6px 42px}
.deliverable:first-child{padding-left:0}
.deliverable:last-child{padding-right:0}
.deliverable+.deliverable{border-left:1px solid var(--edge)}
.d-index{font:11px var(--mono);color:var(--blue);letter-spacing:.08em;display:block;margin-bottom:16px}
.deliverable h3{font-size:clamp(20px,1.9vw,23px);margin-bottom:14px}
.deliverable p{font-size:14px;line-height:1.75}
.deliverable .accent-quote{font-size:14.5px;line-height:1.6;margin-top:20px!important;padding-left:16px;max-width:none!important;color:rgba(199,211,234,.85)}

/* ============================================================
   SECTION: СКОЛЬКО ЭТО ЗАНИМАЕТ — цифра + timeline
   ============================================================ */
.timeline-stat{text-align:center;margin-top:6px}
.stat-row{display:flex;align-items:baseline;justify-content:center;gap:20px;flex-wrap:wrap}
.stat-number{font-size:clamp(96px,14vw,170px);line-height:.95;letter-spacing:-.055em;font-variant-numeric:tabular-nums;filter:drop-shadow(0 0 34px rgba(154,188,255,.12))}
.stat-unit{font-size:clamp(22px,3vw,34px);color:var(--frost);letter-spacing:-.02em}
.stat-caption{max-width:560px;margin:20px auto 0;font-size:15px;line-height:1.7;color:var(--fog)}
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:78px}
.timeline:before{content:'';position:absolute;top:6px;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(182,217,252,.3) 8%,rgba(182,217,252,.3) 92%,transparent)}
.t-step{position:relative;padding-top:34px}
.t-dot{position:absolute;top:0;left:0;width:13px;height:13px;transform:rotate(45deg);background:var(--canvas);border:1px solid rgba(182,217,252,.55);box-shadow:0 0 12px rgba(182,217,252,.15)}
.t-step:first-child .t-dot{background:rgba(182,217,252,.3)}
.t-num{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--blue);margin:2px 0 6px}
.t-label{display:block;font-size:16.5px;color:var(--frost);margin:0 0 10px;letter-spacing:-.015em}
.t-step p{font-size:14px;line-height:1.7;max-width:300px}
.timeline-note{margin-top:44px;text-align:center;font-size:12.5px;color:rgba(157,167,186,.8);line-height:1.7}

/* ============================================================
   SECTION: ПОСЛЕ ЗАПУСКА — ветвящаяся схема жизненного цикла
   ============================================================ */
.lifecycle{margin-top:64px}
.lifecycle-grid{position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px 52px}
.life-root{grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:26px 28px;border-radius:18px;background:linear-gradient(160deg,rgba(24,31,51,.92),rgba(9,12,23,.97))}
.life-root:after{content:'';position:absolute;top:30px;bottom:30px;right:-27px;width:1px;background:linear-gradient(180deg,rgba(182,217,252,.38),rgba(182,217,252,.12))}
.life-root .mono{color:rgba(157,167,186,.65);display:block;margin-bottom:12px}
.life-root h3{font-size:24px;margin-bottom:10px}
.life-root p{font-size:13px;line-height:1.65}
.lane{position:relative}
.lane:before{content:'';position:absolute;top:26px;left:-28px;width:27px;height:1px;background:rgba(182,217,252,.35)}
.lane-head h3{font-size:19px;color:var(--frost);letter-spacing:-.015em}
.lane-head .mono{display:block;margin-top:7px;color:rgba(157,167,186,.7);font-size:10.5px}
.chain{display:flex;align-items:stretch;gap:12px;margin-top:20px}
.chip{flex:1 1 0;min-width:0;display:flex;align-items:center;border:1px solid var(--edge);border-radius:12px;background:rgba(199,211,234,.04);padding:14px 17px;font-size:13px;line-height:1.55;color:var(--moon)}
.chip.final{border-color:rgba(182,217,252,.42);background:rgba(182,217,252,.07);color:var(--frost);box-shadow:inset 0 1px 1px rgba(216,236,248,.14)}
.chain .arrow{align-self:center;color:#6f87ad;font:14px var(--mono);flex-shrink:0}
.early{position:relative;margin-top:30px;border:1px dashed rgba(186,215,247,.28);border-radius:16px;padding:24px 28px;background:rgba(182,217,252,.02)}
.early:before{content:'';position:absolute;top:-31px;left:38px;height:30px;border-left:1px dashed rgba(186,215,247,.28)}
.early-label{font:10px var(--mono);color:rgba(157,167,186,.7);letter-spacing:.1em;display:block;margin-bottom:10px}
.early h3{font-size:17px;color:var(--frost);margin-bottom:6px}
.early-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;margin-top:10px}
.early-list li{position:relative;padding:8px 0 8px 24px;font-size:13px;color:var(--moon);line-height:1.6}
.early-list li:before{content:'✓';position:absolute;left:0;top:8px;color:#9eb8dc}

/* ===== АКЦЕНТ «24 МЕСЯЦА» ===== */
.months-band{margin-top:84px;padding-top:64px;border-top:1px solid var(--edge);display:grid;grid-template-columns:auto 1fr;gap:24px 56px;align-items:center}
.months-number{font-size:clamp(100px,13vw,168px);line-height:.9;letter-spacing:-.055em;font-variant-numeric:tabular-nums;filter:drop-shadow(0 0 34px rgba(154,188,255,.12))}
.months-copy .mono{color:rgba(157,167,186,.65);display:block;margin-bottom:12px}
.months-copy h3{font-size:clamp(19px,2vw,24px);max-width:560px;margin-bottom:12px}
.months-copy p{font-size:14.5px;line-height:1.75;max-width:560px}
.after-note{margin-top:52px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.after-note p{font-size:14px;line-height:1.7;max-width:560px}
.after-note .text-link{margin-top:10px}

/* ===== FAQ ===== */

/* ===== FINAL CTA ===== */

.cta-quiet{font-size:13.5px!important;color:rgba(157,167,186,.85)}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */
@media(max-width:1060px){
.stage{grid-template-columns:140px minmax(0,1fr) 260px;gap:28px 40px}
.stage-big{font-size:78px}
.principle-grid{gap:48px}
.deliverable{padding:6px 28px}

}
@media(max-width:900px){

.principle-grid{grid-template-columns:1fr;gap:52px}
.draft-scene{max-width:520px}
.lifecycle-grid{grid-template-columns:1fr;gap:36px}
.life-root{grid-row:auto;max-width:420px}
.life-root:after,.lane:before{display:none}
.early:before{display:none}
.months-band{grid-template-columns:1fr;gap:18px;padding-top:48px;margin-top:64px}
.months-number{font-size:96px}

}
@media(max-width:860px){
.pipeline{grid-template-columns:1fr;gap:0;margin-top:26px;padding-left:36px}
.pipeline:before{top:12px;bottom:12px;left:7px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,rgba(182,217,252,.3) 4%,rgba(182,217,252,.3) 96%,transparent)}
.p-step{flex-direction:row;align-items:baseline;gap:16px;padding:13px 0}
.p-dot{top:19px;left:-35px}
.p-name{font-size:15px}
.timeline{grid-template-columns:1fr;gap:0;margin-top:56px}
.timeline:before{top:12px;bottom:12px;left:7px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,rgba(182,217,252,.3) 4%,rgba(182,217,252,.3) 96%,transparent)}
.t-step{padding:13px 0 13px 0;display:flex;flex-direction:column;gap:4px}
.t-dot{top:19px;left:-29px}
.t-step p{max-width:420px}
.deliverables{grid-template-columns:1fr;margin-top:0}
.deliverable{padding:28px 0}
.deliverable+.deliverable{border-left:0;border-top:1px solid var(--edge)}
.deliverable:first-child{padding-top:6px}
.chain{flex-direction:column;align-items:stretch}
.chain .arrow{transform:rotate(90deg);align-self:flex-start;padding:1px 0 1px 24px}
.early-list{grid-template-columns:1fr}
}
@media(max-width:700px){

.principle-head{margin-bottom:34px}
.principle-copy p{font-size:14px}
.principle-accent{font-size:16px;margin-top:20px}
.map-label{margin-top:56px}
.stage{grid-template-columns:1fr;gap:16px;padding:54px 0}
.stage:first-of-type{padding-top:26px}
.stage-rail{flex-direction:row;align-items:baseline;gap:14px}
.stage-big{font-size:54px}
.stage-frac{margin-left:auto}
.stage-body h3{margin-bottom:14px}
.stage-body p{font-size:14px}
.stage-aside{padding-top:4px;max-width:480px}
.accent-quote{font-size:15.5px}

}
@media(max-width:380px){

.stat-number{font-size:88px}
.months-number{font-size:80px}
.stage-big{font-size:46px}
.draft-frame{padding:16px 18px 20px}
.draft-chrome{padding:14px 18px 0}
.draft-caption{padding:12px 18px}
}

/* ===== AUDIT FIXES: LOCAL TYPE & READABILITY ===== */

.aside-note{font-size:13px;line-height:1.7}
.timeline-note{max-width:560px;margin-left:auto;margin-right:auto;color:var(--moon)}
.life-root .mono,.months-copy .mono{color:var(--moon)}
.lane-head .mono{font-size:11.5px;color:var(--fog)}
.chip{font-size:13.5px;line-height:1.6}
.early-list li{font-size:13.5px;line-height:1.65}