/* ORBITS · дизайн-система сайта v1: корабль, бумага и зелёный сигнал в мобильной колонке */
:root {
  /* корабль · фоны */
  --deep: #07141F; --ship: #0B1E2E; --depth: #123049;
  /* корпус · линии (не для текста) */
  --line-1: #4FA3E3; --line-2: #7FB8E0; --line-3: #A0C4E0;
  /* сигнал · действие */
  --sig-1: #7FE0A8; --sig-2: #4CC38A; --sig-3: #2E9E6B; --sig-4: #2E6B4E;
  /* тревога */
  --alarm-1: #E88C89; --alarm-2: #D64545; --alarm-3: #B23A3A;
  /* бумага */
  --paper: #EDE3CE; --card: #F7F1E3; --paper-green: #DCEDE1; --card-line: #D6C9AE;
  /* текст */
  --t-dark: #F2EEE3; --t-dark-2: #C9D3DA; --t-dark-3: #A9C4D6;
  --t-paper: #22303B; --t-paper-2: #2C3A46; --t-paper-3: #4A5A68;
  /* шрифты */
  --h: "Russo One", system-ui, sans-serif;
  --b: "Golos Text", system-ui, sans-serif;
  --m: "JetBrains Mono", ui-monospace, monospace;
  /* сетка */
  --col: 520px; --side: 20px; --sec: 36px; --hud: 56px; --dock: 84px;
  --r-card: 14px; --r-big: 16px;
  --screen: 100vh;
}
@supports (height: 100svh) { :root { --screen: 100svh; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hud); }
html, body { overflow-x: clip; }
/* мобильная колонка — основа; на компьютере колонка по центру, вокруг поле #07141F */
body { margin: 0; background: var(--deep); color: var(--t-dark); font: 400 16px/1.45 var(--b); -webkit-font-smoothing: antialiased; }
main, footer { max-width: var(--col); margin: 0 auto; }
main { background: var(--ship); box-shadow: 0 0 0 1px rgba(79,163,227,.12); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--sig-1); outline-offset: 3px; border-radius: 6px; }
.paper :focus-visible { outline-color: var(--t-paper); }
.wrap { padding: 0 var(--side); position: relative; width: 100%; }

/* типографика */
h1, h2, h3 { font-family: var(--h); font-weight: 400; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(33px, 9.2vw, 44px); line-height: 1.06; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: clamp(23px, 6.4vw, 29px); line-height: 1.12; text-wrap: pretty; }
h3 { font-size: 18px; line-height: 1.2; }
.lead { font-size: 17px; line-height: 1.5; color: var(--t-dark-2); margin-top: 12px; }
.kicker { font: 700 11px/1.5 var(--m); letter-spacing: 3px; text-transform: uppercase; color: var(--sig-1); margin-bottom: 10px; }
.micro { font: 600 12px/1.5 var(--m); color: var(--t-dark-2); margin-top: 10px; text-align: center; }
.hero-offer { text-align: inherit; }
.punch { margin-top: 16px; font: 600 16px/1.45 var(--b); color: var(--t-dark); border-left: 3px solid var(--sig-2); padding-left: 12px; }

/* типы секций */
.screen { position: relative; padding: var(--sec) 0; }
.ship { background-color: var(--ship);
  background-image: linear-gradient(rgba(79,163,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,227,.07) 1px, transparent 1px);
  background-size: 44px 44px; }
.depth { background: var(--depth); }
.paper { background: var(--paper); color: var(--t-paper); }
.paper .lead { color: var(--t-paper-3); }
.paper .kicker { color: var(--sig-4); }
.paper .micro { color: var(--t-paper-3); }
.paper .punch { color: var(--t-paper); border-color: var(--sig-3); }

/* кнопки */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 22px;
  background: linear-gradient(180deg, var(--sig-1), var(--sig-2)); color: #062015; text-decoration: none; border: 0; border-radius: var(--r-big);
  font: 700 16px/1.2 var(--b); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; text-align: center;
  box-shadow: 0 10px 28px -12px rgba(76,195,138,.7); transition: transform .15s, filter .2s; }
.cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta:active { transform: none; }
.cta .arr { font-family: var(--m); font-weight: 700; }
.cta.wide { width: 100%; }
/* на бумаге — тёмно-синяя, стрелка зелёная; зелёную на бежевом не ставим */
.paper .cta { background: var(--ship); color: var(--t-dark); box-shadow: 0 10px 24px -14px rgba(11,30,46,.8); }
.paper .cta .arr { color: var(--sig-1); }
/* контурная — в терминал-полосе */
.cta.outline { background: transparent; color: var(--sig-1); border: 1.5px solid var(--sig-2); box-shadow: none; min-height: 52px; padding: 12px 18px; }

/* шапка */
.hud { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--col)); z-index: 50;
  background: rgba(7,20,31,.96); border-bottom: 1px solid rgba(79,163,227,.25); }
.hud .wrap { display: flex; align-items: center; gap: 14px; height: var(--hud); }
.brand { font: 400 16px/1 var(--h); letter-spacing: .24em; text-decoration: none; color: var(--t-dark); }
.hud-bar { display: flex; flex: 1; min-width: 0; gap: 10px; align-items: center; font: 700 11px/1 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--t-dark-2); }
.hud-bar .cells { display: flex; gap: 4px; }
.hud-bar .cells i { width: 9px; height: 18px; border-radius: 3px; border: 1.5px solid rgba(79,163,227,.55); transition: background .3s, border-color .3s, box-shadow .3s; }
.hud-bar .cells i.on { background: var(--sig-2); border-color: var(--sig-1); box-shadow: 0 0 8px rgba(127,224,168,.5); }
.nav, .hud > .wrap > .cta { display: none; }
/* язык: одна кнопка — показывает другую версию (на русской UA, на украинской RU) */
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 10px; margin-left: auto;
  font: 700 11px/1 var(--m); letter-spacing: 1px; color: var(--sig-1); text-decoration: none; border: 1px solid rgba(127,224,168,.45); border-radius: 8px; }
.lang-switch:hover, .lang-switch:focus-visible { border-color: var(--sig-1); background: rgba(127,224,168,.1); }

@media (max-width: 390px) {
  .hud .wrap { gap: 9px; }
  .hud-bar { gap: 6px; }
  .hud-bar .name { display: none; }
}

/* 1. герой (свечение сверху синее, в тон космосу на фото: зелёное на синем давало грязный цвет): фото авторов во всю ширину колонки, низ фото растворяется в фоне, текст идёт ниже рук (руки ничем не перекрыты) */
.hero { min-height: var(--screen); display: flex; flex-direction: column; padding: var(--hud) 0 26px; overflow: hidden;
  background: radial-gradient(90% 45% at 50% 0%, rgba(79,163,227,.16), transparent 70%), radial-gradient(90% 40% at 50% 100%, rgba(214,69,69,.16), transparent 70%), var(--ship); }
/* Фото занимает всё место, которое остаётся над текстом на первом экране (текст — своей высоты). Кадр — от 1 : .7
   (от верха до чуть ниже рук: руки на 56% высоты фото = 81% кадра) до квадрата, если места по высоте больше (видно ноги). Ниже рук фото уходит в синий фон (82→94% кадра),
   текст идёт сразу после — на фото он не стоит ни на одном экране. */
.hero-photo { flex: 1 1 0; min-height: 230px; container-type: size; display: flex; justify-content: center; }
.hero-photo img { display: block; width: min(100cqw, 100cqh / .7, 640px); height: min(100cqh, 100cqw, 640px); object-fit: cover; object-position: 50% 0; margin-top: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 94%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 82%, transparent 94%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.hero .wrap { z-index: 1; margin-top: -10px; }
/* Телефон: фото от края до края экрана — стойки иллюминатора по краям фото видны, а синих полей за ними нет (фото не сужается и по бокам не растворяется).
   Если места по высоте мало, кадр режется сверху — не больше 10% (над головами), ровно настолько, чтобы руки остались выше растворения (76% кадра);
   высота кадра — не меньше 61% ширины экрана. Низ кадра растворяется в фоне (маска на рамке кадра, не на фото). */
@media (max-width: 560px) {
  .hero-photo { min-height: max(230px, 61vw); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 94%); mask-image: linear-gradient(180deg, #000 82%, transparent 94%); }
  .hero-photo img { flex: none; max-width: none; width: 100cqw; height: 100cqw;
    margin-top: min(0px, max(76cqh - 56.5cqw, -10cqw)); -webkit-mask-image: none; mask-image: none; }
}
.hero h1 { margin-top: 4px; }
/* сменяющиеся строки — всегда в одну строку (тексты короткие; на узких экранах кегль уменьшается вместе с шириной) */
.hero-rotor { display: grid; margin: 10px 0 0; font: 400 clamp(14px, 4.5vw, 22px)/1.2 var(--h); text-transform: uppercase; color: var(--sig-1); }
.hero-rotor span { grid-area: 1 / 1; align-self: end; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .39s ease, transform .39s ease; }
.hero-rotor span.on { opacity: 1; transform: none; }
.hero-rotor.all span { grid-area: auto; opacity: 1; transform: none; }
.hero .lead { margin-top: 10px; }
/* плашки: три в один ряд на любой ширине от 320 px — две короткие и одна длинная («1:1 персональная консультация» занимает остаток ряда).
   Размеры считаются от ширины самого ряда (cqw); иконки появляются, когда ряду хватает места (от 520 px), подпись длинной плашки на узких экранах идёт в две строки */
.facts { list-style: none; padding: 0; margin: 14px 0; display: flex; gap: 5px; container-type: inline-size; }
.facts li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.6cqw, 7px); padding: 8px clamp(6px, 2.7cqw, 12px); white-space: nowrap;
  background: rgba(11,30,46,.85); border: 1px solid rgba(127,224,168,.35); border-radius: var(--r-card); }
.facts li:last-child { flex: 1 1 0; min-width: 0; }
.facts li:last-child span { white-space: normal; text-align: left; }
.facts svg { display: none; flex: none; width: 20px; height: 20px; fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.facts b { font: 400 clamp(17px, 6.2cqw, 22px)/1 var(--h); color: var(--sig-1); }
.facts span { font-size: clamp(11px, 3.9cqw, 13.5px); line-height: 1.15; color: var(--t-dark-2); }
@container (min-width: 380px) { .facts { gap: 8px; } }
@container (min-width: 520px) { .facts svg { display: block; } }

/* терминал-полоса: CTA между секциями, скан-линии + курсор */
.term-strip { position: relative; padding: 26px 0; background: var(--deep); border-top: 1px solid rgba(79,163,227,.25); border-bottom: 1px solid rgba(79,163,227,.25); }
.term-strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px); }
.term-strip .wrap { display: grid; gap: 14px; }
.term { font: 700 12px/1.5 var(--m); letter-spacing: 1.5px; color: var(--sig-1); }
.term .gt { color: var(--line-1); }
.cursor { display: inline-block; width: 8px; height: 13px; margin-left: 4px; vertical-align: -2px; background: var(--sig-1); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 2. экспресс-тест (бумага, симптомы) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips button { position: relative; min-height: 44px; text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--card-line); color: var(--t-paper);
  border-radius: 999px; padding: 9px 14px 9px 36px; font: 500 14.5px/1.3 var(--b); transition: background .15s, border-color .15s, color .15s; }
.chips button::before { content: ""; position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid var(--t-paper-3); }
.chips button[aria-pressed="true"] { background: var(--t-paper); border-color: var(--t-paper); color: var(--t-dark); }
.chips button[aria-pressed="true"]::before { border-color: var(--alarm-1); background: var(--alarm-2); box-shadow: inset 0 0 0 3px var(--t-paper); }
.verdict { margin-top: 16px; display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--card-line); border-left: 4px solid var(--card-line); border-radius: var(--r-card); padding: 12px; }
.verdict.on { background: var(--depth); border-color: var(--depth); border-left-color: var(--alarm-2); color: var(--t-dark); }
.dial { width: 92px; height: auto; display: block; }
.dial-bg, .dial-val { fill: none; stroke-width: 10; stroke-linecap: round; }
.dial-bg { stroke: var(--card-line); }
.verdict.on .dial-bg { stroke: rgba(79,163,227,.3); }
.dial-val { stroke: var(--alarm-2); transition: stroke-dasharray .5s ease; }
#dialNeedle { transform-box: view-box; transform-origin: 60px 62px; transform: rotate(-90deg); transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
.dial-needle { stroke: var(--t-paper); stroke-width: 3; stroke-linecap: round; }
.dial-hub { fill: var(--t-paper); }
.verdict.on .dial-needle { stroke: var(--t-dark); } .verdict.on .dial-hub { fill: var(--t-dark); }
.dial-n { font: 700 13px var(--m); fill: var(--t-paper); }
.verdict.on .dial-n { fill: var(--alarm-1); }
.v-top { display: flex; justify-content: space-between; gap: 8px; font: 700 11px var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--t-paper-3); }
.verdict.on .v-top { color: var(--alarm-1); }
.v-top b { color: inherit; }
.v-title { margin-top: 6px; font: 400 18px/1.2 var(--h); }
.v-text { margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--t-paper-3); }
.verdict.on .v-text { color: var(--t-dark-2); }

/* 3. после теста (корабль): снежный ком на синем фоне → хорошие новости */
.slope { margin: 14px -6px 4px; }
.slope svg { width: 100%; height: auto; display: block; }
.slope-line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 5 6; fill: none; opacity: .55; }
.start rect { fill: var(--depth); stroke: rgba(79,163,227,.6); stroke-width: 1.5; }
.start text { font: 700 12px var(--b); fill: var(--t-dark); }
.start-dot { fill: var(--alarm-2); }
/* v22: один ком (app.js slope), положение и размер — атрибутом transform по прокрутке; полоски снега вращаются */
.ball circle.b { fill: var(--alarm-2); }
.ball circle.hl { fill: #fff; opacity: .35; }
.ball .sn { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk { fill: var(--ship); stroke: var(--alarm-1); stroke-width: 1.5; opacity: .5; transition: opacity .4s, fill .4s; }
.on > .mk { opacity: 1; fill: var(--alarm-2); }
.ball-t { font: 700 11px var(--m); letter-spacing: 1.5px; fill: var(--alarm-1); text-transform: uppercase; }
.ball-s { font: 500 13.5px var(--b); fill: var(--t-dark); }
.lbl { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease .05s, transform .45s ease .05s; }
.on > .lbl { opacity: 1; transform: none; }
.snow-end { margin-top: 6px; font: 600 16px/1.45 var(--b); color: var(--t-dark); border-left: 4px solid var(--alarm-2); padding-left: 12px; }
/* хорошие новости: зелёный заголовок и две карточки (не виноваты → ком можно остановить) */
.news { margin-top: 26px; display: grid; gap: 10px; }
.news-h { margin: 0 0 2px; font: 400 clamp(21px, 5.8vw, 26px)/1.15 var(--h); text-transform: uppercase; color: var(--sig-1); }
.news-card { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 5px; align-items: start; padding: 14px 16px 15px 14px;
  border: 1px solid rgba(127,224,168,.26); border-radius: var(--r-card); background: rgba(18,48,73,.55); }
.news-card svg { grid-row: 1 / 3; width: 28px; height: 28px; margin-top: 1px; fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.news-card b { font: 600 16.5px/1.3 var(--b); color: var(--t-dark); }
.news-card p { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--t-dark-2); }
.news-card.go { background: linear-gradient(135deg, rgba(76,195,138,.24), rgba(18,48,73,.55) 72%); border-color: rgba(127,224,168,.5); }

/* 4. как ORBITS приводит к изменениям (бумага), v21: «приборная панель» — тёмный экран с шапкой (счётчик и полоска из пяти делений)
   и пятью строками-шагами: лампа с номером, статус, показание прибора, заголовок и текст; ниже плашка вывода (глубина).
   Негорящее состояние есть только при .panel.js (app.js): без скриптов и в ?edit всё горит */
.panel { margin-top: 16px; background: var(--deep); color: var(--t-dark); border: 1px solid rgba(79,163,227,.4); border-radius: var(--r-big); padding: 12px 10px 10px;
  background-image: linear-gradient(rgba(79,163,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,227,.07) 1px, transparent 1px); background-size: 28px 28px; }
.panel-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 2px 4px 0; }
.p-name { font: 700 10.5px/1.3 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--t-dark-2); }
.p-count { font: 700 12px/1 var(--m); letter-spacing: 1px; color: var(--t-dark-3); }
.p-count b { font-size: 17px; color: var(--sig-1); }
.p-bar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.p-bar i { height: 5px; border-radius: 3px; background: var(--sig-1); box-shadow: 0 0 8px rgba(127,224,168,.55); transition: background .4s, box-shadow .4s; }
.steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
/* v22: у каждого шага своя картинка (SVG, не из программы): сканер над силуэтом, огонь с подпиткой, шестерни сдвигаются, маршрут к флажку, выход из круга.
   Прибор «включается» вместе с шагом (.on); без .panel.js (нет скриптов, ?edit, reduce) всё горит и стоит на месте */
.steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: center; background: rgba(18,48,73,.72); border: 1px solid rgba(127,224,168,.5); border-radius: var(--r-card); padding: 12px 14px 12px 10px;
  transition: border-color .45s, background .45s; }
.gauge { position: relative; display: grid; justify-items: center; gap: 3px; --c: var(--sig-1); --dim: rgba(160,196,224,.22); }
.gauge svg { width: 68px; height: 68px; overflow: visible; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.gauge .brk { stroke-width: 2.4; opacity: .7; }
.gauge .fig { stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease-out; }
.gauge .scan { stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 3px var(--c)); }
.gauge .fl { fill: rgba(232,140,137,.18); stroke: var(--alarm-1); transform-box: fill-box; transform-origin: 50% 100%; }
.gauge .fd { fill: var(--alarm-1); stroke: none; opacity: 0; }
.gauge .gr path { fill: rgba(127,224,168,.1); stroke-width: 1.8; } .gauge .gr circle { fill: var(--deep); stroke-width: 1.8; }
.gauge .gr { transform-box: fill-box; transform-origin: center; }
.gauge .rt-g { stroke-dasharray: 2 4; opacity: .45; }
.gauge .rt { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s ease-in-out; }
.gauge .cp { fill: var(--deep); stroke-width: 2; }
.gauge .flag { transform-box: fill-box; transform-origin: 0 100%; } .gauge .fg { fill: var(--c); }
.gauge .lp-g { stroke-dasharray: 2 4; opacity: .45; }
.gauge .lp { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease-in-out; }
.gauge .ah { stroke-width: 2.6; }
.gauge .mv { fill: var(--c); stroke: none; }
.gauge small { font: 700 8.5px/1.2 var(--m); letter-spacing: .6px; text-transform: uppercase; color: var(--t-dark-3); }
.s-txt { display: grid; gap: 5px; min-width: 0; }
.st { display: flex; align-items: center; gap: 8px; font: 700 10.5px/1.3 var(--m); letter-spacing: 1.4px; text-transform: uppercase; color: var(--sig-1); }
.lamp { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px/1 var(--m); letter-spacing: 0; background: var(--sig-1); color: #062015;
  box-shadow: 0 0 0 3px rgba(127,224,168,.16), 0 0 12px rgba(127,224,168,.6); transition: background .45s, color .45s, box-shadow .45s; }
