/* ie22.lat – лендинг, страница доступа, страница Mac, страница после оплаты.
   Канон 1:1 из продукта (web/src/design/tokens.css светлая тема + global.css .card/.go2):
   глина без падающих теней, --raise/--well-in из токенов, Inter текст, Manrope заголовки и цифры,
   electric = единственный CTA, coral = только тревога. Шкала кеглей 11/12/13/14/17/24/36/56. En-dash.
   09-06: разбор владельца («отступов нет, иерархии нет, серый кусок») – сетка секций 96px, один герой на
   блок, знак = .side-brand пульта 1:1, живое кино вместо картинки, цена = одна крупная цифра ряда. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --bg: #f7f7f7; --bg-2: #f1f1f1; --bg-block: var(--bg);
  --ink-1: #2c2c2c; --ink-2: #4a4a4a; --ink-3: #666666; --ink-4: #6A6A6A; --ink-5: #b8b8b8;
  --electric: #3f7cb3; --coral: #FF6F61; --gold: #D4A054; --ok: #3E9A63;
  --hairline: rgba(0,0,0,0.18); --hairline-mid: rgba(0,0,0,0.28);
  --eng-d: rgba(0,0,0,0.07); --eng-l: rgba(255,255,255,0.55);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* ГРАВЮРА, А НЕ МЯГКАЯ ТЕНЬ (замер владельца 22.09: «это не мои тени, у меня гравюра-дебосс»).
     Сайт размывал рельеф на 2-7 px, продукт – нет: web/src/design/tokens.css:78-80 держит те же
     токены с нулевым размытием, и светлая тема их не переопределяет. Размытие и съедало верхнюю
     и левую грань: светлая сторона даёт всего 4 пункта яркости на фоне 247, и растушёванная на
     семь пикселей она исчезала совсем. Числа приведены к продукту 1:1, свои не выдумываются. */
  --raise: 1.5px 1.5px 0 var(--eng-d), -1.5px -1.5px 0 var(--eng-l);
  --raise-lg: 2.5px 2.5px 0 var(--eng-d), -2.5px -2.5px 0 var(--eng-l);
  --well-in: inset 2.5px 2.5px 0 var(--eng-d), inset -2.5px -2.5px 0 var(--eng-l);
  --col: 960px;
  --sec: 96px;          /* шаг между секциями – один на всю страницу (Тафте: расстояние = смысл) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }
body {
  background: var(--bg); color: var(--ink-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; line-height: 1.55; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv01' 1; }
.eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .10em; color: var(--ink-3); font-weight: 600; }

/* ═══ ЛЕНДИНГ (пересобран 09-06 по разбору владельца: «дорого · enterprise · мы крутые чуваки» с первого
   экрана, до продукта). Три рычага премиума, каждый – не вкус, а приём:
   1) ТЁМНЫЙ ГЕРОЙ. Планка Linear/Vercel/Stripe/Raycast: первый экран тёмный, дальше светло. Тёмное поле
      читается как «инструмент для профессионала», светлое – как «сервис для всех». Продукт при этом
      остаётся своей глиной: тёмный только вход.
   2) ВОЗДУХ КРУПНЫМ ШАГОМ. Ритм секций 128px вместо 96: расстояние = смысл (Тафте), а щедрый воздух –
      единственный признак дорогого, который нельзя подделать дешевле.
   3) ОДИН ГЕРОЙ НА БЛОК (Рамс §3). В герое – H1. В кино – кадр. В деньгах – цифра 56. Нигде не три равные плашки.
   Кегли только по шкале 11/12/13/14/17/24/36/56. Цвет семантичен: electric = единственный CTA,
   gold = деньги и ценность, coral на лендинге не появляется вовсе (он про тревогу, не про продажу). */

:root {
  --sec-lg: 128px;            /* ритм секций лендинга */
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px 72px; }

/* ЗНАК – общий для всех страниц (лендинг, доступ, Mac, оплата). Базовое правило было вырезано вместе
   со старым блоком лендинга, и на странице доступа знак слипся в подчёркнутую строку «IE22пульт агентов». */
