/* Шрифты лежат у нас, а не на серверах Google.

   Раньше страница шла за ними на fonts.googleapis.com и fonts.gstatic.com:
   два лишних соединения до первой буквы текста, и оба к чужому домену.
   Взяты только кириллица и латиница: греческого и вьетнамского на сайте нет.

   Оба шрифта переменные: один файл держит все начертания разом. Раньше
   лежали отдельные файлы на 400, 500 и 600 — и это были копии одного и того
   же файла под разными именами, браузер качал их все. Теперь по одному файлу
   на алфавит, а вес задаётся диапазоном. */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Капсула — визуальная система v4
   Характер: премиальный IT-сервис под macOS. Тёмная сцена, стекло, монохром + один зелёный.
   Шрифт: Onest, моно — JetBrains Mono. Оба лежат у нас. Без библиотек. */

:root {
  --bg: #0a0b0d;
  --glass-line: rgba(255, 255, 255, .1);
  --glass-line-2: rgba(255, 255, 255, .16);

  --paper: #eef1f0;
  --white: #fff;

  --ink: #0a0b0d;
  --ink-2: #40464d;
  --ink-3: #666c73;
  --line: #e4e6e9;
  /* Единственная тень на светлых панелях: без неё они читаются
     как дырки в фоне, а не как предметы на подложке. */
  --shadow-1: 0 1px 2px rgba(12, 18, 20, .04), 0 14px 30px -20px rgba(12, 18, 20, .18);
  --line-2: #cbcfd4;

  --on-dark: #f0f2f4;
  --on-dark-2: #a7aeb6;
  --on-dark-3: #8b929a;

  --g: #0d7a4e;
  --g-hover: #0a6340;
  --g-tint: #eaf3ee;
  --g-line: #bcdccb;
  --g-bright: #35d98d;

  --wrap: 1180px;
  --wrap-wide: 1400px;

  --pad-xl: clamp(72px, 7.2vw, 120px);
  --pad-l: clamp(56px, 5.6vw, 92px);
  --gut: clamp(20px, 3.6vw, 56px);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2, .6, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  /* Липкая шапка перекрывала и цель якоря, и элемент, на который увели фокус. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--g); text-decoration-color: var(--g-line); text-underline-offset: .18em; }
a:hover { color: var(--g-hover); text-decoration-color: currentColor; }
/* Светлых секций на странице большинство, поэтому основной цвет обводки
   тёмно-зелёный: bright на белом даёт контраст 1,8 при норме 3. */
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 4px; }
.sec--dark :focus-visible { outline-color: var(--g-bright); }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* Текст только для читалок экрана: заголовки таблицы и подписи,
   которые видящему человеку понятны из вёрстки. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Убирает задержку двойного тапа на iOS: без неё каждое нажатие
   на кнопку или ссылку отзывается через треть секунды. */
a, button, [role="tab"], input[type="range"] { touch-action: manipulation; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); color: var(--ink); padding: 14px 20px; text-decoration: none; }
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.wrap--wide { max-width: var(--wrap-wide); }

/* Типографика */

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.4vw, 100px); line-height: .96; letter-spacing: -.048em; }
h2 { font-size: clamp(29px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.028em; }
h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; letter-spacing: -.022em; }
p { margin: 0; text-wrap: pretty; }

.eyebrow { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
/* Широкое содержимое прокручивается внутри себя, а не ломает страницу.
   Обёртка стояла в разметке, но правил к ней не было, и таблица сравнения
   на телефоне обрезалась вместе с двумя последними колонками. */
.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.scroller:focus-visible { outline: 2px solid var(--g); outline-offset: 4px; }

/* Предел один: ширина контейнера, но не длиннее 1400px. Узкая колонка
   внутри широкого контейнера и есть та самая «сбитость влево». */
.lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: min(100%, 1400px); letter-spacing: -.014em; text-wrap: pretty; }

/* Ритм */

.sec { padding-block: var(--pad-xl); }
.sec--l { padding-block: var(--pad-l); }
.sec--tight-top { padding-top: 0; }
.sec--white { background: var(--white); }
.sec--dark { background: var(--bg); color: var(--on-dark); }
.sec--dark .lede, .sec--dark p { color: var(--on-dark-2); }
.sec--dark .eyebrow { color: var(--g-bright); }

.sec-head { display: grid; gap: 18px; margin-bottom: clamp(28px, 3vw, 48px); }
/* Там, где под заголовком есть подзаголовок, воздуха нужно больше. */
/* Шапка секции в две колонки: заголовок слева, пояснение справа.
   Приём был прописан трижды под разными id (#voice, #calendar, #research),
   и остальные секции его не получали — теперь он живёт на классе. */
.sec-head--split { margin-bottom: clamp(40px, 4.4vw, 72px); }
@media (min-width: 1101px) {
  .sec-head--split {
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr);
    column-gap: clamp(50px, 8vw, 140px);
    align-items: end;
  }
  .sec-head--split .eyebrow,
  .sec-head--split h2 { grid-column: 1; }
  .sec-head--split .lede {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 52ch;
    padding-bottom: 2px;
  }
  /* Без надзаголовка лид занимает одну строку, а не две */
  .sec-head--split h2:first-child ~ .lede { grid-row: 1; }
}

/* Кнопки */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-size: 16.5px; letter-spacing: -.014em;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--g); color: #fff; }
.btn--primary:hover { background: var(--g-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--g-bright); color: #052a17; }
.btn--glass { background: rgba(255, 255, 255, .08); color: var(--on-dark); border-color: var(--glass-line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 19px; font-size: 15px; }

/* ─── Шапка ───────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 11, 13, .6);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck { background: rgba(10, 11, 13, .82); border-bottom-color: rgba(255, 255, 255, .08); }
.nav__in { display: flex; align-items: center; gap: var(--gut); min-height: 66px; }
.nav__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16.5px; letter-spacing: -.03em; color: var(--on-dark); text-decoration: none; }
.mark {
  position: relative;
  width: 12px;
  height: 20px;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(68, 82, 77, .34);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(226, 235, 232, .44));
  box-shadow: inset 2px 0 3px rgba(255, 255, 255, .92), 0 2px 5px rgba(26, 52, 40, .1);
}
.mark::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 2px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
}
.mark::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 48%;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, #67e5a9 0%, var(--g-bright) 38%, var(--g) 100%);
  box-shadow: 0 -1px 0 rgba(13, 122, 78, .34), inset 0 1px 1px rgba(255, 255, 255, .42);
}
.nav__links { display: none; gap: 2px; margin-inline: auto; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--on-dark-2); text-decoration: none; font-size: 15.5px; border-radius: var(--r-pill); transition: color .15s var(--ease), background-color .15s var(--ease); }
.nav__links a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .07); }
.nav__cta { margin-left: auto; }
@media (min-width: 980px) { .nav__links { display: flex; } .nav__cta { margin-left: 0; }}

.burger { display: inline-grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--on-dark); border-radius: 2px; transition: transform .2s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 980px) { .burger { display: none; }}

.menu { border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 11, 13, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.menu__in { display: grid; padding: 6px var(--gut) 18px; }
.menu__in a { display: flex; align-items: center; min-height: 52px; color: var(--on-dark); text-decoration: none; font-size: 17px; letter-spacing: -.02em; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.menu__in a:last-child { border-bottom: 0; }
.menu__in a:hover { color: var(--g-bright); }
@media (min-width: 980px) { .menu { display: none; }}

/* ─── Первый экран ────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--bg);
  color: var(--on-dark);
  padding-top: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(56px, 7vw, 120px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -18%; width: min(1500px, 150vw); aspect-ratio: 1.4;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 45%, rgba(53, 217, 141, .13), rgba(53, 217, 141, 0) 58%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}

.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(36px, 4.5vw, 60px); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 72px); }}

.hero__pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  padding: 8px 15px 8px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; letter-spacing: .02em; color: var(--on-dark-2);
}
.hero__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-bright); box-shadow: 0 0 0 4px rgba(53, 217, 141, .16); flex: none; }

.hero h1 { margin-bottom: 24px; color: #fff; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--on-dark-2); }

/* Пояснение внутри заголовка: набрано мелко и спокойно, чтобы не спорить
   со слоганом, но поиск видит его как часть H1. */
.hero__h1sub {
  display: block;
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--on-dark-2);
}
.hero .lede { color: var(--on-dark-2); max-width: 46ch; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }

/* Сцена первого экрана */

.stage {
  position: relative;
  width: 100%; max-width: 620px; margin-inline: auto;
  aspect-ratio: 1 / .96;
  min-height: 340px;
}

@media (max-width: 620px) {
  .stage { aspect-ratio: 1 / 1.05; }}

.ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--g-tint); color: var(--g); flex: none; }
.ic svg { width: 19px; height: 19px; display: block; }
.ic--lg { width: 40px; height: 40px; border-radius: 11px; }
.ic--lg svg { width: 22px; height: 22px; }
.ic--sm { width: 22px; height: 22px; border-radius: 6px; background: transparent; }
.ic--sm svg { width: 17px; height: 17px; }
.sec--dark .ic { background: rgba(53, 217, 141, .12); color: var(--g-bright); }
.sec--dark .ic--sm { background: transparent; }

.gauge {
  margin-top: clamp(44px, 4.4vw, 72px);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--paper);
  display: grid; gap: 16px;
  box-shadow: var(--shadow-1);
}
.gauge__h { font-size: 11.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); }
.gauge__row { display: grid; grid-template-columns: minmax(110px, 22%) minmax(0, 1fr) 52px; gap: 14px; align-items: center; }
.gauge__l { font-size: 15px; color: var(--ink-2); }
.gauge__bar { height: 12px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.gauge__bar i { display: block; height: 100%; background: var(--g); border-radius: var(--r-pill); transform-origin: left; animation: grow 1s var(--ease-out) both; }
.gauge__bar--flat i { background: var(--line-2); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gauge__v { font-size: 17px; font-weight: 600; letter-spacing: -.03em; color: var(--g); text-align: right; font-variant-numeric: tabular-nums; }
.gauge__v--flat { color: var(--ink-3); font-weight: 600; }
.gauge__note { font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 560px) {
  .gauge__row { grid-template-columns: 1fr auto; }
  .gauge__bar { grid-column: 1 / -1; order: 3; }}

.tl {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--paper);
  padding: clamp(18px, 1.9vw, 26px);
  display: grid; gap: 12px;
  box-shadow: var(--shadow-1);
}

/* ─── Небольшой продуктовый polish v140 ─────────────────────
   В интерактивных и коммерческих главах добавляем ровно столько
   контекста, сколько нужно для следующего действия. */
#research .load__ctl { position: relative; }
#research .load__prompt {
  margin: 0 0 2px;
  color: var(--g);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#research .load__row {
  transition: background-color .18s var(--ease), padding-inline .18s var(--ease);
}
#research .load__row:hover { background: rgba(53, 217, 141, .045); }
#research .load__row input[type="range"]:focus-visible + .load__v { color: var(--g); }
#price .plan--offline { border-top: 3px solid var(--g); }

/* Белая нижняя часть не должна превращаться в бесконечный лист бумаги.
   Оставляем её лёгкой, но даём цене и установке разные, почти физические
   источники mint-света — как от самой капсулы. */
#price,
#who {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#price::before,
#who::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(53, 217, 141, .12), rgba(53, 217, 141, .035) 34%, transparent 70%);
}
#price::before { top: -42%; right: -20%; }
#who::before { bottom: -58%; left: -24%; opacity: .72; }
#price > .wrap,
#who > .wrap { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .minute__step { transition: transform .24s var(--ease-out); }
  .minute__step:hover { transform: translateY(-3px); }
}
@media (min-width: 560px) { .tl { grid-column: 1 / -1; }}
.tl__h { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.tl__track { position: relative; height: 42px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.tl__b { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; display: grid; align-items: center; padding: 0 8px; font-size: 12px; letter-spacing: -.01em; overflow: hidden; }
.tl__b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__b--ev { background: var(--g); color: #fff; }
.tl__b--free { background: var(--g-tint); border: 1px solid var(--g-line); color: var(--g); }
.tl__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Стал заголовком ради структуры, вид прежний. */
.step .ic { margin-bottom: 4px; }
.step { display: grid; gap: 13px; align-content: start; padding-top: 28px; border-top: 1px solid var(--line-2); }
.step p { color: var(--ink-2); font-size: 16px; }
.step code { background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.aside-note { margin-top: clamp(40px, 4vw, 64px); padding-left: clamp(20px, 2vw, 28px); border-left: 2px solid var(--g); color: var(--ink-2); font-size: 16px; max-width: min(100%, 1240px); }

/* ─── Разбор фраз ─────────────────────────────────────────── */

.parse { display: grid; border-top: 1px solid var(--line-2); max-width: 1040px; }
.parse__row {
  display: grid; gap: 10px; align-items: center; width: 100%;
  padding: clamp(16px, 1.7vw, 22px) 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (min-width: 940px) { .parse__row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: clamp(16px, 2vw, 36px); }}
.parse__said { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.45; letter-spacing: -.022em; }
.parse__arrow { display: none; color: var(--line-2); justify-self: center; transition: color .18s var(--ease), transform .18s var(--ease); }
@media (min-width: 940px) { .parse__arrow { display: block; }}
.parse__arrow::before { content: "→"; font-size: 18px; }
.parse__row:hover .parse__arrow, .parse__row.is-lit .parse__arrow { color: var(--g); transform: translateX(3px); }

.switch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: clamp(24px, 2.6vw, 36px); }
.switch__hint { font-size: 14px; color: var(--ink-3); }
.tabs--light .tab { border-color: var(--line-2); color: var(--ink-2); }
.tabs--light .tab:hover { color: var(--ink); border-color: var(--ink-3); }
.tabs--light .tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.tok {
  font-weight: 400; border-radius: 5px; padding: 1px 3px; margin: 0 -3px;
  background: transparent; box-shadow: none;
  transition: background-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.parse__row:hover .tok { box-shadow: inset 0 -1px 0 var(--line-2); }
.parse__row.is-lit .tok--when { background: var(--g); color: #fff; box-shadow: none; }
.parse__row.is-lit .tok--rep { background: var(--g-tint); color: var(--g); box-shadow: inset 0 0 0 1px var(--g-line); }
.parse__row.is-lit .tok--who { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.parse__row.is-lit .tok--dur { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.parse__row.is-lit .tok--type { background: var(--ink); color: #fff; box-shadow: none; }

.legend { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 14px; font-size: 13px; }
.legend .tok { font-size: 13px; margin: 0; padding: 2px 7px; }
.legend .tok--when { background: var(--g); color: #fff; box-shadow: none; }
.legend .tok--rep { background: var(--g-tint); color: var(--g); box-shadow: inset 0 0 0 1px var(--g-line); }
.legend .tok--who { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.legend .tok--dur { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.legend .tok--type { background: var(--ink); color: #fff; box-shadow: none; }
.parse__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 11px; }
.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; flex: none; border-radius: var(--r-pill); background: var(--g-tint); color: var(--g); border: 1px solid var(--g-line); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tag--task { background: transparent; color: var(--ink-3); border-color: var(--line-2); }
.parse__val { font-size: 15.5px; letter-spacing: -.014em; }
.parse__val b { font-weight: 600; }
.parse__val i { font-style: normal; color: var(--ink-3); }

/* ─── Живое поле: своя фраза ──────────────────────────────── */

.tryit { margin: clamp(28px, 3vw, 44px) 0 0; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px) clamp(16px, 2vw, 24px); border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-1); }
.tryit__label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; margin: 0 0 10px; }
.tryit__field { display: flex; flex-wrap: wrap; gap: 10px; }
.tryit__input { flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; letter-spacing: -.012em; }
.tryit__input::placeholder { color: var(--ink-3); }
.tryit__input:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; border-color: transparent; }
.tryit__go { flex: 0 0 auto; height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-m); background: var(--g); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .16s var(--ease); }
.tryit__go:hover { background: var(--g-hover); }
.tryit__ex { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tryit__chip { border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; padding: 4px 11px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color .16s var(--ease), color .16s var(--ease); }
.tryit__chip:hover { border-color: var(--g-line); color: var(--g); }
.tryit__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.tryout { margin: 16px 0 0; min-height: 62px; }
.tryout__card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); animation: tryPop .28s var(--ease-out) both; }
.tryout__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.tryout__bar { flex: none; width: 3px; align-self: stretch; min-height: 28px; border-radius: 2px; background: var(--g); }
.tryout__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.tryout__txt b { font-size: 16px; font-weight: 600; letter-spacing: -.014em; overflow-wrap: anywhere; }
.tryout__txt em { font-style: normal; font-size: 13.5px; color: var(--ink-3); }
.tryout__kind { flex: none; align-self: flex-start; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tryout__card--ev .tryout__kind { background: var(--g-tint); border-color: var(--g-line); color: var(--g); }

@keyframes tryPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tryout__card { animation: none; }}

/* Без скриптов поле не работает: прячем, чтобы не обмануть */
@media (scripting: none) { .tryit { display: none; }}

/* ─── Команды ─────────────────────────────────────────────── */

.cmds { display: grid; border-top: 1px solid var(--line-2); }
.cmd { display: grid; gap: 7px 26px; align-items: baseline; padding: clamp(16px, 1.7vw, 24px) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 940px) { .cmd { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }}
.cmd__key { justify-self: start; padding: 7px 14px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; transition: background-color .18s var(--ease); }
.cmd__what { color: var(--ink-2); font-size: 16px; }

.cmds__note { margin-top: 20px; font-size: 14.5px; color: var(--ink-3); max-width: min(100%, 1240px); }

/* ─── Календарь и созвоны ─────────────────────────────────── */

.split { display: grid; gap: clamp(36px, 4.5vw, 68px); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }}
.split__text { display: grid; gap: clamp(26px, 2.8vw, 40px); }

.shots { display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 560px) { .shots { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }}

/* ─── Приватность ─────────────────────────────────────────── */

/* Путь голоса. Связь между шагами и есть содержание блока: три звена
   соединены сплошной линией, перед облаком она обрывается. Коробок нет —
   в четырёх одинаковых рамках эта мысль не читалась вовсе. */
.path { display: grid; gap: 30px; }
@media (min-width: 940px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  /* Линия идёт от знака вправо, в промежуток до следующего шага */
  .path__step::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 62px;
    right: -40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(53, 217, 141, .55), rgba(53, 217, 141, .3));
  }
  /* Перед облаком связь рвётся: пунктир, который не доходит до конца */
  .path__step:nth-child(3)::after {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 3px, transparent 3px 8px);
    -webkit-mask-image: linear-gradient(90deg, #000 0 26%, transparent 76%);
    mask-image: linear-gradient(90deg, #000 0 26%, transparent 76%);
  }
  .path__step:last-child::after { display: none; }
}
.path__step { position: relative; display: grid; gap: 11px; align-content: start; }
.path__step b { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--on-dark); }
.path__step em { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-3); }
/* Шаг, которого не происходит: знак без заливки, текст глуше */
.path__step--off .ic { background: transparent; border: 1px dashed rgba(255, 255, 255, .22); color: var(--on-dark-3); }
.path__step--off b { color: var(--on-dark-2); }
/* На узком экране знак уходит в свою колонку, а линия идёт по ней:
   иначе она пересекала бы текст описаний. */
@media (max-width: 939px) {
  .path__step {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
  }
  .path__step .ic { grid-column: 1; grid-row: 1 / span 2; }
  .path__step b,
  .path__step em { grid-column: 2; }
  .path__step::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: -30px;
    width: 1px;
    background: linear-gradient(180deg, rgba(53, 217, 141, .55), rgba(53, 217, 141, .3));
  }
  .path__step:nth-child(3)::after {
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .3) 0 3px, transparent 3px 8px);
    -webkit-mask-image: linear-gradient(180deg, #000 0 26%, transparent 76%);
    mask-image: linear-gradient(180deg, #000 0 26%, transparent 76%);
  }
  .path__step:last-child::after { display: none; }
}
.night-note { margin-top: clamp(32px, 3.2vw, 48px); padding-top: clamp(24px, 2.4vw, 32px); border-top: 1px solid rgba(255, 255, 255, .1); max-width: min(100%, 1240px); font-size: 16px; }

/* ─── ИИ-помощник ─────────────────────────────────────────── */

.assist { display: grid; gap: clamp(18px, 2vw, 28px); }
@media (min-width: 940px) { .assist { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }}