.sv { transition: opacity .45s .15s; }
.steps h3 { font-size: 17px; color: var(--t-dark); }
.steps p { font-size: 14.5px; line-height: 1.4; color: var(--t-dark-2); }
.panel.js .p-bar i:not(.on) { background: rgba(160,196,224,.22); box-shadow: none; }
.panel.js .steps li:not(.on) { border-color: rgba(79,163,227,.28); background: rgba(18,48,73,.5); }
.panel.js .steps li:not(.on) .lamp { background: var(--deep); color: var(--t-dark-3); box-shadow: inset 0 0 0 1.5px rgba(160,196,224,.5); }
.panel.js .steps li:not(.on) .sv { opacity: 0; }
.panel.js li:not(.on) .gauge { --c: rgba(160,196,224,.4); }
/* не горит — картинка «выключена»: силуэт и маршрут не нарисованы, огонь и шестерни стоят; горит — всё оживает */
.panel.js li:not(.on) :is(.fig, .rt, .lp) { stroke-dashoffset: 1; }
.panel.js li:not(.on) :is(.ah, .mv, .flag, .fd) { opacity: 0; }
.panel.js li:not(.on) .fl { stroke: var(--c); fill: none; }
.panel.js li.on .scan { animation: scan 2.6s ease-in-out infinite alternate; }
@keyframes scan { from { opacity: .9; transform: translateY(0); } to { opacity: .9; transform: translateY(48px); } }
.panel.js li.on .fl { animation: flick 1.4s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1, 1); } to { transform: scale(1.06, 1.12); } }
.panel.js li.on .fd { animation: feed 1.5s ease-in var(--d) infinite; }
@keyframes feed { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.panel.js li.on .gr.a { animation: unstick 6s cubic-bezier(.5,0,.5,1) infinite; }
.panel.js li.on .gr.b { animation: unstick-b 6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes unstick { 0%, 12% { transform: rotate(0); } 16% { transform: rotate(-4deg); } 100% { transform: rotate(360deg); } }
@keyframes unstick-b { 0%, 12% { transform: rotate(0); } 16% { transform: rotate(5deg); } 100% { transform: rotate(-463deg); } }
.panel.js li.on .cp { animation: cp .4s ease var(--d, 0s) both; }
@keyframes cp { from { fill: var(--deep); } to { fill: var(--c); } }
.panel.js li.on .flag { animation: wave 1.6s ease-in-out 1.2s infinite alternate; }
@keyframes wave { from { transform: skewY(0); } to { transform: skewY(-7deg); } }
.panel.js li .ah { transition: opacity .4s ease 1.2s; }
/* итог загорается, когда пройден пятый шаг */
.sum.wait { background: rgba(18,48,73,.82); }
.sum.wait svg { stroke: rgba(160,196,224,.55); }
.sum.wait .ready { color: var(--t-dark-3); }
.sum.lit { box-shadow: 0 0 0 1.5px var(--sig-1), 0 14px 34px -16px rgba(46,158,107,.9); animation: sumIn .6s ease; }
@keyframes sumIn { from { transform: scale(.97); } }
.sum { margin-top: 12px; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 6px; align-items: start; background: var(--depth); color: var(--t-dark); border-radius: var(--r-big); padding: 16px; transition: background .4s, box-shadow .4s; }
.sum svg { grid-row: 1 / 4; width: 30px; height: 30px; fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.sum .ready { grid-column: 2; font: 700 10.5px/1.3 var(--m); letter-spacing: 1.6px; text-transform: uppercase; color: var(--sig-1); transition: color .4s; }
.sum h3 { grid-column: 2; font-size: 18px; }
.sum p { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--t-dark-2); }
.paper .sum .punch { grid-column: 1 / -1; margin-top: 8px; font-size: 15.5px; color: var(--t-dark); border-color: var(--sig-2); }
.depth .punch { font-size: 15.5px; }
.nw { white-space: nowrap; }
.who { display: block; margin-top: 6px; font: 700 11px var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--sig-1); }

/* 5. персональная консультация (глубина): как получить (шаги в зелёных кружках) и что получите (галочки) */
.c-card { background: var(--ship); border: 1px solid rgba(79,163,227,.3); border-radius: var(--r-big); padding: 16px; }
.c-card h3 { font-size: 18px; margin-bottom: 14px; }
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.c-steps { counter-reset: c; }
.c-steps li { counter-increment: c; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; font-weight: 600; color: var(--t-dark); }
.c-steps li::before { content: counter(c); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sig-2); color: #062015; font: 700 14px/1 var(--m); }
/* v22: подарок — значок .gi и блок «Как получить подарок?» */
.gi { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.gift-k { display: flex; align-items: center; gap: 7px; } .gift-k .gi { width: 17px; height: 17px; }
.facts li.gift svg { display: block; width: 17px; height: 17px; stroke: var(--sig-1); }
.tab small .gi { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1.5px; }
.c-gift { display: grid; gap: 14px; margin-top: 18px; }
.g-box { display: grid; place-items: center; }
.g-box svg { width: 128px; height: 128px; overflow: visible; }
.g-halo { fill: rgba(127,224,168,.08); stroke: rgba(127,224,168,.35); stroke-dasharray: 3 6; }
.g-base, .g-lid rect { fill: var(--ship); stroke: var(--sig-1); stroke-width: 2.2; }
.g-lid path, .g-rib { fill: none; stroke: var(--sig-1); stroke-width: 2.2; stroke-linecap: round; }
.g-t { font: 400 17px/1 var(--h); fill: var(--t-dark); paint-order: stroke; stroke: var(--ship); stroke-width: 6px; }
.g-lid { transform-box: fill-box; transform-origin: 50% 100%; }
#consult.seen .g-lid { animation: lid 1.6s ease .3s both; }
@keyframes lid { 0%, 100% { transform: none; } 35% { transform: translateY(-9px) rotate(-6deg); } 60% { transform: translateY(-4px) rotate(3deg); } }
.c-gift .c-card { background: linear-gradient(135deg, rgba(76,195,138,.16), var(--ship) 70%); border-color: rgba(127,224,168,.45); }
.c-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(79,163,227,.25); font: 600 12px/1.55 var(--m); color: var(--t-dark-2); }

/* 6. программа (корабль), v19: вводная часть в потоке, ниже — липкий маршрут. Блок .route высотой в несколько экранов,
   внутри липкий экран: плитки O-R-B-I-T-S и «1:1», график остановки, карточка «Сессия N → название → что будет → Результат».
   График занимает оставшуюся высоту (не меньше 92 px); карточке app.js задаёт общую высоту по самой длинной остановке */
#program { padding-bottom: 0; }
.route { position: relative; height: calc(var(--screen) * (1 + .8 * (var(--n, 7) - 1))); margin-top: 6px; }
.route-sticky { position: sticky; top: 0; height: var(--screen); padding: calc(var(--hud) + 8px) 0 calc(var(--dock) + 2px); overflow: hidden; }
.route-grid { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.letters { flex: none; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 5px; }
.letter { position: relative; background: var(--deep); border: 1px solid rgba(79,163,227,.45); border-radius: 12px; min-height: 52px; padding: 6px 0 5px; cursor: pointer; color: var(--t-dark-2);
  display: grid; justify-items: center; align-content: center; gap: 3px; transition: border-color .25s, background .25s, box-shadow .25s; }
.letter b { font: 400 21px/1 var(--h); color: var(--t-dark); }
.letter small { font: 700 9.5px/1 var(--m); letter-spacing: 1px; }
.letter .lt { display: none; }
.letter.done { border-color: rgba(127,224,168,.5); }
.letter.done b { color: var(--sig-1); }
.letter[aria-selected="true"] { border-color: var(--sig-1); background: var(--depth); box-shadow: 0 0 0 1px var(--sig-1), 0 0 18px -4px rgba(127,224,168,.7); }
.letter[aria-selected="true"] b, .letter[aria-selected="true"] small { color: var(--sig-1); }
.letter.has-practice::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sig-1); }
.viz-box { flex: 1 1 150px; min-height: 92px; max-height: 270px; background: var(--deep); border: 1px solid rgba(79,163,227,.35); border-radius: var(--r-big); padding: 6px; display: flex; }
.viz { flex: 1 1 auto; display: block; width: 100%; min-width: 0; min-height: 0; }
.stop { flex: none; background: var(--depth); border: 1px solid rgba(79,163,227,.35); border-radius: var(--r-big); padding: 12px 14px 14px; }
.stop.in > * { animation: stopIn .4s ease both; }
@keyframes stopIn { from { opacity: 0; transform: translateY(8px); } }
.stop-ghost { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.decode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; font: 600 12px/1.4 var(--m); color: var(--t-dark-3); }
.decode .k { font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sig-1); flex-basis: 100%; }
.decode .en { font: 400 16px/1.2 var(--h); letter-spacing: .02em; color: var(--t-dark); }
.decode .en b { color: var(--sig-1); font-weight: inherit; }
.stop h3 { font-size: 19px; margin: 6px 0 5px; }
.stop h3 .en { color: var(--t-dark); } .stop h3 .en b { color: var(--sig-1); font-weight: inherit; }
.stop .rows { display: grid; gap: 7px; margin: 0; }
.stop .row { display: grid; gap: 1px; }
.stop dt { font: 700 10.5px/1.5 var(--m); letter-spacing: 1px; text-transform: uppercase; color: var(--t-dark-3); }
.stop dd { margin: 0; color: var(--t-dark-2); font-size: 15px; line-height: 1.4; }
.stop dd::first-letter { text-transform: uppercase; }
.stop .res { padding: 7px 12px 8px; border-radius: 12px; background: rgba(127,224,168,.13); border: 1px solid rgba(127,224,168,.45); }
.stop .res dt { color: var(--sig-1); }
.stop .res dd { color: var(--t-dark); font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.stop .prac { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.stop .prac dt { padding: 2px 9px; border-radius: 999px; background: var(--sig-1); color: var(--deep); font-size: 11px; line-height: 1.4; }
.stop .prac dd { font-size: 13.5px; font-weight: 600; color: var(--t-dark); }
.swipe-hint { flex: none; align-self: center; font: 700 11px/1 var(--m); letter-spacing: 2px; color: var(--t-dark-2); text-transform: uppercase; transition: opacity .3s; }
.swipe-hint::after { content: " ↓"; }
.swipe-hint.gone { opacity: 0; }
.route.compact .viz-box { display: none; } /* карточка не поместилась вместе с графиком — остаётся текст */
@media (max-height: 760px) { .swipe-hint { display: none; } }
@media (max-height: 620px) {
  .route-grid { gap: 8px; } .letter { min-height: 46px; } .letter b { font-size: 19px; }
  .stop { padding: 10px 12px 12px; } .stop h3 { font-size: 18px; margin: 4px 0; } .stop dd { font-size: 14.5px; } .stop .rows { gap: 5px; }
}
/* совсем низкое окно (телефон боком): экран не липкий, остановки переключаются плитками */
@media (max-height: 479.98px) {
  .route { height: auto; padding-bottom: var(--sec); }
  .route-sticky { position: static; height: auto; padding: 0; overflow: visible; }
  .viz-box { flex: none; height: 170px; }
}
/* инфографика сессии (от 720 px) */
.viz text { font-family: var(--m); font-weight: 700; font-size: 10px; fill: var(--t-dark-3); letter-spacing: .05em; }
.viz .t-big { font: 400 13px var(--h); fill: var(--t-dark); }
.viz .draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: draw 1.1s ease forwards; }
.viz .fade { opacity: 0; animation: fade .5s ease forwards; }
.viz .pulse { animation: pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.viz .flow { stroke-dasharray: 3 6; animation: flow 1s linear infinite; }
.viz .spin { transform-box: view-box; transform-origin: 170px 100px; animation: spin 16s linear infinite; }
.route:not(.live) .viz :is(.spin, .flow, .pulse) { animation-play-state: paused; } /* вне кадра бесконечная анимация стоит */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes flow { to { stroke-dashoffset: -9; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 7. формат и условия (бумага), v19: «План полёта» — линия пути с точками; у каждой точки тёмное число-табло.
   Линия и точки зажигаются по мере прокрутки (--p ставит app.js, класс .js); без JS всё горит сразу */
.flight { --p: 1; list-style: none; position: relative; margin: 18px 0 16px; padding: 0 0 0 34px; display: grid; gap: 10px; }
.flight::before, .flight::after { content: ""; position: absolute; left: 9px; top: 26px; bottom: 34px; width: 3px; border-radius: 2px; }
.flight::before { background: repeating-linear-gradient(180deg, var(--card-line) 0 6px, transparent 6px 11px); }
.flight::after { background: linear-gradient(180deg, var(--sig-2), var(--sig-3)); transform-origin: top; transform: scaleY(var(--p)); }
.flight > li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 9px; align-items: center; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 12px 14px 14px 12px; }
.flight > li::before { content: ""; position: absolute; left: -33px; top: 18px; width: 19px; height: 19px; border-radius: 50%; background: var(--sig-2); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--sig-3); transition: background .3s, box-shadow .3s; }
.tab { position: relative; height: 62px; border-radius: 12px; background: var(--ship); display: grid; place-content: center; justify-items: center; gap: 5px; box-shadow: inset 0 0 0 1px rgba(127,224,168,.4); overflow: hidden; }
.tab b { font: 400 27px/1 var(--h); color: var(--sig-1); transition: color .3s; }
.tab small { font: 700 9.5px/1 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-dark-2); }
.fl-h span { display: block; font: 700 11px/1.4 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sig-4); }
.fl-h h3 { font-size: 17.5px; margin-top: 2px; color: var(--t-paper); }
.flight p { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; color: var(--t-paper-3); }
.flight a { color: var(--sig-4); font-weight: 700; white-space: nowrap; }
.flight > li.g { border: 1.5px solid var(--sig-3); background: var(--paper-green); }
.flight > li.g .tab { background: var(--sig-4); box-shadow: none; }
.flight > li.g .tab b { color: var(--t-dark); }
.flight > li.end { grid-template-columns: 44px minmax(0, 1fr); background: var(--depth); border-color: var(--depth); }
.flight > li.end svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--ship); fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flight > li.end .fl-h span { color: var(--sig-1); } .flight > li.end h3 { color: var(--t-dark); } .flight > li.end p { color: var(--t-dark-2); }
.flight > li.fl-ship { position: absolute; display: block; left: 10.5px; top: calc(26px + (100% - 60px) * var(--p)); width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; padding: 0; border: 0; border-radius: 50%; background: var(--sig-1); box-shadow: 0 0 0 4px rgba(76,195,138,.3), 0 0 14px 2px rgba(46,158,107,.8); pointer-events: none; }
.flight > li.fl-ship::before { display: none; }
.flight.js > li:not(.on)::before { background: var(--paper); box-shadow: 0 0 0 2px var(--card-line); }
.flight.js > li:not(.on) .tab b { color: rgba(169,196,214,.4); }
.flight.js > li.on .tab b { animation: flap .45s ease; }
@keyframes flap { from { transform: rotateX(88deg); opacity: .2; } }

/* 8. авторы (глубина): фото 3:4 в голубой рамке */
.duo { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.core { grid-column: 1 / -1; background: var(--ship); border: 1px solid rgba(79,163,227,.3); border-radius: var(--r-big); padding: 14px 14px 18px; background-image: radial-gradient(circle at 50% 96px, rgba(76,195,138,.14), transparent 150px); }
.duo-svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; overflow: visible; }
.duo-svg text { font-family: var(--m); font-weight: 700; }
.d-name { font-size: 12px; letter-spacing: 2px; } .d-name.p { fill: var(--sig-1); } .d-name.a { fill: var(--line-2); }
.d-sub { font-size: 8.5px; letter-spacing: 1.2px; fill: var(--t-dark-3); }
.tr { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tr.p { stroke: var(--sig-1); } .tr.a { stroke: var(--line-1); }
.d-glow { fill: rgba(76,195,138,.08); stroke: none; }
.d-core { font-family: var(--h) !important; font-weight: 400 !important; font-size: 15px; letter-spacing: 3.5px; fill: var(--t-dark); }
.d-sat.p { fill: var(--sig-1); } .d-sat.a { fill: var(--line-1); }
.duo.js .tr { stroke-dashoffset: 1; }
.duo.js :is(.d-core, .d-glow, .d-sat) { opacity: 0; }
.duo.js .story > :not(.in) { opacity: 0; transform: translateY(8px); }
.duo.js.seen .tr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s ease-in-out; }
.duo.js.seen .tr.a { transition-delay: .25s; }
.duo.js.seen :is(.d-core, .d-glow, .d-sat) { opacity: 1; transition: opacity .6s ease 1.3s; }
.duo.js .story > * { transition: opacity .55s ease, transform .55s ease; } /* части истории проявляются по одной при прокрутке (app.js duo) */
.story { margin-top: 12px; display: grid; gap: 10px; }
.story h3 { font-size: 18px; }
.story p { font-size: 15.5px; line-height: 1.5; color: var(--t-dark-2); }
.story .trk { position: relative; padding-left: 16px; }
.story .trk::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--sig-1); }
.story .trk.a::before { background: var(--line-1); }
.story .trk b { font-weight: 700; color: var(--sig-1); } .story .trk.a b { color: var(--line-2); }
.story .join { padding: 12px 14px; border-radius: 12px; background: rgba(127,224,168,.08); border: 1px solid rgba(127,224,168,.28); color: var(--t-dark); }
.story .punch { margin-top: 2px; color: var(--t-dark); }
/* v22: «текст от нас» частями — четыре «по частям», крупная мысль, два опыта, четыре силы, вывод */
.story > p > b { color: var(--t-dark); }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.parts li { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 6px; padding: 9px 12px; border-radius: 10px; background: rgba(7,20,31,.55); border: 1px dashed rgba(160,196,224,.28); font-size: 14.5px; line-height: 1.3; }
.parts li::after { content: "→"; grid-column: 2; grid-row: 1; text-align: center; color: var(--t-dark-3); font-family: var(--m); }
.parts b { grid-column: 1; font-weight: 600; color: var(--t-dark); } .parts span { grid-column: 3; color: var(--t-dark-2); }
.story .sys { font: 400 22px/1.2 var(--h); color: var(--sig-1); padding: 4px 0; }
.forces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.forces li { padding: 9px 10px; border-radius: 10px; text-align: center; font: 700 11.5px/1.2 var(--m); letter-spacing: 1.4px; text-transform: uppercase; border: 1px solid; }
.forces li:nth-child(1) { color: var(--sig-1); border-color: rgba(127,224,168,.5); background: rgba(127,224,168,.08); }
.forces li:nth-child(2) { color: var(--line-2); border-color: rgba(79,163,227,.55); background: rgba(79,163,227,.08); }
.forces li:nth-child(3) { color: #F2C66D; border-color: rgba(242,198,109,.5); background: rgba(242,198,109,.07); }
.forces li:nth-child(4) { color: #C9B6FF; border-color: rgba(201,182,255,.5); background: rgba(201,182,255,.07); }
.story .fin { font: 400 18px/1.2 var(--h); color: var(--t-dark); }
.member .hi { font: 600 12px/1.3 var(--m); letter-spacing: .5px; color: var(--t-dark-3); margin-top: 10px; }
.more { margin-top: 10px; align-self: start; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(160,196,224,.4); background: transparent; color: var(--t-dark); font: 700 11px/1 var(--m); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
/* два досье одного размера рядом: Павел и Алла равны; под ними общая история, ниже — по цитате каждого */
.member { display: flex; flex-direction: column; background: var(--ship); border: 1px solid rgba(79,163,227,.3); border-top: 3px solid var(--sig-1); border-radius: var(--r-big); padding: 10px 10px 14px; }
.member.alla { border-top-color: var(--line-1); }
.member .ph { aspect-ratio: 4 / 5; border-radius: 10px; background: var(--deep) no-repeat; background-size: cover; }
.member.alla .ph { background-position: 26% 16%; }
.member.pavel .ph { background-position: 68% 13%; }
.member h3 { font-size: 20px; margin-top: 10px; }
.member .role { color: var(--sig-1); font: 700 10.5px/1.45 var(--m); letter-spacing: 1px; text-transform: uppercase; margin: 3px 0 2px; min-height: 2.9em; }
.member.alla .role { color: var(--line-2); }
.m-list { list-style: none; margin: 8px 0 0; padding: 10px 0 0; display: grid; gap: 7px; border-top: 1px dashed rgba(160,196,224,.3); }
.m-list li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.35; color: var(--t-dark); overflow-wrap: break-word; }
.m-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--sig-1); background: radial-gradient(circle, var(--sig-1) 0 2.2px, transparent 2.7px); box-sizing: border-box; } /* ◉ */
.member.alla .m-list li::before { border-color: var(--line-1); background: radial-gradient(circle, var(--line-1) 0 2.2px, transparent 2.7px); }
.voice { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--r-big); background: var(--ship); border: 1px solid rgba(79,163,227,.3); border-left: 3px solid var(--sig-1); }
.voice.a { border-left-color: var(--line-1); }
.voice p { font-size: 14.5px; line-height: 1.45; color: var(--t-dark-2); }
.voice cite { display: block; margin-top: 6px; font: 700 11px/1.3 var(--m); letter-spacing: 2px; text-transform: uppercase; font-style: normal; color: var(--sig-1); }
.voice.a cite { color: var(--line-2); }
/* Телефон: досье друг под другом на всю ширину — фото с именем в шапке, пункты во всю ширину карточки; досье Аллы зеркально */
@media (max-width: 719.98px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .member { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 12px 14px 16px; }
  .member .ph { grid-column: 1; grid-row: 1 / span 4; }
  .member .hi { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .member h3 { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: 23px; }
  .member .role { grid-column: 2; grid-row: 3; align-self: start; min-height: 0; font-size: 11.5px; margin-top: 5px; }
  .member .socials { grid-column: 2; grid-row: 4; }
  .member.alla { grid-template-columns: minmax(0, 1fr) 104px; }
  .member.alla .ph { grid-column: 2; }
  .member.alla :is(.hi, h3, .role, .socials) { grid-column: 1; text-align: right; justify-content: flex-end; }
  .m-list { grid-column: 1 / -1; grid-row: 5; margin-top: 12px; padding-top: 12px; gap: 9px; }
  .m-list.fold li:nth-child(n+6) { display: none; } /* на телефоне видно 5 пунктов, остальные — по кнопке «Ещё» (app.js) */
  .more { grid-column: 1 / -1; grid-row: 6; justify-self: start; }
  .m-list li { font-size: 16px; line-height: 1.4; padding-left: 18px; }
}

/* отзывы */
.reviews-grid { display: grid; gap: 10px; margin-top: 16px; }
.review { background: var(--depth); border: 1px solid rgba(79,163,227,.3); border-radius: var(--r-card); padding: 16px; margin: 0; }
.review b { display: block; margin-top: 10px; font: 700 11px var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-dark-2); }

.blur { filter: blur(4px); color: var(--sig-1); user-select: none; }

/* 9. 3650 (корабль): линия жизни */
.num-inline { font: 400 1.35em var(--h); color: var(--alarm-1); }
.life { position: relative; margin: 16px 0 12px; height: 220px; background: var(--deep); border: 1px solid rgba(79,163,227,.35); border-radius: var(--r-big); overflow: hidden; }
.life svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.life-mid { stroke: rgba(79,163,227,.4); stroke-dasharray: 3 5; fill: none; vector-effect: non-scaling-stroke; }
.life-tick { stroke: rgba(79,163,227,.15); vector-effect: non-scaling-stroke; }
.life-tick-t { font: 700 9px var(--m); fill: var(--t-dark-3); }
.life-up { stroke: var(--sig-1); stroke-width: 3; fill: none; vector-effect: non-scaling-stroke; }
.life-down { stroke: var(--alarm-2); stroke-width: 3; fill: none; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.life-up-area { fill: rgba(127,224,168,.14); } .life-down-area { fill: rgba(214,69,69,.14); }
.life-now { fill: var(--t-dark); }
.life-lbl { position: absolute; font: 700 11px var(--m); letter-spacing: .5px; transition: top .4s ease; }
.life-lbl.now { left: 12px; top: calc(50% + 12px); color: var(--t-dark); }
.life-lbl.up { right: 10px; color: var(--sig-1); }
.life-lbl.down { right: 10px; color: var(--alarm-1); }
.slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; color: var(--t-dark-2); font-size: 15px; }
.slider b { font: 400 28px var(--h); color: var(--t-dark); }
.slider input { grid-column: 1 / -1; width: 100%; height: 44px; accent-color: var(--sig-2); }
.days-out { margin: 4px 0 16px; color: var(--t-dark-2); font-size: 15px; line-height: 1.45; }

/* 10. вопросы и финальный CTA (бумага) */
.faq { margin-top: 14px; }
.faq details { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); margin-bottom: 8px; }
.faq summary { cursor: pointer; list-style: none; padding: 13px 44px 13px 14px; min-height: 44px; font: 600 15.5px/1.35 var(--b); color: var(--t-paper); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 10px; font: 400 22px/1 var(--h); color: var(--sig-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 14px 14px; color: var(--t-paper-3); font-size: 15px; line-height: 1.45; }
.final { margin-top: 20px; text-align: center; }
.final-t { font: 400 21px/1.2 var(--h); color: var(--t-paper); margin: 0 auto 14px; text-wrap: balance; }
.final .micro a { color: var(--sig-4); font-weight: 700; }

/* футер: самый тёмный слой. Одна колонка по центру: бренд, контакты, три главных документа; остальное — свёрнуто и приглушённо */
footer { padding: 24px 0 108px; color: var(--t-dark-2); font-size: 13px; text-align: center; }
footer .wrap { display: grid; gap: 12px; justify-items: center; }
.foot-brand b { display: block; font: 400 15px var(--h); letter-spacing: .2em; color: var(--t-dark); }
.footer-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.footer-contacts a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font: 600 14.5px/1.2 var(--b); color: var(--t-dark); text-decoration: none; }
.footer-contacts a:hover { color: var(--sig-1); }
.footer-contacts svg { width: 18px; height: 18px; fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.legal a, .linkish { color: var(--t-dark-2); font-size: 13px; text-decoration: underline; text-decoration-color: rgba(79,163,227,.5); text-underline-offset: 3px; }
.legal a:hover, .linkish:hover { color: var(--t-dark); }
.requisites, .pay-logos, .copy { font-size: 12px; line-height: 1.5; color: var(--t-dark-3); }
.requisites { max-width: 620px; opacity: .85; }
.pay-logos { font: 700 12px/1.5 var(--m); letter-spacing: .05em; color: var(--t-dark-2); }
.copy .linkish { margin-left: 10px; font-size: 12px; color: var(--t-dark-3); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.socials { display: flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ship); border: 1px solid rgba(79,163,227,.4); color: var(--t-dark); }
.socials a:hover { border-color: var(--sig-1); color: var(--sig-1); }
.socials svg { width: 18px; height: 18px; }
.socials.small { margin: 6px 0 2px; gap: 6px; }
footer .socials { justify-content: center; }
.socials.small a { width: 32px; height: 32px; border-radius: 9px; }

/* cookie: баннер по центру экрана на любой ширине, текст по центру */
.cookie { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 20px), calc(var(--col) - 20px)); z-index: 70;
  background: var(--depth); border: 1px solid rgba(79,163,227,.5); border-radius: var(--r-big); padding: 12px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 14px; color: var(--t-dark-2); text-align: center; }