.mark { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.mark .name { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .18em;
  text-indent: .18em; text-transform: uppercase; line-height: 1; color: var(--bg);
  text-shadow: 1px 1px 0 rgba(255,255,255,.95), -1px -1px 1px rgba(0,0,0,.38); }
.mark .sub { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .16em;
  text-transform: lowercase; line-height: 1; color: var(--ink-2); }

/* КНОПКА – выпуклая пилюля по контенту, рецепт .go2 продукта 1:1. Подчёркивание ссылки снято явно:
   без этого правила кнопки на странице читались как обычные текстовые ссылки. */
.go2 { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 14px;
  font: 700 17px/1 'Inter', sans-serif; text-decoration: none; color: var(--ink-1); background: var(--bg-block);
  box-shadow: var(--raise); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  /* 09-06, замер владельца: на «Скопировать ссылку» стояла ЧЁРНАЯ рамка 2px outset – дефолт браузера для
     <button>. Сходило с рук, пока все .go2 были ссылками <a>; первый настоящий button вытащил системный
     кант на кнопку-короля мобильной версии. Глина не имеет обводок вообще – рельеф даёт только --raise. */
  border: 0; appearance: none; -webkit-appearance: none; }
.go2:hover { transform: translateY(-1px); box-shadow: var(--raise-lg); }
.go2:active { transform: none; box-shadow: var(--well-in); }
.go2.primary { background: var(--electric); color: #fff; }
.go2.small { padding: 10px 18px; font-size: 13px; border-radius: 11px; }

/* ── ШАПКА: знак по центру (как на всех плашках продукта), мышь над ним, язык – справа абсолютом ── */
.top { position: relative; display: flex; justify-content: center; padding: 30px 28px 0; background: var(--bg); }
.top .mark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.top .rat { width: 38px; height: 38px; opacity: .8; margin-bottom: 4px; }
/* знак на тёмном: гравюра-дебосс наоборот – свет снизу, тень сверху, иначе буквы «плавают» */
/* знак = гравюра-дебосс канона (.side-brand пульта): буквы ВДАВЛЕНЫ в глину, цвет = фон */
.top .mark .name { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .18em;
  text-indent: .18em; text-transform: uppercase; line-height: 1; color: var(--bg);
  text-shadow: 1px 1px 0 rgba(255,255,255,.95), -1px -1px 1px rgba(0,0,0,.38); }
.top .mark .sub { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .16em;
  text-transform: lowercase; line-height: 1; color: var(--ink-2); }
/* переключатель = желоб-дебосс .mode-seg продукта: активная выпёхнута raise */
.lang { position: absolute; right: 28px; top: 30px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px;
  box-shadow: var(--well-in); }
.lang button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 9px; font: 600 12px/1 'Inter',sans-serif; color: var(--ink-3); }
.lang button.on { color: var(--electric); box-shadow: var(--raise); background: var(--bg-block); }

/* ── ГЕРОЙ ── */
/* ГЛИНА, НЕ ГРАФИТ. Тёмный герой был моей выдумкой – канон проекта светлый, объём даёт гравюра-дебосс
   и токены --raise/--well-in, а не заливки и градиенты (приказ владельца 09-06). */
/* Верх ужат с 84 до 44: первый экран компьютера – 900 px, и каждый лишний пиксель сверху съедается
   у живой записи. Замер 09-07: шапка 113 + надпись 37 + заголовок 115 + кнопка 79 = кадр стартует
   на 416 и виден на 484 px из 810 – продолжение читается, обрыва нет. */
.hero { background: var(--bg); color: var(--ink-1); padding: 44px 28px 96px; text-align: center; }
.hero-in { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { color: var(--ink-3); margin-bottom: 20px; }
.hero h1 { font-family: 'Manrope','Inter',sans-serif; font-weight: 800; font-size: 56px; line-height: 1.03;
  letter-spacing: -.03em; color: var(--ink-1); max-width: 860px; }
.hero .sub { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 620px; margin-top: 22px; }
/* ОДНА КНОПКА – король экрана. Цена рядом с ней спорила за взгляд и снята (приказ владельца 09-06):
   деньги живут ниже, отдельной полосой, когда человек уже понял, за что платит. */
.cta { display: flex; justify-content: center; margin-top: 28px; }
/* с телефона кнопка скачивания уходит вместе со своей зоной – иначе на её месте оставался пустой воздух */
/* на телефоне прячем кнопку скачивания ТОЛЬКО в герое: ставить там нечего. Действие в конце
   страницы («Скопировать ссылку») жить обязано – иначе дочитавший человек остаётся без хода. */
html[data-os="phone"] .hero .cta { display: none; }
/* CTA на тёмном – единственная заливка страницы */
.hero .go2 { background: var(--electric); color: #fff; box-shadow: var(--raise); border-radius: 14px;
  padding: 17px 36px; font: 700 17px/1 'Inter',sans-serif; }
.hero .go2:hover { transform: translateY(-1px); box-shadow: var(--raise-lg); }
/* цена рядом с кнопкой: доллар не кричит – он мельче и тише числа (жалоба владельца 09-06) */
.price { display: inline-flex; align-items: baseline; gap: 8px; font-family: 'Manrope','Inter',sans-serif;
  font-size: 13px; font-weight: 600; color: var(--ink-3); }
.price b { font-size: 24px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; }
.price-sep { color: var(--ink-4); }
.price-per { color: var(--ink-3); }
/* SmartScreen у кнопки: тише всего на экране – это снятие страха, а не обещание и не CTA (Рамс §7) */
.smart { margin: 14px auto 0; max-width: 470px; font-size: 12px; line-height: 1.5; color: var(--ink-4); }
.smart[hidden] { display: none; }
.alt { display: block; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.alt a { color: var(--electric); text-decoration: none; font-weight: 600; }
.alt a:hover { text-decoration: underline; }
/* ── С ТЕЛЕФОНА: вместо скачивания – забрать ссылку себе ──────────────────────
   Тот же король-CTA, что и «Скачать» (рецепт .hero .go2 наследуется), под ним два тихих выхода.
   Заголовок блока = кегль .hero .sub: это не второй H1, это честная строка о том, где живёт продукт. */
.phone { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; }
.phone[hidden] { display: none; }
.phone-h { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em;
  color: var(--ink-1); margin: 0; }
.phone-p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 420px; }
.phone .go2 { margin-top: 6px; }
.phone-alt { font-size: 13px; color: var(--ink-4); }
.phone-alt a { color: var(--electric); text-decoration: none; font-weight: 600; }

/* полоса доверия: четыре факта монохромом – ни одного цветного акцента, они не CTA (Рамс §7) */
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 46px;
  padding-top: 26px; border-top: 1px solid var(--hairline); width: 100%; max-width: 820px; }
.trust li { position: relative; font-size: 12px; font-weight: 500; color: var(--ink-3); padding-left: 16px; }
.trust li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--ink-5); }