.dialog {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: clamp(20px, 2.2vw, 32px);
  display: grid; gap: 14px; align-content: start;
}
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { min-height: 44px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--on-dark-2); font: inherit; font-size: 14px; cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.tab:hover { color: var(--on-dark); border-color: rgba(255, 255, 255, .3); }
.tab[aria-selected="true"] { background: var(--g-bright); border-color: var(--g-bright); color: #052a17; font-weight: 600; }

.bubbles { display: grid; gap: 10px; }
.bub { display: grid; gap: 4px; max-width: 90%; padding: 13px 16px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; letter-spacing: -.014em; }
/* Цвет пузырей задан через .bubbles: общее правило тёмной секции
   (.sec--dark p) весит два класса и перебивало одиночный .bub--me.
   Из-за этого тёмный текст на зелёном пузыре становился серым:
   контраст 1,22 при норме 4,5, то есть надпись пропадала. */
.bubbles .bub--app { justify-self: start; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: var(--on-dark); border-bottom-left-radius: 6px; }
.bubbles .bub--me { justify-self: end; background: var(--g-bright); color: #052a17; border-bottom-right-radius: 6px; }
.bub__who { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; opacity: .6; }
.dialog__note { font-size: 13.5px; color: var(--on-dark-3); }

.assist-side { display: grid; gap: clamp(14px, 1.6vw, 20px); align-content: start; padding-top: 6px; }
.assist-side__t { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--g-bright); }
/* Строки возможностей. Значки рядом с каждой были мельче текста и ничего
   к нему не добавляли; вместо них тонкие линии между строками. */
.pro-list {
  list-style: none;
  margin: clamp(6px, 1vw, 14px) 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.pro-list li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 15.5px;
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--on-dark-2);
}

/* ─── Цена ────────────────────────────────────────────────── */

.plans { display: grid; gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }
@media (min-width: 940px) { .plans { grid-template-columns: 1fr 1fr; }}
/* Колонка, а не сетка: кнопка прижимается к низу, и в паре карточек
   разной длины она стоит на одной линии. */
.plan {
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--white);
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow-1);
}
.plan > .btn { margin-top: auto; align-self: start; }
.plan--pro > .btn { align-self: stretch; }
.plan--pro { border-color: var(--g); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.plan__price { font-size: clamp(32px, 3vw, 44px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.plan--pro .plan__price { color: var(--g); }
.plan__price small { font-size: 16.5px; font-weight: 400; letter-spacing: -.01em; color: var(--ink-3); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15.5px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-2); }
.plan li::before { content: "→"; color: var(--g); }
.plan .btn { justify-self: start; }

.tiers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
@media (min-width: 480px) { .tiers { grid-template-columns: repeat(2, 1fr); }}
.tier { background: var(--white); padding: 16px 18px; display: grid; gap: 5px; }
.tier__p { font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
.tier__l { font-size: 13px; color: var(--ink-3); }
.tier--best { background: var(--g-tint); }
.tier--best .tier__l { color: var(--g); font-weight: 600; }

.price-note { margin-top: clamp(28px, 2.8vw, 42px); font-size: 15px; color: var(--ink-3); max-width: min(100%, 1240px); }

/* ─── Вопросы ─────────────────────────────────────────────── */

.faq { display: grid; border-top: 1px solid var(--line-2); }
@media (min-width: 940px) { .faq { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 4.6vw, 88px); }}
.faq__item { padding: clamp(22px, 2.1vw, 30px) 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.faq__q { font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
.faq__a { font-size: 16.5px; color: var(--ink-2); }

/* ─── Финал и подвал ──────────────────────────────────────── */

.final { text-align: center; display: grid; gap: 22px; justify-items: center; position: relative; z-index: 1; }
.final h2 { font-size: clamp(38px, 5.6vw, 88px); letter-spacing: -.05em; line-height: .98; color: #fff; }
.final .lede { max-width: 34ch; }
.final .btn { margin-top: 10px; }
.final__meta { font-size: 14.5px; color: var(--on-dark-3); }
.sec--glow { position: relative; overflow: hidden; }
.sec--glow::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: min(1100px, 130vw); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 50%, rgba(53, 217, 141, .14), rgba(53, 217, 141, 0) 62%); pointer-events: none; }

.foot { background: var(--bg); color: var(--on-dark-2); padding-bottom: clamp(44px, 4.4vw, 68px); font-size: 15px; }
.foot a { color: var(--on-dark); text-decoration-color: rgba(255, 255, 255, .25); }
.foot a:hover { color: var(--g-bright); }
.foot__grid { display: grid; gap: 30px; padding-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid rgba(255, 255, 255, .09); }
@media (min-width: 940px) { .foot__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--gut); }}
.foot__brand { display: grid; gap: 10px; align-content: start; }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); font-weight: 600; font-size: 16.5px; letter-spacing: -.03em; }
.foot .mark { border-color: rgba(255, 255, 255, .34); background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05)); }
.foot__col { display: grid; gap: 4px; align-content: start; }
.foot__head { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 6px; }
.foot__col a { display: inline-flex; align-items: center; min-height: 36px; }
.foot__legal { font-size: 13.5px; line-height: 1.7; color: var(--on-dark-3); }
/* Кнопка остановки показов: нужна редко, поэтому живёт в подвале
   и выглядит как обычная ссылка рядом с остальными. */
.foot__motion {
  justify-self: start;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 36px;
}
.foot__motion:hover { color: var(--on-dark); }

/* Все циклы разом: человек попросил тишины. */
.is-still .reel.is-live *,
.is-still .preel.is-live *,
.is-still .creel.is-live *,
.is-still .sync.is-live *,
.is-still .token__body,
.is-still .stage--seen .token__body { animation: none !important; }