.cookie a { color: var(--sig-1); }
.cookie-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cookie button { min-height: 44px; border-radius: 12px; padding: 10px; font: 700 13.5px var(--b); cursor: pointer; }
.cookie-no { background: none; border: 1px solid rgba(79,163,227,.5); color: var(--t-dark); }
.cookie-yes { background: linear-gradient(180deg, var(--sig-1), var(--sig-2)); border: 0; color: #062015; }

/* липкая кнопка внизу экрана: в пределах колонки, высота 56 */
.dock { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; width: min(calc(100% - 2 * var(--side)), calc(var(--col) - 2 * var(--side)));
  transform: translate(-50%, 160%); z-index: 60; transition: transform .3s ease; }
.dock.show { transform: translate(-50%, 0); }
.dock .cta { width: 100%; min-height: 56px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dock, .cta, .lbl, .mk { transition: none; }
  .cursor, .viz *, .stop.in > *, .sum.lit, .g-lid { animation: none !important; }
  .flight.js > li.on .tab b { animation: none; }
  .d-sat { display: none; }
  .letter { transition: none; }
  .viz .draw { stroke-dashoffset: 0; } .viz .fade { opacity: 1; }
}

/* =====================================================================
   ПЛАНШЕТ И КОМПЬЮТЕР (v11). До 720 px действует только то, что выше:
   мобильная колонка не меняется. От 720 px страница раскрывается на ширину:
   фоны секций во всю ширину, контент в контейнере до 1200 px.
   ===================================================================== */
@media (min-width: 720px) {
  :root { --side: 32px; --sec: 52px; --wmax: 1200px; }
  /* правый/левый край контента: совпадает с краем .wrap */
  :root { --edge: max(var(--side), calc((100% - var(--wmax)) / 2)); }
  main, footer { max-width: none; }
  main { box-shadow: none; }
  .wrap { max-width: calc(var(--wmax) + 2 * var(--side)); margin: 0 auto; }
  body { font-size: 17px; }
  h1 { font-size: clamp(44px, 6.6vw, 56px); }
  h2 { font-size: clamp(30px, 4.3vw, 36px); }
  h3 { font-size: 20px; }
  .lead { font-size: 18px; max-width: 64ch; }
  .kicker { font-size: 12px; margin-bottom: 12px; }
  .punch { font-size: 17px; padding-left: 16px; }
  .micro { font-size: 12.5px; }

  /* шапка во всю ширину */
  .hud { width: 100%; left: 0; transform: none; }
  .hud-bar { margin-left: 6px; }

  /* 1. герой на планшете: фото сверху, как на телефоне, текст шире */
  .hero-text { max-width: 660px; }
  /* плашки крупнее; третья по-прежнему занимает остаток ряда */
  .facts { gap: 10px; }
  .facts li { gap: 8px; padding: 10px 14px 10px 12px; }
  .facts svg { width: 22px; height: 22px; }
  .facts b { font-size: 24px; }
  .facts span { font-size: 14px; }

  /* терминал-полоса: текст и кнопка в одну строку */
  .term-strip .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .term { font-size: 13px; letter-spacing: 2px; }
  .term-strip .cta.outline { padding: 12px 24px; }

  /* 2. тест: сетка 3×3, итог ниже, во всю ширину */
  .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .chips button { border-radius: var(--r-card); min-height: 64px; padding: 12px 16px 12px 42px; font-size: 15px; }
  .chips button::before { left: 16px; }
  .chips button:hover { border-color: var(--t-paper-3); }
  .chips button[aria-pressed="true"]:hover { border-color: var(--t-paper); }
  .verdict { grid-template-columns: 132px minmax(0, 1fr); gap: 22px; padding: 16px 22px; margin-top: 12px; }
  .dial { width: 132px; }
  .v-title { font-size: 23px; margin-top: 8px; }
  .v-text { font-size: 16px; max-width: 80ch; }

  /* 3. снежный ком: широкий пологий склон (app.js перестраивает SVG от 720 px), новости — две карточки в ряд */
  .slope { margin: 20px 0 10px; }
  .ball-t { font-size: 12px; }
  .ball-s { font-size: 15px; }
  .snow-end { font-size: 17px; padding-left: 16px; max-width: 72ch; }
  .news { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
  .news-h { grid-column: 1 / -1; font-size: 30px; margin-bottom: 4px; }
  .news-card { grid-template-columns: 32px 1fr; padding: 18px 20px 20px 18px; }
  .news-card svg { width: 32px; height: 32px; }
  .news-card b { font-size: 18px; } .news-card p { font-size: 16px; }

  /* 4. шаги: панель крупнее */
  .panel { padding: 18px 16px 16px; margin-top: 22px; }
  .p-name { font-size: 11.5px; } .p-bar i { height: 6px; }
  .steps { margin-top: 14px; gap: 10px; }
  .steps li { padding: 14px 18px 14px 12px; column-gap: 18px; grid-template-columns: 96px minmax(0, 1fr); }
  .gauge svg { width: 84px; height: 84px; } .gauge > b { top: 42px; font-size: 26px; } .gauge > b.c { top: 20px; left: 24px; font-size: 22px; } .gauge small { font-size: 9.5px; }
  .lamp { width: 30px; height: 30px; font-size: 11.5px; } .st { font-size: 11.5px; }
  .steps h3 { font-size: 20px; }
  .steps p { font-size: 16px; }
  .sum { grid-template-columns: 36px 1fr; column-gap: 16px; padding: 22px 24px; }
  .sum svg { width: 36px; height: 36px; }
  .sum h3 { font-size: 22px; }
  .sum p { font-size: 16.5px; }
  .paper .sum .punch { font-size: 17px; margin-top: 12px; }

  /* 5. консультация: две карточки рядом */
  .c-gift { grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 22px; } .g-box svg { width: 160px; height: 160px; }
  .c-card { padding: 22px; }
  .c-card h3 { font-size: 21px; margin-bottom: 18px; }
  .c-steps { gap: 14px; }
  .c-note { font-size: 12.5px; }

  /* 6. программа: в карточке слева буква и текст, справа инфографика сессии */
  .route-grid { gap: 14px; }
  .letters { gap: 8px; }
  .letter { min-height: 70px; } .letter b { font-size: 28px; } .letter small { font-size: 11px; }
  .letter:hover { border-color: var(--line-2); }
  .letter.has-practice::after { top: 7px; right: 7px; width: 7px; height: 7px; }
  .viz-box { max-height: 320px; }
  .stop { padding: 18px 20px 20px; }
  .decode { font-size: 13px; } .decode .k { font-size: 12px; } .decode .en { font-size: 18px; }
  .stop h3 { font-size: 23px; margin: 8px 0 6px; }
  .stop dd { font-size: 17px; } .stop dt { font-size: 11.5px; } .stop .rows { gap: 10px; }
  .stop .prac dd { font-size: 15px; }
  .stop .res { padding: 9px 14px 10px; } .stop .res dd { font-size: 16px; }

  /* 7. условия: линия пути вертикальная, карточки шире */
  .flight { margin: 24px 0 22px; padding-left: 44px; gap: 12px; }
  .flight::before, .flight::after { left: 13px; }
  .flight > li { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 16px 20px 18px 16px; }
  .flight > li::before { left: -40px; top: 24px; }
  .flight > li.fl-ship { left: 14.5px; }
  .tab { height: 70px; } .tab b { font-size: 32px; } .tab small { font-size: 10.5px; }
  .fl-h h3 { font-size: 20px; }
  .flight p { font-size: 16px; grid-column: 2; }
  .flight > li.end { grid-template-columns: 96px minmax(0, 1fr); } .flight > li.end svg { justify-self: center; width: 52px; height: 52px; padding: 12px; }
  #format .cta.wide { display: flex; max-width: 520px; margin: 0 auto; }

  /* 8. авторы: метрики в ряд, фото крупнее */
  .duo { gap: 14px; margin-top: 20px; } .core { padding: 20px 24px 24px; }
  .story { margin-top: 16px; }
  .story h3 { font-size: 21px; }
  .story p { font-size: 16.5px; }
  .member { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; align-content: start; padding: 16px; }
  .member .ph { grid-row: 1 / span 5; align-self: start; } .member > :not(.ph) { grid-column: 2; } .member .hi { margin-top: 0; } .member h3 { margin-top: 2px; } .member .role { min-height: 0; }
  .more { display: none; }
  .parts li { font-size: 16px; padding: 11px 16px; } .story .sys { font-size: 28px; } .story .fin { font-size: 21px; }
  .forces { grid-template-columns: repeat(4, minmax(0, 1fr)); } .forces li { font-size: 12.5px; padding: 12px 8px; }
  .voice { grid-column: auto; padding: 16px 18px; } .voice p { font-size: 15.5px; }
  .member h3 { font-size: 22px; }
  .m-list li { font-size: 15.5px; }

  /* 9. 3650: линия жизни держит пропорции SVG */
  .life { height: auto; aspect-ratio: 340 / 230; max-height: 460px; }
  .life-lbl { font-size: 12.5px; }
  .life-tick-t { font-size: 8px; }
  .slider { font-size: 16px; }
  .slider b { font-size: 34px; }
  .days-out { font-size: 17px; }

  /* 10. вопросы и финал */
  .faq summary { padding: 16px 52px 16px 18px; font-size: 17px; }
  .faq summary::after { right: 18px; top: 13px; }
  .faq summary:hover { color: var(--sig-4); }
  .faq details p { padding: 0 18px 16px; font-size: 16px; max-width: 72ch; }
  .final { max-width: 620px; margin: 28px auto 0; }
  .final-t { font-size: 26px; }

  /* подвал — та же колонка по центру, крупнее */
  footer { padding: 34px 0 104px; font-size: 14px; }
  footer .wrap { gap: 14px; }
  .footer-contacts { gap: 0 28px; }

  /* cookie: карточка по центру внизу; липкая кнопка: компактная, справа внизу по краю контента */
  .cookie { width: 480px; bottom: 20px; }
  .dock { left: auto; right: var(--edge); width: 360px; bottom: 20px; transform: translateY(calc(100% + 40px)); }
  .dock.show { transform: none; }
  .dock .cta { box-shadow: 0 14px 34px -10px rgba(0,0,0,.7), 0 10px 28px -12px rgba(76,195,138,.7); }
}

@media (min-width: 900px) {
  /* навигация в шапке */
  .nav { display: flex; gap: 26px; margin-left: auto; }
  .nav a { font: 700 12px/1 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--t-dark-2); text-decoration: none; padding: 16px 0; transition: color .2s; }
  .nav a:hover { color: var(--sig-1); }
  .lang-switch { margin-left: 0; }
}

@media (min-width: 1024px) {
  :root { --side: 40px; --sec: 64px; }
  h1 { font-size: clamp(46px, 4.5vw, 62px); line-height: 1.04; }
  h2 { font-size: clamp(32px, 3vw, 40px); }
  .lead { font-size: 19px; }

  /* 3. снежный ком: текст слева, широкий склон справа; хорошие новости — ниже во всю ширину */
  #why .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto auto 1fr auto; column-gap: 56px; }
  #why .wrap > * { grid-column: 1; }
  #why .kicker { grid-row: 2; } #why h2 { grid-row: 3; } #why .lead { grid-row: 4; } #why .snow-end { grid-row: 5; margin-top: 22px; }
  #why .slope { grid-column: 2; grid-row: 1 / 7; margin: 0; align-self: center; }
  #why .news { grid-column: 1 / -1; grid-row: 7; margin-top: 40px; }

  /* 4. шаги: слева заголовок, справа панель из пяти шагов; вывод — слева внизу, на уровне пятого шага */
  #how .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 56px; }
  #how .kicker, #how h2, #how .lead, #how .sum { grid-column: 1; }
  #how .panel { grid-column: 2; grid-row: 1 / -1; margin-top: 0; align-self: start; }
  #how .sum { align-self: end; margin-top: 28px; }

  /* 5. консультация: заголовок слева, вводная справа, ниже две карточки */
  #consult .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  #consult .kicker { grid-column: 1; grid-row: 1; } #consult h2 { grid-column: 1; grid-row: 2; }
  #consult .lead { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; }
  #consult .c-gift { grid-column: 1 / -1; margin-top: 30px; grid-template-columns: 260px minmax(0, 1fr); } #consult .g-box svg { width: 200px; height: 200px; }
  .c-card { padding: 28px; }
  .c-steps li { font-size: 18px; }

  /* 6. программа: инфографика шире */
  /* программа: слева плитки с названиями остановок, справа график и карточка */
  .route-sticky { padding: calc(var(--hud) + 20px) 0 var(--dock); }
  .route-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(150px, 330px) auto auto; align-content: center; column-gap: 48px; row-gap: 14px; }
  .letters { grid-column: 1; grid-row: 1 / -1; align-self: center; grid-template-columns: 1fr; gap: 8px; }
  .viz-box { grid-column: 2; grid-row: 1; min-height: 0; max-height: none; }
  .stop { grid-column: 2; grid-row: 2; }
  .swipe-hint { grid-column: 2; grid-row: 3; justify-self: center; }
  .letter { grid-template-columns: 44px minmax(0, 1fr) auto; justify-items: start; align-items: center; align-content: center; column-gap: 14px; min-height: 58px; padding: 8px 18px; text-align: left; }
  .letter b { font-size: 29px; justify-self: center; }
  .letter .lt { display: block; grid-column: 2; grid-row: 1; font: 600 17px/1.25 var(--b); color: var(--t-dark); }
  .letter small { grid-column: 3; grid-row: 1; font-size: 11.5px; }
  .letter.has-practice::after { top: 50%; right: 8px; margin-top: -3px; }
  .letter.has-practice small { margin-right: 8px; }
  .stop h3 { font-size: 26px; margin: 10px 0 8px; }
  .stop dd { font-size: 18px; } .stop .res dd { font-size: 17px; } .stop .prac dd { font-size: 16px; }

  /* 7. условия: линия пути горизонтальная, пять точек в ряд; итог пути и кнопка — нижними строками */
  #format .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: center; }
  #format .kicker, #format h2, #format .flight { grid-column: 1 / -1; }
  .flight { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 46px 0 0; margin: 26px 0; }
  .flight::before, .flight::after { left: 30px; right: 30px; top: 14px; bottom: auto; width: auto; height: 3px; }
  .flight::before { background: repeating-linear-gradient(90deg, var(--card-line) 0 6px, transparent 6px 11px); }
  .flight::after { background: linear-gradient(90deg, var(--sig-2), var(--sig-3)); transform-origin: left; transform: scaleX(var(--p)); }
  .flight > li { grid-template-columns: 1fr; align-content: start; align-items: start; row-gap: 12px; padding: 18px 18px 20px; }
  .flight > li::before { left: 20px; top: -42px; }
  .flight > li.fl-ship { left: calc(30px + (100% - 60px) * var(--p)); top: 15.5px; }
  .tab { width: 104px; height: 74px; }
  .fl-h h3 { font-size: 19px; }
  .flight p { grid-column: 1; font-size: 15.5px; }
  .flight > li.end { grid-column: 1 / -1; grid-template-columns: 52px auto minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 18px 24px; }
  .flight > li.end::before { display: none; }
  .flight > li.end p { grid-column: 3; font-size: 16.5px; }
  #format .cta.wide { width: auto; max-width: none; margin: 0; padding: 16px 40px; }
  #format .micro { margin-top: 0; text-align: left; font-size: 13px; }

  /* 8. авторы: слева Павел, справа Алла — одинаковые досье; между ними общая история и орбита; ниже две цитаты поровну */
  #crew .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
  /* v22: два досье рядом по 6 колонок; ниже орбиты слева и история справа во всю ширину; под ними — голоса */
  .member { grid-row: 1; grid-template-columns: 170px minmax(0, 1fr); padding: 18px 20px 22px; }
  .member .ph { grid-row: 1 / span 4; } .member .m-list { grid-column: 1 / -1; grid-row: 5; margin-top: 16px; }
  .member.pavel { grid-column: 1 / 7; } .member.alla { grid-column: 7 / 13; }
  .member h3 { font-size: 28px; }
  .m-list li { font-size: 15.5px; }
  .core { grid-column: 1 / -1; grid-row: 2; padding: 30px 34px 34px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  .core .duo-svg { max-width: none; position: sticky; top: 120px; }
  .core .story { margin-top: 0; }
  .voice.p { grid-column: 1 / 7; } .voice.a { grid-column: 7 / 13; }
  .story h3 { font-size: 23px; }
  .story p { font-size: 17px; }
  .story .punch { font-size: 18px; }

  /* 9. 3650: слева текст и ползунок, справа линия жизни */
  #days .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto auto auto auto auto 1fr; column-gap: 56px; }
  #days .wrap > * { grid-column: 1; }
  #dyKicker { grid-row: 2; } #dyH2 { grid-row: 3; } #dyLead { grid-row: 4; }
  #days .slider { grid-row: 5; margin-top: 18px; } #daysOut { grid-row: 6; } #dyCta { grid-row: 7; }
  #days .life { grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: center; max-height: none; }
  #dyH2 { font-size: clamp(40px, 3.8vw, 52px); }

  /* 10. вопросы слева, финал справа: плашка глубины с основной кнопкой */
  .faq-sec .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; }
  .faq-sec h2 { grid-column: 1; grid-row: 1; }
  .faq { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .faq details:last-child { margin-bottom: 0; }
  .final { grid-column: 2; grid-row: 1 / 3; margin: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    background-color: var(--depth); background-image: linear-gradient(rgba(79,163,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,227,.07) 1px, transparent 1px);
    background-size: 44px 44px; border-radius: var(--r-big); padding: 40px 32px; position: relative; overflow: hidden; }
  /* орбита: пунктир за краем плашки */
  .final::before { content: ""; position: absolute; width: 150%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    border: 1.5px dashed rgba(127,224,168,.3); box-shadow: inset 0 0 0 70px rgba(7,20,31,.18); pointer-events: none; }
  .final > * { position: relative; }
  .final-t { color: var(--t-dark); font-size: clamp(30px, 2.6vw, 36px); margin-bottom: 26px; }
  .paper .final .cta { background: linear-gradient(180deg, var(--sig-1), var(--sig-2)); color: #062015; box-shadow: 0 10px 28px -12px rgba(76,195,138,.7); }
  .paper .final .cta .arr { color: #062015; }
  .paper .final .micro { color: var(--t-dark-2); }
  .final .micro a { color: var(--sig-1); }
  .paper .final :focus-visible { outline-color: var(--sig-1); }

  /* отзывы, если появятся */
  .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* почти квадратные окна и планшеты (от 720px, но не «текст слева, фото справа»): фото стоит по центру — текст, плашки и кнопка по той же оси,
   одной колонкой шириной с фото; иначе фото в центре, а текст у левого края */
@media (min-width: 1024px) and (max-height: 780px) {
  .route-sticky { padding: calc(var(--hud) + 14px) 0 78px; }
  .letter { min-height: 50px; } .letter b { font-size: 25px; } .letter .lt { font-size: 16px; }
  .stop { padding: 14px 18px 16px; } .stop h3 { font-size: 22px; margin: 6px 0; } .stop dd { font-size: 16.5px; } .stop .rows { gap: 7px; }
  .swipe-hint { display: none; }
}

@media (min-width: 720px) and (max-aspect-ratio: 13/10), (min-width: 720px) and (max-width: 819.98px) {
  .hero-text { max-width: 640px; margin: 0 auto; text-align: center; }
  .hero-rotor { justify-items: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .facts { justify-content: center; }
}

/* герой «текст слева, фото справа»: только широкие экраны (от 13:10). Почти квадратные — как планшет: фото сверху, текст ниже */
@media (min-width: 820px) and (min-aspect-ratio: 13/10) {
  /* 1. один цельный блок: фото справа до края экрана, растворяется влево (0→28% ширины) и вниз в синий фон, без рамки.
     Люди на фото — от 29% ширины; текст кончается на 12%, где фото почти растворено: руки и лица не перекрыты, текст не стоит на фото.
     --e — левый край текста, --ph — сторона фото: не выше экрана, не шире 62% и оставляет тексту не меньше 460px. */
  .hero { --e: max(var(--side), (100vw - var(--wmax)) / 2); --ph: min(var(--screen) - var(--hud), 62vw, (100vw - var(--e) - 460px) / .88);
    flex-direction: row; align-items: center; padding: calc(var(--hud) + 36px) 0 40px; }
  .hero-photo { position: absolute; top: calc(var(--hud) + (var(--screen) - var(--hud) - var(--ph)) / 2); right: 0; width: var(--ph); height: var(--ph); min-height: 0; }
  .hero-photo img { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
  .hero-photo img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, transparent, #000 6%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, transparent, #000 6%, #000 86%, transparent); }
  .hero .wrap { margin-top: 0; width: 100%; }
  .hero-text { max-width: min(680px, 100vw - var(--ph) * .88 - var(--e)); }
  .hero h1 { margin-top: 12px; font-size: clamp(38px, 4.5vw, 62px); }
  .hero .lead { font-size: 20px; margin-top: 16px; }
  .facts { margin: 26px 0 22px; }
  .hero .cta.wide { max-width: 620px; }
}

@media (min-width: 1280px) {
  :root { --sec: 72px; }
  .chips button { font-size: 16px; }
}

/* v22 (правка владельца 06.10): шаги «Как ORBITS…» — строка «что это даёт»; подарок — «Что Вы получите на встрече?»; «Кто ведёт» — переключатель */
.s-txt .out { margin-top: 3px; padding: 8px 11px; border-radius: 9px; background: rgba(127,224,168,.09); border-left: 2px solid var(--sig-1); color: var(--t-dark); font-size: 14px; line-height: 1.4; transition: opacity .45s; }
.panel.js .steps li:not(.on) .out { opacity: .45; }
.c-warn { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(242,198,109,.1); border: 1px solid rgba(242,198,109,.4); font-size: 14px; line-height: 1.45; color: var(--t-dark); }
.c-warn b { color: #F2C66D; }
.c-get { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-get li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; color: var(--t-dark); }
.c-get li::before { content: ""; position: absolute; left: 0; top: .05em; width: 19px; height: 19px; border-radius: 50%; background: rgba(127,224,168,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.3 2.6 2.6L14.2 7.4' fill='none' stroke='%237FE0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat; }
.c-gift .c-card.get { background: var(--ship); border-color: rgba(79,163,227,.3); }

/* досье: открыто 5 пунктов на любой ширине, 5-й — интересный факт (выделен) */
.duo .m-list.fold li:nth-child(n+6) { display: none; }
.duo .more { display: inline-block; justify-self: start; }
.m-list li.fact { padding: 9px 12px 9px 32px; border-radius: 10px; background: rgba(242,198,109,.1); border: 1px solid rgba(242,198,109,.45); }
.m-list li.fact::before { left: 12px; top: calc(9px + .3em); border-color: #F2C66D; background: radial-gradient(circle, #F2C66D 0 2.2px, transparent 2.7px); }
.member.alla .m-list li.fact::before { border-color: #F2C66D; background: radial-gradient(circle, #F2C66D 0 2.2px, transparent 2.7px); }
@media (min-width: 720px) {
  .c-gift { grid-template-columns: 180px minmax(0, 1fr); } .c-gift .g-box { grid-row: 1 / span 2; align-self: start; }
  .c-get li { font-size: 16px; }
}
@media (min-width: 1024px) {
  #consult .c-gift { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); } #consult .c-gift .g-box { grid-row: 1; }
  .s-txt .out { font-size: 15px; }
  .member .more { grid-column: 1 / -1; grid-row: 6; }
}

/* v22 (правка владельца 06.10): ком в конце склона разбивается — «жизнь теряет смысл». Класс .broke ставит slope() в app.js */
.crash .sh { fill: var(--alarm-2); opacity: 0; transform-box: fill-box; transform-origin: center; }
.crash .sh.w { fill: #fff; }
.crash .boom { fill: none; stroke: var(--alarm-1); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.crash-t { font: 700 12px var(--m); letter-spacing: 2px; text-transform: uppercase; fill: var(--alarm-1); opacity: 0; transition: opacity .5s ease .45s; }
.ball { transition: opacity .12s; }
.broke .ball { opacity: 0; }
.broke .crash .sh { animation: shard .9s cubic-bezier(.25,.6,.4,1) forwards; }
.broke .crash .boom { animation: boom .6s ease-out forwards; }
.broke .crash-t { opacity: 1; }
@keyframes shard { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 45% { transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .5)); } 100% { opacity: .85; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes boom { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@media (min-width: 720px) { .crash-t { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .broke .crash .sh { animation: none; opacity: .85; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  .broke .crash .boom { animation: none; } .crash-t { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .gauge .mv { display: none; } }

/* v23 (правки владельца 08.10) ------------------------------------------------------------ */
/* тест: сферы плашками над текстом итога, постоянная фраза и кнопка во всю ширину карточки */
.v-spheres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v-spheres:empty { display: none; }
.v-spheres span { padding: 4px 10px; border-radius: 99px; font: 700 10.5px/1.3 var(--m); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--alarm-1); background: rgba(232,140,137,.12); border: 1px solid rgba(232,140,137,.45); }
.v-text.theme { color: var(--t-dark); font-size: 15px; line-height: 1.5; margin-top: 8px; }
/* ничего не отмечено — карточка светлая: текст тёмный, иначе его не видно (владелец 22.10) */
.verdict:not(.on) .v-text.theme { color: var(--t-paper-2); }
.v-next { font-size: 14.5px; line-height: 1.5; color: var(--t-dark-2); border-left: 3px solid var(--sig-1); padding-left: 12px; }
@media (min-width: 720px) {
  .v-text.theme { font-size: 16.5px; }
  .v-next { font-size: 15.5px; max-width: 78ch; }
}

/* снежный ком: проблема плашкой у отметки (без названия сферы) */
.pill { fill: rgba(18,48,73,.92); stroke: rgba(232,140,137,.7); stroke-width: 1.3; }
.on > .lbl .pill { fill: rgba(214,69,69,.2); }
.lbl .ball-s { font: 600 13.5px var(--b); fill: var(--t-dark); }
@media (min-width: 720px) { .lbl .ball-s { font-size: 14.5px; } }

/* авторы: шапка досье — имя, роль в ORBITS, регалии плашками, соцсети; пункты ниже на всю ширину карточки. Интересный факт — зелёная плашка */
.m-head { display: grid; align-content: start; min-width: 0; }
.duo .member .m-head > * { grid-column: auto; grid-row: auto; }
.m-orb { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--t-dark); }
.m-orb span, .fk { display: block; margin-bottom: 2px; font: 700 10px/1.4 var(--m); letter-spacing: 1.4px; text-transform: uppercase; color: var(--sig-1); }
.member.alla .m-orb span { color: var(--line-2); }
.m-tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.m-tags li { padding: 4px 9px; border-radius: 99px; font: 600 12px/1.3 var(--b); color: var(--t-dark); background: rgba(127,224,168,.08); border: 1px solid rgba(127,224,168,.35); }
.member.alla .m-tags li { background: rgba(79,163,227,.08); border-color: rgba(79,163,227,.45); }
.m-head .socials { margin-top: 12px; }
.member .ph { grid-column: 1; grid-row: 1; align-self: start; }
.member .m-head { grid-column: 2; grid-row: 1; }
.member .m-list { grid-column: 1 / -1; grid-row: 2; }
.member .more { grid-column: 1 / -1; grid-row: 3; }
.m-list li.fact, .member.alla .m-list li.fact { background: rgba(127,224,168,.12); border-color: rgba(127,224,168,.55); }
.m-list li.fact::before, .member.alla .m-list li.fact::before { border-color: var(--sig-1); background: radial-gradient(circle, var(--sig-1) 0 2.2px, transparent 2.7px); }
/* подзаголовок в досье («Алла вне работы»): подпись в стиле «Роль в ORBITS», без маркера */
.m-list li.sub { padding: 6px 0 0; font: 700 10px/1.4 var(--m); letter-spacing: 1.4px; text-transform: uppercase; color: var(--sig-1); }
.member.alla .m-list li.sub { color: var(--line-2); }
.m-list li.sub::before { content: none; }
@media (max-width: 719.98px) {
  .member.alla .ph { grid-column: 2; }
  .member.alla .m-head { grid-column: 1; text-align: right; }
  .member.alla :is(.m-tags, .socials) { justify-content: flex-end; }
}
@media (min-width: 720px) { .m-orb { font-size: 15px; } .m-tags li { font-size: 13px; padding: 5px 11px; } }

/* «Как ORBITS приводит к изменениям» на компьютере — горизонтально: заголовок и вводная в строку, пять шагов колонками, итог полосой ниже */
@media (min-width: 1024px) {
  #how .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto; }
  #how .kicker { grid-column: 1; grid-row: 1; } #how h2 { grid-column: 1; grid-row: 2; }
  #how .lead { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; max-width: none; }
  #how .panel { grid-column: 1 / -1; grid-row: 3; margin-top: 30px; }
  #how .sum { grid-column: 1 / -1; grid-row: 4; align-self: auto; margin-top: 14px;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; }
  #how .sum svg { grid-row: 1 / 4; align-self: start; }
  #how .sum .punch { grid-column: 3; grid-row: 1 / 4; margin: 0; align-self: center; }
  #how .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  #how .steps li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; row-gap: 12px; padding: 16px 14px 14px; }
  #how .gauge { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
  #how .gauge svg { width: 64px; height: 64px; }
  #how .s-txt { display: flex; flex-direction: column; gap: 7px; }
  #how .steps h3 { font-size: 18px; }
  #how .steps p { font-size: 15px; }
  #how .s-txt .out { margin-top: auto; font-size: 14px; }
}

/* липкая кнопка на ПК — по центру экрана; кнопка «Формат и условия» — по центру, пояснение под ней */
@media (min-width: 720px) {
  .dock { left: 50%; right: auto; transform: translate(-50%, calc(100% + 40px)); }
  .dock.show { transform: translate(-50%, 0); }
}
@media (min-width: 1024px) {
  #format .cta.wide { grid-column: 1 / -1; justify-self: center; }
  #format .micro { grid-column: 1 / -1; text-align: center; margin-top: 10px; }
}

/* 3650: блок из двух половин — сверху зелёная «Пройти ORBITS», снизу красная «Оставить как есть», между ними линия жизни (граница цвета — по средней линии графика) */
.fork { margin: 16px 0 14px; border-radius: var(--r-big); overflow: hidden; border: 1px solid rgba(79,163,227,.35); }
.fork-half { padding: 16px 16px 14px; }
.fork-half.good { background: rgba(76,195,138,.17); }
.fork-half.bad { background: rgba(214,69,69,.17); padding: 14px 16px 16px; }
.fork-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fork-h h3 { font-size: 19px; text-transform: uppercase; }
.good .fork-h h3 { color: var(--sig-1); } .bad .fork-h h3 { color: var(--alarm-1); }
.fork-age { font: 700 12px/1 var(--m); letter-spacing: 1px; color: var(--t-dark-2); white-space: nowrap; }
.fork-age b { font: 400 20px/1 var(--h); color: var(--t-dark); }
.fork ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.fork li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.4; color: var(--t-dark); }
.fork li::before { position: absolute; left: 0; top: 0; font: 700 14px/1.45 var(--m); }
.good li::before { content: "↑"; color: var(--sig-1); } .bad li::before { content: "↓"; color: var(--alarm-1); }
.fork li b { color: var(--sig-1); white-space: nowrap; } .bad li b { color: var(--alarm-1); }
.fork .life { margin: 0; height: 170px; aspect-ratio: auto; max-height: none; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(76,195,138,.17) 0 47.83%, rgba(214,69,69,.17) 47.83% 100%), var(--deep); }
.life-dot { position: absolute; left: calc(24 / 340 * 100%); top: calc(110 / 230 * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--t-dark); box-shadow: 0 0 0 4px rgba(242,238,227,.18); }
.fork .life-lbl.now { top: calc(47.83% + 12px); }
@media (min-width: 720px) {
  .fork-half { padding: 20px 24px 16px; } .fork-half.bad { padding: 16px 24px 20px; }
  .fork-h h3 { font-size: 22px; }
  .fork ul { grid-template-columns: 1fr 1fr; gap: 8px 22px; }
  .fork li { font-size: 15.5px; }
  .fork .life { height: 190px; }
}
@media (min-width: 1024px) {
  #days .fork { grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: center; }
}

/* «Формат и условия»: как это выглядит — кадр сессии и живой экран практики (цвет режима --mc, как в диагностике) */
.show { display: grid; gap: 18px; margin: 4px 0 22px; }
.show figure { margin: 0; }
.show-k { margin-bottom: 8px; font: 700 11px/1.4 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--sig-4); }
.show-frame { border-radius: var(--r-big); overflow: hidden; background: var(--deep); box-shadow: 0 18px 40px -22px rgba(11,30,46,.9), inset 0 0 0 1px rgba(11,30,46,.2); }
.show-frame img { width: 100%; height: auto; aspect-ratio: 1440 / 818; object-fit: cover; }
.show-session figcaption { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--t-paper-3); }
.demo { --mc: #E08A3C; border-radius: var(--r-big); overflow: hidden; background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 18px 40px -26px rgba(11,30,46,.8); }
.d-shot { position: relative; margin: 0; }
.d-shot img { width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; object-position: 30% 40%; }
.d-tag { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; font: 700 10.5px/1 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--mc) 55%, rgba(5,16,26,.6)); backdrop-filter: blur(4px); }
.d-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.d-body { display: grid; gap: 8px; padding: 14px 14px 16px; }
.d-kick { font: 700 10.5px/1.4 var(--m); letter-spacing: 1.2px; text-transform: uppercase; color: var(--sig-4); }
.d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.d-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--mc); color: var(--mc); background: color-mix(in srgb, var(--mc) 12%, var(--card)); }
.d-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-name { font: 400 20px/1.1 var(--h); color: var(--t-paper); filter: blur(5px); user-select: none; }
.d-check { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--card-line); color: var(--t-paper); font: 500 14.5px/1.4 var(--b); transition: background .15s, border-color .15s; }
.d-check:hover { border-color: rgba(18,48,73,.5); }
.d-check .box { flex: 0 0 24px; height: 24px; border: 2px solid rgba(18,48,73,.45); border-radius: 7px; display: grid; place-items: center; color: #fff; font: 700 14px/1 var(--m); }
.d-check .n { font: 700 13px/1.4 var(--m); color: var(--t-paper-3); margin-right: 6px; }
.d-check[aria-pressed="true"] { border-color: var(--mc); box-shadow: inset 0 0 0 1px var(--mc); background: color-mix(in srgb, var(--mc) 13%, var(--card)); }
.d-check[aria-pressed="true"] .box { background: var(--mc); border-color: var(--mc); }
.d-check[aria-pressed="true"] .box::after { content: "✓"; }
.d-more { font: 600 12px/1.4 var(--m); color: var(--t-paper-3); padding-left: 4px; }
.d-plate { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding: 12px 16px; border-radius: 12px; background: var(--depth); color: var(--t-dark); }
.d-pk { display: block; font: 700 10.5px/1.3 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sig-1); }
.d-num { font: 400 30px/1 var(--h); } .d-num small { font-size: 16px; color: var(--t-dark-3); }
.d-bar { display: inline-flex; gap: 4px; }
.d-bar i { width: 9px; height: 22px; border-radius: 3px; border: 1.5px solid rgba(160,196,224,.5); transition: background .25s, border-color .25s; }
.d-bar i.on { background: var(--mc); border-color: var(--mc); }
@media (min-width: 720px) {
  .show-k { font-size: 12px; }
  .d-check { font-size: 15px; }
}
@media (min-width: 1024px) {
  #format .show { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; margin: 8px 0 28px; }
  .show-session figcaption { font-size: 15.5px; }
}
.show-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.show-facts li { padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-line); font-size: 13.5px; line-height: 1.35; color: var(--t-paper-3); }
.show-facts b { display: block; font: 400 22px/1.1 var(--h); color: var(--t-paper); }
@media (max-width: 400px) { .show-facts li { padding: 9px 10px; font-size: 12.5px; } .show-facts b { font-size: 19px; } }

/* шкала теста без градусов: заполнение идёт от жёлтого через оранжевый и красный к бордовому — «накал» */
.dial-val, .verdict.on .dial-val { stroke: url(#dialGrad); }

/* v24–v26 (владелец 12.10): «Так выглядит сессия» — экран в кабине: монитор с полосой REC, уголки-прицел, свечение за экраном, маршрут O-R-B-I-T-S под кадром.
   Видео-фрагмент первой сессии, без файла — кадр. На ПК — текст слева, монитор справа */
#session { background-image: radial-gradient(55% 40% at 50% 62%, rgba(76,195,138,.2), transparent 70%), radial-gradient(80% 35% at 50% 0%, rgba(79,163,227,.14), transparent 70%),
  linear-gradient(rgba(79,163,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,227,.07) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px; }
.sm { position: relative; margin: 22px 0 0; }
.sm-mon { position: relative; padding: 10px 10px 12px; border-radius: 22px; background: linear-gradient(180deg, #0F2A40, #081723); border: 1px solid rgba(127,224,168,.35);
  box-shadow: 0 0 0 6px rgba(7,20,31,.55), 0 34px 90px -30px rgba(76,195,138,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.sm-mon::before { content: ""; position: absolute; inset: -14px; pointer-events: none; --c: var(--sig-1);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 24px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 24px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 24px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 24px,
    linear-gradient(var(--c), var(--c)) 0 100% / 24px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 24px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 24px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 24px; background-repeat: no-repeat; opacity: .8; }
.sm-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 6px 10px; font: 700 10.5px/1 var(--m); letter-spacing: 2px; color: var(--line-2); }
.sm-rec { color: var(--alarm-1); } .sm-rec i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--alarm-2); box-shadow: 0 0 8px var(--alarm-2); animation: blink 1.6s steps(1) infinite; vertical-align: 0; }
.sm-brand { color: var(--sig-1); }
.sm-frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--deep); box-shadow: inset 0 0 0 1px rgba(127,224,168,.2); }
.sm-frame img, .sm-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--deep); }
.sm-frame:has(img:not([hidden]))::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(7,20,31,.55)); }
/* большая кнопка запуска трейлера (владелец 22.10: «чтобы было понятно, что его надо запустить»); прячется во время показа */
.sm-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(76px, 20vw, 124px); aspect-ratio: 1; margin: 0; padding: 0;
  transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--sig-1); background: rgba(7,20,31,.62); color: var(--sig-1);
  box-shadow: 0 0 0 0 rgba(127,224,168,.45), 0 0 28px rgba(127,224,168,.35), inset 0 0 18px rgba(127,224,168,.18);
  animation: smPlayPulse 2.4s ease-out infinite; transition: transform .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; }