/* ── КИНО: скролл-скраб на всю ширину ─────────────────────────────────────────
   Секция высокая, внутри – липкий экран. Пока человек прокручивает эту высоту, кадры идут вперёд:
   пролистать мимо нельзя, потому что скролл и есть просмотр (приём Apple product-page).
   Ни автоплея, ни петли – кино не бубнит фоном, оно слушается руки. */
.film { position: relative; height: 320vh; background: var(--bg); }
/* Текст и кадр в СВОИХ зонах, а не друг на друге. Наложение с вуалью пробовали живьём 09-06: строка
   шага читалась вместе со строкой из видео – каша. Раскладка split (приём product-страниц Stripe/Linear):
   слева тёмная колонка с копи, справа кадр. Плоскость честна, ничто ни с чем не спорит (Рамс §6). */
/* Зоны заданы явно: слева колонка копи (--film-col), справа кадр во всю высоту. Через grid высота
   строки схлопывалась и кадр висел вверху чёрного поля (замер 09-06) – держим абсолютами. */
.film-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); --film-col: 36%; }
/* кадр показываем ЦЕЛИКОМ: cover резал интерфейс по краям – продавать обрезком нечестно и глупо.
   Поля вокруг на графите читаются как кинозал, а не как брак вёрстки. */
/* ⛔ width:auto у <video> считается от ВЫСОТЫ по своему соотношению сторон, а не от левого и правого
   краёв: кадр вылезал за экран на 529px (живой замер 09-06). Ширину зоны задаём явно. */