.foot__bottom { margin-top: clamp(30px, 3.2vw, 46px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; color: var(--on-dark-3); }

/* ─── Кто делает продукт ──────────────────────────────────
   Три колонки: что будет после кнопки, почему бесплатно, первые
   десять минут. Раньше ни на один из этих вопросов страница
   не отвечала, а просила доступ к микрофону и запуск в обход магазина. */
/* Минута до первого дела на шкале времени. Отметки стоят на общей линии,
   последняя — финиш без описания: к ней и ведёт весь блок. Коробка вокруг
   трёх колонок только мешала: обещание из заголовка в ней не читалось. */
.minute {
  list-style: none;
  margin: 0;
  padding: 30px 0 0;
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  position: relative;
}
@media (min-width: 820px) {
  .minute { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Линия времени идёт через весь блок и гаснет после финиша */
  .minute::before {
    content: "";
    position: absolute;
    top: 6px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--g-line), var(--g-line) 76%, transparent);
  }
  .minute__step::before {
    content: "";
    position: absolute;
    top: -30px; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1px solid var(--g);
    background: var(--paper);
  }
  /* Финиш закрашен: до него и идём */
  .minute__step--end::before { background: var(--g); }
}
.minute__step { position: relative; display: grid; gap: 11px; align-content: start; }
.minute__t {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--g);
  font-variant-numeric: tabular-nums;
}
.minute__step h3 { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; letter-spacing: -.026em; color: var(--ink); }
.minute__step p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* Финиш держится особняком: без описания и чуть тише соседей */
.minute__step--end h3 { color: var(--ink-2); }
.minute__step--end p { color: var(--ink-3); }
.trust__note { font-size: 14px; }
.trust__note a { color: var(--g); text-decoration: underline; text-underline-offset: 3px; }
.trust-founder {
  margin-top: clamp(26px, 3vw, 44px);
  padding-top: clamp(24px, 2.5vw, 34px);
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 12px;
  align-items: start;
}
.trust-founder__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trust-founder > p:not(.trust-founder__label) {
  max-width: 78ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.trust-founder strong { color: var(--ink); }
.trust-founder a { color: var(--g); text-underline-offset: 3px; }
@media (min-width: 940px) {
  .trust-founder { grid-template-columns: minmax(170px, .45fr) minmax(0, 1.8fr) auto; gap: clamp(24px, 3vw, 48px); }
  .trust-founder a { justify-self: end; white-space: nowrap; }}

/* ─── Появление ───────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rise { opacity: 1 !important; }
  .rise { transform: none !important; }}

/* ─── Куки-уведомление ────────────────────────────────────
   Метрика ставит файлы cookie, поэтому предупреждаем. Панель
   тёмная: она всплывает поверх и светлых, и тёмных секций. */
.cookies {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: 720px; margin-inline: auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #14171b; border: 1px solid var(--glass-line-2);
  border-radius: var(--r-m); padding: 14px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  z-index: 60;
}
.cookies p { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }
/* В колонке flex-basis читается как высота, и абзац занимал 320 пикселей
   вместо нужной сотни: баннер съедал половину экрана телефона. */
@media (max-width: 560px) { .cookies p { flex: 0 1 auto; } }
.cookies a { color: var(--g-bright); }
.cookies .btn { flex: 0 0 auto; }

/* Без скриптов появление секций не отработает, а .rise прячет их
   насовсем. Показываем всё сразу — страница остаётся читаемой. */
@media (scripting: none) {
  .rise { opacity: 1; transform: none; }
}

/* ─── Светлый scroll-hero с живой 3D-капсулой ───────────── */

.nav {
  background: rgba(251, 252, 253, .76);
  border-bottom-color: rgba(10, 11, 13, .055);
  color-scheme: light;
}
.nav.is-stuck {
  background: rgba(251, 252, 253, .9);
  border-bottom-color: rgba(10, 11, 13, .075);
}
.nav__logo { color: var(--ink); }
.nav__links a { color: var(--ink-3); }
.nav__links a:hover { color: var(--ink); background: rgba(10, 11, 13, .045); }
.nav__cta.btn--glass {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__cta.btn--glass:hover { background: var(--g); border-color: var(--g); color: #fff; }
.burger span { background: var(--ink); }
.menu { background: rgba(251, 252, 253, .97); border-top-color: rgba(10, 11, 13, .07); }
.menu__in a { color: var(--ink); border-bottom-color: rgba(10, 11, 13, .07); }
.menu__in a:hover { color: var(--g); }

.hero[data-hero] {
  position: relative;
  /* Высоту задают блоки левой колонки: их четыре, каждый в экран.
     Раньше высота была фиксированной, а вся левая часть стояла
     неподвижно вместе со сценой. */
  height: auto;
  min-height: 0;
  padding: 0;
  background: #f7faf9;
  color: var(--ink);
  overflow: clip;
  color-scheme: light;
}

.hero[data-hero]::before {
  left: 58%;
  top: -22%;
  width: min(1320px, 124vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 28%, rgba(234, 244, 239, .28) 52%, transparent 72%);
}

.hero[data-hero]::after { display: none; }

/* Правая колонка со сценой стоит на месте, левая прокручивается как
   обычная страница: анимация капсулы идёт сплошной, а текст рядом с ней
   сменяется блоками. Так на первый экран попадает только главное,
   а подробности приезжают ниже по одной мысли за раз. */
.hero__flow {
  display: grid;
}

/* Нить такта: четыре блока левой колонки читались как четыре одинаковых
   абзаца. Линия с номерами связывает их в одно движение и показывает,
   что прокрутка это следующий такт, а не просто ещё текст. */
.hero__flow { position: relative; padding-left: 62px; }

.hero__flow::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
}

.hero__block::before {
  content: attr(data-tact);
  position: absolute;
  left: -62px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--ink-3);
}

.hero__block::after {
  content: "";
  position: absolute;
  left: -62px;
  top: calc(50% - 24px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g-bright);
  box-shadow: 0 0 0 4px rgba(53, 217, 141, .16);
}

.hero__block {
  position: relative;
  min-height: calc(100svh - 66px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Иначе плашка и кнопка растягиваются на всю ширину колонки. */
  align-items: flex-start;
  gap: 22px;
  padding-block: 40px;
}

/* Первый блок чуть выше остальных: под шапкой должно остаться дыхание. */
/* Отступы в первом блоке складывались из gap и собственных margin:
   плашка оказывалась прижата к заголовку, а кнопка отлетала на 84 пикселя.
   Задаём шаг явно. */
.hero__block--lead { gap: 0; }
.hero[data-hero] .hero__block--lead h1 { margin-bottom: 0; }
.hero[data-hero] .hero__block--lead .hero__pill { margin-bottom: 30px; }
.hero__block--lead .hero__h1sub { margin-top: 18px; }
.hero[data-hero] .hero__block--lead .hero__cta { margin-top: 40px; }

.hero[data-hero] .hero__grid {
  grid-template-columns: minmax(390px, 42%) minmax(560px, 58%);
  gap: clamp(22px, 3vw, 50px);
  width: 100%;
  /* Базовое правило центрирует колонки по вертикали, и липкая правая
     оказывалась посреди всей высоты вместо верха. */
  align-items: start;
}

.hero[data-hero] .hero__pill {
  color: var(--ink-3);
  background: rgba(255, 255, 255, .66);
  border-color: rgba(10, 11, 13, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.hero[data-hero] h1,
.hero[data-hero] h1 span,
.hero[data-hero] h1 span + span { color: var(--ink); }

/* Заголовок длиннее прежнего слогана из двух слов: на прежнем кегле он
   занимал четыре строки и выдавливал за экран и плашку, и факты.
   Строки ломаются сами, жёсткого деления на блоки здесь нет. */
.hero[data-hero] h1 {
  font-size: clamp(34px, 4.05vw, 58px);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.hero[data-hero] .hero__h1sub { color: var(--ink-2); }

.hero[data-hero] .lede { color: var(--ink-2); }

.hero[data-hero] .btn--light {
  background: var(--ink);
  color: #fff;
}
.hero[data-hero] .btn--light:hover { background: var(--g); color: #fff; }

/* Якорь ведёт к вопросу, а он оказывался под липкой шапкой */
[id^="faq-"] { scroll-margin-top: 96px; }

.hero[data-hero] .hero__stage {
  position: sticky;
  top: 66px;
  height: calc(100svh - 66px);
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 12px;
  z-index: 2;
}

.hero[data-hero] .stage {
  position: relative;
  width: 100%;
  max-width: none;
  height: min(650px, calc(100svh - 100px));
  min-height: 540px;
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero[data-hero] .stage::before,
.hero[data-hero] .stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero[data-hero] .stage::before {
  left: 50%;
  top: 49%;
  z-index: 0;
  width: min(88%, 690px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .94) 0 30%,
    rgba(242, 247, 244, .5) 48%,
    rgba(234, 244, 239, .18) 66%,
    transparent 84%);
  transform: translate(-50%, -50%);
}

.hero[data-hero] .stage::after {
  left: 50%;
  bottom: 7.5%;
  z-index: 1;
  width: min(54%, 390px);
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side,
    rgba(66, 82, 74, .13) 0 18%,
    rgba(66, 82, 74, .07) 42%,
    rgba(66, 82, 74, .02) 66%,
    transparent 88%);
  transform: translateX(-50%);
}

.stage__canvas,
.stage__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage__canvas {
  z-index: 2;
  touch-action: pan-y;
}

.stage__fallback {
  object-fit: contain;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 46%, transparent 82%);
  mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 46%, transparent 82%);
  transition: opacity .4s var(--ease);
}

.stage--ready .stage__fallback { opacity: 0; }

.hero[data-hero] .stage__cards {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  perspective: 1000px;
}

.orbit-card {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(196px, 18.5vw, 268px);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 17px 14px;
  color: #222831;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(85, 97, 109, .14);
  border-radius: 18px;
  box-shadow: 0 24px 54px rgba(51, 64, 77, .13), 0 3px 10px rgba(51, 64, 77, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* Позиции карточкам расставляет сцена. Пока она не поднялась, все три лежали
     в левом верхнем углу друг на друге и читались как мусор на первом экране,
     особенно после перезагрузки: сцена ждёт первого жеста. */
  opacity: 0;
}

.stage--ready .orbit-card { opacity: 1; }

/* ─── Знаки клиентов на карточках первого экрана ───────────
   Пасхалка: за каждым делом стоит настоящий клиент студии, знак ведёт
   на его сайт. Стоит он в пустом углу самой карточки, а не сбоку от неё:
   снаружи знак упирался в край сцены, а места внутри достаточно.
   Объём даёт покачивание по двум осям — одна анимация трансформации,
   её целиком считает видеокарта, и она стоит, пока первый экран не на
   глазах. Карточка летит к капсуле, знак едет внутри неё. */
.orbit-card--pin { padding-right: 56px; }

.token {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  /* Карточки насквозь прозрачны для мыши, а знак должен ловить нажатие. */
  pointer-events: auto;
  perspective: 240px;
  /* Ссылка внутри текстового блока приносила с собой подчёркивание. */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.token__body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: tokenTilt 7.5s ease-in-out infinite paused;
}

/* Качаемся, только пока первый экран перед глазами. */
.stage--seen .token__body { animation-play-state: running; }

/* Марка Финтабло: их собственная, а не нарисованная по памяти. */
.token--ft .token__body img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  box-shadow: 0 7px 15px -6px rgba(20, 41, 106, .5);
}

/* Фигурка и знак рубля стоят сами по себе, без подложки. */
/* Цвет тот же, что у мипла в кейсе настольных игр. */
.token--meeple .token__body svg { width: 100%; height: 100%; fill: #f26935; }

.token--ruble .token__body b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--g);
}

.token--meeple .token__body,
.token--ruble .token__body {
  filter: drop-shadow(0 5px 9px rgba(40, 52, 66, .24));
}

/* Сдвигаем фазы: три одинаково качающихся знака выглядят механизмом. */
.token--ruble .token__body { animation-delay: -2.4s; }
.token--meeple .token__body { animation-delay: -4.9s; }

.token:hover .token__body,
.token:focus-visible .token__body { animation-play-state: paused; }

.token:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; }

@keyframes tokenTilt {
  0%   { transform: rotateY(-26deg) rotateX(7deg); }
  50%  { transform: rotateY(26deg) rotateX(-5deg); }
  100% { transform: rotateY(-26deg) rotateX(7deg); }
}

/* Человек попросил не анимировать: знак просто стоит, слегка повёрнутый. */
@media (prefers-reduced-motion: reduce) {
  .token__body { animation: none; transform: rotateY(-12deg); }}

.orbit-card__kind {
  display: block;
  margin-bottom: 5px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.orbit-card--meet .orbit-card__kind { color: var(--g); }

.orbit-card__title {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.018em;
  /* Названия клиентов длиннее прежних выдуманных дел, и обрезать их
     многоточием нельзя: ради них карточки и написаны. Две строки, дальше
     всё-таки многоточие, чтобы карточка не разъезжалась. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orbit-card__meta {
  display: block;
  margin-top: 5px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--ink-3);
}

.stage__result {
  position: absolute;
  left: 50%;
  top: 13%;
  z-index: 5;
  width: 230px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  will-change: transform, opacity;
}

.stage__result-kicker {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g);
}

.stage__result-title {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
}


@media (max-width: 1100px) {
  .hero[data-hero] .hero__grid {
    grid-template-columns: minmax(330px, 42%) minmax(500px, 58%);
    gap: 18px;
  }
  .orbit-card { width: 214px; }}

/* Низкие окна: ноутбук 1280×800 с панелями браузера даёт около 650 px,
   очки и режим рабочего стола на телефоне ещё меньше. Липкий блок с
   min-height: 620 оказывался выше окна и уезжал вместе со страницей:
   низ сцены со счётчиком и подсказкой уходил под край экрана. Высоту
   отдаём окну, разметку и анимацию прокрутки не трогаем. */
@media (min-width: 1101px) and (max-height: 780px) {
  .hero[data-hero] .stage {
    height: calc(100svh - 128px);
    min-height: 0;
  }
}

/* Очень широкие мониторы: сцена росла вместе с колонкой, карточки
   разъезжались по углам, а капсула оставалась прежней. Даём сцене
   предел и держим её по центру колонки. */
@media (min-width: 1900px) {
  .hero[data-hero] .stage {
    max-width: 900px;
    margin-inline: auto;
  }
}

@media (max-width: 1100px) {
  .hero[data-hero] {
    height: auto;
    min-height: 0;
    padding: 18px 0 70px;
  }

  .hero[data-hero] .hero__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .hero[data-hero] .hero__stage {
    order: -1;
    position: static;
    height: auto;
  }

  /* Блоки перестают занимать по экрану: они идут подряд под сценой,
     и нить с номерами тактов теряет смысл. */
  .hero__flow { padding-left: 0; }
  .hero__flow::before,
  .hero__block::before,
  .hero__block::after { display: none; }

  .hero__block {
    min-height: 0;
    padding-block: 18px;
  }
  .hero__block--lead { padding-top: 0; }

  .hero[data-hero] .stage {
    height: min(66svh, 560px);
    min-height: 430px;
  }

  /* На узком экране колонки складываются в одну, и сцена стоит над текстом.
     Всё собираем по центральной оси: раньше правило было написано для
     старого класса, из-за чего заголовок стоял по центру, а блоки под ним
     жались к левому краю. */
  .hero[data-hero] .hero__flow {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .hero__block { align-items: center; }

  .hero[data-hero] .hero__pill { justify-content: center; }

  /* Кнопка и подпись под ней стояли в строку и на узком экране расходились
     по разным краям. Ставим друг под другом. */
  .hero[data-hero] .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .hero[data-hero] h1 { text-align: center; }}

@media (max-width: 560px) {
  .hero[data-hero] { padding-top: 10px; }

  .hero[data-hero] .stage {
    height: 58svh;
    min-height: 400px;
  }

  .orbit-card {
    width: 142px;
    min-height: 66px;
    padding: 11px 12px 10px;
    border-radius: 14px;
  }

  .orbit-card__title { font-size: 11.5px; }
  .orbit-card__kind,
  .orbit-card__meta { font-size: 8px; }

  /* Знаки клиентов прячем: сцена здесь вдвое уже, знак съел бы треть
     карточки и вылез бы за экран. Имена клиентов остаются в тексте. */
  .token { display: none; }

  .stage__result { top: 7%; }
  .stage__result-title { font-size: 18px; }}

@media (prefers-reduced-motion: reduce) {
  .hero[data-hero] {
    height: auto;
    min-height: 0;
    padding: clamp(34px, 6vw, 70px) 0;
  }

  .hero[data-hero] .orbit-card { display: none; }
  .hero[data-hero] .stage__result { opacity: 1; transform: translate(-50%, 0); }}

/* ─── Внутренние страницы ─────────────────────────────────
   Политика и разбор исследований: длинный текст, одна колонка,
   те же токены, что и на главной. */
.page-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.page-head__in { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.page-head .nav__logo { margin-right: auto; }

.doc { padding-block: clamp(40px, 6vw, 76px) clamp(56px, 8vw, 104px); }
.doc__in { max-width: 720px; }
.doc h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; margin-bottom: 18px; }
.doc h2 {
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.2;
  margin-top: clamp(38px, 4.5vw, 62px); margin-bottom: 12px;
}
.doc h3 { font-size: 17px; margin-top: 26px; margin-bottom: 7px; }
.doc p { color: var(--ink-2); margin-bottom: 13px; }
.doc .lede { color: var(--ink); font-size: clamp(17px, 1.4vw, 20px); margin-bottom: 6px; }
.doc a { color: var(--g); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--g-hover); }
.doc ul,
.doc ol { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.doc li { margin-bottom: 7px; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; background: var(--g-tint); border-radius: 5px; padding: 1px 5px;
}
.doc__meta { font-size: 13px; color: var(--ink-3); }

/* Карточка с цифрой из исследования */
.finding {
  display: grid; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: clamp(16px, 2vw, 22px); margin-bottom: 14px;
  background: var(--white);
}
.finding__n {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  line-height: 1; letter-spacing: -.04em; color: var(--g);
  font-variant-numeric: tabular-nums;
}
.finding p { margin: 0; }
.finding__src { font-size: 12.5px; color: var(--ink-3); }
.finding__src a { color: var(--ink-3); }
.finding__src a:hover { color: var(--g); }

/* Вывод для продукта внутри разбора */
.takeaway {
  border-left: 2.5px solid var(--g); border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--g-tint); padding: 16px 18px; margin: 22px 0 26px;
}
.takeaway p { color: var(--ink); margin-bottom: 8px; }
.takeaway p:last-child { margin-bottom: 0; }
.takeaway__t {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--g); margin-bottom: 6px !important;
}

/* Блок исследований на главной */
.proof__grid {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.proof__cell {
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: clamp(16px, 1.9vw, 22px); background: var(--white);
  display: grid; gap: 8px; align-content: start;
  box-shadow: var(--shadow-1);
}
.proof__n {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; line-height: 1;
  letter-spacing: -.045em; color: var(--g); font-variant-numeric: tabular-nums;
}
.proof__t { font-size: 15px; color: var(--ink-2); margin: 0; }
.proof__src { font-size: 12px; color: var(--ink-3); margin: 0; }

/* ─── Широкие мониторы ────────────────────────────────────
   Рабочая ширина растёт ступенями, а не стоит на 1400 с полями
   в пол-экрана. Поля при этом тоже растут: воздух по краям
   остаётся, просто контент перестаёт жаться к середине.
   Порядок блоков важен: правила равной силы применяются
   по очереди, более широкий порог должен идти ниже. */
@media (min-width: 1600px) {
  :root { --wrap: 1340px; --wrap-wide: 1560px; --gut: clamp(40px, 4vw, 72px); }
}

@media (min-width: 1900px) {
  :root { --wrap: 1500px; --wrap-wide: 1760px; --gut: clamp(56px, 4vw, 96px); }
  /* Сетки получают больше колонок, иначе карточки просто растягиваются */
  .proof__grid { grid-template-columns: repeat(4, 1fr); }}

@media (min-width: 2300px) {
  :root { --wrap: 1720px; --wrap-wide: 2000px; --gut: clamp(72px, 4vw, 128px); }
  /* В статье колонку не растягиваем: длинный текст читают подряд */
  .doc__in { max-width: 820px; }}

/* ─── Телефоны ────────────────────────────────────────────
   Всё, что на десктопе стоит в строку, здесь переносится,
   а горизонтальная прокрутка не должна появляться нигде. */
@media (max-width: 560px) {
  .proof__grid { grid-template-columns: 1fr; }
  .finding { padding: 15px 16px; }
  .doc h1 { font-size: clamp(27px, 8vw, 34px); }
  .cookies { flex-direction: column; align-items: stretch; gap: 11px; }
  .cookies .btn { width: 100%; justify-content: center; }
  .page-head__in { min-height: 54px; }
}

/* Таблицы, длинные ссылки и код не должны растягивать страницу */
.doc a { overflow-wrap: anywhere; }
body { overflow-x: hidden; }

/* ─── Первый кадр до запуска сцены ────────────────────────
   Раньше здесь лежал снимок в webp. Он непрозрачный и почти белый:
   на тёмной подложке получался светлый прямоугольник поверх неё,
   а в момент запуска сцены просвечивал сквозь канвас второй картинкой.
   Рисуем стилями — ничего не весит и ложится на любой фон. */
.stage__fallback {
  display: grid;
  place-items: center;
  object-fit: unset;
  transition: opacity .45s var(--ease);
}
/* Скрываем насовсем, а не только гасим: прозрачный слой поверх канваса
   продолжал бы перехватывать события. */
.stage--ready .stage__fallback { opacity: 0; visibility: hidden; }

.stage__fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── Варианты оформления сцены ───────────────────────────
   Селекторы обязательно с .hero[data-hero]: у базовых правил сцены
   специфичность выше, и без этого префикса варианты молча проигрывали
   вместе с их `background: transparent`. Свечение и тень живут
   в ::before и ::after — эти псевдоэлементы уже заняты базой,
   поэтому переопределяем их, а не добавляем свои. */

/* Плита: сцена лежит на глубоком графите, страница остаётся светлой */
.hero[data-hero] .stage[data-look="slab"] {
  border-radius: clamp(22px, 2.6vw, 38px);
  background:
    radial-gradient(ellipse 74% 64% at 50% 40%, #1e262b 0%, #131a1d 52%, #0b0f11 100%);
  box-shadow:
    0 50px 110px -34px rgba(8, 12, 14, .58),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  /* Без обрезки: карточки подлетают из-за края сцены, и скругление
     срезало бы их на полпути. Скругление держится самим фоном. */
}
/* Вместо белого свечения — зелёный отсвет от жидкости: плита перестаёт
   быть тёмным прямоугольником и выглядит освещённой изнутри */
.hero[data-hero] .stage[data-look="slab"]::before {
  background: radial-gradient(circle closest-side,
    rgba(53, 217, 141, .1) 0 16%, rgba(53, 217, 141, .04) 38%,
    rgba(53, 217, 141, .012) 58%, transparent 78%);
}
.hero[data-hero] .stage[data-look="slab"]::after {
  background: radial-gradient(ellipse closest-side,
    rgba(0, 0, 0, .46) 0 16%, rgba(0, 0, 0, .22) 42%,
    rgba(0, 0, 0, .07) 66%, transparent 90%);
}
/* Карточки и подписи на тёмном должны остаться читаемыми */
.hero[data-hero] .stage[data-look="slab"] .orbit-card {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 38px -14px rgba(0, 0, 0, .55);
}
.hero[data-hero] .stage[data-look="slab"] .stage__result-kicker { color: rgba(255, 255, 255, .5); }
.hero[data-hero] .stage[data-look="slab"] .stage__result-title { color: #fff; }
/* Портал: холодное свечение вместо белого, без границы */
.hero[data-hero] .stage[data-look="portal"]::before {
  background: radial-gradient(circle closest-side,
    rgba(24, 38, 44, .28) 0 20%, rgba(30, 46, 52, .15) 44%,
    rgba(34, 50, 56, .05) 64%, transparent 84%);
}
.hero[data-hero] .stage[data-look="portal"]::after {
  background: radial-gradient(ellipse closest-side,
    rgba(18, 28, 32, .32) 0 16%, rgba(18, 28, 32, .14) 42%,
    rgba(18, 28, 32, .04) 66%, transparent 90%);
}

/* Дымчатое стекло: фон почти не трогаем, работает сам материал.
   Холодная подложка нужна, чтобы стеклу было что отражать. */
.hero[data-hero] .stage[data-look="glass"]::before {
  /* Ореол убран: он читался как лишнее пятно за капсулой.
     Фон остаётся чистым, объём держат само стекло и тень. */
  background: none;
}
/* Тень под капсулой: плотное ядро и мягкий разлёт, как у предмета,
   стоящего на поверхности, а не у нарисованного круга. */
.hero[data-hero] .stage[data-look="glass"]::after {
  bottom: 9%;
  width: min(42%, 300px);
  height: 40px;
  background: radial-gradient(ellipse closest-side,
    rgba(16, 26, 30, .34) 0 16%,
    rgba(16, 26, 30, .18) 38%,
    rgba(16, 26, 30, .07) 62%,
    rgba(16, 26, 30, .02) 78%,
    transparent 92%);
}

/* ─── Живой продуктовый сценарий ───────────────────────────
   Здесь нет отдельной «игрушечной» клавиши и второй капсулы. Одна
   компактная панель показывает сам продукт: голос, распознанные поля
   и запись в календаре. Контент остаётся читаемым в любой фазе цикла. */
.reel {
  --beat: 9s;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
  margin-bottom: clamp(28px, 3.2vw, 48px);
}

.reel__copy { display: grid; gap: 18px; align-content: center; }
.reel__copy h3 {
  max-width: 9ch;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
  color: var(--on-dark);
}
.reel__copy > p:not(.eyebrow) {
  max-width: 31ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-dark-2);
}
.reel__shortcut {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 5px;
}
.reel__shortcut kbd {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
  box-shadow: 0 4px 0 rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--on-dark);
  font-size: 17px;
}
.reel__shortcut span { display: grid; gap: 2px; }
.reel__shortcut b { color: var(--on-dark); font-size: 13px; font-weight: 500; }
.reel__shortcut small { color: var(--on-dark-3); font-size: 11.5px; }

.reel__window {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(circle at 18% 0, rgba(53, 217, 141, .09), transparent 31%),
    linear-gradient(145deg, #111619, #0d1012 68%);
  box-shadow: 0 42px 90px -46px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.reel__chrome {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(18px, 2vw, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.reel__brand,
.reel__local { display: inline-flex; align-items: center; }
.reel__brand { gap: 9px; color: var(--on-dark); font-size: 13px; font-weight: 600; }
.reel__brand > i {
  position: relative;
  width: 13px;
  height: 23px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, .09);
}
.reel__brand > i b {
  position: absolute;
  inset: 51% 1px 1px;
  border-radius: 0 0 999px 999px;
  background: var(--g-bright);
  box-shadow: 0 0 10px rgba(53, 217, 141, .48);
}
.reel__local {
  gap: 7px;
  color: var(--on-dark-3);
  font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.reel__local i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-bright);
  box-shadow: 0 0 0 5px rgba(53, 217, 141, .07), 0 0 14px rgba(53, 217, 141, .35);
}

.reel__capture {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin: 0 clamp(18px, 2.2vw, 32px);
  padding: 24px 0 21px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.reel__mic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(53, 217, 141, .26);
  border-radius: 50%;
  background: rgba(53, 217, 141, .09);
  color: var(--g-bright);
  box-shadow: 0 0 0 9px rgba(53, 217, 141, .025);
}
.reel__mic svg { width: 20px; height: 20px; }
.reel__wave {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: clamp(3px, .45vw, 6px);
  overflow: hidden;
}
.reel__wave i {
  flex: 1 1 3px;
  max-width: 4px;
  height: 7px;
  border-radius: 999px;
  background: rgba(240, 242, 244, .34);
  transform-origin: center;
}
.reel__wave i:nth-child(4n + 2),
.reel__wave i:nth-child(7n) { height: 18px; }
.reel__wave i:nth-child(5n + 3) { height: 28px; background: var(--g-bright); }
.reel__listening {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--on-dark-3);
  font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reel__listening i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-bright); }

.reel__content {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: stretch;
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2.2vw, 32px);
}
.reel__phrase { display: grid; align-content: center; gap: 12px; min-width: 0; }
.reel__phrase > small,
.reel__result small {
  color: var(--g-bright);
  font: 500 9px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reel__phrase > p {
  max-width: 22ch;
  color: var(--on-dark);
  font-size: clamp(23px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.reel__phrase ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}
.reel__phrase li {
  padding: 6px 10px;
  border: 1px solid rgba(53, 217, 141, .14);
  border-radius: 999px;
  background: rgba(53, 217, 141, .065);
  color: rgba(240, 242, 244, .72);
  font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reel__result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(53, 217, 141, .16);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(53, 217, 141, .1), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.reel__check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--g-bright);
  color: #052a17;
  font-size: 17px;
  font-weight: 700;
}
.reel__result > span:last-child { min-width: 0; display: grid; gap: 7px; }
.reel__result b { color: var(--on-dark); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.18; }
.reel__result em { color: var(--on-dark-3); font-size: 12px; font-style: normal; }

.reel__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  list-style: none;
}
.reel__timeline li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  color: var(--on-dark-3);
}
.reel__timeline li + li { border-left: 1px solid rgba(255, 255, 255, .08); padding-left: clamp(14px, 2vw, 28px); }
.reel__timeline span { font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }
.reel__timeline b { font-size: 12px; font-weight: 500; }
.reel__timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: var(--g-bright);
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes reelWave { 0%, 100% { transform: scaleY(.45); opacity: .48; } 50% { transform: scaleY(1.35); opacity: 1; } }
@keyframes reelPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 217, 141, .24); } 50% { box-shadow: 0 0 0 8px rgba(53, 217, 141, 0); } }
@keyframes reelResult {
  0%, 48% { opacity: .68; transform: translateY(6px); }
  58%, 90% { opacity: 1; transform: none; }
  100% { opacity: .68; transform: translateY(6px); }
}
@keyframes reelToken {
  0%, 25% { opacity: .32; transform: translateY(3px); }
  40%, 92% { opacity: 1; transform: none; }
  100% { opacity: .32; transform: translateY(3px); }
}
@keyframes reelStepA { 0%, 5%, 23%, 100% { color: var(--on-dark-3); } 8%, 20% { color: var(--on-dark); } }
@keyframes reelStepB { 0%, 20%, 56%, 100% { color: var(--on-dark-3); } 26%, 52% { color: var(--on-dark); } }
@keyframes reelStepC { 0%, 52%, 94%, 100% { color: var(--on-dark-3); } 60%, 90% { color: var(--on-dark); } }
@keyframes reelLineA { 0%, 5%, 23%, 100% { transform: scaleX(0); } 8%, 20% { transform: scaleX(1); } }
@keyframes reelLineB { 0%, 20%, 56%, 100% { transform: scaleX(0); } 26%, 52% { transform: scaleX(1); } }
@keyframes reelLineC { 0%, 52%, 94%, 100% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); } }

.reel.is-live .reel__wave i { animation: reelWave .9s ease-in-out infinite; }
.reel.is-live .reel__wave i:nth-child(3n + 1) { animation-delay: -.28s; }
.reel.is-live .reel__wave i:nth-child(4n + 2) { animation-delay: -.62s; }
.reel.is-live .reel__listening i { animation: reelPulse 1.5s ease-out infinite; }
.reel.is-live .reel__result { animation: reelResult var(--beat) var(--ease-out) infinite; }
.reel.is-live .reel__phrase li { animation: reelToken var(--beat) var(--ease-out) infinite; }
.reel.is-live .reel__phrase li:nth-child(2) { animation-delay: .12s; }
.reel.is-live .reel__phrase li:nth-child(3) { animation-delay: .24s; }
.reel.is-live .reel__phrase li:nth-child(4) { animation-delay: .36s; }
.reel.is-live .reel__timeline li:nth-child(1) { animation: reelStepA var(--beat) linear infinite; }
.reel.is-live .reel__timeline li:nth-child(2) { animation: reelStepB var(--beat) linear infinite; }
.reel.is-live .reel__timeline li:nth-child(3) { animation: reelStepC var(--beat) linear infinite; }
.reel.is-live .reel__timeline li:nth-child(1)::after { animation: reelLineA var(--beat) linear infinite; }
.reel.is-live .reel__timeline li:nth-child(2)::after { animation: reelLineB var(--beat) linear infinite; }
.reel.is-live .reel__timeline li:nth-child(3)::after { animation: reelLineC var(--beat) linear infinite; }

@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr; }
  .reel__copy h3 { max-width: none; }
  .reel__copy > p:not(.eyebrow) { max-width: 54ch; }}
@media (max-width: 620px) {
  .reel__chrome { min-height: 52px; }
  .reel__capture { grid-template-columns: 44px minmax(0, 1fr); }
  .reel__mic { width: 44px; height: 44px; }
  .reel__listening { display: none; }
  .reel__content { grid-template-columns: 1fr; }
  .reel__phrase > p { max-width: none; }
  .reel__timeline b { font-size: 10.5px; }}

/* Уважаем системную просьбу не анимировать: показываем финальный,
   полностью читаемый кадр. */
@media (prefers-reduced-motion: reduce) {
  .reel.is-live .reel__wave i,
  .reel.is-live .reel__listening i,
  .reel.is-live .reel__result,
  .reel.is-live .reel__phrase li,
  .reel.is-live .reel__timeline li,
  .reel.is-live .reel__timeline li::after { animation: none; }
  .reel__result, .reel__phrase li { opacity: 1; transform: none; }
}

/* ─── История обновлений ──────────────────────────────────
   Версия, дата и список изменений с цветной меткой на каждом:
   по метке видно, что это — новое, улучшение или починка. */