.sm-play[hidden] { display: none; }
/* пока кнопка видна, обложка притемнена — кнопку лучше видно (владелец 22.10) */
.sm-frame:has(.sm-play:not([hidden]))::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(7,20,31,.5); }
.sm-play svg { width: 46%; height: 46%; fill: currentColor; filter: drop-shadow(0 0 8px rgba(127,224,168,.6)); }
.sm-play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(7,20,31,.78); }
.sm-play:focus-visible { outline: 3px solid var(--sig-1); outline-offset: 4px; }
@keyframes smPlayPulse { 0% { box-shadow: 0 0 0 0 rgba(127,224,168,.45), 0 0 28px rgba(127,224,168,.35), inset 0 0 18px rgba(127,224,168,.18); }
  70%, 100% { box-shadow: 0 0 0 22px rgba(127,224,168,0), 0 0 28px rgba(127,224,168,.35), inset 0 0 18px rgba(127,224,168,.18); } }
@media (prefers-reduced-motion: reduce) { .sm-play { animation: none; } }
.sm-route { display: flex; align-items: center; gap: 6px; padding: 10px 6px 0; font: 700 12px/1 var(--m); letter-spacing: 1px; }
.sm-route b, .sm-route i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(127,224,168,.25); color: rgba(169,196,214,.55); }
.sm-route b { background: var(--sig-2); border-color: var(--sig-2); color: var(--deep); box-shadow: 0 0 12px rgba(76,195,138,.6); }
.sm-route span { margin-left: auto; color: var(--line-2); letter-spacing: 2px; font-size: 10.5px; }
.sm figcaption { margin-top: 14px; font: 700 11px/1.4 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--sig-1); }
.sm-up { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1.5px dashed #f0a45b; border-radius: 12px; color: var(--t-dark-2); font-size: 14px; }
.sm-btn { font: 700 14px var(--b); padding: 10px 16px; border-radius: 10px; border: 0; background: #f0a45b; color: #1b1206; cursor: pointer; }
.sm-btn:disabled { opacity: .55; cursor: progress; }
#session .show-facts { margin-top: 26px; }
#session .show-facts li { background: rgba(18,48,73,.55); border-color: rgba(127,224,168,.25); color: var(--t-dark-2); backdrop-filter: blur(4px); }
#session .show-facts b { color: var(--sig-1); }
@media (min-width: 900px) {
  #session .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
  #session .wrap > * { grid-column: 1; }
  #session .sm { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  #session .show-facts { grid-template-columns: 1fr; margin-top: 22px; }
  #session .show-facts li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; padding: 12px 16px; }
  #session .show-facts b { font-size: 26px; min-width: 44px; }
}

/* v24: «Формат и условия» — в плашке шага иконка вместо цифры */
.tab .ti { width: 30px; height: 30px; fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.flight > li.g .tab .ti { stroke: var(--t-dark); }
.flight.js > li:not(.on) .tab .ti { stroke: rgba(169,196,214,.4); }
@media (min-width: 720px) { .tab .ti { width: 34px; height: 34px; } }

/* v24: 3650 — ползунок сразу под вводным абзацем, заметной панелью; пока его не двигали, ручка пульсирует и есть подсказка */
#days .slider { margin: 16px 0 18px; padding: 12px 16px 6px; border-radius: 14px; background: rgba(127,224,168,.07); border: 1.5px solid rgba(127,224,168,.45); }
.slider small { display: block; margin-top: 2px; font: 700 10.5px/1.3 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sig-1); }
.slider input { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sig-2), var(--alarm-2)); }
.slider input::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sig-2), var(--alarm-2)); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--t-dark); border: 4px solid var(--sig-2); box-shadow: 0 0 0 6px rgba(76,195,138,.25); }
.slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--t-dark); border: 4px solid var(--sig-2); box-shadow: 0 0 0 6px rgba(76,195,138,.25); }
.slider.hint input::-webkit-slider-thumb { animation: knob 1.4s ease-in-out infinite; }
.slider.hint input::-moz-range-thumb { animation: knob 1.4s ease-in-out infinite; }
@keyframes knob { 50% { box-shadow: 0 0 0 13px rgba(76,195,138,.08); } }
@media (prefers-reduced-motion: reduce) { .slider.hint input::-webkit-slider-thumb, .slider.hint input::-moz-range-thumb { animation: none; } }
@media (min-width: 1024px) { #days .slider { margin: 18px 0 8px; } }

/* v27 (владелец 12.10): первый экран, когда фото над текстом (телефон, планшет, почти квадратные окна) — без пустого места над фото
   и между фото и текстом: фото прижато к верху, текст заходит на него и начинается сразу ниже рук (руки — на 56 % кадра, текст — с 62 %).
   Высота кадра --ph: от ширины (квадрат) до 1.15 ширины — чтобы заполнить экран без крупного плана; считает app.js heroFit(), без JS — квадрат.
   Если и так экран не заполнен — блок короче экрана, следующий блок виден снизу (пустоты нет). */
@media (max-width: 819.98px), (max-aspect-ratio: 13/10) {
  .hero { --pw: min(100vw, 760px); min-height: 0; }
  .hero-photo { flex: none; min-height: 0; height: auto; overflow: visible; container-type: normal; position: relative; z-index: 0; display: block; width: var(--pw); margin: 0 auto;
    -webkit-mask-image: none; mask-image: none; }
  .hero-photo img { width: 100%; height: var(--ph, var(--pw)); max-width: none; margin: 0; object-fit: cover; object-position: 50% 0; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 72%, transparent 92%); mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 72%, transparent 92%); }
  .hero .wrap { position: relative; z-index: 1; margin-top: calc(var(--ph, var(--pw)) * -.38); }
  .hero h1, .hero .lead { text-shadow: 0 2px 14px rgba(5,14,24,.85); }
}
@media (min-width: 761px) and (max-width: 819.98px), (min-width: 761px) and (max-aspect-ratio: 13/10) {
  .hero-photo img { -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 72%, transparent 92%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 72%, transparent 92%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
}

/* правки владельца 21.10 ------------------------------------------------------------------- */
/* досье: свои портреты 4:5 (21.10) вместо выреза из общего кадра */
.member.seen.pavel .ph { background: var(--deep) url(assets/pavel.webp) center top / cover no-repeat; }
.member.seen.alla .ph { background: var(--deep) url(assets/alla.webp) center top / cover no-repeat; }
/* тест: высота карточки итога постоянная (min-height ставит app.js по самому длинному варианту), заголовок не прыгает — сверху, кнопка — внизу */
.verdict { grid-template-rows: minmax(0, 1fr) auto; }
.verdict .v-body { align-self: start; }
@media (max-width: 719.98px) {
  /* «Как ORBITS приводит к изменениям»: значок слева сверху рядом с заголовком, текст во всю ширину; без зелёной строки и подписей значков */
  #how .steps li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 14px; }
  #how .s-txt { display: contents; }
  #how .gauge { grid-column: 1; grid-row: 1; }
  #how .gauge svg { width: 48px; height: 48px; }
  #how .gauge small, #how .st { display: none; }
  #how .steps h3 { grid-column: 2; grid-row: 1; }
  #how .steps p { grid-column: 1 / -1; }
  /* «Формат и условия»: без зелёной строки над заголовком, подписей значков и ссылок */
  .fl-h span, .tab small, .flight a { display: none; }
  .flight > li { grid-template-columns: 48px minmax(0, 1fr); }
  .tab { height: 48px; } .tab .ti { width: 26px; height: 26px; }
  /* досье: текст обтекает фото — под фото тоже текст */
  .duo .member { display: flow-root; }
  .duo .member .ph { float: left; width: 104px; margin: 0 14px 8px 0; }
  .duo .member.alla .ph { float: right; margin: 0 0 8px 14px; }
  .duo .member .m-head { display: block; align-content: normal; } /* align-content у блока делает его отдельным контекстом — тогда он не обтекает фото */
  .duo .member .m-list { clear: both; }
  .duo .member .more { display: block; }
}

/* аудит скорости 22.10: анимации панели проверки не крутятся, пока панель вне экрана (.live ставит app.js) */
.panel.js:not(.live) * { animation-play-state: paused !important; }
/* 22.10 (владелец): шкала итога теста — в верхнем левом углу, заголовок и подробный текст обтекают её */
.verdict { display: flow-root; }
.verdict .dial { float: left; margin: 2px 12px 6px 0; }
@media (min-width: 720px) { .verdict .dial { margin: 4px 22px 10px 0; } .verdict .v-body { display: flow-root; } } /* ПК: всё содержимое итога одной колонкой справа от шкалы — описание не разрывается (владелец 22.10) */
.verdict .v-title { display: flow-root; } /* заголовок — ровной колонкой справа от шкалы; обтекает только то, что ниже */

/* ==========================================================================================================
   v2 (26.10): основной лендинг, второй выпуск — русская страница (body.v2). v3 (26.10, правки владельца): прежние h1 и ротор, тест 2×4,
   снежный ком и инфографика сессий прежней версии, пять шагов «значок + заголовок», история авторов простым текстом, условия списком.
   Воздух — по аудиту (copy-order/air-audit.md, разд. 4): шкала отступов, секции 96 px на ПК и 64 px на телефоне, поля карточек 24 / 20 px,
   межстрочный интервал 1.6, строка текста до 60ch, мелкий текст на телефоне не меньше 14 px.
   В блоке три вида текста: большой (h1, h2), маленький (.lead, .txt, тексты карточек), акцент (.acc — зелёная строка).
   Украинская страница (uk/index.html) — прежняя разметка без .v2: правила выше остаются для неё
   ========================================================================================================== */
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --text: 60ch; --lh: 1.6; }
.v2 { --sec: var(--space-16); --pad: var(--space-5); --gap: var(--space-4); --fs: 16px; --fs-acc: 19px; line-height: var(--lh); --dock: 0px; }
.v2 .dock { display: none !important; } /* закреплённая кнопка «Начать бесплатно» убрана (владелец 27.10): кнопки стоят в самих блоках */
@media (min-width: 720px) { .v2 { --sec: 80px; --fs: 17px; --fs-acc: 20px; } }
@media (min-width: 1024px) { .v2 { --sec: var(--space-24); --pad: var(--space-6); --gap: var(--space-6); --fs: 18px; --fs-acc: 22px; } }

/* три вида текста */
.v2 .lead, .v2 .txt { font-size: var(--fs); line-height: var(--lh); color: var(--t-dark-2); max-width: min(100%, var(--text)); }
.v2 .lead { margin-top: var(--space-4); }
.v2 .paper .lead, .v2 .paper .txt { color: var(--t-paper-3); }
.v2 .acc { font: 600 var(--fs-acc)/1.4 var(--b); color: var(--sig-1); max-width: min(100%, var(--text)); }
.v2 .paper .acc { color: var(--sig-4); }
.v2 .micro { font: 400 14px/1.5 var(--b); letter-spacing: 0; }
@media (min-width: 1024px) { .v2 .lead { margin-top: var(--space-5); } .v2 .micro { font-size: 15px; } }

/* 1. первый экран: h1, сменяющиеся строки кеглем строки-акцента (на узких экранах — по ширине, чтобы строка не переносилась),
   текст, бонус, кнопка; в воронке О под ней — строка о списании.
   Бонус (владелец 27.10: жёлтая строка выглядела дёшево) — стеклянная карточка: подарок в светящейся плитке, подпись терминальным шрифтом,
   название сессии; по карточке время от времени проходит блик */
.v2 .hero { padding-bottom: 40px; }
.v2 .hero-rotor { margin: var(--space-3) 0 0; font: 600 min(var(--fs-acc), 4.9vw)/1.4 var(--b); text-transform: none; color: var(--sig-1); }
.v2 .hero .lead { margin-top: var(--space-4); font-size: var(--fs); }
.v2 .hero-bonus { position: relative; display: flex; align-items: center; gap: 14px; margin-top: var(--space-5); padding: 12px 20px 12px 12px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(120deg, rgba(127,224,168,.17), rgba(18,48,73,.74) 58%); border: 1px solid rgba(127,224,168,.42);
  box-shadow: 0 18px 44px -28px rgba(127,224,168,.8), inset 0 1px 0 rgba(255,255,255,.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v2 .hero-bonus::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%); animation: hb-shine 5s ease-in-out 1.5s infinite; }