.film-sticky video { position: absolute; top: 40px; bottom: 40px; left: var(--film-col);
  width: calc(100% - var(--film-col) - 40px); height: calc(100% - 80px); object-fit: contain; object-position: center;
  display: block; border-radius: 16px; box-shadow: var(--raise-lg); background: var(--bg-2); }
/* вуаль слева – чтобы белый текст лежал на кадре, а не спорил с ним */
/* мягкая растушёвка на стыке колонки и кадра – чтобы граница не резала глаз линейкой */
.film-veil { display: none; }
.film-copy { position: absolute; left: max(40px, calc(50vw - 560px)); top: 50%; transform: translateY(-50%);
  width: calc(var(--film-col) - max(40px, calc(50vw - 560px)) - 44px); min-width: 280px; color: var(--ink-1); }
.film-copy .eyebrow { color: var(--ink-3); }
.film-copy h2 { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 36px; line-height: 1.1;
  letter-spacing: -.02em; margin: 10px 0 28px; color: var(--ink-1); }
.steps-live { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps-live li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 14px;
  font-size: 14px; color: var(--ink-4); transition: color .35s var(--ease); }
/* цифра шага – вдавленный жетон-гравюра, активный выпёхнут наружу (рецепт .mode-seg продукта) */
.steps-live li b { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 13px; color: var(--ink-4);
  box-shadow: var(--well-in); transition: all .35s var(--ease); }
.steps-live li.on { color: var(--ink-1); }
.steps-live li.on b { color: var(--electric); box-shadow: var(--raise); background: var(--bg-block); }
.film-hint { position: absolute; left: max(40px, calc(50vw - 560px)); bottom: 40px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4); opacity: .9;
  animation: hintDown 2.6s ease-in-out infinite; }
@keyframes hintDown { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(4px); opacity: .95 } }

/* ── СЕКЦИИ светлой части ── */
.sec { margin-top: var(--sec-lg); }
.sec:first-of-type { margin-top: 104px; }
.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; max-width: 680px; }
.sec-head h2 { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 36px; line-height: 1.12;
  letter-spacing: -.022em; color: var(--ink-1); }
.sec-head p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* ── ДВА ОСТРОВА ── */
.card { background: var(--bg-block); border-radius: 18px; box-shadow: var(--raise); }
/* ОСТРОВА – КРУПНЫМИ РЯДАМИ, не двумя колонками. В колонках снимок всего окна ужимался до 440px:
   интерфейс превращался в фактуру, читать в нём было нечего, а картинка без информации = мусор (Рамс §1).
   Ряд даёт кадру 620px – видно комнату, кнопки и текст. Второй ряд зеркальный: взгляд идёт змейкой,
   а не падает по одной колонке. */
.duo { display: flex; flex-direction: column; gap: 96px; }
.isle { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.isle.flip .shot { order: 2; }
.isle .shot { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--raise-lg);
  background: var(--bg-2); aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 12px; }
.isle .shot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.isle-txt { display: flex; flex-direction: column; gap: 10px; }
.isle h3 { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--ink-1); }
.isle p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* ── КАК УСТРОЕНО: два факта тихо, деньги – отдельной полосой с единственной крупной цифрой ── */
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.fact { display: flex; flex-direction: column; gap: 10px; }
.fact h3 { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--ink-1); }
.fact p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
/* TIER-0 страницы – ровно одна цифра, и это цена. Гравюра-дебосс только здесь (maru-typo). */
.pricebar { margin-top: 44px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px;
  padding: 34px 38px; border-radius: 18px; background: var(--bg-block); box-shadow: var(--raise); }
.pricebar-num { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.floor { font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -.03em;
  color: var(--gold); text-shadow: 1px 1px 0 var(--eng-l), -1px -1px 1px var(--eng-d); }
.floor-cur { font-family: 'Manrope','Inter',sans-serif; font-weight: 600; font-size: 24px; color: var(--ink-4); align-self: flex-start; margin-top: 4px; }
.floor-sub { width: 100%; font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 6px; }
.pricebar-p { font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 360px; }
.pricebar .go2 { padding: 14px 28px; font-size: 14px; }

/* ── подвал ── */
.foot { margin-top: var(--sec-lg); padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--ink-3); }
.foot a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.foot a:hover { color: var(--electric); }