.rel {
  padding-top: clamp(26px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
  margin-top: clamp(26px, 3.4vw, 44px);
}
.rel:first-of-type { border-top: 0; padding-top: 0; margin-top: clamp(22px, 2.6vw, 34px); }

.rel__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rel__head .rel__ver {
  /* Номер версии стал заголовком второго уровня: для страницы, чей смысл
     в свежести, это нужный сигнал поиску. Вид остаётся прежним, но правило
     общего .doc h2 весит больше одиночного класса и добавляло свой отступ
     сверху, поэтому селектор здесь с родителем. */
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 600;
  letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rel__date { font-size: 13px; color: var(--ink-3); }

.rel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rel__list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.rel__list li div { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.rel__list li b { color: var(--ink); font-weight: 600; }
.rel__list li a { color: var(--g); text-decoration: underline; text-underline-offset: 2px; }

/* Метка вида изменения. Цвет несёт смысл, а не украшает:
   зелёное — прибавилось, серое — стало лучше, рыжее — чинили. */
.tagx {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  margin-top: 2px;
}
.tagx--new { background: var(--g-tint); color: var(--g); border: 1px solid var(--g-line); }
.tagx--up  { background: #eef1f4; color: #4a555f; border: 1px solid #dde2e8; }
.tagx--fix { background: #fdf1e7; color: #a5601f; border: 1px solid #f3ddc6; }

@media (max-width: 620px) {
  .rel__list li { grid-template-columns: 1fr; gap: 6px; }
  .tagx { justify-self: start; }}

/* ─── Живой разбор фразы ──────────────────────────────────
   Фраза печатается по словам, потом подсвечиваются те, что
   несут смысл, потом всё схлопывается в готовую запись.
   Такт 11 секунд, работает только на экране. */
.preel {
  --beat2: 11s;
  display: grid;
  gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 860px) {
  .preel { grid-template-columns: minmax(320px, 460px) minmax(0, 1fr); }}

.preel__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .62;
  border-radius: clamp(18px, 2vw, 26px);
  background: radial-gradient(ellipse 72% 64% at 50% 40%, #1d252a 0%, #131a1d 55%, #0b0f11 100%);
  box-shadow: 0 40px 90px -34px rgba(8, 12, 14, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  overflow: hidden;
}

/* Сказанная фраза. Слова проявляются по очереди — это и есть речь. */
.preel__said {
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.preel__said span { opacity: .18; }
.preel.is-live .preel__said span { animation: wordIn var(--beat2) linear infinite; }
.preel.is-live .preel__said span:nth-child(1) { animation-delay: calc(var(--beat2) * .02); }
.preel.is-live .preel__said span:nth-child(2) { animation-delay: calc(var(--beat2) * .05); }
.preel.is-live .preel__said span:nth-child(3) { animation-delay: calc(var(--beat2) * .08); }
.preel.is-live .preel__said span:nth-child(4) { animation-delay: calc(var(--beat2) * .11); }
.preel.is-live .preel__said span:nth-child(5) { animation-delay: calc(var(--beat2) * .14); }
.preel.is-live .preel__said span:nth-child(6) { animation-delay: calc(var(--beat2) * .17); }
.preel.is-live .preel__said span:nth-child(7) { animation-delay: calc(var(--beat2) * .2); }
.preel.is-live .preel__said span:nth-child(8) { animation-delay: calc(var(--beat2) * .23); }
.preel.is-live .preel__said span:nth-child(9) { animation-delay: calc(var(--beat2) * .26); }
.preel.is-live .preel__said span:nth-child(10) { animation-delay: calc(var(--beat2) * .29); }
@keyframes wordIn {
  0%, 1% { opacity: .18; }
  4%, 52% { opacity: 1; }
  58%, 100% { opacity: .18; }
}

/* Значимые слова: сначала обычные, потом загораются по типу */
.tk {
  border-radius: 5px;
  padding: 1px 3px;
  margin: 0 -1px;
  background: transparent;
  transition: none;
}
.tk--who  { color: #ffd08a; }
.tk--when { color: var(--g-bright); }
/* Значимые слова делают два дела сразу: появляются вместе с остальными
   и потом загораются. Раньше здесь стояла одна tokenLit, и она перебивала
   появление по силе селектора: слова «натальей», «завтра», «в», «три»
   так и оставались невидимыми. Две анимации идут списком, а не заменой. */
.preel.is-live .preel__said .tk {
  animation: wordIn var(--beat2) linear infinite,
             tokenLit var(--beat2) linear infinite;
}
/* Задержка появления у каждого своя, подсветка у всех общая */
.preel.is-live .preel__said .tk--who  { animation-delay: calc(var(--beat2) * .23), 0s; }
.preel.is-live .preel__said .tk--when { animation-delay: calc(var(--beat2) * .26), 0s; }
.preel.is-live .preel__said .tk--when + .tk--when { animation-delay: calc(var(--beat2) * .29), 0s; }
.preel.is-live .preel__said .tk--when + .tk--when + .tk--when { animation-delay: calc(var(--beat2) * .32), 0s; }
@keyframes tokenLit {
  0%, 34% { background: transparent; }
  38%, 52% { background: rgba(255, 255, 255, .1); }
  58%, 100% { background: transparent; }
}

/* Подпись к цветам: что чем стало */
.preel__legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0; padding: 0; list-style: none;
  font-size: 11.5px; color: rgba(255, 255, 255, .5);
  opacity: 0;
}
.preel__legend li { display: flex; align-items: center; gap: 6px; }
.preel__legend i {
  width: 9px; height: 9px; border-radius: 3px; padding: 0;
  background: currentColor;
}
.preel.is-live .preel__legend { animation: legendIn var(--beat2) linear infinite; }
@keyframes legendIn {
  0%, 33% { opacity: 0; }
  40%, 52% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

/* Готовая запись: появляется на месте фразы */
.preel__card {
  position: absolute; left: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px);
  top: 50%; transform: translateY(-50%) scale(.96);
  display: grid; gap: 3px;
  padding: 15px 17px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6);
  opacity: 0;
}
.preel.is-live .preel__card { animation: parseCardIn var(--beat2) var(--ease-out) infinite; }
@keyframes parseCardIn {
  0%, 58% { opacity: 0; transform: translateY(-50%) scale(.96); }
  64%, 90% { opacity: 1; transform: translateY(-50%); }
  96%, 100% { opacity: 0; transform: translateY(-50%) scale(.97); }
}

.preel__lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink); margin-bottom: 10px; }
.preel__note { font-size: 14px; color: var(--ink-2); }

@media (max-width: 860px) {
  .preel__scene { max-width: 460px; margin-inline: auto; }}

@media (prefers-reduced-motion: reduce) {
  .preel.is-live .preel__said span,
  .preel.is-live .tk,
  .preel.is-live .preel__legend,
  .preel.is-live .preel__card { animation: none; }
  .preel__said span, .preel__legend { opacity: 1; }
  .preel__card { opacity: 0; }}

/* ─── Голосовые команды над списком ───────────────────────
   Один такт 15 секунд, три команды подряд: закрыть, удалить,
   перенести. Список меняется на глазах и в конце возвращается
   к началу — цикл замыкается без скачка. */
.creel {
  --beat3: 15s;
  display: grid;
  gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 860px) {
  .creel { grid-template-columns: minmax(320px, 460px) minmax(0, 1fr); }}

.creel__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .78;
  border-radius: clamp(18px, 2vw, 26px);
  background: radial-gradient(ellipse 72% 64% at 50% 40%, #1d252a 0%, #131a1d 55%, #0b0f11 100%);
  box-shadow: 0 40px 90px -34px rgba(8, 12, 14, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  padding: clamp(18px, 2.6vw, 26px);
  overflow: hidden;
}

.creel__day {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(255, 255, 255, .38);
  margin-bottom: 12px;
}

.creel__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  /* Строка «удали созвон в 12» схлопывается по высоте, и соседи подъезжают:
     это единственная анимация на странице, которой нужна раскладка.
     contain запирает пересчёт внутри списка. */
  contain: layout style;
}
.creel__list li {
  display: flex; align-items: center; gap: 11px;
  font-size: clamp(13px, 1.4vw, 15px);
  color: rgba(255, 255, 255, .88);
}
.crow__time {
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--g-bright); min-width: 44px;
}
.crow__dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, .45);
  flex: 0 0 auto; position: relative;
}
.crow__name { position: relative; }
/* Зачёркивание растёт слева направо: видно, что дело закрывают */
.crow__name::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.2px; background: rgba(255, 255, 255, .55);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Команда «закрой смету»: кружок закрашивается, строка гаснет */
.creel.is-live li[data-row="1"] .crow__dot { animation: dotFill var(--beat3) linear infinite; }
@keyframes dotFill {
  0%, 14% { background: transparent; border-color: rgba(255, 255, 255, .45); }
  19%, 88% { background: var(--g-bright); border-color: var(--g-bright); }
  94%, 100% { background: transparent; border-color: rgba(255, 255, 255, .45); }
}
.creel.is-live li[data-row="1"] .crow__name::after { animation: strike var(--beat3) linear infinite; }
@keyframes strike {
  0%, 14% { transform: scaleX(0); }
  20%, 88% { transform: scaleX(1); }
  94%, 100% { transform: scaleX(0); }
}
.creel.is-live li[data-row="1"] { animation: dimRow var(--beat3) linear infinite; }
@keyframes dimRow {
  0%, 14% { opacity: 1; }
  22%, 88% { opacity: .45; }
  94%, 100% { opacity: 1; }
}

/* Команда «удали созвон в 12»: строка уходит и схлопывается */
.creel.is-live li[data-row="0"] { animation: killRow var(--beat3) var(--ease-out) infinite; }
@keyframes killRow {
  0%, 40% { opacity: 1; transform: none; max-height: 40px; }
  47%, 88% { opacity: 0; transform: translateX(-14px); max-height: 0; }
  94%, 100% { opacity: 1; transform: none; max-height: 40px; }
}

/* Команда «перенеси всё на завтра»: уезжают задачи. Встречу приложение
   не трогает, поэтому и здесь она остаётся на месте — демо должно
   показывать то, что происходит на самом деле. */
.creel.is-live li[data-row="2"] { animation: moveRow var(--beat3) var(--ease-out) infinite; }
@keyframes moveRow {
  0%, 66% { opacity: 1; transform: none; }
  74%, 88% { opacity: 0; transform: translateX(34px); }
  94%, 100% { opacity: 1; transform: none; }
}

/* Сказанные команды всплывают снизу по очереди */
.creel__say {
  position: absolute; left: clamp(18px, 2.6vw, 26px); right: clamp(18px, 2.6vw, 26px);
  bottom: clamp(16px, 2.2vw, 24px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  color: #fff;
  text-align: center;
  opacity: 0;
}
.creel.is-live .creel__say { animation: sayIn var(--beat3) var(--ease-out) infinite; }
.creel.is-live [data-say="1"] { animation-delay: calc(var(--beat3) * .26); }
.creel.is-live [data-say="2"] { animation-delay: calc(var(--beat3) * .52); }
@keyframes sayIn {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  8%, 20% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (max-width: 860px) {
  .creel__scene { max-width: 460px; margin-inline: auto; }}

@media (prefers-reduced-motion: reduce) {
  .creel.is-live li,
  .creel.is-live .crow__dot,
  .creel.is-live .crow__name::after,
  .creel.is-live .creel__say { animation: none; }
  .creel__say { opacity: 0; }}

/* ─── Капсула как индикатор нагрузки ──────────────────────
   Ползунки меняют число встреч и задач, знак наливается и
   меняет цвет. Ровно та же формула, что в приложении. */
.load {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 32px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
@media (min-width: 760px) {
  .load { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }}

.load__demo { display: grid; justify-items: center; gap: 10px; }

.loadcap {
  position: relative; display: block;
  width: clamp(58px, 14vw, 76px);
  aspect-ratio: 1 / 1.62;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 20, 22, .05), rgba(15, 20, 22, .11));
  box-shadow: inset 0 0 0 1.5px rgba(15, 20, 22, .18), 0 18px 36px -20px rgba(15, 20, 22, .4);
  overflow: hidden;
}
.loadcap__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 92%;
  --fill: .13;
  background: linear-gradient(180deg, var(--g-bright), var(--g));
  transform-origin: 50% 100%;
  transform: scaleY(var(--fill));
  transition: transform .45s var(--ease-out), background .45s var(--ease);
}
/* Плотный день: рыжий, но не тревожный. Красное пятно на экране
   заставляет закрыть приложение, а не разобрать дела. */
.loadcap[data-level="tight"] .loadcap__fill {
  background: linear-gradient(180deg, #f2b25c, #e08b2a);
}
.loadcap[data-level="over"] .loadcap__fill {
  background: linear-gradient(180deg, #ef8f6a, #d9552f);
}

.load__state { font-size: 15px; font-weight: 600; color: var(--ink); }
.load__sum { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.load__ctl { display: grid; gap: 14px; }
.load__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; gap: 12px; align-items: center; }
.load__k { font-size: 13.5px; color: var(--ink-2); }
.load__v { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.load__row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  /* Сам ползунок высотой с палец, полоска рисуется внутри: раньше вся
     мишень была четыре пикселя, и промах уходил в прокрутку страницы. */
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
.load__row input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--line-2);
}
.load__row input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--line-2);
}
.load__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  margin-top: -10px;
  background: var(--ink); border: 4px solid var(--white);
  box-shadow: 0 2px 6px rgba(15, 20, 22, .3);
}
.load__row input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); border: 4px solid var(--white);
  box-shadow: 0 2px 6px rgba(15, 20, 22, .3);
}
.load__row input[type="range"]:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

.load__note { font-size: 12.5px; color: var(--ink-3); }
.load__note a { color: var(--g); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .loadcap__fill { transition: none; }}

/* ─── Куда уходят встречи ─────────────────────────────────
   Свой календарь всегда, Календарь macOS по желанию.
   Переключатель повторяет тот, что в настройках приложения. */
.sync { display: grid; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(26px, 3.4vw, 44px); }

.sync__stage {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 780px) {
  .sync__stage { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }}

.sync__app, .sync__mac {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(14px, 1.8vw, 20px);
  background: var(--white);
  display: grid;
  gap: 10px;
  align-content: start;
  /* Панель вылезала за окно: колонка сетки по умолчанию не сжимается
     уже своего содержимого, а внутри лежит календарь из семи ячеек. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
/* Панель Капсулы тёмная: она и в жизни такая */
.sync__app { background: #14191c; border-color: rgba(255, 255, 255, .1); }
.sync__app .sync__cap { color: rgba(255, 255, 255, .55); }
.sync__app .sync__list li { color: rgba(255, 255, 255, .88); }
.sync__app .sync__note { color: rgba(255, 255, 255, .55); }

.sync__cap {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Месяц: две строки клеток, одна отмечена точками дел */
.sync__month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sync__month span {
  position: relative; aspect-ratio: 1 / .8; border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  display: grid; place-items: center;
  font-size: 10.5px; color: rgba(255, 255, 255, .5);
}
.sync__month .is-day { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.sync__month .is-day i {
  position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .5); left: calc(50% - 5px);
}
.sync__month .is-day i.ev { background: var(--g-bright); left: calc(50% + 2px); }

.sync__list, .sync__mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sync__list li, .sync__mlist li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.sync__t { color: var(--g); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 38px; }
.sync__app .sync__t { color: var(--g-bright); }
.sync__dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  border: 1.3px solid rgba(255, 255, 255, .4);
}
.sync__note { font-size: 11px; color: var(--ink-3); }

/* Стрелка выгрузки и второй календарь появляются во втором положении */
.sync__arrow { display: grid; place-items: center; opacity: 0; transition: opacity .3s var(--ease); }
.sync__arrow span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--g-line), var(--g));
  position: relative;
}
.sync__arrow span::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px; border-top: 2px solid var(--g); border-right: 2px solid var(--g);
  transform: translateY(-50%) rotate(45deg);
}
.sync__mac { opacity: .28; filter: grayscale(1); transition: opacity .3s var(--ease), filter .3s var(--ease); }

.sync[data-on="mac"] .sync__arrow { opacity: 1; }
.sync[data-on="mac"] .sync__mac { opacity: 1; filter: none; }

/* Пока макет на экране, он живой: дела появляются по очереди,
   точка события тихо дышит, а в положении «плюс Календарь macOS»
   по стрелке идёт блик выгрузки. */
.sync.is-live .sync__list li { animation: syncRow .5s var(--ease-out) both; }
.sync.is-live .sync__list li:nth-child(2) { animation-delay: .12s; }
.sync.is-live .sync__list li:nth-child(3) { animation-delay: .24s; }
.sync.is-live .sync__month .is-day { animation: syncDay .6s var(--ease-out) both; }
.sync.is-live .sync__month .is-day i.ev { animation: syncPulse 2.6s var(--ease) infinite .8s; }

.sync.is-live[data-on="mac"] .sync__arrow span { overflow: hidden; }
.sync.is-live[data-on="mac"] .sync__arrow span::before {
  content: ""; position: absolute; top: -2px; bottom: -2px; width: 22px;
  border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(53, 217, 141, .85), transparent);
  animation: syncFlow 1.8s linear infinite;
}
.sync.is-live[data-on="mac"] .sync__mlist li { animation: syncRow .5s var(--ease-out) both .25s; }
.sync.is-live[data-on="mac"] .sync__mlist li:nth-child(2) { animation-delay: .4s; }