@keyframes hb-shine { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.v2 .hb-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: var(--sig-1);
  background: rgba(127,224,168,.13); border: 1px solid rgba(127,224,168,.55); box-shadow: 0 0 24px -6px rgba(127,224,168,.7); }
.v2 .hb-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v2 .hb-txt { display: grid; gap: 4px; }
.v2 .hb-k { font: 700 11px/1.3 var(--m); letter-spacing: 1.8px; text-transform: uppercase; color: var(--sig-1); }
.v2 .hb-t { font: 600 17px/1.3 var(--b); color: var(--t-dark); }
@media (min-width: 720px) { .v2 .hero-bonus { display: inline-flex; } .v2 .hb-t { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .v2 .hero-bonus::after { display: none; } }
.v2 .hero .cta.wide { margin-top: var(--space-6); }
.v2 .hero-offer { margin-top: var(--space-3); }
@media (max-width: 819.98px), (max-aspect-ratio: 13/10) {
  .v2 .hero .wrap { margin-top: calc(var(--ph, var(--pw)) * -.38 + 16px); }
  .v2 .hero-rotor { text-shadow: 0 2px 14px rgba(5,14,24,.85); }
}
@media (min-width: 720px) and (max-aspect-ratio: 13/10), (min-width: 720px) and (max-width: 819.98px) { .v2 .hero-bonus { display: flex; width: fit-content; margin-inline: auto; text-align: left; } }
@media (min-width: 820px) and (min-aspect-ratio: 13/10) {
  .v2 .hero { padding: calc(var(--hud) + 64px) 0 64px; }
  .v2 .hero .lead { margin-top: var(--space-5); }
  .v2 .hero .cta.wide { margin-top: var(--space-8); }
}

/* 2. тест: пункты в 2 колонки на любой ширине (владелец 27.10); до нажатия — подсказка маленьким, после — заголовок итога акцентом */
.v2 .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
/* кружок отметки — в начале первой строки, следующие строки идут под ним: в узкой колонке телефона тексту достаётся вся ширина пункта */
.v2 .chips button { display: block; min-height: 76px; margin: 0; border-radius: var(--r-card); padding: 14px var(--space-3) 14px 14px; font: 500 15px/1.4 var(--b); }
.v2 .chips button::before { position: static; display: inline-block; vertical-align: -2px; margin: 0 9px 0 0; }
.v2 .verdict { margin-top: var(--gap); padding: var(--pad); }
.v2 .v-title { margin-top: 0; font: 600 var(--fs-acc)/1.4 var(--b); color: var(--t-paper); }
.v2 .verdict.on .v-title { color: var(--alarm-1); }
.v2 .v-title.hint, .v2 .v-text, .v2 .v-text.theme { font: 400 var(--fs)/var(--lh) var(--b); color: var(--t-paper-3); max-width: min(100%, var(--text)); }
.v2 .v-text { margin-top: var(--space-2); }
.v2 .verdict.on .v-text.theme { color: var(--t-dark-2); }
@media (min-width: 720px) {
  .v2 .chips { gap: var(--space-4); }
  .v2 .chips button { min-height: 72px; padding: var(--space-4) var(--space-5); font-size: 16px; }
  .v2 .chips button::before { margin-right: 11px; }
}
@media (min-width: 1024px) { .v2 .chips { margin-top: 40px; } .v2 .chips button { min-height: 72px; font-size: 17px; } }

/* 3. снежный ком: заголовок и два абзаца → склон прежней версии (у 4 точек проблемы простым текстом, ком разбивается) → хорошие новости (владелец 27.10: в этом же блоке).
   На ПК текст и новости слева, склон справа. Подписи без плашек (владелец 27.10): рамка остаётся невидимой — по ней app.js разводит соседние подписи */
.v2 .why-p { margin-top: var(--space-4); }
.v2 .pill, .v2 .on > .lbl .pill { fill: none; stroke: none; }
.v2 .slope { margin: var(--space-8) -6px 0; }
.v2 .why-news { margin-top: var(--space-8); }
.v2 .why-news .acc { margin-top: var(--space-2); }
.v2 .why-news .acc + .txt { margin-top: var(--space-2); }
/* 3a. «> СНЕЖНЫЙ КОМ МОЖНО ОСТАНОВИТЬ» — мини-полоса командной строки прежней версии (.term-strip, владелец 27.10): тёмная полоса со строками развёртки,
   моноширинная строка с курсором и контурная кнопка; от 720 px — строка слева, кнопка справа */
.v2 .term { font-size: 14px; line-height: 1.6; letter-spacing: 1.5px; }
@media (min-width: 720px) { .v2 .term { font-size: 15px; letter-spacing: 2px; } }
@media (min-width: 1024px) {
  .v2 #why .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; column-gap: var(--space-12); align-items: center; }
  .v2 #why .wrap > * { grid-column: auto; grid-row: auto; }
  .v2 #why .wrap > .why-text { grid-column: 1; grid-row: 1; align-self: end; }
  .v2 #why .wrap > .why-news { grid-column: 1; grid-row: 2; align-self: start; }
  .v2 #why .wrap > .why-art { grid-column: 2; grid-row: 1 / span 2; }
  .v2 #why .slope { margin: 0; }
}

/* 4. как ORBITS приводит к изменениям (владелец 28.10): шесть шагов с постоянно видимыми действием и результатом.
   Телефон — одна колонка с компактной шапкой, от 600px — две, от 1024px — три. Подсетка выравнивает строки карточек и разделители результатов.
   При входе в кадр по очереди загораются значок, рамка и полоса (.on, app.js how); движения — только в кадре (.live).
   Без .js (нет JS, ?edit, prefers-reduced-motion) всё горит сразу и неподвижно */
.v2 .how-list.st-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.v2 .st-list li { --sc: var(--sig-1); display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-content: start;
  padding: 16px 16px 18px; border-radius: 16px; background: linear-gradient(160deg, #E9F6EE, #D6F0DF); border: 1.5px solid var(--sc);
  box-shadow: inset 0 4px 0 var(--sc); transition: border-color .5s, box-shadow .5s; }
.v2 .st-list .h-rel { --sc: #F29A96; } .v2 .st-list .h-scen { --sc: #B79AE8; } .v2 .st-list .h-fin { --sc: #F5C542; } .v2 .st-list .h-en { --sc: #F5A96E; } .v2 .st-list .h-str { --sc: #7ADAE2; }
.v2 #how .st-list .gauge { --c: var(--sc); grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; place-items: center; gap: 0; border-radius: 12px; background: #0F2735; }
.v2 #how .st-list .gauge svg { width: 36px; height: 36px; }
.v2 .st-list h3 { grid-column: 2; margin: 0; align-self: end; font: 400 15px/1.2 var(--h); color: var(--t-paper); text-wrap: pretty; }
.v2 .st-k { grid-column: 2; margin: 0; font: 700 10px/1.2 var(--m); letter-spacing: 1.4px; text-transform: uppercase; color: #1B6E46; }
.v2 .st-t { grid-column: 1 / -1; margin: 6px 0 0; font: 500 15px/1.4 var(--b); color: #3E4A52; text-wrap: pretty; }
.v2 .st-w { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid rgba(16,26,33,.12); font: 700 15px/1.38 var(--b); color: var(--t-paper); text-wrap: pretty; }
.v2 .how-list.js li:not(.on) { border-color: rgba(16,26,33,.14); box-shadow: inset 0 4px 0 rgba(16,26,33,.14); }
/* существующие значки и новая карта уровней: контур лесенки рисуется, точка перепрыгивает со средней ступени на верхнюю */
.v2 #how .st-list .fl { stroke: var(--c); fill: rgba(245, 169, 110, .18); } .v2 #how .st-list .fd { fill: var(--c); }
/* значок отношений: две орбиты сходятся, в пересечении — сердце */
.v2 #how .gauge .ra, .v2 #how .gauge .rb { stroke-width: 3; transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); }
.v2 #how .gauge .hb { fill: var(--c); stroke: none; transform-box: fill-box; transform-origin: center; transition: transform .5s ease .7s, opacity .3s ease .7s; }
.v2 .how-list.js li:not(.on) .ra { transform: translateX(-7px); }
.v2 .how-list.js li:not(.on) .rb { transform: translateX(7px); }
.v2 .how-list.js li:not(.on) .hb { opacity: 0; transform: scale(.3); }
.v2 .how-list li.on .hb { animation: beat 1.6s ease-in-out 1.4s infinite; }
@keyframes beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } }
.v2 #how .gauge svg { stroke-width: 3; }
.v2 #how .gauge :is(.brk, .fig) { stroke-width: 3.6; }
.v2 #how .gauge .scan { stroke-width: 3; }
.v2 #how .gauge .gr path, .v2 #how .gauge .gr circle { stroke-width: 2.8; }
.v2 #how .gauge :is(.rt, .lp, .ah, .lv) { stroke-width: 3.8; }
.v2 #how .gauge :is(.rt-g, .lp-g) { stroke-width: 2.6; }
.v2 #how .gauge .cp { stroke-width: 2.6; }
.v2 #how .gauge .lv-g { stroke: #8A949B; stroke-width: 2; opacity: .45; }
.v2 #how .gauge .lv { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s ease-in-out; }
.v2 #how .gauge .lv-d { fill: var(--c); stroke: none; transform: translate(22px, -18px); }
.v2 #how .how-list.js li:not(.on) .gauge { --c: rgba(160,196,224,.55); }
.v2 #how .how-list.js li:not(.on) :is(.fig, .rt, .lp, .lv) { stroke-dashoffset: 1; }
.v2 .how-list.js li:not(.on) :is(.ah, .mv, .flag, .fd, .lv-d) { opacity: 0; }
.v2 #how .how-list.js li:not(.on) .fl { stroke: var(--c); fill: none; }
.v2 .how-list li.on .scan { animation: scan 2.6s ease-in-out infinite alternate; }
.v2 .how-list li.on .fl { animation: flick 1.4s ease-in-out infinite alternate; }
.v2 .how-list li.on .fd { animation: feed 1.5s ease-in var(--d) infinite; }
.v2 .how-list li.on .gr.a { animation: unstick 6s cubic-bezier(.5,0,.5,1) infinite; }
.v2 .how-list li.on .gr.b { animation: unstick-b 6s cubic-bezier(.5,0,.5,1) infinite; }
.v2 .how-list li.on .cp { animation: cp .4s ease var(--d, 0s) both; }
.v2 .how-list li.on .flag { animation: wave 1.6s ease-in-out 1.2s infinite alternate; }
.v2 .how-list li.on .lv-d { animation: level-hop 2.4s ease-in-out infinite; }
@keyframes level-hop { 0%, 15%, 100% { transform: translate(0, 0); } 35% { transform: translate(11px, -30px); } 50%, 65% { transform: translate(22px, -18px); } 85% { transform: translate(11px, -30px); } }
.v2 .how-list li .ah { transition: opacity .4s ease 1.2s; }
.v2 .how-list.js:not(.live) * { animation-play-state: paused !important; }
.v2 .how-list:not(.js) .scan { opacity: .9; transform: translateY(24px); }
.v2 .how-list:not(.js) .mv { display: none; }
@media (min-width: 600px) {
  .v2 .how-list.st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .st-list li { grid-column: auto; grid-row: span 5; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 8px; padding: 18px 18px 20px; }
  .v2 #how .st-list .gauge { grid-column: 1; grid-row: auto; }
  .v2 .st-list h3, .v2 .st-k { grid-column: 1; align-self: start; }
  .v2 .st-t { margin-top: 0; }
  .v2 .st-w { height: 100%; margin-top: auto; }
}
@media (min-width: 720px) {
  .v2 .st-list h3 { font-size: 18px; }
  .v2 .st-k { font-size: 11px; }
}
@media (min-width: 1024px) {
  .v2 #how .wrap { display: block; }
  .v2 .how-list.st-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2 .st-list li { padding: 24px 24px 26px; }
  .v2 #how .st-list .gauge { width: 56px; height: 56px; border-radius: 14px; } .v2 #how .st-list .gauge svg { width: 46px; height: 46px; }
  .v2 .st-list h3 { font-size: 21px; }
  .v2 .st-t, .v2 .st-w { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .how-list *, .v2 .st-list li { animation: none !important; transition: none !important; }
  .v2 #how .gauge .lv-d { transform: translate(22px, -18px); }
}

/* 5. программа (v6: сессии — внутри букв расшифровки ORBITS, см. «v5 · воронка» ниже). Вводная и трейлер; у сессии — инфографика прежнего маршрута без текста,
   «буква · название», текст и строка-акцент практики. На ПК — график и текст рядом, стороны чередуются */
.v2 #program { padding-bottom: var(--sec); }
.v2 .sm { margin: var(--space-6) 0 0; }
.v2 .sm-mon { padding: 0; border-radius: var(--r-big); background: var(--deep); border: 1px solid rgba(127,224,168,.35); box-shadow: 0 30px 80px -40px rgba(76,195,138,.55); }
.v2 .sm-mon::before { content: none; }
.v2 .sm-frame { border-radius: calc(var(--r-big) - 1px); }
.v2 .sm figcaption { margin-top: var(--space-3); font: 400 var(--fs)/var(--lh) var(--b); letter-spacing: 0; text-transform: none; color: var(--t-dark-2); }
.v2 .sviz { display: block; width: 100%; height: auto; overflow: visible; }
/* инфографика: появление (.fade, .draw) и бесконечные движения (.spin, .flow, .pulse); без JS и при reduce — конечный вид без движения */
.sviz .draw { stroke-dasharray: var(--len, 600); }
.sviz .spin { transform-box: view-box; animation: spin 16s linear infinite; }
.sviz .flow { stroke-dasharray: 3 6; animation: flow 1s linear infinite; }
.sviz .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.sviz:not(.live) * { animation-play-state: paused; }
.sviz.wait .fade { opacity: 0; }
.sviz.wait .draw { stroke-dashoffset: var(--len, 600); }
.sviz.play .fade { animation: sv-fade .5s ease both; }
.sviz.play .draw { animation: sv-draw 1.1s ease both; }
@keyframes sv-fade { from { opacity: 0; } }
@keyframes sv-draw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sviz * { animation: none !important; } }
@media (min-width: 1024px) {
  /* 04.11 (владелец): заголовок «Как будут выглядеть уроки» по центру страницы, трейлер под ним по центру */
  .v2 #program .wrap > .sm { width: min(100%, 860px); margin: var(--space-8) auto 0; }
}

/* В1 (29.10): карточки с окном и широкая линия прогресса слева, у букв (владелец 29.10). */
.v2 #program .program-get { margin: 0; color: var(--t-dark); font: 700 clamp(24px, 6.6vw, 30px)/1.15 var(--h); }
.v2 #program .word { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 28px 0; }
.v2 #program .word a { display: grid; place-items: center; height: 64px; border: 1px solid #29465b; border-radius: 12px; color: var(--c); background: var(--deep); font: 400 38px/1 var(--h); text-decoration: none; }
.v2 #program .word a:hover { border-color: var(--c); background: var(--depth); }
.v2 #program .session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.v2 #program .session-card { display: grid; grid-template-columns: 36px minmax(0,1fr) 88px; grid-template-areas: "badge title visual" "copy copy copy"; gap: 18px 10px; align-items: center; padding: 18px 16px 22px; border: 1px solid #29465b; border-radius: 20px; background: linear-gradient(145deg,var(--depth),var(--deep) 85%); scroll-margin-top: 20px; position: relative; }
.v2 #program .session-head { display: contents; }
.v2 #program .letter-tile { grid-area: badge; display: grid; place-items: center; width: 36px; height: 48px; border-radius: 9px; color: var(--c); background: var(--deep); border: 1px solid color-mix(in srgb,var(--c) 45%,transparent); font: 400 30px/1 var(--h); }
.v2 #program .session-title { grid-area: title; min-width: 0; }
.v2 #program .session-title h3 { margin: 0; color: var(--t-dark); font: 400 20px/1.2 var(--h); text-wrap: pretty; }
.v2 #program .session-meta { margin-top: 8px; color: var(--t-dark-3); font: 400 11px/1.5 var(--m); }
.v2 #program .session-meta span { white-space: nowrap; }
.v2 #program .visual { grid-area: visual; width: 88px; height: 96px; display: grid; grid-template: minmax(0,1fr) / minmax(0,1fr); place-items: center; padding: 7px; border: 1px solid color-mix(in srgb,var(--c) 45%,transparent); border-radius: 14px; background: var(--deep); overflow: hidden; }
.v2 #program .visual .sviz { width: 100%; height: 100%; max-height: 100%; }
.v2 #program .session-card .ck { grid-area: copy; min-width: 0; position: static; padding-top: 18px; border-top: 1px solid #29465b; }
.v2 #program .session-card .ck-t { max-width: none; color: var(--c); text-shadow: none; font: 400 19px/1.3 var(--h); text-wrap: pretty; }
.v2 #program .session-card .ck-l { margin-top: 16px; gap: 12px; }
.v2 #program .session-card .ck-l li { font: 400 17px/1.45 var(--b); gap: 10px; text-shadow: none; }
.v2 #program .session-card .ck-i { width: 20px; height: 20px; stroke: var(--c); }
.v2 #program .program-sessions { min-width: 0; margin-top: var(--space-12); grid-column: 1 / -1; grid-row: 5; }
.v2 #program .session-route { position: relative; padding-left: 28px; }
.v2 #program .session-rail { position: absolute; top: 44px; bottom: 44px; left: 6px; width: 7px; border-radius: 12px; background: #29465b66; pointer-events: none; }
.v2 #program .session-rail span { display: block; height: 100%; border-radius: inherit; background: var(--session-gradient, linear-gradient(var(--sig-1),var(--alarm-1),var(--line-2),var(--sig-1),#C89BF0,var(--sig-2))); clip-path: inset(0 0 calc(100% - var(--session-fill, 100%)) 0 round 12px); filter: drop-shadow(0 0 5px #7fe0a866); }
.v2 #program .session-node { position: absolute; top: 34px; left: -29px; width: 20px; height: 20px; border: 2px solid var(--c); border-radius: 50%; background: var(--c); box-shadow: 0 0 14px color-mix(in srgb,var(--c) 40%,transparent); pointer-events: none; }
.v2 #program .session-route.tracking .session-card:not(.passed) .session-node { background: var(--deep); box-shadow: none; }
@media (min-width: 820px) {
  .v2 #program .program-get { font-size: 34px; }
  .v2 #program .word { max-width: 590px; margin-block: 32px; }
  .v2 #program .word a { height: 78px; font-size: 46px; }
  .v2 #program .session-list { gap: 28px; }
  .v2 #program .session-route { padding-left: 46px; }
  .v2 #program .session-card { grid-template-columns: 240px minmax(0,1fr); grid-template-areas: "heading heading" "visual copy"; gap: 24px 32px; padding: 28px 32px 32px; border-radius: 24px; }
  .v2 #program .session-head { grid-area: heading; display: flex; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid #29465b; }
  .v2 #program .letter-tile { width: 56px; height: 64px; font-size: 44px; border-radius: 12px; }
  .v2 #program .session-title h3 { font-size: 30px; }
  .v2 #program .session-meta { margin-top: 7px; font-size: 12px; }
  .v2 #program .visual { width: 240px; height: 240px; padding: 22px; border-radius: 20px; }
  .v2 #program .session-card .ck { align-self: center; border-top: 0; padding-top: 0; }
  .v2 #program .session-card .ck-t { font-size: 25px; }
  .v2 #program .session-card .ck-l li { font-size: 19px; }
  .v2 #program .session-rail { width: 12px; left: 9px; top: 60px; bottom: 60px; }
  .v2 #program .session-node { width: 30px; height: 30px; top: 45px; left: -47px; }
}

/* 6. ведущие: схема орбит (только имена) и история простым текстом (списки — строками с жирным началом, без плашек и рамок)
   → два досье → цитата Аллы. На ПК схема слева и держится на экране, история справа, досье ниже рядом */
.v2 .crew { margin-top: var(--space-8); display: grid; gap: var(--space-8) var(--gap); }
.v2 .crew .duo-svg { width: 100%; max-width: 420px; margin: 0 auto; }
.v2 .crew .d-name { font-size: 14px; }
.v2 .hist { display: grid; gap: var(--space-4); }
.v2 .hist h3 { font: 400 21px/1.25 var(--h); color: var(--t-dark); }
.v2 .hist p, .v2 .hist li { font-size: var(--fs); line-height: var(--lh); color: var(--t-dark-2); max-width: min(100%, var(--text)); }
.v2 .hist b { font-weight: 600; color: var(--t-dark); }
.v2 .hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.v2 .hist .hist-forces { display: block; }
.v2 .hist-forces li { display: inline; font-weight: 600; color: var(--t-dark); }
.v2 .hist-forces li + li::before { content: " · "; color: var(--t-dark-3); }
.v2 .hist .hist-key { font: 600 var(--fs-acc)/1.4 var(--b); color: var(--sig-1); }
.v2 .hist .hist-strong { color: var(--t-dark); }
/* v27 (29.10): текст владельца — карточки Аллы и Павла цветом их орбит на схеме, по фразе в абзаце */
.v2 .hist-who { --who: var(--sig-1); display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--who);
  border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--who) 8%, transparent); }
.v2 .hist-who.a { --who: var(--line-2); }
.v2 .hist .hist-name { font: 700 13px/1.2 var(--m); letter-spacing: 2px; text-transform: uppercase; color: var(--who); }
.v2 .hist-intro, .v2 .hist-duo { display: grid; gap: var(--space-4); } /* на телефоне — как прежде: всё одной колонкой с тем же шагом */
.v2 .member { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-content: start; padding: var(--pad); }
.v2 .member .ph { grid-column: 1; grid-row: 1; width: auto; float: none; margin: 0; }
.v2 .member .m-head { grid-column: 2; grid-row: 1; align-self: center; display: block; text-align: left; }
.v2 .member .m-list { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: var(--space-4) 0 0; gap: var(--space-4); }
.v2 .member .socials { justify-content: flex-start; margin-top: var(--space-3); }
.v2 .m-intro { font-size: var(--fs); line-height: var(--lh); color: var(--t-dark); }
.v2 .m-intro .m-name { display: block; font: 400 22px/1.2 var(--h); color: var(--t-dark); }
.v2 .m-intro .m-role { display: block; margin-top: 6px; color: var(--t-dark-2); }
.v2 .member.pavel .m-name { color: var(--sig-1); } .v2 .member.alla .m-name { color: var(--line-2); }
.v2 .m-list li { padding-left: 20px; font-size: var(--fs); line-height: var(--lh); color: var(--t-dark-2); }
.v2 .m-list li::before { top: .45em; }
.v2 #drQuote { margin-top: var(--space-8); max-width: min(100%, var(--text)); padding-left: var(--space-5); font: 600 var(--fs-acc)/1.45 var(--b); color: var(--t-dark); border-left: 3px solid var(--sig-2); }
.v2 #drQuote .who { margin-top: var(--space-2); font: 600 var(--fs)/1.4 var(--b); letter-spacing: 0; text-transform: none; color: var(--sig-1); }
@media (min-width: 720px) { .v2 .member { grid-template-columns: 150px minmax(0, 1fr); } .v2 .hist h3 { font-size: 24px; } }
@media (min-width: 1024px) {
  .v2 .crew { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-12); align-items: start; }
  .v2 .crew .duo-col { grid-column: 1; grid-row: 1; align-self: stretch; }
  .v2 .crew .duo-svg { max-width: 500px; position: sticky; top: calc(var(--hud) + 48px); }
  .v2 .hist { grid-column: 2; grid-row: 1; gap: var(--space-5); }
  .v2 #crew .member.pavel { grid-column: 1; grid-row: 2; align-self: stretch; }
  .v2 #crew .member.alla { grid-column: 2; grid-row: 2; align-self: stretch; }
  .v2 .hist h3 { font-size: 28px; }
  /* v27 (владелец 29.10: «на большом экране плохо смотрится»): схема и вступление рядом, карточки Аллы и Павла — рядом
     во всю ширину, итоговая строка по центру, досье ниже; схема больше не липкая — пустой колонки под ней нет */
  .v2 .hist { display: contents; }
  .v2 .crew .duo-col { align-self: center; }
  .v2 .crew .duo-svg { position: static; }
  .v2 .hist-intro { grid-column: 2; grid-row: 1; align-self: center; gap: var(--space-5); }
  .v2 .hist-duo { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .v2 .hist-duo .hist-who { padding: var(--space-6) var(--space-8); gap: var(--space-3); align-content: start; }
  .v2 .hist .hist-key { grid-column: 1 / -1; grid-row: 3; justify-self: center; max-width: 36em; text-align: center; font-size: 24px; }
  .v2 #crew .member.pavel, .v2 #crew .member.alla { grid-row: 4; }
}