/* ── МОУШН: появление по скроллу. 16px и 520ms – заметно, но не отвлекает от сути (приказ владельца).
   Ничего мигающего, ничего качающегося: движение служит чтению, а не украшает. ── */
/* ⛔ Появление по прокрутке прячет блоки ТОЛЬКО при живом скрипте: класс `js` ставит app.js первой
   строкой. Без этой оговорки блок стоял opacity:0 и ждал скрипта, а во встроенном браузере Instagram
   и в Telegram скрипт часто не отрабатывает – человек видел белый экран вместо страницы (09-06). */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .52s var(--ease), transform .52s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.duo .reveal.in:nth-child(2), .how .reveal.in:nth-child(2) { transition-delay: .09s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .film-hint { animation: none; }
}

@media (max-width: 900px) {
  /* первый экран телефона считается по пикселям: 664 видимых на iPhone 13 в браузере Instagram.
     Шапка и поля ужаты, чтобы боль, кадр и одно действие уместились БЕЗ прокрутки. */
  /* ПЕРВЫЙ ЭКРАН ТЕЛЕФОНА СЧИТАЕТСЯ ПО ПИКСЕЛЯМ: на iPhone внутри Instagram видно 664.
     Бюджет: шапка 120 + надпись 20 + заголовок 74 + кадр 302 + строка 30 + кнопка 51 = 597 и поля.
     Фоном ролик ставить нельзя – проверено глазами 09-07: у него свой текст («Пип сделает всё сам»,
     плитки), и он налезает на копи страницы. Поэтому кадр остаётся в жёлобе, только ужат. */
  .top { padding: 14px 22px 0; }
  .top .rat { width: 28px; height: 28px; margin-bottom: 2px; }
  .top .mark .name { font-size: 21px; }
  .top .mark .sub { font-size: 12px; }
  .hero { padding: 6px 22px 48px; }
  /* надпись «агент внутри твоей работы» на телефоне снята: она повторяет то, что и так сказано ниже,
     а её 32 px – это ровно та высота, из-за которой кнопка не влезала в первый экран */
  .hero .eyebrow { display: none; }
  /* ширина посчитана от фолда 664: заголовок кончается на 219, кнопке нужно 51 + 26 отступа,
     значит кадру остаётся 354 по высоте, то есть 190 по ширине при пропорции 310:600 */
  .phone { gap: 8px; margin-top: 14px; }
  .phone .go2 { margin-top: 0; }
  .phone-p { margin-top: 4px; }
  /* На 390 кегль 36 ломал строку сам, и авторский <br> оставлял тире висеть отдельной строкой
     («Ты уже работаешь» / «–» / «расскажем за» / «тебя.») – живой скрин 09-06. Свой перенос снимаем,
     кегль опускаем на шаг: фраза ложится в три ровные строки без сирот. */
  .hero h1 { font-size: 30px; }
  .hero h1 br { display: none; }
  .hero .sub { font-size: 14px; }
  /* ЧЕТЫРЕ ПУНКТА ЧЕСТНОСТИ. В ряд они не влезают, перенос по центру давал лесенку: каждая строка
     начиналась со своего отступа, маркеры стояли по кривой (жалоба владельца 09-07). Ставим столбцом
     и выравниваем по левому краю: маркеры на одной вертикали, сам блок по центру экрана. */
  .trust { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%;
    margin-left: auto; margin-right: auto; gap: 9px; }
  .film { height: 240vh; }
  /* на телефоне колонки не помещаются: кадр сверху, копи под ним на тёмном */
  /* ⛔ было `--film-col: 0` БЕЗ единицы: `calc(100% - 0 - 40px)` невалиден, браузер выбрасывал правило
     целиком, и ширина падала в auto – кадр становился 644.9px при экране 390 (живой замер 09-06,
     видно было только середину кадра). Единица обязательна, ширину дублируем явно. */
  .film-sticky { --film-col: 0px; }
  /* отступ держим позицией, а не padding: с padding кадр прижимался к левому краю и оставлял
     32px воздуха только справа (замер 09-06: left 0, right 343 при родителе 375).
     Высота – ровно по кадру (1280×744), а не 46vh: при 46vh картинка сидела в 190px пустого
     воздуха сверху и снизу и казалась ещё мельче, чем есть. */
  .film-sticky video { left: 16px; width: calc(100% - 32px); height: auto; aspect-ratio: 1280 / 744;
    bottom: auto; padding: 0; }
  .film-veil { display: none; }
  /* копи идёт сразу под кадром, а не у нижней грани экрана: между ними был провал в треть экрана */
  .film-copy { left: 22px; right: 22px; width: auto; bottom: auto; transform: none;
    top: calc(40px + (100vw - 32px) * .581 + 28px); }
  .film-hint { left: 22px; bottom: 24px; }
  .film-veil { background: linear-gradient(0deg, rgba(22,24,28,.94) 0%, rgba(22,24,28,.55) 46%, rgba(22,24,28,.1) 100%); }
  .film-copy h2 { font-size: 24px; }
  .duo { gap: 56px; }
  .isle { grid-template-columns: 1fr; gap: 20px; }
  .isle.flip .shot { order: 0; }
  .how { grid-template-columns: 1fr; }
  .sec-head h2 { font-size: 24px; }
  .pricebar { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; }
  :root { --sec-lg: 88px; }
}