@keyframes syncRow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes syncDay { from { opacity: .3; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes syncPulse { 0%, 72%, 100% { transform: scale(1); opacity: 1; } 82% { transform: scale(1.7); opacity: .65; } }
@keyframes syncFlow { from { left: -24px; } to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .sync.is-live .sync__list li,
  .sync.is-live .sync__month .is-day,
  .sync.is-live .sync__month .is-day i.ev,
  .sync.is-live[data-on="mac"] .sync__arrow span::before,
  .sync.is-live[data-on="mac"] .sync__mlist li { animation: none; }}

.sync__hint { font-size: 13px; color: var(--ink-2); }

@media (max-width: 780px) {
  .sync__arrow { transform: rotate(90deg); height: 24px; }}
@media (prefers-reduced-motion: reduce) {
  .sync__arrow, .sync__mac { transition: none; }}

/* ─── Страницы с боковым оглавлением ──────────────────────
   Версии обновлений и разделы разбора. Список слева липкий
   и отмечает то, что сейчас на экране. */
.verpage {
  display: grid;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(24px, 3vw, 40px);
}
@media (min-width: 900px) {
  .verpage { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }}
@media (min-width: 1400px) {
  .verpage { grid-template-columns: 250px minmax(0, 1fr); }}

.verside {
  display: grid;
  gap: 2px;
  align-content: start;
}
@media (min-width: 900px) {
  .verside { position: sticky; top: 86px; }}
.verside__t {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.verside a {
  display: grid; gap: 1px;
  padding: 9px 12px;
  border-radius: var(--r-s);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.verside a b { font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.verside a span,
.verside a time { font-size: 12px; color: var(--ink-3); }
.verside a:hover { background: var(--g-tint); }
/* Текущий раздел: отметка слева, а не заливка — она спокойнее и
   не спорит с содержимым справа. */
.verside a.is-here { border-left-color: var(--g); background: var(--g-tint); }
.verside a.is-here b { color: var(--g); }

.verbody { display: grid; gap: 0; }
/* Якорь не должен уезжать под липкую шапку */
.verbody .rel { scroll-margin-top: 96px; }

/* Текст записей шире не делаем: длинная строка читается хуже */
.verbody .rel__list li div { max-width: 68ch; }

/* Оглавление по разделам: только названия, без дат */
.verside--toc a { padding: 7px 12px; }
.verside--toc a b { font-size: 13.5px; font-weight: 500; }
.verside--toc a.is-here b { font-weight: 600; }
/* Читаемая мера строки внутри широкой раскладки */
.verbody > p, .verbody > ul, .verbody .finding, .verbody .takeaway { max-width: 68ch; }
.verbody > h2 { scroll-margin-top: 96px; max-width: 20ch; }
.verbody > h3 { max-width: 40ch; }

/* Приписка к последней команде: что именно осталось на месте */
.creel__keep {
  position: absolute; left: clamp(18px, 2.6vw, 26px); right: clamp(18px, 2.6vw, 26px);
  bottom: calc(clamp(16px, 2.2vw, 24px) + 44px);
  font-size: 11.5px; color: rgba(255, 255, 255, .5); text-align: center;
  opacity: 0;
}
.creel.is-live .creel__keep { animation: sayIn var(--beat3) var(--ease-out) infinite; animation-delay: calc(var(--beat3) * .52); }

/* Обещанное отделено от работающего одной подписью над группой.
   Раньше метка «появится» повторялась на каждой из пяти строк. */
.plan__later {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan__list--later li { color: var(--ink-3); }
.plan__soon { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }
.plan--pro .btn { width: 100%; justify-content: center; }
/* Подпись под кнопкой первого экрана: честно про бету */
.hero__beta { color: var(--ink-3); }

/* ─── Без скриптов ────────────────────────────────────────
   Сцены показов держатся на классе, который ставит скрипт.
   Без него в трёх секциях оставались пустые тёмные прямоугольники:
   показываем осмысленный кадр, как при уменьшенной анимации. */
@media (scripting: none) {
  .req, .creel__say, .creel__keep { opacity: 0; }
  .preel__card { opacity: 1; transform: none; }
  .preel__said span, .preel__legend { opacity: 1; }
  .creel__list li[data-row="1"] .crow__dot { background: var(--g-bright); border-color: var(--g-bright); }
  .creel__list li[data-row="1"] .crow__name::after { transform: scaleX(1); }
  .creel__list li[data-row="1"] { opacity: .45; }

  /* Три панели открываются только скриптом, и без него их содержимое было
     недоступно вовсе: кнопки вкладок мёртвые, текст под атрибутом hidden.
     Показываем все панели подряд, а сами вкладки прячем. */
  [data-pane][hidden] { display: block !important; }
  [role="tablist"] { display: none; }
}

/* ─── Сравнение с альтернативами ──────────────────────────
   Строки по возражениям, а не по функциям: человек читает то,
   что спрашивает сам. Своя колонка выделена, но не подкрашена
   зелёным целиком — таблица должна читаться как честная. */
.vs { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 760px; }
.vs th, .vs td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Названия строк стали заголовками ради читалки, но выглядят как обычный
   текст: жирность заголовка здесь ни к чему. */
.vs tbody th { font-weight: 400; color: var(--ink); }
.vs thead th {
  font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.vs thead th span { font-weight: 400; font-size: 12px; color: var(--ink-3); }
/* Чужие колонки приглушены намеренно: глаз должен ловить свою. */
.vs tbody td { color: var(--ink-3); }
.vs tbody th { width: 34%; }
.vs td b { color: var(--g); font-weight: 600; }
.vs .vs__me b { font-size: 15.5px; }

/* Своя колонка: светлая подложка и рамка по краям, без заливки цветом */
.vs .vs__me {
  background: var(--g-tint);
  border-left: 1px solid var(--g-line);
  border-right: 1px solid var(--g-line);
}
.vs thead .vs__me { color: var(--g); border-top: 1px solid var(--g-line); border-radius: 8px 8px 0 0; }
.vs tbody tr:last-child .vs__me { border-bottom: 1px solid var(--g-line); border-radius: 0 0 8px 8px; }

/* ─── Не давит ────────────────────────────────────────────
   Шесть коротких утверждений без иконок: тема спокойная,
   и украшать её значками было бы не к месту. */
.calm {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Ввод текстом: равноправный путь, а не сноска мелким шрифтом */
.typed {
  display: grid; gap: clamp(16px, 2.4vw, 32px); align-items: center;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white);
  box-shadow: var(--shadow-1);
}
@media (min-width: 820px) { .typed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }}
.typed__t { display: grid; gap: 8px; }
.typed__t h3 { font-size: clamp(17px, 1.6vw, 21px); }
.typed__t p { font-size: 16.5px; color: var(--ink-2); }

/* Поле ввода: тот же вид, что в нижнем ряду панели приложения */
.typed__field {
  border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(180deg, #1b2023, #14181b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.typed__ph { font-size: 14px; color: rgba(255, 255, 255, .88); display: inline-flex; align-items: center; }
.typed__ph i {
  display: inline-block; width: 1.5px; height: 16px; margin-left: 3px;
  background: var(--g-bright); animation: caretBlink .9s step-end infinite;
}
@media (prefers-reduced-motion: reduce) { .typed__ph i { animation: none; }}

/* ─── Арт-дирекция v5: precise editorial ──────────────────
   Капсула остаётся героем, а интерфейс вокруг неё ведёт себя как
   инструмент: меньше декоративных плашек, больше ритма, состояния и
   точной продуктовой демонстрации. */

.nav {
  background: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(10, 11, 13, .07);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(10, 11, 13, .1);
}

.hero[data-hero] {
  /* Teaser остаётся видимым для глубины, но не съедает нижнюю пятую
     часть первого экрана и не прижимает privacy-ряд к чёрной главе. */
  --hero-preview-h: 112px;
  background: var(--white);
  isolation: isolate;
}
.hero[data-hero]::before,
.hero[data-hero]::after { display: none; }

/* Нижний край следующей главы постоянно остаётся в кадре. Это не второй
   экземпляр секции и не фаза анимации: неподвижный слой только показывает
   глубину страницы, а настоящий #how перекрывает его в конце sticky-сцены. */
.hero__chapter-preview {
  position: sticky;
  top: calc(100svh - var(--hero-preview-h));
  z-index: 3;
  display: block;
  height: var(--hero-preview-h);
  margin-bottom: calc(-1 * var(--hero-preview-h));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 0;
  border-radius: clamp(38px, 4.5vw, 72px) clamp(38px, 4.5vw, 72px) 0 0;
  background: var(--bg);
  box-shadow: 0 -24px 54px -38px rgba(10, 11, 13, .72), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--on-dark);
  transition: opacity .16s linear;
}
.hero.is-chapter-handoff .hero__chapter-preview {
  opacity: 0;
  pointer-events: none;
}
.hero__chapter-preview-in {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.5fr);
  gap: clamp(26px, 3.2vw, 52px);
  align-items: center;
}
.hero__chapter-copy { display: grid; gap: 7px; }
.hero__chapter-copy small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-bright);
}
.hero__chapter-copy small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-bright);
  box-shadow: 0 0 0 5px rgba(53, 217, 141, .08), 0 0 18px rgba(53, 217, 141, .3);
}
.hero__chapter-copy strong {
  font-size: clamp(20px, 1.65vw, 26px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--on-dark);
}
.hero__chapter-trust {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}
.hero__chapter-trust-item {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-inline: clamp(16px, 1.7vw, 27px);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.hero__chapter-trust-item svg {
  width: 21px;
  height: 21px;
  color: var(--g-bright);
}
.hero__chapter-trust-item > span { display: grid; gap: 3px; min-width: 0; }
.hero__chapter-trust-item b {
  overflow: hidden;
  font-size: clamp(11px, .83vw, 13px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-dark);
}
.hero__chapter-trust-item small {
  overflow: hidden;
  font-size: clamp(9px, .7vw, 11px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242, 246, 244, .5);
}
.hero[data-hero] .hero__grid {
  grid-template-columns: minmax(430px, 45%) minmax(540px, 55%);
  gap: clamp(18px, 2.2vw, 34px);
  position: relative;
  z-index: 2;
}

.hero__flow { padding-left: 86px; }
.hero__flow::before {
  left: 0;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 13, .13) 5%, rgba(10, 11, 13, .13) 95%, transparent);
}
.hero__block::before {
  content: attr(data-tact) "\A" attr(data-phase);
  left: -72px;
  top: 50%;
  white-space: pre;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero__block::after {
  left: -89px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--g);
  background: var(--g-tint);
  box-shadow: 0 0 0 5px rgba(53, 217, 141, .1);
}

.hero__block--lead { justify-content: center; }
.hero[data-hero] .hero__block--lead .hero__pill {
  margin-bottom: 22px;
}
.hero[data-hero] .hero__pill {
  padding: 8px 13px;
  border: 1px solid rgba(10, 11, 13, .08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
}
.hero[data-hero] .hero__pill::before {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--g-bright);
  box-shadow: 0 0 0 4px rgba(53, 217, 141, .13);
}

.hero[data-hero] h1 {
  max-width: 15ch;
  font-size: clamp(54px, 4.65vw, 72px);
  line-height: .93;
  letter-spacing: -.058em;
}
.hero[data-hero] .hero__h1sub {
  max-width: 39ch;
  margin-top: 24px;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink-2);
}

.hero__spoken {
  max-width: 36ch;
  margin-top: 22px;
  font-size: clamp(20px, 1.48vw, 24px);
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--ink-2);
}

/* Голос остаётся главным мостом к результату, но не конкурирует с CTA:
   микрофон и волна живут прямо на белом поле, разобранные сущности — ниже. */
.hero-command {
  width: min(100%, 520px);
  min-height: 66px;
  margin-top: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.hero-command::before { display: none; }
.hero-command__mic {
  display: grid;
  place-items: center;
  border: 1px solid var(--g-line);
  color: var(--g);
}
.hero-command__mic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--g-tint);
  box-shadow: 0 0 0 8px rgba(234, 243, 238, .58), inset 0 1px 0 #fff;
}
.hero-command__mic svg { width: 23px; height: 23px; }

.hero-command .hero-command__wave {
  position: static;
  left: auto;
  top: auto;
  width: min(100%, 370px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: space-between;
  gap: 0;
  opacity: 1;
  transform: none;
}
.hero-command .hero-command__wave i {
  flex: 0 0 3px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--line-2);
  opacity: .82;
  transform-origin: center;
  animation: heroWave 1.08s cubic-bezier(.42, 0, .28, 1) infinite;
}
.hero-command .hero-command__wave i:nth-child(6n + 1) { height: 10px; animation-duration: .92s; }
.hero-command .hero-command__wave i:nth-child(6n + 2) { height: 21px; animation-duration: 1.18s; }
.hero-command .hero-command__wave i:nth-child(6n + 3) { height: 34px; animation-duration: .84s; }
.hero-command .hero-command__wave i:nth-child(6n + 4) { height: 43px; animation-duration: 1.26s; }
.hero-command .hero-command__wave i:nth-child(6n + 5) { height: 28px; animation-duration: .98s; }
.hero-command .hero-command__wave i:nth-child(6n) { height: 15px; animation-duration: 1.34s; }
.hero-command .hero-command__wave i:nth-child(n + 14) {
  background: var(--g-bright);
  opacity: 1;
}
.hero-command .hero-command__wave i:nth-child(9n + 1) { animation-delay: -.08s; }
.hero-command .hero-command__wave i:nth-child(9n + 2) { animation-delay: -.74s; }
.hero-command .hero-command__wave i:nth-child(9n + 3) { animation-delay: -.31s; }
.hero-command .hero-command__wave i:nth-child(9n + 4) { animation-delay: -.92s; }
.hero-command .hero-command__wave i:nth-child(9n + 5) { animation-delay: -.47s; }
.hero-command .hero-command__wave i:nth-child(9n + 6) { animation-delay: -.15s; }
.hero-command .hero-command__wave i:nth-child(9n + 7) { animation-delay: -.63s; }
.hero-command .hero-command__wave i:nth-child(9n + 8) { animation-delay: -.26s; }
.hero-command .hero-command__wave i:nth-child(9n) { animation-delay: -.84s; }
.hero-command__cursor {
  flex: 0 0 2px;
  width: 2px;
  height: 42px;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--g-bright);
  box-shadow: 0 0 14px rgba(53, 217, 141, .22);
  animation: heroCursor .86s ease-in-out infinite alternate;
}
@keyframes heroWave {
  0%, 100% { transform: scaleY(.48); opacity: .48; }
  38% { transform: scaleY(1.08); opacity: 1; }
  72% { transform: scaleY(.7); opacity: .72; }
}
@keyframes heroCursor { from { opacity: .42; } to { opacity: 1; } }

.hero-entities {
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  border: 1px solid rgba(13, 122, 78, .1);
  border-radius: 20px;
  background: rgba(234, 243, 238, .66);
}
.hero-entities li {
  min-height: 35px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(13, 122, 78, .08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .72);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--g);
}
.hero-entities svg { width: 16px; height: 16px; }

.hero[data-hero] .hero__block--lead .hero__cta { margin-top: 23px; }
.hero[data-hero] .hero__block--lead .btn {
  min-width: 190px;
  min-height: 56px;
  box-shadow: 0 18px 34px -20px rgba(10, 11, 13, .7);
}
.hero__privacy-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  color: var(--ink-2);
}
.hero__privacy-note svg {
  width: 24px;
  height: 24px;
  color: var(--ink-2);
}
.hero__privacy-note span { display: grid; gap: 2px; }
.hero__privacy-note b {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
}
.hero__privacy-note small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
}
.hero__trust {
  width: min(100%, 650px);
  margin: 20px 0 0;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid rgba(10, 11, 13, .09);
}
.hero__trust li {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-inline: 18px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--ink-3);
}
.hero__trust li:first-child { padding-left: 0; }
.hero__trust li + li { border-left: 1px solid rgba(10, 11, 13, .09); }
.hero__trust svg { width: 24px; height: 24px; color: var(--ink-3); }
.hero__beta {
  max-width: 650px;
  margin-top: 11px;
  display: none;
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* Карточки выглядят как лёгкие листы интерфейса, а не всплывающие баннеры. */
.hero[data-hero] .stage::before {
  width: min(76%, 590px);
  background: radial-gradient(circle closest-side, rgba(234, 243, 238, .34), transparent 72%);
}
.orbit-card {
  width: clamp(190px, 16.4vw, 240px);
  min-height: 78px;
  padding: 14px 16px 13px;
  border-color: rgba(64, 70, 77, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 30px 68px -30px rgba(28, 38, 42, .34), 0 8px 20px -14px rgba(28, 38, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(28px) saturate(112%);
  -webkit-backdrop-filter: blur(28px) saturate(112%);
}
.orbit-card__kind,
.orbit-card__meta { font-size: 9.5px; }
.orbit-card__title { font-size: 13px; }

/* До первого жеста работает настоящий постер капсулы. Стартовый экран
   оставляем чистым: карточки появятся только после начала прокрутки. Их
   позиции заданы заранее, чтобы при запуске WebGL не было скачка. */
@media (min-width: 1101px) {
  /* На desktop факты о приватности живут в тёмной линии доверия. Внутри
     hero остаётся короткое обещание возле CTA; на mobile нижняя линия
     скрыта, поэтому исходный список продолжает работать там. */
  .hero[data-hero] .hero__block--lead .hero__trust { display: none; }
  .stage:not(.stage--ready) .orbit-card { opacity: 0; }
  .stage:not(.stage--ready) .orbit-card:nth-child(1) { left: 15%; top: 16%; transform: translate(-50%, -50%) rotate(-7deg); }
  .stage:not(.stage--ready) .orbit-card:nth-child(2) { left: 87%; top: 15%; transform: translate(-50%, -50%) rotate(5.5deg); }
  .stage:not(.stage--ready) .orbit-card:nth-child(3) { left: 15%; top: 48%; transform: translate(-50%, -50%) rotate(4deg); }
  .stage:not(.stage--ready) .orbit-card:nth-child(4) { left: 87%; top: 47%; transform: translate(-50%, -50%) rotate(-5.5deg); }
  .stage:not(.stage--ready) .orbit-card:nth-child(5) { left: 16%; top: 80%; transform: translate(-50%, -50%) rotate(-3.5deg); }
  .stage:not(.stage--ready) .orbit-card:nth-child(6) { left: 86%; top: 81%; transform: translate(-50%, -50%) rotate(7deg); }
  .stage--ready .orbit-card { left: 0; top: 0; }
}

/* Вторая глава намеренно контрастная и входит в страницу большим радиусом. */
#how {
  position: relative;
  z-index: 4;
  margin-top: -1px;
  overflow: hidden;
  border-radius: clamp(34px, 4.5vw, 72px) clamp(34px, 4.5vw, 72px) 0 0;
  background: var(--bg);
  padding-top: clamp(56px, 5vw, 80px);
}
@media (min-width: 1101px) {
  #how.is-before-handoff { border-radius: 0; }}
.how__intro {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(38px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(42px, 4.5vw, 72px);
}
#how .sec-head--metric { margin: 0; align-content: center; }
#how .sec-head--metric h2 { display: grid; gap: 8px; }
#how .sec-head--metric h2 > span {
  font-size: clamp(76px, 9vw, 142px);
  line-height: .8;
  letter-spacing: -.07em;
  text-transform: uppercase;
  color: var(--white);
}
#how .sec-head--metric h2 > small {
  font: inherit;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--on-dark);
}
#how .sec-head--metric .lede {
  max-width: 32ch;
  font-size: 15.5px;
  color: var(--on-dark-2);
}
.how__app {
  position: relative;
  height: clamp(390px, 34vw, 520px);
  margin: 0;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: clamp(26px, 3vw, 44px);
  background: var(--bg);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.how__app img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: .96;
}
.how__app figcaption {
  position: static;
  padding: 14px 0 17px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

#how .reel {
  padding-top: clamp(44px, 5vw, 76px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#how .step h3 { color: var(--on-dark); }
#how .step p { color: var(--on-dark-2); }
#how .step { border-top-color: rgba(255, 255, 255, .12); }
#how .step code {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
}
#how .ic { background: rgba(53, 217, 141, .1); color: var(--g-bright); }
#how .gauge,
#how .typed {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
#how .gauge__bar { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); }
#how .gauge__h,
#how .gauge__l,
#how .gauge__note,
#how .typed__t p { color: var(--on-dark-2); }
#how .typed__t h3 { color: var(--on-dark); }

/* Вторичные доказательства — одна редакционная полоса, а не ещё две
   тёмные карточки внутри тёмного раздела. Так глава заканчивается
   быстрее и не превращается в череду одинаковых контейнеров. */
.how__support {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 6vw, 90px);
  margin-top: clamp(42px, 4.6vw, 68px);
  padding-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#how .how__support .gauge,
#how .how__support .typed {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#how .how__support .typed {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 20px;
  padding-left: clamp(30px, 4vw, 62px);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
#how .how__support .typed__t p { max-width: 46ch; font-size: 15px; }
#how .how__support .typed__field { width: 100%; }
@media (max-width: 820px) {
  .how__support { grid-template-columns: 1fr; }
  #how .how__support .typed {
    padding-top: 34px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-left: 0;
  }}

/* Дальние секции получают один редакционный ритм вместо череды карточек. */
.sec:not(.sec--dark) { border-top: 1px solid rgba(10, 11, 13, .06); }
/* Узкая мера заголовка нужна только там, где рядом вторая колонка.
   В обычной шапке заголовок и подзаголовок идут друг под другом
   от левого края и занимают ширину секции. */
.sec-head--split > h2 { max-width: 20ch; }
.sec-head:not(.sec-head--split) > .lede { max-width: 72ch; }
#voice .sec-head,
#calendar .sec-head,
#research .sec-head { max-width: 900px; }
#privacy { border-radius: clamp(34px, 4vw, 64px) clamp(34px, 4vw, 64px) 0 0; }

@media (max-width: 1200px) {
  .hero[data-hero] .hero__grid {
    grid-template-columns: minmax(390px, 46%) minmax(500px, 54%);
  }
  .hero__flow { padding-left: 72px; }
  .hero__block::before { left: -59px; }
  .hero__block::after { left: -75px; }
  .hero-command { grid-template-columns: 50px minmax(0, 1fr); gap: 13px; }
  .orbit-card--pin { padding-right: 45px; }
  .orbit-card--pin .orbit-card__title { max-width: 14ch; }
  .token {
    right: 9px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }
  .token--meeple svg { width: 18px; height: 20px; }}

/* На 1280 px широкая орбита уже упирается в край окна. Сохраняем воздух
   вокруг капсулы за счёт небольшого адаптивного уменьшения карточек и
   отдельной безопасной раскладки первого, ещё не запущенного кадра. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .orbit-card { width: 220px; }
  .stage:not(.stage--ready) .orbit-card:nth-child(1) { left: 10%; }
  .stage:not(.stage--ready) .orbit-card:nth-child(2) { left: 88%; }
  .stage:not(.stage--ready) .orbit-card:nth-child(3) { left: 10%; }
  .stage:not(.stage--ready) .orbit-card:nth-child(4) { left: 88%; }
  .stage:not(.stage--ready) .orbit-card:nth-child(5) { left: 12%; }
  .stage:not(.stage--ready) .orbit-card:nth-child(6) { left: 86%; }
}

/* На широком, но невысоком экране второй раздел съедал доказательства
   приватности. Делаем сам preview компактнее и ужимаем только вертикальные
   интервалы первого такта — типографика и иерархия остаются прежними. */
@media (min-width: 1101px) and (max-height: 900px) {
  .hero[data-hero] { --hero-preview-h: 96px; }
  .hero__chapter-copy { gap: 4px; }
  .hero__chapter-copy strong { font-size: clamp(19px, 1.65vw, 25px); }
  .hero__chapter-trust-item { min-height: 40px; padding-inline: 16px; }
  .hero[data-hero] .hero__block--lead .hero__pill { margin-bottom: 18px; }
  .hero[data-hero] .hero__h1sub { margin-top: 18px; }
  .hero__spoken { margin-top: 16px; }
  .hero-command { min-height: 60px; margin-top: 10px; }
  .hero-command__mic { width: 58px; height: 58px; }
  .hero-command .hero-command__wave { height: 42px; }
  .hero-entities { margin-top: 8px; padding: 7px; }
  .hero-entities li { min-height: 33px; }
  .hero[data-hero] .hero__block--lead .hero__cta { margin-top: 18px; }
  .hero__trust { margin-top: 12px; padding-top: 12px; }
}