/* 7. подарок (владелец 27.10: коробка «выглядит дёшево», блок — «дорого, богато»): карточка-сертификат на самом тёмном фоне с мягким золотым светом —
   двойная тонкая золотая рамка, портреты Павла и Аллы в золотых кольцах, печать «1:1», «подарок» золотом, золотой разделитель с ромбом.
   Портреты грузятся заранее (.cs-seal.seen, app.js lazyPortraits); появление портретов и блик по карточке — один раз (#consult.anim → .seen, app.js gift) */
.v2 #consult { --gold: #E2C485; --gold-hi: #F3E2B8; --gold-grad: linear-gradient(135deg, #F6E7C1 0%, #DDBB74 40%, #F3DFAA 58%, #B08A45 100%);
  background: radial-gradient(80% 45% at 50% 0%, rgba(226,196,133,.09), transparent 70%), var(--deep); }
.v2 .consult { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--space-6); padding: 34px 24px 32px; border-radius: 24px;
  background: radial-gradient(90% 55% at 0% 0%, rgba(226,196,133,.13), transparent 62%), radial-gradient(70% 60% at 100% 100%, rgba(127,224,168,.07), transparent 62%),
    linear-gradient(165deg, #11293C 0%, #0A1B2A 55%, #081622 100%);
  border: 1px solid rgba(226,196,133,.42); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(246,231,193,.14); }
.v2 .consult::before { content: ""; position: absolute; inset: 7px; z-index: -1; border: 1px solid rgba(226,196,133,.18); border-radius: 18px; pointer-events: none; }
.v2 .consult::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 38%, rgba(246,231,193,.13) 50%, transparent 62%); }
.v2 #consult.seen .consult::after { animation: cs-sheen 2.4s ease-in-out .7s both; }
@keyframes cs-sheen { to { transform: translateX(110%); } }
.v2 .cs-seal { --d: 96px; --o: 30px; position: relative; width: calc(var(--d) * 2 - var(--o)); height: calc(var(--d) + 10px); }
.v2 .cs-ph { position: absolute; top: 0; width: var(--d); height: var(--d); border-radius: 50%; background: #0A1B2A no-repeat; background-size: 122% auto;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px #0A1B2A, 0 0 0 7px rgba(226,196,133,.32), 0 16px 32px -12px rgba(0,0,0,.9); }
.v2 .cs-ph.pavel { left: 0; background-position: 54% 8%; }
.v2 .cs-ph.alla { left: calc(var(--d) - var(--o)); background-position: 50% 8%; }
.v2 .cs-seal.seen .cs-ph.pavel { background-image: url(assets/pavel.webp); }
.v2 .cs-seal.seen .cs-ph.alla { background-image: url(assets/alla.webp); }
.v2 .cs-mark { position: absolute; left: calc(var(--d) - var(--o) / 2 - 23px); bottom: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold-grad); color: #2A1E08; font: 400 15px/1 var(--h); letter-spacing: .5px;
  box-shadow: 0 0 0 3px #0A1B2A, 0 0 0 4px rgba(226,196,133,.5), 0 8px 18px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.55); }
.v2 #consult h2 .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2 .cs-rule { display: block; position: relative; width: min(100%, 260px); height: 8px; margin-top: var(--space-5);
  background: linear-gradient(90deg, transparent 0 16px, var(--gold) 16px, rgba(226,196,133,0) 100%) 0 50% / 100% 1px no-repeat; }
.v2 .cs-rule::before { content: ""; position: absolute; left: 1px; top: 1px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.v2 #consult .acc { margin-top: var(--space-5); color: var(--gold-hi); }
.v2 .consult-txt .txt { margin-top: var(--space-4); }
.v2 #consult.anim .cs-ph, .v2 #consult.anim .cs-mark { transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s ease; }
.v2 #consult.anim .cs-mark { transition-delay: .55s; }
.v2 #consult.anim:not(.seen) .cs-ph.pavel { opacity: 0; transform: translateX(-16px); }
.v2 #consult.anim:not(.seen) .cs-ph.alla { opacity: 0; transform: translateX(16px); }
.v2 #consult.anim:not(.seen) .cs-mark { opacity: 0; transform: scale(.5); }
@media (min-width: 720px) {
  .v2 .consult { padding: 48px 44px 44px; border-radius: 28px; }
  .v2 .consult::before { inset: 9px; border-radius: 20px; }
  .v2 .cs-seal { --d: 118px; --o: 36px; }
}
@media (min-width: 1024px) {
  .v2 #consult .wrap { display: block; }
  .v2 .consult { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: center; padding: 64px 72px; }
  .v2 .consult::before { inset: 11px; border-radius: 19px; }
  .v2 .cs-seal { --d: 164px; --o: 52px; grid-column: 2; grid-row: 1; justify-self: center; }
  .v2 .cs-mark { width: 64px; height: 64px; left: calc(var(--d) - var(--o) / 2 - 32px); font-size: 21px; }
  .v2 .consult-txt { grid-column: 1; grid-row: 1; }
}

/* 8. формат и условия: шесть пунктов — значок, заголовок, текст; без линии пути и подписей. Телефон — столбиком, значок по центру пункта
   по вертикали (владелец 27.10); ПК — три в ряд, значок над заголовком */
.v2 .terms { list-style: none; margin: var(--space-6) 0 var(--space-8); padding: 0; display: grid; }
.v2 .terms li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: center; align-content: start; padding: var(--space-5) 0; border-top: 1px solid var(--card-line); }
.v2 .terms li:last-child { border-bottom: 1px solid var(--card-line); }
.v2 .terms svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--ship); fill: none; stroke: var(--sig-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2 .terms h3 { font: 600 var(--fs-acc)/1.35 var(--b); color: var(--t-paper); }
.v2 .terms .txt { margin-top: var(--space-2); color: var(--t-paper-2); }
.v2 .terms h3[hidden] + .txt { margin-top: 0; }
@media (min-width: 720px) { .v2 #format .wrap > .cta.wide { display: inline-flex; width: auto; max-width: none; margin: 0; padding: 16px 40px; } .v2 #format .micro { text-align: left; } }
@media (min-width: 1024px) {
  .v2 #format .wrap { display: block; }
  .v2 .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-12); margin: 40px 0 var(--space-12); }
  .v2 .terms li { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; padding: var(--space-6) 0 var(--space-8); }
  .v2 .terms li:last-child { border-bottom: 0; }
  .v2 .terms svg { width: 52px; height: 52px; padding: 12px; }
  .v2 .terms h3, .v2 .terms h3[hidden] + .txt { padding-top: 0; }
  .v2 #format .micro { margin-top: var(--space-3); font-size: 15px; }
}

/* 9. 3650 дней: без кикера, подсказки ползунка, h3 половин, «в 45» и чисел оси; стороны подписаны на графике */
.v2 .slider { font-size: var(--fs); }
.v2 #days .slider { margin: var(--space-6) 0; padding: var(--space-3) var(--space-5) var(--space-2); }
.v2 .fork { margin: var(--space-6) 0; }
.v2 .fork-half, .v2 .fork-half.bad { padding: var(--pad); }
.v2 .fork ul { margin: 0; gap: var(--space-4) var(--space-6); }
.v2 .fork li { font-size: var(--fs); line-height: var(--lh); }
.v2 .life-lbl { font-size: 14px; }
.v2 .days-out { margin: 0 0 var(--space-6); }
@media (min-width: 1024px) {
  .v2 #days .wrap { column-gap: var(--space-12); }
  .v2 #days .fork { margin: 0; }
}
/* v26 (29.10): без четырёх цифр; подсказка под дорожкой до первого движения, возраст через 10 лет, текст о силах всплывает, вопрос цветом */
.v2 #days .slider { margin-bottom: var(--space-4); }
.v2 .slider-hint { grid-column: 1 / -1; margin: -6px 0 var(--space-2); transition: opacity .3s; }
.v2 .slider:not(.hint) .slider-hint { opacity: 0; }
.v2 .days-age { margin: 0 0 var(--space-5); font-size: 20px; color: var(--t-dark); }
.v2 .days-age b { font: 400 34px/1 var(--h); color: var(--alarm-1); }
.v2 #days .life { margin: 0; background: linear-gradient(180deg, rgba(76,195,138,.17) 0 47.83%, rgba(214,69,69,.17) 47.83% 100%), var(--deep); }
.v2 .days-out { margin: var(--space-5) 0 var(--space-4); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--alarm-1);
  border-radius: 0 14px 14px 0; background: rgba(79,163,227,.08); color: var(--t-dark); font-size: 18px; line-height: 1.45; }
.v2 #days .swap { animation: daysPop .35s ease-out; }
/* v27: подписи сторон — в левых углах; у концов линий — итог в два слова, до первого движения ползунка скрыт */
.v2 #days .life-lbl.corner { left: 12px; right: auto; opacity: .75; }
.v2 #days .life-lbl.c-up { top: 10px; color: var(--sig-1); }
.v2 #days .life-lbl.c-down { top: auto; bottom: 10px; color: var(--alarm-1); }
.v2 #days .life-lbl.up, .v2 #days .life-lbl.down { font-size: 15px; transition: top .4s ease, opacity .4s; }
.v2 #days .slider.hint ~ .life .life-lbl.up, .v2 #days .slider.hint ~ .life .life-lbl.down { opacity: 0; }
@media (max-width: 719px) { .v2 #days .life { height: 250px; } }
.v2 .days-res { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; }
.v2 .days-res p { margin: 0; padding-left: 22px; position: relative; font-size: 17px; line-height: 1.45; color: var(--t-dark); }
.v2 .days-res p::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--sig-1); }
.v2 .days-res p.r-down::before { background: var(--alarm-1); }
.v2 .days-res b { display: block; font: 700 12px/1.4 var(--m); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sig-1); }
.v2 .days-res .r-down b { color: var(--alarm-1); }
@keyframes daysPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v2 .days-q { margin: 0 0 var(--space-6); font: 400 20px/1.35 var(--h); color: var(--sig-1); }
@media (prefers-reduced-motion: reduce) { .v2 #days .swap { animation: none; } .v2 .slider-hint { transition: none; } }
@media (min-width: 1024px) {
  .v2 #days .wrap { grid-template-rows: 1fr repeat(8, auto) 1fr; }
  .v2 #dyH2 { grid-row: 2; } .v2 #dyLead { grid-row: 3; } .v2 #days .slider { grid-row: 4; } .v2 #daysAge { grid-row: 5; }
  .v2 #daysRes { grid-row: 6; margin-top: 0; } .v2 #daysOut { grid-row: 7; } .v2 #daysQ { grid-row: 8; } .v2 #dyCta { grid-row: 9; }
}

/* 9a. бесплатные инструменты: три карты с цветами сессий, вся карточка — ссылка */
.v2 #tools { border-top: 1px solid #29465b; }
.v2 #tools h2, .v2 #tools .lead { text-align: center; }
.v2 #tools .lead { margin-inline: auto; }
.v2 #tools .tools { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; list-style: none; margin: 40px 0 0; padding: 0; }
.v2 #tools .tools > li { display: flex; min-width: 0; }
.v2 #tools .tool { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 28px; border: 1px solid #29465b; border-radius: 24px;
  background: linear-gradient(145deg,var(--depth),var(--deep) 85%); color: var(--t-dark); text-align: center; text-decoration: none; transition: transform .2s, border-color .2s; }
.v2 #tools .tool-icon { flex: none; width: 110px; height: 110px; color: var(--c); filter: drop-shadow(0 0 16px color-mix(in srgb,var(--c) 30%,transparent)); }
.v2 #tools h3 { font: 400 22px/1.25 var(--h); text-wrap: balance; }
.v2 #tools .tool p { margin: 0; color: var(--t-dark-2); font: 400 17px/1.5 var(--b); }
.v2 #tools .tool-what { display: block; margin-bottom: 10px; color: var(--c); }
.v2 #tools .tool-meta { margin-top: auto; padding-top: 8px; color: var(--t-dark-3); font: 400 12px/1.5 var(--m); }
.v2 #tools .tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: 14px 18px; border: 2px solid var(--c); border-radius: var(--r-big);
  color: var(--c); font: 700 16px/1.2 var(--b); text-transform: uppercase; letter-spacing: .03em; transition: background-color .2s, color .2s; }
.v2 #tools .tool:hover, .v2 #tools .tool:focus-visible { transform: translateY(-4px); border-color: var(--c); }
.v2 #tools .tool:focus-visible { outline: 3px solid var(--c); outline-offset: 5px; }
.v2 #tools .tool:hover .tool-btn, .v2 #tools .tool:focus-visible .tool-btn { background: var(--c); color: var(--deep); }
@media (min-width: 820px) {
  .v2 #tools .tools { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
  .v2 #tools .tool { padding: 32px 28px; }
  .v2 #tools .tool-icon { width: 140px; height: 140px; }
  .v2 #tools h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 #tools .tool, .v2 #tools .tool-btn { transition: none; }
  .v2 #tools .tool:hover, .v2 #tools .tool:focus-visible { transform: none; }
}

/* 9a. окно бесплатных инструментов */
html.tool-open { overflow: hidden; }
.tool-dlg { box-sizing: border-box; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 1px solid #29465b; border-radius: 0; background: linear-gradient(145deg,var(--depth),var(--deep));
  color: var(--t-dark); overflow: auto; overscroll-behavior: contain; font: 400 17px/1.5 var(--b); }
.tool-dlg *, .tool-dlg *::before, .tool-dlg *::after { box-sizing: border-box; }
.tool-dlg [hidden] { display: none !important; }
.tool-dlg::backdrop { background: rgba(7,20,31,.78); backdrop-filter: blur(4px); }
.tool-dlg-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; background: var(--deep); }
.tool-dlg-title { margin: 0; font: 400 18px/1.3 var(--h); }
.tool-dlg-x { flex: none; width: 44px; height: 44px; border: 1px solid #29465b; border-radius: 50%;
  background: transparent; color: var(--t-dark); font-size: 30px; cursor: pointer; }
.tool-dlg-bar { height: 4px; background: #29465b; }
.tool-dlg-bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .25s; }
.tool-dlg-body { padding: 24px 18px; }
.tool-dlg-end { padding: 0 18px calc(24px + env(safe-area-inset-bottom)); }
.tool-count { margin: 0 0 16px; color: var(--t-dark-3); font: 400 12px/1.5 var(--m); }
.v2 #tools .tool-question { margin: 0 0 24px; color: var(--c); font-size: 24px; text-align: left; }
.tool-options { display: grid; gap: 12px; margin-bottom: 20px; }
.tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-opt { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 56px; padding: 16px; border: 1px solid #2f5068; border-radius: 14px;
  background: rgba(255,255,255,.06); color: var(--t-dark); text-align: left; font: 400 17px/1.4 var(--b);
  overflow-wrap: anywhere; cursor: pointer; transition: background .15s, border-color .15s; }
.tool-opt::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid #5b7b90; border-radius: 50%; }
.tool-multi .tool-opt::before { border-radius: 6px; }
.tool-opt.selected::before { background: var(--c); border-color: var(--c); box-shadow: inset 0 0 0 4px var(--deep); }
.tool-opt:hover, .tool-opt:focus-visible { border-color: var(--c); }
.tool-opt.selected { background: color-mix(in srgb,var(--c) 18%,transparent); border-color: var(--c); }
.tool-dlg :focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.tool-dlg [tabindex="-1"]:focus { outline: none; } /* заголовок вопроса получает фокус для экранного диктора, рамка не нужна */
.tool-dlg .cta { white-space: normal; text-align: center; min-width: 0; }
.tool-dlg .cta:disabled { opacity: .4; cursor: default; }
.tool-back { display: block; margin-top: 20px; }
.tool-result { margin-bottom: 18px; padding: 24px 20px; border: 1px solid var(--result,#29465b); border-radius: 20px;
  background: linear-gradient(145deg,var(--depth),var(--deep)); font: 400 17px/1.5 var(--b); }
.tool-result p { margin: 0 0 16px; }
.tool-result .tool-count { color: var(--result); }
.tool-result .tool-label { margin-bottom: 6px; color: var(--result); font: 400 12px/1.5 var(--m); text-transform: uppercase; letter-spacing: .06em; }
.tool-result p:last-child { margin-bottom: 0; }
.tool-note { color: var(--t-dark-2); font-size: 16px; }
.v2 #tools .tool-type { margin: 0 0 20px; color: var(--result); font: 400 clamp(30px,8.7vw,40px)/1.2 var(--h);
  overflow-wrap: anywhere; }
.tool-share-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tool-share-actions .cta { flex: 1 1 140px; padding: 12px; font-size: 13px; }
.tool-share-status { min-height: 24px; margin: 8px 0 0; font-size: 14px; }
.tool-bridge { margin: 0 0 24px; padding: 20px; border: 1px solid color-mix(in srgb,var(--c) 45%,transparent); border-left: 4px solid var(--c); border-radius: 16px;
  background: color-mix(in srgb,var(--c) 9%,transparent); color: var(--t-dark); font: 400 17px/1.5 var(--b); }
.tool-bridge p { margin: 0 0 12px; color: var(--t-dark); }
.tool-bridge p:last-child { margin: 0; }
.tool-bridge .tool-bridge-lead { color: var(--c); font: 400 19px/1.35 var(--h); }
.tool-bridge p[data-only="b"] { color: var(--c); font-weight: 700; }
.tool-actions { display: flex; flex-direction: column; gap: 12px; }
.tool-actions > a { flex: 1; }
.tool-again { display: block; margin: 24px auto 0; }
.tool-battery { position: relative; width: calc(100% - 12px); max-width: 360px; height: 110px; margin: 28px 0;
  padding: 6px; border: 3px solid var(--result); border-radius: 16px; isolation: isolate; }
.tool-battery::after { content: ""; position: absolute; top: 30%; right: -12px; width: 9px; height: 40%;
  background: var(--result); border-radius: 0 4px 4px 0; }
.tool-battery i { display: block; width: var(--charge); height: 100%; border-radius: 8px; background: var(--result);
  animation: tool-charge 1s ease-out both; }