/* Кадр первого экрана – видео на плоскости: ни жёлоба, ни рельефа, ни обводки. Радиус тот же,
   что у кадров продукта (.isle .shot 14px). Ширина считается от первого экрана телефона. */
/* ЗОЛОТАЯ СТРОКА перед кнопкой скачивания – слова владельца. Цвет и тиснение 1:1 с ценой
   (.floor, style.css:215-216): золото = «твоё, забирай», гравюра по плоскости, ни рамки, ни тени. */
.vow { margin: 30px 0 16px; font-family: 'Manrope','Inter',sans-serif; font-weight: 700; font-size: 24px;
  line-height: 1.25; letter-spacing: -.02em; color: var(--gold);
  text-shadow: 1px 1px 0 var(--eng-l), -1px -1px 1px var(--eng-d); max-width: 560px; }
.vow[hidden] { display: none }
.how-sec .cta { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 900px) { .vow { font-size: 20px; margin: 24px 0 14px } }

/* КОМПЬЮТЕР: широкая запись работы во всю ширину экрана, без полей и без рамки.
   ТЕЛЕФОН: вертикальный кадр того же поста, на который человек тапнул в сторис.
   Переключение по ширине экрана, а не скриптом: без JavaScript страница обязана читаться. */
.hero-clip { display: none }
/* ⛔ 22.09, замер владельца: «на весь экран торчит моё приложение, всё зарезано». Причина в числах:
   запись снята 1440x810, а растягивалась на всю ширину окна – на 1920 это масштаб 133 %, интерфейс
   крупнее натуральной величины, буквы внутри мылом, а края пульта уходят за экран. Замысел «во всю
   ширину, без рамки и полей» (09-07) остаётся, но ширина теперь не больше собственной: кадр виден
   целиком и резкий на любом экране, на узких по-прежнему во всю ширину. */
.hero-wide { display: block; align-self: stretch; width: min(100vw, 1440px); height: auto;
  /* ⛔ было `margin-left: calc(50% - 50vw)`: внутри центрирующего флекса (.hero-in align-items:center)
     браузер сам сдвигает переполняющий элемент, и отрицательный отступ ложился поверх этого сдвига –
     живой замер 09-07: left −135, справа 135 px пустоты. `align-self: stretch` снимает авто-центрирование,
     дальше вылет считается честно от ширины колонки. Δ левого края = 0. */
  margin: 26px 0 0 calc((100% - min(100vw, 1440px)) / 2); }
@media (max-width: 900px) {
  .hero-wide { display: none }
  /* ширина считается от первого экрана: 664 видимых − шапка 81 − заголовок 74 − кнопка 51 − поля 62
     = 354 на кадр по высоте; при пропорции 474:884 это 190 по ширине. Ни рамки, ни радиуса, ни тени. */
  /* height: auto обязателен – без него держится атрибут height="884" из разметки, кадр становится
     884 px высотой и выталкивает кнопку на 1131 при фолде 664 (живой замер 09-07) */
  .hero-clip { display: block; width: 100%; max-width: 190px; height: auto; margin: 14px auto 0; }
}