@media (max-width: 1100px) {
  /* На телефоне порядок должен начинаться со смысла, а не с отдельного
     рендера капсулы. Разворачиваем вложенный flow в общий grid: лид и
     голосовой результат идут первыми, затем живая сцена, затем пояснения. */
  .hero[data-hero] {
    height: auto;
    min-height: 0;
    padding: 28px 0 64px;
  }
  .hero__chapter-preview { display: none; }
  .hero[data-hero] .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .hero[data-hero] .hero__flow { display: contents; }
  .hero[data-hero] .hero__block {
    width: min(100%, 620px);
    margin-inline: auto;
    padding-left: 0;
    text-align: center;
    align-items: center;
  }
  .hero[data-hero] .hero__block--lead { order: 1; }
  .hero[data-hero] .hero__stage {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
  }
  .hero[data-hero] .hero__block:not(.hero__block--lead) { order: 3; }
  .hero__spoken { margin-inline: auto; }
  .hero-command { margin-inline: auto; text-align: left; }
  .hero__trust { margin-inline: auto; }
  .hero__beta { margin-inline: auto; }
  .hero__beta { display: block; }
  .how__intro { grid-template-columns: 1fr; }
  #how .sec-head--metric { text-align: center; justify-items: center; }
  #how .sec-head--metric .lede { margin-inline: auto; }
  .how__app { width: min(100%, 720px); margin-inline: auto; }}

@media (max-width: 560px) {
  .hero[data-hero] { padding-top: 18px; }
  .hero[data-hero] .hero__grid { gap: 20px; }
  .hero[data-hero] .hero__block--lead .hero__pill { margin-bottom: 20px; }
  .hero[data-hero] h1 { max-width: 14ch; font-size: clamp(42px, 13vw, 60px); }
  .hero[data-hero] .hero__h1sub { margin-top: 18px; }
  .hero__spoken { font-size: 18px; }
  .hero-command {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    min-height: 58px;
    padding: 0;
    border-radius: 0;
  }
  .hero-command::before { display: none !important; }
  .hero-command__mic { width: 54px; height: 54px; }
  .hero-command .hero-command__wave {
    grid-column: 2;
    display: flex !important;
    width: 100%;
    height: 30px;
    gap: 3px;
  }
  .hero-command .hero-command__wave i { width: 2px; }
  .hero-entities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hero-entities li { justify-content: center; }
  .hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding-top: 14px;
  }
  .hero__trust li {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    padding: 8px 7px;
    font-size: 9.5px;
    line-height: 1.25;
    text-align: center;
  }
  .hero__trust li:first-child { padding-left: 7px; }
  .hero__trust li + li { border-left: 1px solid rgba(10, 11, 13, .07); border-top: 0; }
  .hero__trust svg { width: 21px; height: 21px; }
  .hero__beta { max-width: 34ch; }
  #how { border-radius: 30px 30px 0 0; }
  #how .sec-head--metric h2 > span { font-size: 72px; }
  .how__app { height: 390px; border-radius: 24px; }}

@media (min-width: 1101px) and (max-height: 780px) {
  .hero[data-hero] { --hero-preview-h: 66px; }
  .hero__chapter-preview { border-radius: 32px 32px 0 0; }
  .hero__chapter-preview-in {
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.5fr);
    gap: 22px;
  }
  .hero__chapter-copy { gap: 3px; }
  .hero__chapter-copy small { font-size: 7.5px; }
  .hero__chapter-copy strong { font-size: 15px; }
  .hero__chapter-trust-item { min-height: 34px; grid-template-columns: 19px minmax(0, 1fr); gap: 7px; padding-inline: 12px; }
  .hero__chapter-trust-item svg { width: 17px; height: 17px; }
  .hero__chapter-trust-item b { font-size: 10px; }
  .hero__chapter-trust-item small { display: none; }
  .hero[data-hero] .hero__block--lead .hero__cta {
    margin-top: 0;
    flex-wrap: nowrap;
    gap: 14px;
  }
  .hero[data-hero] .hero__block--lead .btn {
    min-width: 168px;
    min-height: 52px;
  }
  .hero__privacy-note { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .hero__privacy-note svg { width: 20px; height: 20px; }
  .hero__privacy-note b { font-size: 12.5px; }
  .hero__privacy-note small { font-size: 11px; }
  .hero__trust { margin-top: 2px; padding-top: 2px; }
  .hero__trust li { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding-inline: 12px; font-size: 10.5px; }
  .hero__trust svg { width: 20px; height: 20px; }
  .hero__beta { display: none; }}

@media (prefers-reduced-motion: reduce) {
  .hero-command .hero-command__wave i { animation: none; }
  .hero-command__cursor { animation: none; opacity: 1; }
  .hero-command .hero-command__wave i:nth-child(3n + 1) { transform: scaleY(.7); }
  .hero-command .hero-command__wave i:nth-child(3n + 2) { transform: scaleY(1.8); }}

/* ─── Первый экран: один живой голосовой поток ────────────
   После спокойного первого кадра не листаем четыре презентационных
   слайда. Один модуль остаётся перед глазами, а его команда меняется в
   такт карточкам и жидкости. Это короче, понятнее и визуально связывает
   голос с тем, что происходит справа. */
.voice-story__dock {
  width: min(100%, 520px);
}

.voice-story {
  position: relative;
  width: 100%;
  padding: 18px 20px 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 8%, rgba(53, 217, 141, .11), transparent 28%),
    linear-gradient(145deg, #14181b 0%, #090b0d 72%);
  box-shadow:
    0 34px 82px -42px rgba(8, 16, 12, .72),
    0 10px 26px -18px rgba(8, 16, 12, .45),
    inset 0 1px 0 rgba(255, 255, 255, .075);
  color: var(--on-dark);
  isolation: isolate;
}

.voice-story::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -80px;
  z-index: -1;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 217, 141, .12), transparent 66%);
  pointer-events: none;
}

.voice-story__top {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
}

.voice-story__mic {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(53, 217, 141, .22);
  border-radius: 50%;
  background: rgba(53, 217, 141, .08);
  color: var(--g-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .28s var(--ease), box-shadow .28s var(--ease);
}

.voice-story__mic svg { width: 21px; height: 21px; }

.voice-story__wave {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.voice-story__wave i {
  flex: 1 1 2px;
  max-width: 3px;
  height: 15px;
  border-radius: 999px;
  background: rgba(197, 206, 203, .46);
  transform-origin: center;
  animation: heroWave 1.02s cubic-bezier(.42, 0, .28, 1) infinite;
  transition: opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.voice-story__wave i:nth-child(5n + 1) { height: 9px; animation-duration: .82s; }
.voice-story__wave i:nth-child(5n + 2) { height: 23px; animation-duration: 1.16s; }
.voice-story__wave i:nth-child(5n + 3) { height: 34px; animation-duration: .92s; background: var(--g-bright); }
.voice-story__wave i:nth-child(5n + 4) { height: 18px; animation-duration: 1.28s; }
.voice-story__wave i:nth-child(7n) { background: var(--g-bright); animation-delay: -.45s; }

.voice-story__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.voice-story__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-bright);
  box-shadow: 0 0 0 4px rgba(53, 217, 141, .09);
}

.voice-story__scenes {
  position: relative;
  min-height: 150px;
  margin-top: 9px;
}

.voice-story__scene {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(13px);
}

.voice-story[data-story-state="0"] [data-story-scene="0"],
.voice-story[data-story-state="1"] [data-story-scene="1"],
.voice-story[data-story-state="2"] [data-story-scene="2"],
.voice-story[data-story-state="3"] [data-story-scene="3"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: voiceStoryIn .32s var(--ease) both;
}

@keyframes voiceStoryIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.voice-story__kind {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-bright);
}

.voice-story__scene p {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(25px, 2.15vw, 34px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.038em;
  text-wrap: balance;
  color: var(--on-dark);
}

.voice-story__scene small {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--on-dark-3);
}

.voice-story__scene--done p {
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 600;
}

.voice-story__foot {
  min-height: 34px;
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

.voice-story__foot span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.voice-story__foot svg { width: 13px; height: 13px; color: var(--g-bright); }

.voice-story__caption {
  max-width: 52ch;
  margin: 18px 4px 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink-3);
}

.voice-story[data-story-state="3"] .voice-story__mic {
  background: rgba(53, 217, 141, .16);
  box-shadow: 0 0 0 7px rgba(53, 217, 141, .055), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.voice-story[data-story-state="3"] .voice-story__wave i {
  animation: none;
  opacity: .28;
  transform: scaleY(.18);
  background: var(--g-bright);
}
.voice-story[data-story-state="3"] .voice-story__live { font-size: 0; color: var(--g-bright); }
.voice-story[data-story-state="3"] .voice-story__live::after { content: "собрано"; font-size: 9px; }

/* Карточки компактнее прежних: у них остаётся воздух до капсулы, но левая
   орбита больше не въезжает в редакционную колонку. */
.hero[data-hero] .orbit-card { width: clamp(190px, 16.2vw, 238px); }

@media (min-width: 1101px) {
  .hero__flow { padding-left: 0; }
  .hero__flow::before,
  .hero__block::before,
  .hero__block::after { display: none; }

  /* Вся левая история должна закончиться до тёмного teaser, а не
     упираться privacy-рядом в его верхнюю кромку. */
  .hero[data-hero] .hero__block--lead { transform: translateY(-18px); }

  /* Длина этого блока и есть длина сцены: по нему считается прогресс.
     На 168svh шесть карточек улетали быстрее, чем их успевали прочесть. */
  .hero__block--story {
    min-height: calc(230svh - 66px);
    display: block;
    padding: 10svh 0 32svh;
  }

  .voice-story__dock {
    position: sticky;
    top: calc(66px + clamp(112px, 18svh, 182px));
  }}

/* Узкое desktop-окно ещё использует sticky-сцену, но редакционная колонка
   уже переносит заголовок на три строки. Поднимаем и уплотняем только этот
   граничный режим, чтобы весь блок приватности оставался над preview. */
@media (min-width: 1101px) and (max-width: 1199px) and (max-height: 900px) {
  .hero[data-hero] .hero__block--lead {
    justify-content: flex-start;
    padding-top: 34px;
  }
  .hero[data-hero] h1 { font-size: 48px; }
  .hero[data-hero] .hero__h1sub { margin-top: 13px; font-size: 14px; }
  .hero__spoken { margin-top: 11px; font-size: 18px; }
  .hero-command { min-height: 50px; margin-top: 6px; }
  .hero-command__mic { width: 50px; height: 50px; }
  .hero-command .hero-command__wave { height: 34px; }
  .hero-entities { margin-top: 6px; padding: 5px; }
  .hero-entities li { min-height: 29px; padding-inline: 8px; }
  .hero[data-hero] .hero__block--lead .hero__cta { margin-top: 11px; }
  .hero__trust { margin-top: 7px; padding-top: 7px; }
  .hero__trust li { padding-block: 5px; font-size: 9.5px; }
}

@media (max-width: 1100px) {
  .hero[data-hero] .hero__block--story {
    min-height: 0;
    padding: 18px 0 0;
  }
  .voice-story__dock { position: static; margin-inline: auto; }
  .voice-story { text-align: left; }
  .voice-story__caption { margin-inline: auto; text-align: center; white-space: normal; }}

@media (max-width: 560px) {
  .voice-story { padding: 14px 14px 13px; border-radius: 22px; }
  .voice-story__top { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
  .voice-story__mic { width: 44px; height: 44px; }
  .voice-story__live { display: none; }
  .voice-story__wave { height: 36px; }
  .voice-story__scenes { min-height: 142px; }
  .voice-story__scene p { font-size: 24px; }
  .voice-story__scene--done p { font-size: 36px; }
  .voice-story__foot { font-size: 8px; }}

@media (prefers-reduced-motion: reduce) {
  .voice-story__wave i { animation: none; }
  .voice-story__scene { animation: none !important; }}

/* ─── Конверсионный проход ────────────────────────────────
   После первого экрана страница быстрее переходит к доказательствам:
   меньше повторов, настоящий интерфейс крупно и более собранный FAQ. */

/* Календарь теперь выглядит как отдельная продуктовая сцена, а не две
   случайные карточки. Даже выключенный Календарь macOS остаётся читаемым. */
#calendar {
  background:
    radial-gradient(circle at 76% 22%, rgba(53, 217, 141, .08), transparent 28%),
    var(--white);
}
#calendar .sync { margin-top: clamp(28px, 4vw, 58px); }
#calendar .sync__stage {
  padding: clamp(16px, 2.6vw, 34px);
  border: 1px solid rgba(10, 11, 13, .08);
  border-radius: clamp(24px, 3vw, 40px);
  background: linear-gradient(145deg, #f1f5f4, #f8faf9 58%, #eef5f1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 34px 80px -58px rgba(10, 18, 15, .38);
}
#calendar .sync__app,
#calendar .sync__mac {
  min-height: 248px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 26px 54px -38px rgba(8, 12, 14, .46), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#calendar .sync__mac {
  opacity: .62;
  filter: grayscale(.72);
  background: rgba(255, 255, 255, .9);
  border-color: rgba(10, 11, 13, .1);
}
#calendar .sync__cap { font-size: 11.5px; }
#calendar .sync__list li,
#calendar .sync__mlist li { font-size: 14px; }
#calendar .sync__note { margin-top: auto; font-size: 12px; }
#calendar .sync__hint { max-width: 72ch; }

/* Вместо нарисованного браузерного макета — крупный кадр текущей сборки. */
.product-proof {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 36%, rgba(53, 217, 141, .08), transparent 30%),
    #f4f7f6;
}
.product-proof__grid {
  display: grid;
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(34px, 5vw, 72px);
}
.product-proof__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.product-proof__steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid rgba(10, 11, 13, .11);
}
.product-proof__steps li:last-child { border-bottom: 1px solid rgba(10, 11, 13, .11); }
.product-proof__steps li > span {
  padding-top: 3px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--g);
}
.product-proof__steps div { display: grid; gap: 6px; }
.product-proof__steps b { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.025em; }
.product-proof__steps p { max-width: 42ch; color: var(--ink-2); font-size: 15.5px; }
.product-proof__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: clamp(28px, 3vw, 46px);
  background: #0c0f11;
  box-shadow: 0 52px 110px -52px rgba(7, 12, 10, .68), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.product-proof__shot img { display: block; width: 100%; height: auto; }
.product-proof__shot figcaption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(13, 16, 18, .72);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .6);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 940px) {
  .product-proof__grid { grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); }}
@media (max-width: 620px) {
  .product-proof__shot { border-radius: 24px; }
  .product-proof__shot figcaption { position: static; display: block; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }}

/* Обещанные функции и цена не маскируются под уже продающийся тариф. */
.plan__soon { padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.55; }
.plan__soon b { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 600; }

/* Нативный accordion оставляет быстрый скан вопросов и не растягивает
   финальную треть страницы на несколько лишних экранов. */
.faq { align-items: start; }
.faq__item { padding: 0; display: block; }
.faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2vw, 28px) 0;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 400;
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); color: var(--g); border-color: var(--g-line); }
.faq__a { max-width: 64ch; padding: 0 44px clamp(22px, 2.2vw, 30px) 0; }
#faq-install { scroll-margin-top: 86px; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; }}

/* ─── Product story v111 ───────────────────────────────────
   Три следующих главы больше не выглядят как длинная череда одинаковых
   контейнеров. У каждой один главный объект: настоящий календарь,
   живой разбор речи и раскладка результата по местам. */

/* 3 секунды: настоящий интерфейс без декоративного «монитора» вокруг. */
#how .how__intro {
  grid-template-columns: minmax(300px, .68fr) minmax(520px, 1.32fr);
  gap: clamp(24px, 3vw, 54px);
  min-height: clamp(540px, 42vw, 650px);
  margin-bottom: clamp(46px, 5vw, 78px);
}
#how .how__app {
  isolation: isolate;
  height: clamp(540px, 42vw, 650px);
  padding: 0;
  overflow: visible;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#how .how__app::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(720px, 96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 217, 141, .105), rgba(53, 217, 141, .025) 42%, transparent 70%);
  filter: blur(8px);
}
#how .how__app img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 38px 50px rgba(0, 0, 0, .46));
}
#how .how__app figcaption {
  position: absolute;
  right: clamp(0px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 28px);
  display: grid;
  gap: 4px;
  min-width: 230px;
  padding: 12px 0 0 18px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  color: var(--on-dark-3);
}
#how .how__app figcaption span:first-child { color: var(--on-dark); }

/* 4. Понимание речи: один широкий «разборочный стол» вместо чёрного
   квадрата и длинной белой ведомости под ним. */
#voice {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(53, 217, 141, .09), transparent 26%),
    linear-gradient(180deg, #f6f8f7 0%, #eef2f0 100%);
}
#voice .switch { justify-content: space-between; }
#voice .preel {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr);
  min-height: clamp(380px, 34vw, 500px);
  margin-bottom: clamp(30px, 3vw, 46px);
  padding: clamp(30px, 4.5vw, 70px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: clamp(30px, 4vw, 56px);
  background:
    radial-gradient(circle at 24% 38%, rgba(53, 217, 141, .13), transparent 34%),
    linear-gradient(145deg, #0b0e10, #12191a 62%, #0b0d0f);
  box-shadow: 0 46px 100px -58px rgba(9, 18, 14, .72), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#voice .preel::after {
  content: "РЕЧЬ → СТРУКТУРА";
  position: absolute;
  left: clamp(30px, 4.5vw, 70px);
  bottom: clamp(20px, 2.5vw, 34px);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .3);
}
#voice .preel__scene {
  min-height: 280px;
  aspect-ratio: auto;
  padding: 0 0 34px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#voice .preel__said {
  max-width: 23ch;
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.28;
  letter-spacing: -.038em;
}
#voice .preel__card { left: 0; right: 0; padding: 19px 21px; }
#voice .preel__text {
  display: grid;
  align-content: center;
  gap: 14px;
  padding-left: clamp(26px, 4vw, 58px);
  border-left: 1px solid rgba(255, 255, 255, .11);
}
#voice .preel__lead { margin: 0; color: var(--on-dark); font-size: clamp(18px, 1.5vw, 22px); }
#voice .preel__note { color: var(--on-dark-2); line-height: 1.6; }

#voice .creel {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr);
  min-height: clamp(380px, 34vw, 500px);
  margin-bottom: clamp(30px, 3vw, 46px);
  padding: clamp(30px, 4.5vw, 70px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: clamp(30px, 4vw, 56px);
  background:
    radial-gradient(circle at 24% 38%, rgba(53, 217, 141, .13), transparent 34%),
    linear-gradient(145deg, #0b0e10, #12191a 62%, #0b0d0f);
  box-shadow: 0 46px 100px -58px rgba(9, 18, 14, .72), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#voice .creel::after {
  content: "ГОЛОС → ДЕЙСТВИЕ";
  position: absolute;
  left: clamp(30px, 4.5vw, 70px);
  bottom: clamp(20px, 2.5vw, 34px);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .3);
}
#voice .creel__scene {
  min-height: 280px;
  aspect-ratio: auto;
  padding: 0 0 34px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#voice .creel__day { font-size: 11px; }
#voice .creel__list { gap: 16px; }
#voice .creel__list li { font-size: clamp(16px, 1.5vw, 20px); }
#voice .creel__say {
  right: 0;
  left: 0;
  bottom: 28px;
  padding: 13px 18px;
  text-align: left;
}
#voice .creel__keep { right: 0; left: 0; bottom: 78px; text-align: left; }
#voice .creel__text {
  display: grid;
  align-content: center;
  gap: 14px;
  padding-left: clamp(26px, 4vw, 58px);
  border-left: 1px solid rgba(255, 255, 255, .11);
}
#voice .creel__text .preel__lead { margin: 0; color: var(--on-dark); font-size: clamp(18px, 1.5vw, 22px); }
#voice .creel__text .preel__note { color: var(--on-dark-2); line-height: 1.6; }
#voice .creel__text a { color: var(--g-bright); }