.tool-battery span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  text-shadow: 0 2px 4px #07141f, 0 0 8px #07141f; font: 400 40px/1 var(--h); }
@keyframes tool-charge { from { width: 0; } to { width: var(--charge); } }
.tool-resource { border-color: #29465b; border-left: 4px solid var(--result); }
.tool-res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tool-resource h3 { margin: 0; color: var(--result); }
.tool-status { padding: 4px 10px; border-radius: 999px; color: var(--st); font: 400 12px/1.5 var(--m); text-transform: uppercase;
  background: color-mix(in srgb,var(--st) 16%,transparent); }
.tool-resource p { color: var(--t-dark-2); }
.tool-resource .tool-res-you { margin-bottom: 8px; color: var(--t-dark); font-weight: 600; }
.tool-summary { margin: 0 0 18px; color: var(--t-dark-2); }
@media (min-width: 820px) {
  .tool-dlg { width: min(640px,calc(100% - 48px)); max-height: min(860px,calc(100dvh - 48px)); height: fit-content;
    margin: auto; border-radius: 24px; }
  .tool-dlg-head { padding-inline: 28px; }
  .tool-dlg-body { padding: 28px; }
  .tool-dlg-end { padding-inline: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-dlg *, .tool-dlg *::before, .tool-dlg *::after { animation: none !important; transition: none !important; }
}

/* 10. вопросы и финал: без заголовка «Вопросы»; аккордеон из восьми вопросов, финал с кнопкой — на ПК справа и держится на экране */
.v2 .faq { margin-top: 0; }
.v2 .faq details { margin-bottom: var(--space-3); }
.v2 .faq summary { padding: var(--space-4) 48px var(--space-4) var(--space-5); font: 600 var(--fs)/1.45 var(--b); }
.v2 .faq summary::after { top: 14px; }
.v2 .faq details p { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs); line-height: var(--lh); max-width: min(100%, var(--text)); }
.v2 .faq a { color: var(--sig-4); font-weight: 700; }
.v2 .final { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .v2 .faq-sec .wrap { column-gap: var(--space-12); align-items: start; }
  .v2 .faq { grid-row: 1; }
  .v2 .faq details:last-child { margin-bottom: 0; }
  .v2 .final { grid-row: 1; margin: 0; align-self: start; position: sticky; top: calc(var(--hud) + 32px); padding: 56px 40px; }
}

/* подвал, cookie и шапка на телефоне: мелкий текст не меньше 14 px */
@media (max-width: 719.98px) {
  .v2 .lang-switch { font-size: 14px; }
  .v2 .hud-bar { font-size: 14px; letter-spacing: 1px; }
  .v2 .hud-bar .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.v2 footer, .v2 .legal a, .v2 .linkish, .v2 .copy .linkish, .v2 .requisites, .v2 .pay-logos, .v2 .copy, .v2 .cookie button { font-size: 14px; }

/* демо-режим (?demo=1): плашка-переключатель воронок вверху слева, под шапкой; пояснение к кнопке в воронке О */
.demo-panel { position: fixed; z-index: 80; top: calc(var(--hud) + 8px); left: 16px; display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  border-radius: 8px; background: var(--deep); color: var(--t-dark); border: 1px solid rgba(127,224,168,.45); box-shadow: 0 4px 24px rgba(0,0,0,.3); font: 600 14px/1 var(--b); }
.demo-panel button { min-width: 32px; min-height: 32px; padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.demo-panel button[aria-pressed="true"] { background: var(--sig-1); color: #062015; }
.demo-notice { position: fixed; z-index: 80; bottom: calc(96px + env(safe-area-inset-bottom)); left: 16px; max-width: min(360px, calc(100% - 32px)); padding: 12px 16px;
  border-radius: 8px; background: var(--depth); color: var(--t-dark); border: 1px solid rgba(127,224,168,.45); box-shadow: 0 4px 24px rgba(0,0,0,.3); font-size: 14px; line-height: 1.5; }

/* v4 · формат сайтов топ-спикеров (владелец 27.10: «крупные шрифты, контрастные к фону, и кнопки, на которые хочется нажимать»).
   Только русская страница (.v2), украинская не меняется. Ориентиры замеров (телефон / ПК): h1 40–60 / 66–124 px, h2 30–48 / 40–64 px,
   основной текст 16–20 px, текст почти белый на тёмном и почти чёрный на светлом (контраст 14–21:1) */
.v2 { --t-dark: #FFFFFF; --t-dark-2: #EEF2F5; --t-dark-3: #D6E2EA; --t-paper: #101A21; --t-paper-2: #17232C; --t-paper-3: #24313B;
  --fs: 18px; --fs-acc: 22px; --lh: 1.55; }
@media (min-width: 720px) { .v2 { --fs: 19px; --fs-acc: 24px; } }
@media (min-width: 1024px) { .v2 { --fs: 20px; --fs-acc: 26px; } }
.v2 h1 { font-size: clamp(40px, 11.6vw, 54px); }
.v2 h2 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.1; }
@media (min-width: 720px) { .v2 h1, .v2 .hero h1 { font-size: clamp(56px, 8vw, 68px); } .v2 h2 { font-size: clamp(40px, 5.4vw, 46px); } }
@media (min-width: 1024px) { .v2 h1, .v2 .hero h1 { font-size: clamp(64px, 6vw, 92px); } .v2 h2 { font-size: clamp(44px, 3.9vw, 58px); } }
.v2 .ship { background-image: linear-gradient(rgba(79,163,227,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,227,.035) 1px, transparent 1px); }
.v2 .chips button { font-size: 17px; }
@media (min-width: 720px) { .v2 .chips button { font-size: 18px; } }
@media (min-width: 1024px) { .v2 .chips button { font-size: 19px; } }
.v2 .hb-k { font-size: 12.5px; }
/* кнопки: крупнее, жирнее, с бликом — как у Rich Dad / Marie Forleo: глагол и выгода, сплошная заливка, высота 64 px */
.v2 .cta:not(.outline) { position: relative; overflow: hidden; min-height: 64px; padding: 18px 28px; font-size: 18px; letter-spacing: .02em;
  box-shadow: 0 14px 34px -12px rgba(76,195,138,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.v2 .cta:not(.outline)::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); animation: cta-shine 4.5s ease-in-out 2s infinite; }
@keyframes cta-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.v2 .cta.outline { min-height: 60px; font-size: 17px; border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .v2 .cta::after { display: none; } }

/* v5 · воронка (владелец 27.10: «сайт как воронка, интересно перейти на следующий блок»; сферы — не шаблонные карточки, ORBITS — наглядно) */
/* 1. первый экран по центру: заголовок, строка-ротор, текст, бонус и кнопка; на телефоне заголовок помельче, чтобы кнопка ближе к первому экрану */
.v2 .hero-text { text-align: center; margin-inline: auto; }
@media (min-width: 820px) and (min-aspect-ratio: 13/10) { .v2 .hero-text { margin-inline: 0; } } /* ПК: текст в своей колонке слева от фото, по центру колонки */
.v2 .hero h1 { font-size: clamp(36px, 10.2vw, 54px); text-wrap: balance; }
/* v27 (владелец 29.10: заглавными в 4 строки «сливается и дёшево»): обычный регистр, две фразы отдельными строками, вторая — зелёным */
.v2 #heroH1 { text-transform: none; line-height: 1.12; letter-spacing: -.005em; }
.v2 #heroH1 span { display: block; }
.v2 #heroH1 span + span { margin-top: .18em; color: var(--sig-1); }
@media (min-width: 1024px) { .v2 #heroH1 { font-size: clamp(50px, 4.2vw, 66px); } }
.v2 .hero-rotor { justify-items: center; }
.v2 .hero .lead { margin-inline: auto; max-width: 34em; }
.v2 .hero-bonus { width: fit-content; margin-inline: auto; text-align: left; }
.v2 .hero .cta.wide { margin-inline: auto; }
@media (min-width: 720px) { .v2 .hero h1 { font-size: clamp(56px, 8vw, 68px); } }
@media (min-width: 1024px) { .v2 .hero h1 { font-size: clamp(64px, 6vw, 92px); } }

/* 2. сферы (владелец 27.10): заголовок блока по центру с полосой шести цветов сфер; плашки — тёмный градиент с бирюзовым светом сверху (как фон «корабля»),
   полоска и планета — цвет сферы (--c), название и подзаголовок цветом сферы. На телефоне и планшете по «+» (с мышью — и при наведении)
   раскрывается «Что получите» с тремя пунктами (владелец 28.10), стрелка в правом нижнем углу поворачивается вверх (владелец 04.11, было «+» → «×» сверху); на ПК плашка раскрыта всегда (app.js plates).
   Без JS всё раскрыто. Ниже — тест в своей светлой панели */
.v2 { --plate-bg: radial-gradient(120% 80% at 50% 0%, rgba(79, 200, 170, .16), transparent 62%), linear-gradient(180deg, #0F2735 0%, #0A1B28 100%); }
.v2 .sec-head { text-align: center; }
.v2 .kick { margin: 0; font: 700 12px/1.3 var(--m); letter-spacing: 2.4px; text-transform: uppercase; color: #1B6E46; }
.v2 .sec-head h2 { margin: 10px auto 0; max-width: 16em; font-size: clamp(28px, 7.6vw, 34px); text-wrap: balance; }
.v2 .sph-bar { display: flex; justify-content: center; gap: 6px; margin: 18px 0 0; }
.v2 .sph-bar i { width: 30px; height: 5px; border-radius: 3px; background: var(--sig-1); }
.v2 .sph-bar i:nth-child(2) { background: #F29A96; } .v2 .sph-bar i:nth-child(3) { background: #B79AE8; } .v2 .sph-bar i:nth-child(4) { background: #F5C542; }
.v2 .sph-bar i:nth-child(5) { background: #F5A96E; } .v2 .sph-bar i:nth-child(6) { background: #7ADAE2; }
.v2 .plates { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.v2 .plate { --c: var(--sig-1); position: relative; margin: 0; border-radius: var(--r-card); background: var(--plate-bg); border: 1px solid rgba(127, 224, 168, .18);
  box-shadow: inset 4px 0 0 var(--c), 0 22px 44px -30px rgba(10, 27, 40, .8); }
.v2 .plate.p-rel { --c: #F29A96; } .v2 .plate.p-scen { --c: #B79AE8; } .v2 .plate.p-fin { --c: #F5C542; } .v2 .plate.p-en { --c: #F5A96E; } .v2 .plate.p-str { --c: #7ADAE2; }
.v2 .plate-h { margin: 0; font: inherit; }
.v2 .plate-h button { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; margin: 0; padding: 18px 52px 16px 20px;
  border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-card); }
.v2 .plate-h button:focus-visible { outline: 2px solid var(--c); outline-offset: -4px; }
.v2 .plate-n { font: 400 clamp(20px, 5.8vw, 26px)/1.15 var(--h); color: #fff; text-wrap: balance; }
.v2 .plate-k { grid-column: 1 / -1; margin-top: 12px; font: 700 16px/1.35 var(--b); color: var(--c); }
.v2 .plate-x { position: absolute; z-index: 2; top: 16px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--c); background: rgba(255, 255, 255, .06); border: 1.5px solid var(--c); box-shadow: 0 0 16px -4px var(--c); transition: transform .3s, background .3s, color .3s; }
.v2 .plate-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.v2 .plate-h button:hover .plate-x { background: rgba(255, 255, 255, .12); }
.v2 .plate.open .plate-x { transform: rotate(45deg); color: #0A1B28; background: var(--c); }
.v2 .plate-more { display: grid; grid-template-rows: 1fr; }
.v2 .pm-in { min-height: 0; overflow: hidden; padding: 0 18px 18px 20px; }
.v2 .pm-l { margin: 14px 0 0; font: 700 11.5px/1.3 var(--m); letter-spacing: 1.6px; text-transform: uppercase; color: #9FB4C2; }
.v2 .pm-in .pm-l:first-child { margin-top: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.v2 .pm-p { margin: 6px 0 0; font: 500 16px/1.45 var(--b); color: #E4ECF1; }
.v2 .pm-ck { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.v2 .pm-ck li { position: relative; padding-left: 28px; font: 600 16px/1.4 var(--b); color: #fff; }
.v2 .pm-ck li::before { content: ""; position: absolute; left: 3px; top: .32em; width: 12px; height: 7px; border-left: 2.5px solid var(--c); border-bottom: 2.5px solid var(--c); transform: rotate(-45deg); }
.v2 .plates.js .plate-more { grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1); }
.v2 .plates.js .plate.open .plate-more { grid-template-rows: 1fr; }
.v2 .plates.js .plate:not(.open) .pm-in { padding-bottom: 0; }
.v2 .orb-g { flex: none; width: 44px; height: 44px; overflow: visible; }
.v2 .orb-g .ring { fill: none; stroke: #fff; stroke-opacity: .3; stroke-width: 1.5; }
.v2 .orb-g .core { fill: #fff; }
.v2 .orb-g .spin { transform-box: view-box; transform-origin: 22px 22px; animation: orb-spin 16s linear infinite; }
.v2 .orb-g .pl { fill: var(--c); filter: drop-shadow(0 0 5px var(--c)); }
.v2 .p-rel .spin { animation-delay: -3s; } .v2 .p-scen .spin { animation-delay: -6s; } .v2 .p-fin .spin { animation-delay: -9s; } .v2 .p-en .spin { animation-delay: -12s; } .v2 .p-str .spin { animation-delay: -14s; }
@keyframes orb-spin { to { transform: rotate(360deg); } } /* по часовой (владелец 04.11) */
/* тест (владелец 28.10: «тест сделаем без плашек» — подряд шли плашки сфер, плитки теста и перевёртыши): без панели и без плиток —
   список в 2 колонки, пункты разделены линиями, кружок отметки цветом своей сферы; отмечен — кружок залит, на нём галочка, текст жирнее */
.v2 .test-box { margin-top: var(--space-16); }
.v2 .test-box .kick { text-align: center; }
.v2 .fit-q { margin: 8px 0 0; text-align: center; font: 400 clamp(24px, 6.8vw, 30px)/1.2 var(--h); color: var(--t-paper); text-wrap: balance; }
.v2 .test-box .chips { column-gap: 16px; row-gap: 0; border-top: 1px solid rgba(16, 26, 33, .14); }
.v2 .test-box .chips button { --c: #3FB97A; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: start; min-height: 0;
  padding: 14px 0; border: 0; border-bottom: 1px solid rgba(16, 26, 33, .14); border-radius: 0; background: none; box-shadow: none; color: var(--t-paper); font: 500 16px/1.38 var(--b); }
.v2 .test-box .chips .t-rel { --c: #E07772; } .v2 .test-box .chips .t-scen { --c: #9B7BD8; } .v2 .test-box .chips .t-fin { --c: #D9A514; }
.v2 .test-box .chips .t-en { --c: #E48A45; } .v2 .test-box .chips .t-str { --c: #3FBFCB; }
.v2 .test-box .chips button::before { box-sizing: border-box; width: 24px; height: 24px; margin: -1px 0 0; border: 2px solid var(--c); border-radius: 50%;
  background: transparent no-repeat center / 14px 14px; box-shadow: none; transition: background-color .15s; }
.v2 .test-box .chips button[aria-pressed="true"] { background: none; color: var(--t-paper); font-weight: 700; }
.v2 .test-box .chips button[aria-pressed="true"]::before { border-color: var(--c); background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%230A1B28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: none; }
.v2 .test-box .chips button:hover { border-color: rgba(16, 26, 33, .14); }
.v2 .test-box .chips button:focus-visible { outline: 2px solid #1B6E46; outline-offset: 2px; border-radius: 6px; }
.v2 .test-box .verdict { margin-top: var(--space-6); }
@media (min-width: 720px) {
  .v2 .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .v2 .test-box .chips { column-gap: 40px; } .v2 .test-box .chips button { padding-block: 16px; font-size: 18px; }
}
@media (min-width: 1024px) {
  .v2 .sec-head h2 { font-size: 44px; }
  .v2 .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; }
  .v2 .plates { align-items: stretch; }
  .v2 .plate { display: flex; flex-direction: column; }
  /* на ПК плашка раскрыта всегда (владелец 28.10: в плашке только название, подзаголовок и «Что получите»; под «+» плашка стояла бы полупустой):
     «+» нет, «Что получите» сразу под подзаголовком (app.js plates снимает .js) */
  .v2 .plate-h button { grid-template-rows: auto auto; padding: 24px 28px 18px; cursor: default; }
  .v2 .plate-x { display: none; }
  .v2 .plate-n { font-size: 26px; }
  .v2 .pm-in { padding: 0 24px 26px 28px; }
  .v2 .fit-q { font-size: 36px; }
  .v2 .test-box { margin-top: 96px; }
  .v2 .test-box .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; max-width: 960px; margin-inline: auto; }
  .v2 .test-box .chips button { font-size: 19px; }
  .v2 .test-box .verdict { max-width: 960px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .v2 .orb-g .spin { animation: none; } }

/* 5. программа: расшифровка ORBITS, внутри букв — сессии (v6, владелец 27.10: «сначала видим все аббревиатуры, листая дальше — раскрываются по очереди»).
   Буквы столбиком читаются как ORBITS, из буквы — английское слово, точки-выноски до перевода справа.
   app.js acroRoute: блок .route4 высотой в несколько экранов, внутри липкий экран с расшифровкой. Сначала все строки свёрнуты, дальше при прокрутке
   раскрывается одна сессия за другой (.on), открытые сжимают буквы (.open); не влезает в экран — буквы ещё меньше и без подписи (.tight).
   Без JS и в ?edit — все сессии раскрыты списком. app.js acro: буквы падают по очереди, потом выезжают слова (один раз) */
.v2 .acro-box { margin-top: var(--space-12); }
.v2 .acro { list-style: none; margin: 0; padding: 0; display: grid; }
.v2 .acro .ah { display: flex; align-items: baseline; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font: 400 clamp(50px, 14.5vw, 66px)/1.04 var(--h); transition: font-size .3s cubic-bezier(.2, .8, .2, 1); }
.v2 .acro .ah:focus-visible { outline: 2px solid var(--sig-1); outline-offset: 4px; border-radius: 8px; }
.v2 .acro b { font-weight: 400; color: var(--sig-1); text-shadow: 0 0 30px rgba(127, 224, 168, .45); transition: color .3s, text-shadow .3s; }
.v2 .acro .en { font-size: .4em; color: var(--t-dark); transition: color .3s; }
.v2 .acro .ah::after { content: ""; order: 2; flex: 1 1 18px; min-width: 18px; height: 0; margin-inline: 10px; border-bottom: 2px dotted rgba(127, 224, 168, .4); }
.v2 .acro .ru { position: relative; order: 3; max-width: 10.5em; font: 700 13px/1.3 var(--m); letter-spacing: 1.4px; text-transform: uppercase; text-align: right; color: var(--t-dark-2); }
/* сессия внутри буквы: без JS раскрыта; с JS свёрнута до .on (высота плавно 0 → своя) */
.v2 .acro .ab { display: grid; grid-template-rows: 1fr; }
.v2 .acro .ab-in { min-height: 0; overflow: hidden; display: grid; gap: var(--space-4); padding: var(--space-4) 0 var(--space-8); }
.v2 .acro.js .ab { grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
.v2 .acro.js li.on .ab { grid-template-rows: 1fr; }
.v2 .acro.js .ab-in { padding-block: 0; transition: padding .32s cubic-bezier(.2, .8, .2, 1); }
.v2 .acro.js li.on .ab-in { padding-block: 12px 20px; }
/* тело буквы — плашка (владелец 27.10, подача «анимация фоном» — выбор владельца 27.10): тёмная панель, своя инфографика сессии (прежний маршрут,
   без текста) крупно и приглушённо стоит фоном справа, поверх на всю ширину — «Вы получите …:» и три инструмента урока.
   Плашка всплывает, инфографика дорисовывается, галочки появляются по очереди */
.v2 .pop { position: relative; overflow: hidden; padding: 18px 16px 20px; border-radius: 18px;
  background: #07121A; border: 1px solid rgba(79, 163, 227, .25); box-shadow: 0 28px 60px -34px rgba(0, 0, 0, .9); }
.v2 .ses-you { position: absolute; top: 50%; right: -22px; width: 62%; transform: translateY(-50%); opacity: .3; pointer-events: none; }
.v2 .ses-you .sviz { width: 100%; max-height: 240px; }
.v2 .ses-you .arr { display: none; }
.v2 .ck { position: relative; }
.v2 .ck-t { margin: 0; max-width: 15em; font: 400 20px/1.25 var(--h); color: var(--sig-1); text-wrap: balance; text-shadow: 0 1px 10px #07121A; }
.v2 .ck-l { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.v2 .ck-l li { --k: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start; font: 500 17px/1.38 var(--b); color: var(--t-dark); text-shadow: 0 1px 8px #07121A; }
.v2 .ck-l li:nth-child(2) { --k: 1; } .v2 .ck-l li:nth-child(3) { --k: 2; }
.v2 .ck-i { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--sig-1); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v2 .ck-i path { stroke-dasharray: 16; }
.v2 .acro.js li.on .pop { animation: popIn .45s cubic-bezier(.2, 1.25, .4, 1) both; }
.v2 .acro.js li.on .ck-t { animation: stopIn .4s ease .65s both; }
.v2 .acro.js li.on .ck-l li { animation: stopIn .4s ease calc(.8s + var(--k) * .2s) both; }
.v2 .acro.js li.on .ck-i path { animation: ckDraw .45s ease calc(.9s + var(--k) * .2s) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@media (min-width: 560px) {
  .v2 .pop { padding: 22px 24px 24px; } .v2 .ses-you { width: 52%; right: -10px; } .v2 .ses-you .sviz { max-height: 260px; }
  .v2 .ck-t { font-size: 23px; } .v2 .ck-l { margin-top: 16px; gap: 12px; } .v2 .ck-l li { font-size: 18.5px; }
}
@keyframes ckDraw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.v2 .acro.tight .pop { padding: 12px 14px 14px; } .v2 .acro.tight .ses-you .sviz { max-height: 170px; }
.v2 .acro.tight .ck-t { font-size: 17px; } .v2 .acro.tight .ck-l { margin-top: 9px; gap: 6px; } .v2 .acro.tight .ck-l li { font-size: 15px; }
.v2 .acro.js.tight.open .ah { font-size: 26px; }
.v2 .acro.js.tight.open li.on .ah { font-size: 34px; }
.v2 .acro.js.open .ah { font-size: clamp(28px, 8vw, 34px); }
.v2 .acro.js.open li.on .ah { font-size: clamp(34px, 10vw, 44px); }
.v2 .acro.open ~ .swipe-hint { display: none !important; } /* подсказка нужна, пока всё свёрнуто */
.v2 .acro.js.open li:not(.on) b { color: rgba(127, 224, 168, .5); text-shadow: none; }
.v2 .acro.js.open li:not(.on) .en { color: var(--t-dark-3); }
.v2 .acro.measure .ah, .v2 .acro.measure .ab, .v2 .acro.measure .ab-in { transition: none !important; }
.v2 .route4 { position: relative; height: calc(var(--screen) * (1 + .4 * (var(--n, 6) + 1))); margin-top: var(--space-12); }
.v2 .r4-sticky { position: sticky; top: 0; height: var(--screen); padding: calc(var(--hud) + 12px) 0 calc(var(--dock) + 4px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.v2 .route4 .acro-box { margin: 0; }
.v2 .route4 .swipe-hint { display: block; justify-self: start; text-align: left; margin-top: var(--space-5); }
@media (max-height: 640px) { .v2 .route4 .swipe-hint { display: none; } }
@media (max-height: 479.98px) { .v2 .route4 { height: auto; } .v2 .r4-sticky { position: static; height: auto; padding: 0; overflow: visible; } }
.v2 .acro li:nth-child(2) { --i: 1; } .v2 .acro li:nth-child(3) { --i: 2; } .v2 .acro li:nth-child(4) { --i: 3; } .v2 .acro li:nth-child(5) { --i: 4; } .v2 .acro li:nth-child(6) { --i: 5; }
.v2 .acro.anim b { opacity: 0; transform: translateY(-.35em); }
.v2 .acro.anim .en, .v2 .acro.anim .ru, .v2 .acro.anim .ah::after { clip-path: inset(0 100% 0 0); }
.v2 .acro.play b { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--i, 0) * .09s), transform .45s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i, 0) * .09s), color .3s, text-shadow .3s; }
.v2 .acro.play .en, .v2 .acro.play .ah::after, .v2 .acro.play .ru { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.2, .8, .2, 1) calc(.65s + var(--i, 0) * .16s), color .3s; }
.v2 .acro.play .ru { transition-delay: calc(.9s + var(--i, 0) * .16s); }
@media (min-width: 1024px) {
  .v2 .acro-box { width: 100%; max-width: 1040px; margin-inline: auto; }
  .v2 .acro .ah { font-size: 62px; }
  .v2 .acro.js.open .ah, .v2 .acro.js.open li.on .ah { font-size: 46px; }
  .v2 .acro .ru { font-size: 14px; }
  .v2 .pop { padding: 32px 40px 34px; border-radius: 24px; } .v2 .ses-you { width: 44%; right: 2%; opacity: .34; } .v2 .ses-you .sviz { max-height: 260px; }
  .v2 .ck-t { font-size: 30px; } .v2 .ck-l { margin-top: 20px; gap: 14px; } .v2 .ck-l li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 22px; } .v2 .ck-i { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .acro b, .v2 .acro .en, .v2 .acro .ru, .v2 .acro .ah, .v2 .acro .ah::after, .v2 .acro .ab, .v2 .acro .ab-in { transition: none !important; }
  .v2 .acro.js li.on :is(.pop, .ck-t, .ck-l li, .ck-i path) { animation: none; }
}

/* переходы между блоками: строка командной строки корабля — вопрос, на который отвечает следующий блок; ссылка на него */
.v2 .next { display: block; width: fit-content; max-width: 100%; margin: var(--space-12) auto 0; padding: 10px 4px; text-align: center; text-wrap: balance;
  font: 700 15px/1.45 var(--m); letter-spacing: 0; text-decoration: none; color: var(--sig-1); }
.v2 .next .nx { margin-left: 8px; }
.v2 .paper .next { color: var(--t-paper); }
.v2 .next .gt { color: var(--sig-2); }
.v2 .paper .next .gt { color: #1B6E46; }
.v2 .next .nx { font-style: normal; display: inline-block; animation: nx-bob 1.6s ease-in-out infinite; }
.v2 .next:hover { text-decoration: underline; text-underline-offset: 5px; }
.v2 .next:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
@keyframes nx-bob { 50% { transform: translateY(5px); } }
@media (min-width: 720px) { .v2 .next { font-size: 16px; letter-spacing: .6px; } .v2 #format .next { margin-left: 0; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .v2 .next .nx { animation: none; } }

/* v28 (04.11, владелец). /ua/ собирается из русской разметки (tools/build-uk.mjs), правила общие */
/* Заголовки разделов по центру: во всю ширину — по центру страницы, в двух колонках — по центру своей колонки; заголовки карточек — как были */
.v2 main section > .wrap > h2, .v2 #days .wrap > .lead,
.v2 .hist > h3, .v2 .consult-txt h2, .v2 .consult-txt .acc,
.v2 #program .program-get { text-align: center; }
.v2 #days .wrap > .lead, .v2 .consult-txt .cs-rule { margin-inline: auto; }
/* «Что Вы получите на программе»: буквы ORBITS по центру под заголовком */
.v2 #program .word { margin-inline: auto; }
.v2 #program .sm figcaption { text-align: center; } /* подпись трейлера — по центру под ним, как и заголовок */
.v2 .cs-seal { margin-inline: auto; } /* фото Павла и Аллы над заголовком подарка — по центру, как и он */
/* «Бесплатные инструменты» (04.11, владелец: «грязновато, мелкий шрифт, наляписто, плохо читаемо»): светлые карточки на тёмном фоне —
   тёмный крупный текст, цвет теста только в полосе сверху, значке, метке и кнопке; метка «Тест · …» обычным шрифтом, кнопка залита глубоким цветом теста */
.v2 #tools .tools > li:nth-child(1) .tool { --cd: #1F72BF; } .v2 #tools .tools > li:nth-child(2) .tool { --cd: #16834F; } .v2 #tools .tools > li:nth-child(3) .tool { --cd: #B45F0E; }
.v2 #tools .tool { --ink: #0A1B28; gap: 18px; padding: 30px 24px 28px; border: 0; border-top: 6px solid var(--c); background: #F8F4EC; color: var(--ink);
  box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .85); }
.v2 #tools .tool-icon { width: 100px; height: 100px; color: var(--cd); filter: none; }
.v2 #tools .tool-meta { order: -1; margin: 0; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--c) 24%, #fff); color: var(--ink);
  font: 700 15px/1.3 var(--b); letter-spacing: 0; }
.v2 #tools h3 { color: var(--ink); font-size: 25px; }
.v2 #tools .tool p { color: #33444F; font: 400 18px/1.55 var(--b); }
.v2 #tools .tool-what { margin-bottom: 8px; color: var(--ink); font-weight: 700; }
.v2 #tools .tool-btn { display: block; margin-top: auto; min-height: 0; padding: 19px 18px; border: 0; border-radius: 16px; background: var(--cd); color: #fff;
  font-size: 17px; text-align: center; box-shadow: 0 12px 24px -14px var(--cd); }
.v2 #tools .tool-btn::after { content: "\00a0→"; font-family: var(--m); } /* стрелка не отрывается от последнего слова, когда подпись в две строки */
.v2 #tools .tool:hover .tool-btn, .v2 #tools .tool:focus-visible .tool-btn { background: var(--cd); color: #fff; filter: brightness(1.12); }
.v2 #tools .tool:focus-visible { outline-color: var(--c); }
@media (min-width: 820px) { .v2 #tools .tool { padding: 34px 28px 30px; } .v2 #tools .tool-icon { width: 120px; height: 120px; } .v2 #tools h3 { font-size: 26px; } }
/* 04.11 (владелец: «у нас все главные надписи по центру»): на ПК заголовок «3650 дней» и строка под ним — по центру над ползунком и графиком,
   заголовок подарка, линия и золотая строка — по центру карточки над текстом и фото, «Почему мы создали ORBITS» — по центру над схемой и вступлением */
@media (min-width: 1024px) {
  .v2 #days .wrap { grid-template-rows: auto auto 1fr repeat(6, auto) 1fr; }
  .v2 #dyH2, .v2 #dyLead { grid-column: 1 / -1; }
  .v2 #dyH2 { grid-row: 1; } .v2 #dyLead { grid-row: 2; margin-bottom: var(--space-8); }
  .v2 #days .slider { grid-row: 4; } .v2 #daysAge { grid-row: 5; } .v2 #daysRes { grid-row: 6; } .v2 #daysOut { grid-row: 7; } .v2 #daysQ { grid-row: 8; } .v2 #dyCta { grid-row: 9; }
  .v2 #days .life { grid-row: 3 / -1; }
  .v2 .consult { row-gap: 0; }
  .v2 .consult-txt { display: contents; }
  .v2 #consult .consult-txt > h2, .v2 #consult .consult-txt > .cs-rule, .v2 #consult .acc { grid-column: 1 / -1; }
  .v2 #consult .consult-txt > h2 { grid-row: 1; } .v2 #consult .consult-txt > .cs-rule { grid-row: 2; } .v2 #consult .acc { grid-row: 3; margin-bottom: var(--space-4); }
  .v2 #consult .consult-txt > p:nth-of-type(2) { grid-column: 1; grid-row: 4; } .v2 #consult .consult-txt > p:nth-of-type(3) { grid-column: 1; grid-row: 5; }
  .v2 .cs-seal { grid-row: 4 / span 2; }
  .v2 #crew .hist > h3 { grid-column: 1 / -1; grid-row: 1; margin-bottom: calc(var(--space-6) - var(--space-12)); }
  .v2 #crew .crew .duo-col, .v2 #crew .hist-intro { grid-row: 2; }
}
/* 04.11 (владелец): на телефоне и планшете вместо «+» в правом верхнем углу — стрелка в правом нижнем углу плашки:
   вниз — раскрыть, вверх — свернуть; стрелка всегда в углу плашки, текст «Что получите» её не задевает */
@media (max-width: 1023.98px) {
  .v2 .plate-h button { position: static; }
  .v2 .plate-x { top: auto; bottom: 12px; right: 12px; }
  .v2 .plate.open .plate-x { transform: rotate(180deg); }
  .v2 .plates.js .pm-in { padding-right: 52px; }
}
/* 04.11 (владелец, второй круг: «слева картинка, справа мелкий текст, везде белый текст, композиция несбалансирована»): ведущие — всё по центру
   и симметрично: заголовок, вступление, схема орбит, две карточки рядом; в карточке круглое фото над именем, имя цветом ведущего, роль под ним;
   три уровня текста: главная фраза белая, остальное спокойным серо-голубым, пункты досье — в отдельной подложке */
.v2 #crew .hist > h3 { color: var(--sig-1); }
.v2 #crew .hist-intro { justify-self: center; max-width: 46em; text-align: center; }
.v2 #crew .hist-intro p { max-width: none; font-size: 20px; line-height: 1.6; color: #AFC0CC; }
.v2 #crew .hist-intro b { color: #fff; }
.v2 #crew .crew .duo-col { order: 1; } .v2 #crew .member { order: 2; } .v2 #crew .crew-key { order: 3; }
.v2 #crew .member { --who: var(--sig-1); grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: 36px 22px 24px; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 28px; background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--who) 14%, transparent), transparent 70%), #0C2131;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.v2 #crew .member.alla { --who: var(--line-2); }
.v2 #crew .member .ph { grid-column: 1; grid-row: 1; justify-self: center; width: 168px; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--who), 0 0 0 10px color-mix(in srgb, var(--who) 16%, transparent), 0 20px 40px -14px rgba(0, 0, 0, .8); }
.v2 #crew .member .m-head { grid-column: 1; grid-row: 2; text-align: center; }
.v2 #crew .member .m-head::after { content: ""; display: block; width: 56px; height: 3px; margin: 22px auto 0; border-radius: 2px; background: var(--who); }
.v2 #crew .m-intro .m-name { font-size: 30px; color: var(--who); }
.v2 #crew .m-intro .m-role { max-width: 26em; margin: 8px auto 0; font-size: 18px; line-height: 1.45; color: #AFC0CC; }
.v2 #crew .member .socials { justify-content: center; }
.v2 #crew .m-story { grid-column: 1; grid-row: 3; display: grid; gap: 14px; }
.v2 #crew .m-story p { margin: 0; font: 400 18px/1.65 var(--b); color: #AFC0CC; }
.v2 #crew .m-story b { font-size: 21px; line-height: 1.45; font-weight: 700; color: #fff; }
.v2 #crew .member .m-list { grid-column: 1; grid-row: 4; margin: 0; padding: 22px 20px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .045); gap: 14px; }
.v2 #crew .m-list li { font-size: 17px; line-height: 1.55; color: #C3D0D9; }
.v2 #crew .crew-key { max-width: 34em; margin: 0 auto; text-align: center; font: 600 clamp(20px, 5.4vw, 26px)/1.4 var(--b); color: var(--sig-1); text-wrap: balance; }
@media (min-width: 1024px) {
  .v2 #crew .hist-intro { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .v2 #crew .crew .duo-col { grid-column: 1 / -1; grid-row: 3; }
  .v2 #crew .crew .duo-svg { max-width: 460px; }
  .v2 #crew .member { padding: 44px 40px 32px; }
  .v2 #crew .member .ph { width: 188px; }
  .v2 #crew .member.pavel { grid-column: 1; grid-row: 4; } .v2 #crew .member.alla { grid-column: 2; grid-row: 4; }
  .v2 #crew .crew-key { grid-column: 1 / -1; grid-row: 5; }
}
/* 04.11 (владелец): буквы ORBITS одним шрифтом, но каждая — по смыслу своей сессии; кнопки над программой и плитки в карточках сессий.
   Цвета (владелец 04.11): O зелёная, R красная, B синяя, I двухцветная, T фиолетовая #C89BF0 (--violet из палитры практик ORBITS, practice/_/practice.css;
   владелец 04.11: «жёлтый грязный»), S зелёная — мягкие тона сайта (владелец 04.11: «насыщенные — бери мягче»).
   O — радар, тихий: буква в центре, бледные кольца и медленный луч; R — утечка: из целой буквы по одному вылетают пиксели, на их месте остаются дырки,
   потом пиксели возвращаются; B — разрыв по талии, как порванная цепь; I — разворот курса: заливка — половина буквы, ниже середины красная, выше зелёная,
   переворот, потом красное течёт вверх и зеленеет (владелец 04.11 выбрал этот вариант из двух — и на кнопке, и в плитке карточки);
   T — заправка жидкостью: уровень от середины до верха и обратно, по поверхности бежит волна; S — маршрут по дороге: буква — асфальт с разметкой,
   точка едет от линии старта к флажку финиша, за ней загорается маршрут, как в навигаторе */
@property --ib { syntax: "<percentage>"; inherits: false; initial-value: 54%; }
@property --tl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --wx { syntax: "<length>"; inherits: false; initial-value: 0px; }
.v2 #program :is(.word a, .letter-tile) { position: relative; isolation: isolate; overflow: hidden; }
.v2 #program .lt { position: relative; display: block; line-height: 1; }
/* O — радар */
.v2 #program .word a:nth-child(1) .lt, .v2 #program #ses-1 .letter-tile .lt { --oy: -.06em; isolation: isolate; text-shadow: 0 0 .25em color-mix(in srgb, var(--c) 28%, transparent); } /* --oy: центр буквы в шрифте чуть выше середины строки */
.v2 #program .word a:nth-child(1) .lt::before, .v2 #program #ses-1 .letter-tile .lt::before, .v2 #program .word a:nth-child(1) .lt::after, .v2 #program #ses-1 .letter-tile .lt::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 1.4em; height: 1.4em;
  margin: calc(-.7em + var(--oy)) 0 0 -.7em; border-radius: 50%; }
.v2 #program .word a:nth-child(1) .lt::before, .v2 #program #ses-1 .letter-tile .lt::before { background: conic-gradient(from 0deg, transparent 0 280deg, color-mix(in srgb, var(--c) 26%, transparent) 360deg); animation: lt-radar 4s linear infinite; }
.v2 #program .word a:nth-child(1) .lt::after, .v2 #program #ses-1 .letter-tile .lt::after { border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background: radial-gradient(circle, transparent 0 .3em, color-mix(in srgb, var(--c) 20%, transparent) .3em calc(.3em + 1px), transparent calc(.3em + 1px) .52em,
    color-mix(in srgb, var(--c) 20%, transparent) .52em calc(.52em + 1px), transparent calc(.52em + 1px)),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--c) 14%, transparent) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--c) 14%, transparent) 0 calc(50% + .5px), transparent 0); }
.v2 #program #ses-1 .letter-tile .lt::before, .v2 #program #ses-1 .letter-tile .lt::after { width: 1.3em; height: 1.3em; margin-left: -.65em; margin-top: calc(-.65em + var(--oy)); }
@keyframes lt-radar { to { transform: rotate(360deg); } }
/* R — утечка: буква — ::before с дырками-масками, вылетающие пиксели — тени ::after на тех же местах (em от левого верхнего угла строки) */
.v2 #program .word a:nth-child(2) .lt, .v2 #program #ses-2 .letter-tile .lt { color: transparent; }
.v2 #program .word a:nth-child(2) .lt::before, .v2 #program #ses-2 .letter-tile .lt::before { content: "R"; position: absolute; inset: 0; color: var(--c);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 0.55em 0.3em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.5em 0.15em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.54em 0.72em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.52em 0.48em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.45em 0.63em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.31em 0.15em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.33em 0.49em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.11em 0.66em / 0 0 no-repeat; -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 0.55em 0.3em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.5em 0.15em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.54em 0.72em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.52em 0.48em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.45em 0.63em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.31em 0.15em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.33em 0.49em / 0 0 no-repeat, linear-gradient(#000 0 0) 0.11em 0.66em / 0 0 no-repeat; mask-composite: subtract, add, add, add, add, add, add, add, add;
  animation: lt-leak-holes 5s step-end infinite; }
.v2 #program .word a:nth-child(2) .lt::after, .v2 #program #ses-2 .letter-tile .lt::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; box-shadow: 0.605em 0.355em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); animation: lt-leak-fly 5s linear infinite; }
@keyframes lt-leak-holes {
  0% { -webkit-mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  8% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  15% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  22% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0, 0 0; }
  29% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0; }
  36% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0; }
  43% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0; }
  50% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0; }
  57% { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em; }
  92% { -webkit-mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { -webkit-mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
@keyframes lt-leak-fly {
  0% { box-shadow: 0.605em 0.355em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  8% { box-shadow: 0.605em 0.355em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  14.4% { box-shadow: 0.731em 0.265em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  15% { box-shadow: 0.75em 0.252em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  20% { box-shadow: 0.907em 0.139em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.649em 0.116em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  21.4% { box-shadow: 0.949em 0.11em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.675em 0.091em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  22% { box-shadow: 0.966em 0.097em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.693em 0.074em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  24% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.753em 0.017em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.636em 0.781em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  27% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.843em -0.069em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.698em 0.789em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  28.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.882em -0.106em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.727em 0.793em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  29% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.899em -0.122em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.747em 0.796em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  31% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.813em 0.805em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.62em 0.522em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  34% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.912em 0.818em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.688em 0.502em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  35.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em 0.824em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.719em 0.493em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  36% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.973em 0.827em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.741em 0.487em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  38% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.813em 0.466em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.548em 0.681em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  41% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.921em 0.434em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.613em 0.676em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  42.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.968em 0.42em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.643em 0.673em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  43% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.988em 0.415em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.664em 0.671em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  45% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.733em 0.665em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.393em 0.166em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  48% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.836em 0.656em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.435em 0.107em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  49.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.881em 0.652em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.455em 0.079em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  50% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.901em 0.651em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.468em 0.06em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  52% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.514em -0.003em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.423em 0.524em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  55% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.581em -0.097em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.479em 0.493em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  56.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.61em -0.139em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.505em 0.479em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  57% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.623em -0.156em 0 0.061em color-mix(in srgb, var(--c) 43%, transparent), 0.523em 0.469em 0 0.061em color-mix(in srgb, var(--c) 98%, transparent), 0.165em 0.715em 0 0.061em var(--c); }
  59% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.583em 0.436em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent), 0.197em 0.687em 0 0.061em var(--c); }
  62% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.673em 0.387em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent), 0.245em 0.645em 0 0.061em var(--c); }
  63.4% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.712em 0.365em 0 0.061em color-mix(in srgb, var(--c) 55%, transparent), 0.267em 0.625em 0 0.061em var(--c); }
  66% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.785em 0.325em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.333em 0.567em 0 0.061em color-mix(in srgb, var(--c) 93%, transparent); }
  69% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.785em 0.325em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.41em 0.499em 0 0.061em color-mix(in srgb, var(--c) 85%, transparent); }
  73% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.785em 0.325em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.505em 0.415em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent); }
  82% { box-shadow: 1.025em 0.055em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.955em -0.175em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.035em 0.835em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 1.055em 0.395em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.965em 0.645em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.665em -0.215em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.785em 0.325em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent), 0.505em 0.415em 0 0.061em color-mix(in srgb, var(--c) 0%, transparent); }
  87% { box-shadow: 0.731em 0.265em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.675em 0.091em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.727em 0.793em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.719em 0.493em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.643em 0.673em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.455em 0.079em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.505em 0.479em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent), 0.267em 0.625em 0 0.061em color-mix(in srgb, var(--c) 90%, transparent); }
  92% { box-shadow: 0.605em 0.355em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
  100% { box-shadow: 0.605em 0.355em 0 0.061em var(--c), 0.555em 0.205em 0 0.061em var(--c), 0.595em 0.775em 0 0.061em var(--c), 0.575em 0.535em 0 0.061em var(--c), 0.505em 0.685em 0 0.061em var(--c), 0.365em 0.205em 0 0.061em var(--c), 0.385em 0.545em 0 0.061em var(--c), 0.165em 0.715em 0 0.061em var(--c); }
}
/* B — разрыв */
.v2 #program .word a:nth-child(3) .lt, .v2 #program #ses-3 .letter-tile .lt { color: transparent; }
.v2 #program .word a:nth-child(3) .lt::before, .v2 #program #ses-3 .letter-tile .lt::before, .v2 #program .word a:nth-child(3) .lt::after, .v2 #program #ses-3 .letter-tile .lt::after { content: "B"; position: absolute; inset: 0; color: var(--c); animation: 3.6s ease-in-out infinite; }
.v2 #program .word a:nth-child(3) .lt::before, .v2 #program #ses-3 .letter-tile .lt::before { clip-path: polygon(0 0, 100% 0, 100% 50%, 80% 56%, 62% 47%, 42% 57%, 22% 48%, 0 55%); animation-name: lt-break-l; }
.v2 #program .word a:nth-child(3) .lt::after, .v2 #program #ses-3 .letter-tile .lt::after { clip-path: polygon(0 58%, 22% 51%, 42% 60%, 62% 50%, 80% 59%, 100% 53%, 100% 100%, 0 100%); animation-name: lt-break-r; }
@keyframes lt-break-l { 0%, 35%, 100% { transform: none; } 50%, 80% { transform: translate(0, -.045em) rotate(-2deg); } }
@keyframes lt-break-r { 0%, 35%, 100% { transform: none; } 50%, 80% { transform: translate(0, .035em) rotate(1.5deg); } }
/* I — разворот курса: --ib — низ заливки (% от низа строки), заливка — половина буквы (35%); буква в строке от 17% до 87%, середина — 52%;
   в покое заливка — 15–50% (красная) или 54–89% (зелёная), короткий переход 50–54% виден только в движении; пустое — серое #4A5A68 */
.v2 #program .word a:nth-child(4) .lt, .v2 #program #ses-4 .letter-tile .lt { color: transparent;
  background: linear-gradient(to top, #4A5A68 var(--ib), transparent 0 calc(var(--ib) + 35%), #4A5A68 0), linear-gradient(to top, var(--alarm-1) 50%, var(--sig-1) 54%);
  background: linear-gradient(to top, #4A5A68 var(--ib), transparent 0 calc(var(--ib) + 35%), #4A5A68 0), linear-gradient(to top in oklch, var(--alarm-1) 50%, var(--sig-1) 54%);
  -webkit-background-clip: text; background-clip: text; }
.v2 #program .word a:nth-child(4) .lt, .v2 #program #ses-4 .letter-tile .lt { animation: lt-invert-1 5.6s infinite; }
@keyframes lt-invert-1 {
  0%, 16% { --ib: 54%; transform: perspective(2em) rotateX(0deg); animation-timing-function: ease-in; }
  26% { --ib: 54%; transform: perspective(2em) rotateX(90deg); animation-timing-function: step-end; }
  26.5% { --ib: 15%; transform: perspective(2em) rotateX(-90deg); animation-timing-function: ease-out; }
  36%, 44% { --ib: 15%; transform: perspective(2em) rotateX(0deg); animation-timing-function: ease-in-out; }
  88%, 100% { --ib: 54%; transform: perspective(2em) rotateX(0deg); } }
/* T — заправка жидкостью: svg.lt-tank обрезан по букве (clipPath с текстом «T», замер Russo One: буква от y 124 до 822 из 1000, середина — 473);
   .lvl — уровень, ходит от середины до верха и обратно; две синусоиды (λ 300, размах 35) бегут навстречу — передняя в цвет буквы, задняя бледнее */
.v2 #program .word a:nth-child(5)::before, .v2 #program #ses-5 .letter-tile::before { content: "T"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  line-height: 1; color: transparent; -webkit-text-stroke: .035em var(--c); pointer-events: none; } /* контур буквы поверх жидкости */
.v2 #program .word a:nth-child(5) .lt, .v2 #program #ses-5 .letter-tile .lt { color: color-mix(in srgb, var(--c) 18%, transparent); }
.v2 #program .lt-tank { position: absolute; left: 0; top: 0; width: .62em; height: 1em; overflow: visible; pointer-events: none; }
.v2 #program .lt-tank .lvl { transform: translateY(300px); animation: lt-tank 6s ease-in-out infinite; }
.v2 #program .lt-tank .wv { fill: var(--c); animation: lt-wave 1.6s linear infinite; }
.v2 #program .lt-tank .wv.back { fill: color-mix(in srgb, var(--c) 55%, transparent); translate: 0 -14px; animation: lt-wave-back 2.4s linear infinite; }
@keyframes lt-tank { 0%, 6% { transform: translateY(473px); } 50%, 62% { transform: translateY(70px); } 100% { transform: translateY(473px); } }
@keyframes lt-wave { from { transform: translateX(0); } to { transform: translateX(300px); } }
@keyframes lt-wave-back { from { transform: translateX(150px); } to { transform: translateX(-150px); } }
/* S — маршрут по дороге: буква — асфальт (--t-paper-2) с краями в цвете буквы; поверх — svg.lt-road (замер Russo One, 670×1000 на 1em).
   Средняя линия идёт по изгибам буквы: внешние скругления буквы — радиус 160, средняя линия — дуги радиуса 80 с тем же центром.
   Маршрут (.way) — толстая линия по средней линии, обрезанная по букве (clipPath с текстом «S»): закрашивает букву на всю ширину;
   растёт за точкой (.car — штрих нулевой длины с круглым концом, едет по stroke-dashoffset); поверх — белая разметка и линия старта; финиш — флажок */
.v2 #program .word a:nth-child(6) .lt, .v2 #program #ses-6 .letter-tile .lt { color: var(--t-paper-2); -webkit-text-stroke: .03em color-mix(in srgb, var(--c) 70%, transparent); }
.v2 #program .lt-road { position: absolute; left: 0; top: 0; width: .67em; height: 1em; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.v2 #program :is(.lt-road, .lt-tank) text { font: 400 1000px var(--h); }
.v2 #program .lt-road .lane { stroke: rgba(242,238,227,.6); stroke-width: 24; stroke-dasharray: 3 3.4; stroke-linecap: butt; }
.v2 #program .lt-road .start { stroke: #fff; stroke-width: 34; stroke-linecap: butt; }
.v2 #program .lt-road .way { stroke: var(--c); stroke-width: 230; stroke-linecap: butt; stroke-dasharray: 2050 4000; stroke-dashoffset: 114; animation: lt-way 5.4s linear infinite; } /* путь 2046: 120 до старта, 1816 по букве, 110 после */
.v2 #program .lt-road .car { stroke: #fff; stroke-width: 124; stroke-dasharray: .01 200; stroke-dashoffset: -100; animation: lt-car 5.4s linear infinite; }
.v2 #program .word a:nth-child(6) .lt::after, .v2 #program #ses-6 .letter-tile .lt::after { content: ""; position: absolute; right: -.24em; top: -.02em; width: .22em; height: .32em;
  background: linear-gradient(#fff, #fff) 0 0 / .03em 100% no-repeat, repeating-conic-gradient(var(--c) 0 25%, #fff 0 50%) .03em 0 / .1em .08em;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / .03em 100% no-repeat, linear-gradient(#000, #000) .03em 0 / .19em .16em no-repeat;
  mask: linear-gradient(#000, #000) 0 0 / .03em 100% no-repeat, linear-gradient(#000, #000) .03em 0 / .19em .16em no-repeat;
  transform-origin: 0 100%; animation: lt-finish 5.4s ease-in-out infinite; }
@keyframes lt-way { 0%, 8% { stroke-dashoffset: 1930; opacity: 1; animation-timing-function: ease-in-out; } 58%, 88% { stroke-dashoffset: 114; opacity: 1; }
  95% { stroke-dashoffset: 114; opacity: 0; } 96%, 100% { stroke-dashoffset: 1930; opacity: 0; } }
@keyframes lt-car { 0%, 8% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-in-out; } 58%, 88% { stroke-dashoffset: -100; opacity: 1; }
  95% { stroke-dashoffset: -100; opacity: 0; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lt-finish { 0%, 59% { opacity: .35; transform: scale(.85); } 66% { opacity: 1; transform: scale(1.15); } 72%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: .35; transform: scale(.85); } }
/* Карточка 1 «Увидеть картину» (владелец 04.11: глаз не нравится, карточки O и R похожи — другой рисунок; из 4 вариантов выбран «40 признаков»):
   40 клеток в 4 столбцах — 4 режима по 10 признаков; клетки загораются по одной, как отметки чек-листа (--s1p — сколько отмечено, --i — номер клетки),
   потом рамкой выделяется самый полный столбец — Ваш режим. Цвет тише (владелец 04.11): пустые клетки --sig-4, отмеченные --sig-3, ярко только Ваш столбец */
@property --s1p { syntax: "<number>"; inherits: true; initial-value: 0; }
.sviz.s1-signs .g { --s1p: 17; animation: s1-count 6.4s linear infinite; }
.sviz.s1-signs rect { stroke-width: 1.5; }
.sviz.s1-signs .cell { fill: none; stroke: #2E6B4E; }
.sviz.s1-signs .on { fill: #2E9E6B; stroke: #2E6B4E; fill-opacity: clamp(0, calc(var(--s1p) - var(--i) + 1), 1); }
.sviz.s1-signs .on.win { fill: #7FE0A8; }
.sviz.s1-signs .frame { fill: #7FE0A8; fill-opacity: .08; stroke: #7FE0A8; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: s1-frame 6.4s ease-out infinite; }
@keyframes s1-count { 0%, 4% { --s1p: 0; } 40%, 86% { --s1p: 17; } 92%, 100% { --s1p: 0; } }
@keyframes s1-frame { 0%, 43% { opacity: 0; transform: scale(1.06); } 49%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v2 #program .lt, .v2 #program .lt::before, .v2 #program .lt::after, .v2 #program :is(.lt-road, .lt-tank) *, .v2 #program :is(.word a, .letter-tile)::before, .v2 #program :is(.word a, .letter-tile)::after { animation: none !important; }
  .v2 #program .word a:nth-child(2) .lt::before, .v2 #program #ses-2 .letter-tile .lt::before { -webkit-mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0; mask-size: 100% 100%, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0.11em 0.11em, 0 0, 0 0, 0 0, 0 0; }
  .v2 #program .word a:nth-child(2) .lt::after, .v2 #program #ses-2 .letter-tile .lt::after { display: none; }
}