/* ⛔ КОРЕНЬ, ИЗ-ЗА КОТОРОГО ПЕРВОГО ЭКРАНА НЕ БЫЛО НИ НА ОДНОЙ ШИРИНЕ (живой замер 09-07):
   у обоих кадров не было `order`, то есть order по умолчанию 0 – меньше, чем у ВСЕХ остальных
   элементов (1…8). Флекс ставил видео первым, и заголовок уезжал на 1103 при экране 844,
   а на 1440 первый экран был пустым серым полем. Кадр обязан иметь свой номер в очереди.

   ПОРЯДОК. Компьютер: боль → одно действие → живая запись во всю ширину; мелкий шрифт
   (запасные ссылки, SmartScreen) и объяснение уходят ПОД кадр – в первом экране им не место.
   Телефон: боль → кадр → одно действие (кнопка внутри .phone стоит первой). */
.hero-in > .eyebrow { order: 1 }
.hero-in > h1 { order: 2 }
.hero-in > .cta { order: 3 }
.hero-in > .hero-wide { order: 4 }
.hero-in > .sub { order: 5 }
.hero-in > #alt { order: 6 }
.hero-in > .smart { order: 7 }
.hero-in > .phone { order: 8 }
.hero-in > .trust { order: 9 }
.hero-in > .hero-clip { order: 10 }
@media (max-width: 900px) {
  /* на телефоне скачивания нет: кадр встаёт сразу под заголовком, действие – под кадром */
  .hero-in > .hero-clip { order: 3 }
  .hero-in > .phone { order: 4 }
  .hero-in > .sub { order: 5 }
  .hero-in > .trust { order: 6 }
}


/* ── карточка (доступ / после оплаты / mac) ── */
.card-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
/* язык на карточке доступа: без него страница была русской, а кнопка приходила английской (жалоба 09-06) */
.card-page .lang { position: absolute; right: 24px; top: 24px; }
/* ПЛАШКА ДОСТУПА – ГЛИНА, НЕ СВЕТЯЩАЯСЯ КАРТА (приказ владельца 09-07: «мягких падающих теней нет
   нигде, всё, что похоже на тень – брак»). Голубой периметральный ореол и качание сняты: это была
   мягкая тень под видом свечения. Рельеф – ровно тот же, что у всех поверхностей сайта: канон-класс
   `.card` выше (style.css:189) и рецепт токенов --raise/--raise-lg. Карточка того же тона, что фон:
   разницу даёт только рельеф, как в ESSE и в продукте. */
/* 09-22, замер владельца: верх и левый край плашки сливались с фоном. Числа: карточка и фон –
   один тон (дельта 0), тёмная грань низ-право даёт 17 пунктов яркости, светлая верх-лево всего 4,
   и blur 7px размазывал эти 4 в ноль. Лечение – рецепт продукта 1:1, без выдумки:
   blur 0 (tokens.css:78-80, гравюра резкая, а не мягкая) + подложка на 4 пункта светлее фона
   (тот же приём, что --bubble-bg #FBFBFB в tokens.css:124 – там светлая грань тоже давала 0). */
.card-page .card { width: 100%; max-width: 480px; padding: 40px 38px; border-radius: 18px; background: #FBFBFB;
  /* Грань светлее фона на 8 пунктов: на 247 обычная белая грань (0.55) даёт 4 и не видна. Тот же
     приём, что у пузыря в продукте (tokens.css:124 --bubble-bg) – подложка на 4 пункта светлее. */
  box-shadow: var(--raise-lg), -2.5px -2.5px 0 rgba(255,255,255,0.95);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.card-page .card.wide { max-width: 640px; text-align: left; align-items: stretch; }
.card-page .card .mark { font-size: 24px; margin-bottom: 2px; }
.card-page .card h1 { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink-1); }
.card-page .card p { font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 340px; }
.card-page .card.wide p { max-width: none; }
/* КОД – единственный герой страницы, ради него человек сюда пришёл. Тёмное золото (--gold, канон:
   gold = «твоё, забирай»), гравюра-дебосс вместо коробки-плашки, кегль ниже прежнего 34: одиннадцать
   знаков в 34px рвали карточку по ширине на телефоне (замер 460px минус паддинги = 392). */