#voice .cmds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(10, 11, 13, .09);
  border-radius: clamp(24px, 2.5vw, 34px);
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 30px 70px -58px rgba(8, 18, 14, .5);
}
#voice .cmd {
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: 20px;
  min-height: 164px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 0;
  border-right: 1px solid rgba(10, 11, 13, .08);
}
#voice .cmd:nth-child(n+4) { display: none; }
#voice .cmd:nth-child(3) { border-right: 0; }
#voice .cmd__key { align-self: start; }
#voice .cmd__what { align-self: end; font-size: 15px; }
#voice .cmds__note { text-align: center; }

#voice .parse {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(10, 11, 13, .09);
  border-radius: clamp(24px, 2.5vw, 34px);
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 30px 70px -58px rgba(8, 18, 14, .5);
}
#voice .parse__row {
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: 24px;
  min-height: 176px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 0;
  border-right: 1px solid rgba(10, 11, 13, .08);
}
#voice .parse__row:nth-child(n+4) { display: none; }
#voice .parse__row:nth-child(3) { border-right: 0; }
#voice .parse__arrow { display: none; }
#voice .parse__said { font-size: clamp(16px, 1.25vw, 18px); }
#voice .parse__out { align-content: end; }
#voice .legend { justify-content: center; margin-top: 18px; }
#voice .tryit {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3.2vw, 44px);
  border-color: rgba(10, 11, 13, .08);
  border-radius: clamp(26px, 3vw, 42px);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 38px 86px -66px rgba(8, 18, 14, .52);
}

/* 5. Куда попадает дело: светлая сортировочная сцена сверху и один
   насыщенный продуктовый остров с наложениями и панелью ниже. */
#calendar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 14%, rgba(53, 217, 141, .1), transparent 24%),
    var(--white);
}
#calendar .sync { margin-top: 0; }
#calendar .sync__stage {
  min-height: clamp(360px, 32vw, 470px);
  grid-template-columns: minmax(0, 1.24fr) 72px minmax(280px, .76fr);
  padding: clamp(24px, 4vw, 58px);
  border: 0;
  border-radius: clamp(32px, 4vw, 58px);
  background:
    radial-gradient(circle at 28% 38%, rgba(53, 217, 141, .13), transparent 28%),
    linear-gradient(145deg, #e9efec, #f8faf9 58%, #edf4f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 42px 90px -72px rgba(8, 18, 14, .5);
}
#calendar .sync__app { min-height: 310px; transform: rotate(-1.2deg); }
#calendar .sync__mac { min-height: 250px; transform: rotate(1.2deg); }
#calendar .sync__arrow span { height: 1px; }
#calendar .sync__hint { margin-left: clamp(4px, 2vw, 24px); }

#calendar .split {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  gap: clamp(46px, 7vw, 110px);
  margin-top: clamp(72px, 8vw, 124px);
  padding: clamp(32px, 5vw, 76px);
  overflow: hidden;
  border-radius: clamp(34px, 4.5vw, 64px);
  background:
    radial-gradient(circle at 78% 28%, rgba(53, 217, 141, .13), transparent 30%),
    #0a0b0d;
  box-shadow: 0 50px 110px -74px rgba(8, 14, 12, .82), inset 0 1px 0 rgba(255, 255, 255, .07);
}
#calendar .split::before {
  content: "КОНФЛИКТЫ ВИДНЫ ДО СОХРАНЕНИЯ";
  position: absolute;
  top: 22px;
  right: clamp(28px, 4vw, 60px);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .3);
}
#calendar .split__text { gap: 0; }
#calendar .shots { grid-template-columns: 1fr; align-content: center; gap: 18px; }
#calendar .tl {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#calendar .tl__h { color: var(--on-dark); }
#calendar .tl__track { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .07); }
#calendar .tl__scale { color: var(--on-dark-2); }

@media (max-width: 1100px) {
  #how .how__intro { grid-template-columns: 1fr; min-height: 0; }
  #how .how__app { height: min(650px, 74vw); }}

@media (max-width: 820px) {
  #voice .preel { grid-template-columns: 1fr; }
  #voice .preel__text { padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .11); border-left: 0; }
  #voice .creel { grid-template-columns: 1fr; }
  #voice .creel__text { padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .11); border-left: 0; }
  #voice .parse { grid-template-columns: 1fr; }
  #voice .parse__row { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(10, 11, 13, .08); }
  #voice .parse__row:nth-child(3) { border-bottom: 0; }
  #voice .cmds { grid-template-columns: 1fr; }
  #voice .cmd { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(10, 11, 13, .08); }
  #voice .cmd:nth-child(3) { border-bottom: 0; }
  #calendar .sync__stage { grid-template-columns: 1fr; }
  #calendar .sync__app,
  #calendar .sync__mac { transform: none; }
  #calendar .split { grid-template-columns: 1fr; }}

@media (max-width: 560px) {
  #how .how__app { height: 500px; }
  #how .how__app figcaption { right: 0; bottom: 0; min-width: 190px; }
  #voice .preel { min-height: 0; padding: 24px 22px 62px; border-radius: 28px; }
  #voice .preel__scene { min-height: 250px; }
  #voice .preel__said { font-size: 25px; }
  #voice .creel { min-height: 0; padding: 24px 22px 62px; border-radius: 28px; }
  #voice .creel__scene { min-height: 300px; }
  #calendar .sync__stage,
  #calendar .split { padding: 24px 20px; border-radius: 28px; }
  #calendar .split::before { display: none; }}

/* ─── Product story v112 ───────────────────────────────────
   Конфликт, нагрузка и поведение виджета теперь не конкурируют
   внутри одного коллажа. Каждая глава доказывает одну вещь. */

/* Календарь: один конфликт и одно решение вместо трёх колонок текста,
   маленького рабочего стола и слипшихся событий на одной полосе. */
#calendar .split {
  grid-template-columns: minmax(280px, .66fr) minmax(560px, 1.34fr);
  min-height: clamp(500px, 38vw, 620px);
  align-items: center;
}
#calendar .split::before { display: none; }
#calendar .split__text {
  max-width: 430px;
  align-content: center;
  gap: 18px;
}
.split__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-bright) !important;
}
.split__title {
  max-width: 12ch;
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1.02;
  letter-spacing: -.052em;
  color: var(--on-dark);
}
.split__lead {
  max-width: 38ch;
  font-size: clamp(16px, 1.22vw, 19px) !important;
  line-height: 1.5;
  color: var(--on-dark-2) !important;
}
.split__facts {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.split__facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
}
.split__facts > div + div { border-top: 1px solid rgba(255, 255, 255, .08); }
.split__facts dt {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.split__facts dd { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .76); }

#calendar .shots { width: 100%; }
#calendar .tl {
  gap: 20px;
  padding: clamp(26px, 3vw, 44px);
  border-radius: clamp(24px, 2.5vw, 36px);
  background:
    radial-gradient(circle at 70% 15%, rgba(53, 217, 141, .08), transparent 34%),
    rgba(255, 255, 255, .045);
}
.tl__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
#calendar .tl__h { font-size: clamp(16px, 1.3vw, 20px); }
.tl__day {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .36);
}
#calendar .tl__track {
  position: relative;
  height: auto;
  min-height: 76px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  overflow: visible;
  border-radius: 18px;
}
#calendar .tl__b {
  position: static;
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border-radius: 11px;
  overflow: hidden;
}
#calendar .tl__b small {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .06em;
  color: currentColor;
  opacity: .62;
}
#calendar .tl__b > span { width: 100%; font-size: 12px; font-weight: 550; }
#calendar .tl__b--plan { grid-column: 1 / span 2; }
#calendar .tl__b--zoom { grid-column: 3; }
#calendar .tl__b--free { grid-column: 4 / span 2; }
#calendar .tl__b--call { grid-column: 6; }
#calendar .tl__b--ev {
  background: rgba(53, 217, 141, .2);
  border: 1px solid rgba(53, 217, 141, .18);
  color: rgba(242, 246, 244, .94);
}
#calendar .tl__b--free {
  background: rgba(242, 246, 244, .94);
  border-color: rgba(242, 246, 244, .92);
  color: #0d6c49;
  box-shadow: 0 8px 26px -18px rgba(242, 246, 244, .9);
}
#calendar .tl__scale { padding: 0 8px; font-size: 10px; }
.tl__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(53, 217, 141, .22);
  border-radius: 16px;
  background: rgba(53, 217, 141, .08);
  color: var(--on-dark-2);
  font-size: 13px;
}
.tl__result span { display: flex; flex-wrap: wrap; gap: 5px; }
.tl__result b { color: var(--g-bright); font-weight: 600; }
.tl__result strong {
  flex: 0 0 auto;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -.025em;
  color: var(--on-dark);
}
.tl__loose {
  display: grid;
  grid-template-columns: 11px auto 1fr;
  gap: 9px;
  align-items: center;
  color: var(--on-dark-2) !important;
}
.tl__loose > span { width: 11px; height: 11px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; }
.tl__loose b { color: var(--on-dark); font-size: 13px; }
.tl__loose small { font-size: 11px; color: rgba(255, 255, 255, .36); }

/* Нагрузка дня: используем реальный знак из favicon.svg, а не плоскую
   условную пилюлю. Динамический слой лишь меняет уровень жидкости. */
#research {
  background:
    radial-gradient(circle at 14% 18%, rgba(53, 217, 141, .08), transparent 26%),
    #eef2f0;
}
#research .load {
  grid-template-columns: minmax(460px, .9fr) minmax(480px, 1.1fr);
  min-height: clamp(330px, 28vw, 420px);
  gap: clamp(38px, 5vw, 86px);
  padding: clamp(34px, 4.5vw, 68px);
  border-color: rgba(10, 11, 13, .08);
  border-radius: clamp(30px, 3.6vw, 52px);
  background:
    radial-gradient(circle at 18% 48%, rgba(53, 217, 141, .12), transparent 27%),
    rgba(255, 255, 255, .82);
  box-shadow: 0 46px 94px -74px rgba(10, 18, 15, .62), inset 0 1px 0 rgba(255, 255, 255, .95);
}
#research .load__demo {
  grid-template-columns: 180px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: clamp(26px, 3vw, 48px);
}
/* Знак нагрузки рисуем стилями, а не фавиконкой под фильтрами: обесцвеченная
   картинка с заливкой в режиме multiply выглядела мутной и расфокусированной.
   Геометрия и материал те же, что у знака в приложении. */
.loadcap {
  width: clamp(92px, 11vw, 124px);
  aspect-ratio: 1 / 1.62;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(16, 22, 24, .1), rgba(16, 22, 24, .04) 46%, rgba(16, 22, 24, .08));
  box-shadow:
    inset 0 0 0 2px rgba(16, 22, 24, .3),
    inset 0 3px 6px rgba(255, 255, 255, .75),
    inset 0 -6px 12px rgba(16, 22, 24, .12),
    0 22px 42px -26px rgba(9, 20, 16, .55);
}
/* Жидкость: чистый цвет без смешивания со слоями под ней */
.loadcap__fill {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  --fill: .13;
  border-radius: 0;
  background: linear-gradient(180deg, var(--g-bright), var(--g));
  transform-origin: 50% 100%;
  transform: scaleY(var(--fill));
  transition: transform .45s var(--ease-out), background .45s var(--ease);
}
/* Поверхность жидкости выпуклая, а кромка ловит свет: ровная линия
   среза выглядела как заливка прямоугольника, а не как жидкость. */
.loadcap__fill::before {
  content: "";
  position: absolute;
  left: -6%; right: -6%;
  top: -7px;
  height: 14px;
  border-radius: 50%;
  background: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5);
}
/* Дно колбы уходит от света */
.loadcap__fill::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(6, 40, 26, .3));
}
/* Блик по стеклу: мягкая полоса вдоль левой стенки, а не белая палка */
.loadcap__shine {
  position: absolute;
  z-index: 3;
  left: 14%;
  top: 9%;
  width: 22%;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  filter: blur(2.5px);
  pointer-events: none;
}
/* Плотный день: рыжий, но не тревожный. Красное пятно на экране
   заставляет закрыть приложение, а не разобрать дела. */
.loadcap[data-level="tight"] .loadcap__fill { background: linear-gradient(180deg, #f2b25c, #e08b2a); }
.loadcap[data-level="over"] .loadcap__fill { background: linear-gradient(180deg, #ef8f6a, #d9552f); }
/* Цифра держит тот же тон, что и жидкость */
.load[data-level="tight"] .load__pct strong { color: #c07a17; }
.load[data-level="over"] .load__pct strong { color: #c8491f; }

.load__readout { display: grid; gap: 7px; align-content: center; }
#research .load__state { font-size: clamp(20px, 1.7vw, 27px); letter-spacing: -.03em; }
#research .load__sum { font-size: 14px; }
.load__pct { display: grid; gap: 4px; margin-top: 14px; }
.load__pct strong {
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: .92;
  letter-spacing: -.065em;
  color: var(--g);
  font-variant-numeric: tabular-nums;
}
.load__pct span { max-width: 16ch; font-size: 11px; line-height: 1.35; color: var(--ink-3); }
#research .load__ctl { gap: 24px; }
#research .load__row {
  grid-template-columns: 100px minmax(0, 1fr) 34px;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(10, 11, 13, .08);
}
#research .load__k,
#research .load__v { font-size: 15px; }
#research .load__note { max-width: 70ch; font-size: 13px; line-height: 1.55; }
#research .proof__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(42px, 5vw, 74px);
  border-top: 1px solid rgba(10, 11, 13, .12);
  border-bottom: 1px solid rgba(10, 11, 13, .12);
}
#research .proof__cell {
  min-height: 230px;
  padding: clamp(28px, 3vw, 44px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#research .proof__cell + .proof__cell { border-left: 1px solid rgba(10, 11, 13, .1); }
#research .proof__src { margin-top: auto; }

/* Реальная механика: в покое маленький знак, при наведении раскрывается
   кадр текущей беты. Это изображение приложения, а не нарисованный макет. */
#look.product-proof {
  background:
    radial-gradient(circle at 78% 28%, rgba(53, 217, 141, .09), transparent 28%),
    #f7f9f8;
}
#look .product-proof__grid {
  grid-template-columns: minmax(280px, .5fr) minmax(680px, 1.5fr);
  gap: clamp(52px, 7vw, 120px);
}
#look .product-proof__shot {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-hover__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product-hover__top small { font: inherit; color: var(--g); }
.product-hover__stage {
  outline: none;
}
/* ─── Монитор на столе ────────────────────────────────────
   Корпус, экран и подставка нарисованы вёрсткой. Снимок чужого рабочего
   стола весил бы больше и устаревал бы с каждой версией macOS, а чужие
   иконки приложений — чужие товарные знаки, их на сайт класть нельзя.
   Иконки в доке свои: узнаваемы по силуэту и цвету, но нарисованы нами. */
.mac { display: grid; justify-items: center; }
.mac__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  /* Корпус: тёмная рамка вокруг матрицы и лёгкий свет по верхней грани */
  border: 10px solid #26292c;
  box-shadow:
    0 0 0 1px rgba(10, 12, 14, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 54px 90px -50px rgba(7, 12, 10, .6);
  /* Обои: два мягких пятна света, иначе экран читается как чёрный
     прямоугольник и стеклянная панель поверх него не видна. */
  background:
    radial-gradient(60% 52% at 74% 76%, rgba(53, 217, 141, .2), transparent 70%),
    radial-gradient(52% 46% at 22% 18%, rgba(84, 146, 214, .18), transparent 72%),
    linear-gradient(152deg, #16222c, #0e1a20 52%, #0b1114);
}
/* Ножка и подставка: без них экран висит в воздухе */
.mac__neck {
  width: clamp(58px, 6vw, 86px);
  height: clamp(26px, 2.6vw, 38px);
  background: linear-gradient(180deg, #d4d8db, #a8aeb3);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.mac__foot {
  width: clamp(150px, 16vw, 216px);
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #c6ccd0, #9aa1a7);
  box-shadow: 0 12px 20px -12px rgba(10, 14, 16, .6);
}

.mac__menu {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 14px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
}
.mac__menu b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .34); }
.mac__menu span:first-of-type { font-weight: 600; color: rgba(255, 255, 255, .6); }
.mac__menu i { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }

.mac__dock {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dockapp {
  width: clamp(26px, 2.6vw, 36px);
  aspect-ratio: 1;
  border-radius: 22%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 6px -3px rgba(0, 0, 0, .5);
}
.dockapp svg { width: 68%; height: 68%; display: block; }
.dockapp--files { background: linear-gradient(170deg, #6fc3f2, #2b8fd6); }
.dockapp--files svg path { fill: rgba(255, 255, 255, .92); }
.dockapp--web { background: linear-gradient(170deg, #f2f5f7, #c8d1d8); }
.dockapp--web circle { fill: #2f7fd0; }
.dockapp--mail { background: linear-gradient(170deg, #7fd0ff, #2d92e6); }
.dockapp--mail rect { fill: rgba(255, 255, 255, .95); }
.dockapp--notes { background: linear-gradient(170deg, #ffd978, #f0b429); }
.dockapp--notes rect { fill: rgba(255, 255, 255, .92); }
.dockapp--set { background: linear-gradient(170deg, #e6eaee, #b9c0c7); }
.dockapp--set circle { fill: #b7bec5; }
/* Календарь без картинки: число и день недели, как в системе */
.dockapp--cal {
  background: linear-gradient(180deg, #ffffff 0 27%, #f4f6f7 27%);
  display: grid;
  align-content: center;
  gap: 0;
  color: #d9463c;
  overflow: hidden;
  position: relative;
}
.dockapp--cal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 27%;
  background: #d9463c;
}
.dockapp--cal em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin-top: -1px;
}
.dockapp--cal b {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #15181b;
  margin-top: 2px;
}
@media (max-width: 760px) {
  .dockapp { width: 22px; border-radius: 6px; }
  .dockapp--cal b { font-size: 11px; }
  .dockapp--cal em { font-size: 5.5px; }
}

/* Зона наведения. Раньше панель раскрывалась от наведения на всё окно,
   и это читалось как сбой: человек ведёт курсор мимо, а окно оживает.
   Теперь зона в покое размером со знак, а на время показа растёт до
   размеров панели — иначе курсор уходил бы с неё и панель мигала. */
.product-hover__spot {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: 0;
  z-index: 4;
  width: 88px;
  height: clamp(96px, 9vw, 128px);
  border-radius: 999px;
}
.product-hover__spot:hover,
.product-hover__spot:focus-visible {
  width: min(42%, 330px);
  height: 100%;
  border-radius: 20px;
}
.product-hover__spot:focus-visible { outline: 2px solid var(--g); outline-offset: 4px; }

/* ─── Панель приложения ───────────────────────────────────
   Стекло, а не чёрная плашка: в жизни сквозь панель видно рабочий стол.
   Материал повторяет код приложения — системное размытие, тёмный слой
   поверх него и свет по верхней кромке. Радиус тот же, 20. */
.kap {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(14px, 1.6vw, 22px);
  width: min(40%, 320px);
  max-height: calc(100% - 44px);
  border-radius: 20px;
  overflow: hidden;
  color: rgba(255, 255, 255, .95);
  font-size: 12.5px;
  background: linear-gradient(180deg, rgba(14, 18, 20, .74), rgba(10, 13, 15, .82));
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 0 1px rgba(255, 255, 255, .12),
    0 30px 60px -28px rgba(0, 0, 0, .75);
  opacity: 0;
  transform: translate(10px, 12px) scale(.98);
  transform-origin: 100% 100%;
  clip-path: inset(86% 0 0 86% round 999px);
  transition: clip-path .5s cubic-bezier(.2, .82, .2, 1), opacity .18s ease, transform .5s cubic-bezier(.2, .82, .2, 1);
}
#look .product-hover__spot:hover ~ .kap,
#look .product-hover__spot:focus-visible ~ .kap {
  opacity: 1;
  transform: none;
  clip-path: inset(0 round 20px);
}

.kap__cal { padding: 11px 13px 9px; }
.kap__calhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.kap__month { font-size: 13.5px; font-weight: 600; }
.kap__nav { font-size: 10.5px; color: rgba(255, 255, 255, .36); letter-spacing: .04em; }
.kap__week, .kap__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kap__week span { font-size: 9px; color: rgba(255, 255, 255, .36); text-align: center; padding-bottom: 3px; }
.kap__grid span {
  position: relative; aspect-ratio: 1 / .82; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 11.5px; color: rgba(255, 255, 255, .95);
  font-variant-numeric: tabular-nums;
}
.kap__grid .out { color: rgba(255, 255, 255, .22); }
.kap__grid .now { background: rgba(255, 255, 255, .16); font-weight: 600; }
.kap__grid i {
  position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}
.kap__grid i.ev { background: rgba(255, 255, 255, .92); }
.kap__grid .now i { left: calc(50% - 5px); }
.kap__grid .now i.ev { left: calc(50% + 2px); }
.kap__grid .has i { left: calc(50% - 1.5px); }

.kap__list { border-top: 1px solid rgba(255, 255, 255, .12); padding: 10px 13px 11px; display: grid; gap: 6px; }
.kap__day {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .36);
  margin-top: 3px;
}
.kap__day span { font-weight: 500; letter-spacing: .04em; }
.kap__row { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 8px; }
.kap__row--ev .kap__txt { font-weight: 500; }
.kap__bar { width: 2.5px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .92); flex: 0 0 auto; }
.kap__time { font-size: 12px; font-weight: 600; min-width: 38px; font-variant-numeric: tabular-nums; }
.kap__dot { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; border: 1.3px solid rgba(255, 255, 255, .45); }
.kap__txt { display: grid; gap: 1px; min-width: 0; }
.kap__txt em { font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, .36); }

.kap__input {
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; gap: 10px;
  padding: 0 9px 0 13px; height: 48px;
}
.kap__ph { font-size: 12.5px; color: rgba(255, 255, 255, .36); margin-right: auto; }
.kap__knobmark { width: 44px; height: 44px; border-radius: 22px; flex: 0 0 auto; display: grid; place-items: center; }
/* Знак в строке ввода: та же колба 17 на 27, что и в приложении */
.kap__knobmark i {
  display: block; width: 17px; height: 27px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0 60%, rgba(255, 255, 255, .36) 60%);
  box-shadow: inset 0 0 0 1.3px rgba(255, 255, 255, .82);
}
/* В покое знак сидит в круглом стеклянном кругляше — ровно так, как он
   выглядит в приложении. Из этого же круга потом вытекает панель. */
.product-hover__knob {
  position: absolute;
  right: 12px;
  bottom: clamp(26px, 3.4vw, 54px);
  z-index: 3;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 44, 48, .82), rgba(18, 22, 25, .9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 14px 26px -10px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  transition: opacity .18s ease, transform .42s cubic-bezier(.2, .82, .2, 1);
}
.product-hover__knob img {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 4px 7px rgba(53, 217, 141, .16));
}
/* Тихий ореол: круг дышит, чтобы его заметили и подвели курсор. */
.product-hover__knob::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(53, 217, 141, .5);
  opacity: 0;
  animation: knobPulse 3.2s cubic-bezier(.25, .7, .35, 1) infinite;
}
@keyframes knobPulse {
  0%   { transform: scale(.94); opacity: 0; }
  22%  { opacity: .75; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.product-hover__hint {
  position: absolute;
  right: clamp(120px, 10vw, 172px);
  bottom: clamp(48px, 5vw, 76px);
  z-index: 3;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  transition: opacity .16s ease;
}
/* Стрелка подталкивает взгляд к знаку: короткий толчок вправо в такт ореолу. */
.product-hover__hint::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  color: var(--g-bright);
  animation: hintNudge 3.2s cubic-bezier(.3, .7, .3, 1) infinite;
}
@keyframes hintNudge {
  0%, 62%, 100% { transform: translateX(0); }
  16%           { transform: translateX(7px); }
  34%           { transform: translateX(1px); }
}
.product-hover__spot:hover .product-hover__knob,
.product-hover__spot:focus-visible .product-hover__knob { opacity: 0; transform: scale(.82); }
.product-hover__spot:hover ~ .product-hover__hint,
.product-hover__spot:focus-visible ~ .product-hover__hint { opacity: 0; }
#look .product-proof__shot figcaption {
  position: static;
  display: block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1100px) {
  #research .load,
  #look .product-proof__grid { grid-template-columns: 1fr; }
  #research .load__demo { grid-template-columns: 180px minmax(0, 1fr); }
  #calendar .split { grid-template-columns: 1fr; }
  #calendar .split__text { max-width: 680px; }
  .split__title { max-width: 15ch; }
  #look .product-proof__shot { max-width: 860px; width: 100%; margin-inline: auto; }}

@media (max-width: 700px) {
  #research .load__demo { grid-template-columns: 120px minmax(0, 1fr); }
  .loadcap { width: 120px; }
  #research .proof__grid { grid-template-columns: 1fr 1fr; }
  #research .proof__cell { min-height: 190px; }
  #research .proof__cell:nth-child(3) { border-left: 0; border-top: 1px solid rgba(10, 11, 13, .1); }
  #research .proof__cell:nth-child(4) { border-top: 1px solid rgba(10, 11, 13, .1); }
  #calendar .tl__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #calendar .tl__b--plan { grid-column: 1; }
  #calendar .tl__b--zoom { grid-column: 2; }
  #calendar .tl__b--free { grid-column: 3 / span 2; }
  #calendar .tl__b--call { grid-column: 1 / span 2; grid-row: 2; }
  /* На узком экране панель раскрыта сразу: наводить там нечем. Панель
     уменьшаем целиком, а не по частям — иначе внутри плывут пропорции,
     а экран монитора становится выше, чтобы она влезла без обрезки. */
  .mac__screen { aspect-ratio: 4 / 3; }
  #look .kap {
    opacity: 1;
    clip-path: inset(0 round 20px);
    width: 320px;
    max-height: none;
    transform: scale(.66);
    transform-origin: 100% 100%;
  }
  .product-hover__knob,
  .product-hover__hint,
  .product-hover__spot { display: none; }}

@media (max-width: 520px) {
  #calendar .split { min-height: 0; }
  .tl__top { align-items: flex-start; }
  .tl__day { display: none; }
  #calendar .tl { padding: 20px 16px; }
  #calendar .tl__track { gap: 6px; padding: 6px; }
  #calendar .tl__b { min-height: 54px; padding: 9px 8px; }
  #calendar .tl__b > span { font-size: 10.5px; }
  .tl__result { align-items: flex-start; flex-direction: column; }
  #research .load { min-height: 0; padding: 26px 20px; }
  #research .load__demo { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .loadcap { width: 96px; }
  #research .load__row { grid-template-columns: 78px minmax(0, 1fr) 24px; gap: 10px; }
  #research .proof__grid { grid-template-columns: 1fr; }
  #research .proof__cell { min-height: 0; }
  #research .proof__cell + .proof__cell { border-left: 0; border-top: 1px solid rgba(10, 11, 13, .1); }
  #look .kap { right: 4%; transform: scale(.5); }}

@media (prefers-reduced-motion: reduce) {
  .kap,
  .product-hover__knob,
  .product-hover__hint { transition: none; }
  .product-hover__knob::before,
  .product-hover__hint::after { animation: none; }}

/* ─── Арт-директорский проход v137 ─────────────────────────
   Нижняя половина страницы больше не должна ощущаться каталогом блоков.
   Здесь остаются все доказательства и SEO-тексты, но у каждой главы один
   главный объект, меньше служебного воздуха и яснее переход к следующей. */

/* 01 / Результат: цифра и настоящий экран держатся в одном кадре. */
#how {
  padding-block: clamp(66px, 6vw, 96px) clamp(72px, 7vw, 106px);
}
#how .how__intro {
  min-height: 0;
  margin-bottom: clamp(34px, 4vw, 54px);
}
#how .how__app {
  height: clamp(440px, 34vw, 540px);
}
#how .how__app figcaption { padding-block: 10px 13px; }
#how .reel {
  padding-top: clamp(30px, 3.4vw, 48px);
  margin-bottom: clamp(24px, 2.8vw, 38px);
  gap: clamp(28px, 4vw, 58px);
}
#how .reel__copy { gap: 13px; }
#how .reel__copy h3 { font-size: clamp(32px, 3.4vw, 50px); }
#how .reel__shortcut { margin-top: 0; }
#how .reel__chrome { min-height: 50px; }
#how .reel__capture { padding-block: 18px 16px; }
#how .reel__content { padding-block: 24px 28px; }
#how .reel__timeline li { min-height: 52px; }
#how .how__support {
  margin-top: clamp(30px, 3.4vw, 48px);
  padding-top: clamp(26px, 3vw, 40px);
}
#how .gauge__row { gap: 10px; }

/* 02 / Голос: интерактивный разбор должен быть сценой, а не длинной
   ведомостью. Три примера остаются, но белая часть становится ниже. */
#voice,
#calendar,
#research,
#look,
#vs,
#price,
#who,
#faq { padding-block: clamp(70px, 6.5vw, 104px); }
#voice .sec-head,
#calendar .sec-head,
#research .sec-head { margin-bottom: clamp(28px, 3vw, 46px); }
#voice .switch { margin-bottom: 22px; }
#voice .preel,
#voice .creel {
  min-height: clamp(330px, 28vw, 430px);
  margin-bottom: clamp(24px, 2.6vw, 36px);
  padding: clamp(26px, 3.6vw, 52px);
}
#voice .preel__scene,
#voice .creel__scene { min-height: 236px; }
#voice .parse__row { min-height: 150px; padding: clamp(18px, 2vw, 26px); }
#voice .legend { margin-top: 14px; }
#voice .tryit {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 34px);
}

/* 03 / Календарь: синхронизация — первый кадр, конфликт — короткий
   контрастный финал. Два объекта не должны конкурировать высотой. */
#calendar .sync { margin-bottom: clamp(22px, 2.6vw, 34px); }
#calendar .sync__stage {
  min-height: clamp(300px, 25vw, 370px);
  padding: clamp(20px, 3vw, 40px);
}
#calendar .sync__app { min-height: 245px; }
#calendar .sync__mac { min-height: 205px; }
#calendar .split {
  min-height: 0;
  margin-top: clamp(42px, 5vw, 70px);
  padding: clamp(26px, 3.4vw, 48px);
  gap: clamp(28px, 5vw, 72px);
}
#calendar .split__text { gap: 13px; }
#calendar .split__facts { margin-top: 4px; }
#calendar .split__facts > div { padding-block: 11px; }
#calendar .tl { gap: 14px; padding: clamp(20px, 2.4vw, 32px); }
#calendar .tl__track { min-height: 66px; }
#calendar .tl__b { min-height: 50px; padding: 8px 9px; }
#calendar .tl__result { padding-block: 12px; }

/* 04 / Исследование: капсула — главный интерактив. Цифры становятся
   компактной доказательной лентой, а не четырьмя отдельными карточками. */
#research .load {
  min-height: clamp(280px, 24vw, 350px);
  padding: clamp(26px, 3.5vw, 48px);
  gap: clamp(28px, 4vw, 60px);
}
#research .load__demo { gap: clamp(20px, 2.4vw, 36px); }
#research .proof__grid {
  margin-top: clamp(28px, 3.5vw, 48px);
}
#research .proof__cell {
  min-height: 168px;
  padding: clamp(20px, 2.2vw, 30px);
}
#research .proof__n { font-size: clamp(28px, 3vw, 40px); }
#research .proof__t { font-size: 14px; line-height: 1.42; }
#research .proof__src { font-size: 10.5px; }
#research .aside-note { margin-top: clamp(26px, 3vw, 42px); }

/* 05 / Настоящее приложение: сначала показываем iMac и живую точку
   наведения, затем три коротких доказательства одной строкой. */
#look .product-proof__grid {
  grid-template-columns: minmax(240px, .48fr) minmax(0, 1.52fr);
  gap: clamp(42px, 6vw, 92px);
  margin-top: clamp(28px, 4vw, 56px);
}
#look .product-proof__shot { order: 1; }
#look .product-proof__steps {
  order: 0;
  grid-template-columns: 1fr;
}
#look .product-proof__steps li {
  gap: 14px;
  padding-block: 16px;
}
#look .product-proof__steps p { font-size: 14px; line-height: 1.45; }
#look .product-proof__steps b { font-size: 17px; }
#look .product-hover__top { margin-bottom: 10px; }
#look .product-hover__stage { min-height: clamp(390px, 30vw, 480px); }

/* Сравнение — полезный справочный материал, но не ещё один главный экран.
   В закрытом состоянии остаётся ясная affordance; таблица и тексты не
   удалены из DOM и доступны поиску, клавиатуре и скринридеру. */
#vs .sec-head { margin-bottom: clamp(26px, 3vw, 42px); }
.vs-more {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.vs-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  padding: 0 2px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.018em;
}
.vs-more > summary::-webkit-details-marker { display: none; }
.vs-more > summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 400;
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.vs-more > summary span { margin-left: auto; color: var(--g); font-size: 18px; }
.vs-more[open] > summary::after { transform: rotate(45deg); color: var(--g); border-color: var(--g-line); }
.vs-more .scroller { padding-block: 22px 4px; }
#vs .aside-note { margin-top: 24px; font-size: 14px; }

/* Доверие и будущая версия читаются одним тёмным продолжением, а не двумя
   пустыми чёрными разворотами. */
#privacy { padding-bottom: clamp(38px, 4vw, 58px); }
#ai {
  padding-top: clamp(42px, 4.5vw, 68px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#privacy .sec-head,
#ai .sec-head { margin-bottom: clamp(28px, 3vw, 44px); }
#privacy .path { gap: 24px; }
#privacy .night-note { margin-top: 28px; padding-top: 22px; }
#ai .assist { gap: 22px; }
#ai .dialog { padding: clamp(18px, 2vw, 28px); }
#ai .pro-list li { padding-block: 10px; }

/* Цена, установка и FAQ: оставляем факты, убираем ощущение трёх длинных
   статей подряд. */
#price .sec-head,
#who .sec-head { margin-bottom: clamp(26px, 3vw, 44px); }
#price .plans { gap: 18px; }
#price .plan { padding: clamp(24px, 2.2vw, 34px); gap: 18px; }
#price .plan ul { gap: 9px; }
#price .price-note { margin-top: 24px; }
#who .steps { gap: 0; }
#faq .sec-head { margin-bottom: 26px; }
#faq .faq__q { padding-block: 18px; }

@media (max-width: 820px) {
  #look .product-proof__steps { grid-template-columns: 1fr; }
  #look .product-proof__steps li,
  #look .product-proof__steps li + li,
  #look .product-proof__steps li:last-child {
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(10, 11, 13, .11);
  }
  #look .product-proof__steps li:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  #how .how__app { height: 450px; }
  #how .reel { padding-top: 26px; }
  #voice,
  #calendar,
  #research,
  #look,
  #vs,
  #price,
  #who,
  #faq { padding-block: 58px; }
  #research .proof__grid { grid-template-columns: 1fr 1fr; }
  #research .proof__cell { min-height: 140px; padding: 18px 14px; }
  #research .proof__cell:nth-child(3),
  #research .proof__cell:nth-child(4) { display: none; }
  #research .proof__cell:nth-child(2) { border-left: 1px solid rgba(10, 11, 13, .1); }
}

/* ─── Голосовой разбор v138 ─────────────────────────────────
   Здесь смысл должен считываться за один взгляд. Убираем ощущение
   «палитры из тегов»: один тёмный hero-эпизод, затем спокойная лента
   «фраза → результат», и только после неё — самостоятельное демо. */

#voice .parse {
  display: grid;
  grid-template-columns: 1fr;
  max-width: none;
  border: 1px solid rgba(10, 11, 13, .1);
  border-radius: clamp(24px, 3vw, 38px);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 34px 76px -62px rgba(8, 18, 14, .5);
}
#voice .parse__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.6vw, 42px);
  min-height: 0;
  padding: clamp(20px, 2.5vw, 32px) clamp(22px, 3vw, 42px);
  border: 0;
  border-bottom: 1px solid rgba(10, 11, 13, .09);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
#voice .parse__row:first-child { border-radius: 0; }
#voice .parse__row:nth-child(n+4) { display: none; }
#voice .parse__row:nth-child(3) { border-bottom: 0; border-right: 0; }
#voice .parse__said {
  max-width: 42ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--ink-2);
}
#voice .parse__said .tok {
  margin-inline: .14em;
  padding: .12em .32em;
  border-radius: .48em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#voice .parse__arrow {
  display: block;
  color: var(--line-2);
  justify-self: center;
}
#voice .parse__arrow::before { font-size: 20px; }
#voice .parse__out {
  min-width: 0;
  align-content: center;
  gap: 7px 11px;
}
#voice .parse__out .tag {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--g);
  font-size: 11px;
  letter-spacing: .12em;
}
#voice .parse__out .tag--task { color: var(--ink-3); }
#voice .parse__val { font-size: clamp(15px, 1.25vw, 18px); }
#voice .parse__row:not(.is-lit) .tok {
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}
#voice .parse__row.is-lit .tok--who {
  background: rgba(10, 11, 13, .045);
  box-shadow: 0 0 0 1px rgba(10, 11, 13, .11);
}
#voice .parse__row.is-lit .tok--when {
  background: rgba(53, 217, 141, .16);
  color: var(--g);
  box-shadow: 0 0 0 1px rgba(53, 217, 141, .24);
}
#voice .parse__row.is-lit .tok--type {
  background: rgba(10, 11, 13, .075);
  color: var(--ink);
  box-shadow: none;
}
#voice .parse__row.is-lit .tok--rep {
  background: rgba(53, 217, 141, .1);
  color: var(--g);
  box-shadow: inset 0 -2px 0 var(--g-line);
}
#voice .parse__row.is-lit .tok--dur {
  background: rgba(10, 11, 13, .045);
  color: var(--ink-2);
  box-shadow: inset 0 -1px 0 var(--line-2);
}

/* Легенда больше не выглядит вторым набором цветных кнопок. */
#voice .legend {
  justify-content: flex-start;
  gap: 8px 16px;
  margin: 14px 4px 0;
  color: var(--ink-3);
  font-size: 12px;
}
#voice .legend::before {
  content: "Выделяем только то, что меняет результат:";
  color: var(--ink-3);
}
#voice .legend .tok {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  font-size: 12px;
}
#voice .legend .tok::before { content: "· "; color: var(--g); }

/* Самостоятельное демо: меньше рамки, больше ощущения одного понятного
   действия. Примеры остаются полезными, но перестают быть крупными pills. */
#voice .tryit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 22px;
  margin-top: clamp(28px, 3.4vw, 48px);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(10, 11, 13, .1);
  border-radius: clamp(22px, 2.8vw, 34px);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 30px 72px -60px rgba(8, 18, 14, .48);
}
#voice .tryit__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .08em;
}
#voice .tryit__field { grid-column: 1 / -1; min-width: 0; }
#voice .tryit__input {
  height: 52px;
  background: var(--paper);
  border-color: rgba(10, 11, 13, .16);
}
#voice .tryit__go { height: 52px; }
#voice .tryit__ex {
  grid-column: 1 / -1;
  margin: 0;
  gap: 4px 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
#voice .tryit__chip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
#voice .tryit__chip:hover { color: var(--g); text-decoration-color: var(--g-line); }
#voice .tryout {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}
#voice .tryit__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

@media (max-width: 820px) {
  #voice .parse__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 22px;
  }
  #voice .parse__row:nth-child(n+4) { display: none; }
  #voice .parse__arrow { justify-self: start; transform: rotate(90deg); }
  #voice .tryit { grid-template-columns: 1fr; }
  #voice .tryit__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 560px) {
  #voice .legend { display: none; }
  #voice .tryit__field { grid-template-columns: 1fr; }
  #voice .tryit__go { width: 100%; }
}

/* Страницы возврата из банка: короткий текст и шаги, без украшений. */
.doc .steps,
.doc .plain {
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
  display: grid;
  gap: 14px;
}
.doc .steps { counter-reset: step; }
.doc .steps li {
  position: relative;
  counter-increment: step;
  padding-left: 42px;
  line-height: 1.55;
}
.doc .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--g-tint);
  color: var(--g);
  font-size: 13px;
  font-weight: 600;
}
.doc .plain li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}
.doc .plain li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g);
}
.doc .btn { margin-top: clamp(20px, 2.2vw, 30px); }
.doc-note {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 18px;
  border-top: 1px solid rgba(10, 11, 13, .08);
  font-size: 14px;
  color: var(--ink-3);
  max-width: 68ch;
}