/* КОД – тонкая гравюра, не вывеска. 36/800 занимал пол-плашки и кричал; 24/600 с широким разрядом
   читается по одному знаку, как и нужно при переписывании в поле (приказ владельца 09-06). */
/* 09-07, приказ владельца: код – мелкий, узкий, ТЁМНОЕ золото, без коробки. Было 24px с широким
   разрядом в жёлобе-плашке – «кричит и раздуто». Коробка снята совсем: остаётся вдавленная
   гравюра по плоскости, как везде в продукте. Тон – производный от канонного --gold, не выдуманный. */
.code { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .07em;
  text-indent: .07em; color: #9C7434; color: color-mix(in srgb, var(--gold) 62%, var(--ink-1));
  text-shadow: 1px 1px 0 var(--eng-l), -1px -1px 1px var(--eng-d);
  padding: 2px 0; background: none; box-shadow: none; border-radius: 0;
  user-select: all; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv01' 1; }
/* «Скопировать код» – спутник кода, а не второй CTA: без выпуклой коробки, коралловый пульс зовёт
   нажать. Тень-коробка рядом с гравюрой читалась как чёрная обводка (жалоба владельца 09-06). */
/* 09-07: было коралловым с пульсирующей красной точкой – коралл в каноне это тревога и ошибка,
   рядом с кодом читался как «что-то сломалось». Тихое действие-спутник, не второй CTA. */
.copy-code { all: unset; cursor: pointer; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px; font: 600 12px/1 'Inter', sans-serif; color: var(--ink-3);
  transition: color .16s ease; }
.copy-code:hover { color: var(--ink-1); }
.copy-code.done { color: var(--ok); }
.copy-code.done::before { background: var(--ok); animation: none; }
@keyframes copyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,111,97,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(255,111,97,0); }
}
@media (prefers-reduced-motion: reduce) { .copy-code::before { animation: none; } }
.row.tight { margin-top: 0; }
/* мышь над знаком – та же фигура, что встречает в замке продукта, только тише по размеру */
.card-page .rat { width: 44px; height: 44px; opacity: .75; margin-bottom: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.err { color: var(--coral); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }
.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* ⛔ Номер шага ЛЕЖИТ НА ПЛОСКОСТИ гравюрой, а не сидит в круглом жетоне: коробка под глифом –
   прямой запрет канона (CLAUDE.md, «гравюра-дебосс, не контейнер с тенью»). Рецепт тиснения взят
   1:1 у кода доступа (.code ниже в этом файле): свет снизу-справа, тень сверху-слева. */
.steps li::before { content: counter(s); font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800;
  font-size: 15px; width: 30px; display: grid; place-items: center; color: var(--ink-4);
  text-shadow: 1px 1px 0 var(--eng-l), -1px -1px 1px var(--eng-d);
  font-variant-numeric: tabular-nums; }
.steps b { color: var(--ink-1); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--bg-2); color: var(--ink-1); }
.hint { font-size: 12.5px; color: var(--ink-4); }
[hidden] { display: none !important; }

@media (max-width: 860px) {
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 36px; }
  .duo, .how { grid-template-columns: 1fr; }
  :root { --sec: 64px; }
}

/* ШАГИ ДЛЯ MAC (22.09). Человек скачал, увидел «приложение повреждено» и встал. Это карантин
   macOS, а не поломка – и объяснять его должен продукт, а не владелец в переписке. Рецепт целиком
   из карточки: тот же воздух, тот же .code для строки, та же .copy-code под ним. Ничего нового. */
.mac-steps { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--eng-d); text-align: left; }
.mac-steps .mac-h { font-weight: 700; font-size: 14px; color: var(--ink-1); }
.mac-steps .mac-p { font-size: 13px; color: var(--ink-3); }
.mac-steps .mac-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mac-steps .mac-cmd { align-self: stretch; text-align: center; font-size: 12px; letter-spacing: .02em;
  word-break: break-all; }
.mac-steps .row { justify-content: center; }