/* ====================================================================
   ВИТРИНА EZ — СТИЛИ

   Файл пересобран 02.09.2026 под макет Figma «EZ Portfolio — Hybrid
   Proof Lab», узел 1-18. Это не правка прежнего файла, а новый: макет
   меняет тему целиком — со чёрно-золотой на светлую с оранжевым, — а в
   прежних 2035 строках 48 селекторов из 76 уже не имели разметки после
   пересборки страницы 01.09.2026. Править мёртвый файл дороже, чем
   написать живой.

   Прежняя редакция сохранена копией в scratchpad сессии:
   styles.v2-visualdna.css (чёрная тема, Visual DNA, золото).

   ВАЖНО о расхождении канонов. В `references/` лежат шесть листов
   «ez Visual DNA» — чёрный фон, золото #D4AF37, editorial serif. Макет
   1-18 задаёт ровно противоположное: кремовый фон, оранжевый #FF4B08,
   ультраконденсированный гротеск. Верстается макет, потому что задача
   так поставлена; листы Visual DNA этой странице больше не канон.
   ==================================================================== */

/* ====================================================================
   ШРИФТЫ. Подключены локально 02.09.2026 по решению владельца.
   Ни одного внешнего запроса: файлы лежат в assets/fonts/, скачаны с
   Google Fonts один раз и отдаются вместе со страницей.

   ЗАМЕНА ОТНОСИТЕЛЬНО МАКЕТА, причина проверена запросом к Google Fonts:
   Six Caps отдаёт только latin и latin-ext, Barlow Condensed — latin,
   latin-ext и vietnamese. КИРИЛЛИЦЫ НЕТ НИ У ОДНОГО. Макет английский, а
   страница русская: этими шрифтами заголовок «Из новой ниши в продажи»
   не набирается вообще — каждая буква ушла бы в запасной шрифт, и весь
   смысл выбора начертания пропал бы.
   Взят Oswald: узкий гротеск с полной кириллицей, ближайший к обоим по
   плотности и по характеру. Inter оставлен как в макете — у него
   кириллица есть.

   font-display: swap — текст показывается системным шрифтом сразу и
   переключается, когда файл дойдёт; иначе первый экран пустует.
   ==================================================================== */

@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/yanone-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/yanone-500-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: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/yanone-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/yanone-700-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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/caveat-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/caveat-500-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-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;
}

:root {
  /* --- Цвет. Значения сняты из макета (get_design_context, узел 1:19),
     не подобраны на глаз. -------------------------------------------- */
  /* 06.09.2026: фон подтянут к фону нового кадра первого экрана. Замер
     углов картинки дал #f3efe8…#f7f2ea, страница стояла на #F6F4EF — на
     два-три тона холоднее и светлее, и граница кадра при этом угадывалась.
     Прежнее значение для отката: #F6F4EF. Тот же цвет продублирован в
     theme-color обеих версий; картинка ссылки og-preview-v2.jpg нарисована
     на прежнем фоне и при случае пересобирается. */
  --paper:      #F1EDE6; /* фон страницы */
  --ink:        #101010; /* основной текст, тёмные плашки и кнопки */
  --ink-max:    #000000; /* заголовок первого экрана — в макете чистый чёрный */
  --accent:     #FF4B08; /* акцент: надзаголовок, числа, названия шагов */
  --accent-deep:#F55214; /* точка после заголовка — на тон глубже акцента */
  --surface:    #F3F2EF; /* светлый текст на тёмном и фон вторичной кнопки */
  --muted:      #B8B5AD; /* подписи под числами на тёмном */
  --line:       #9F9B94; /* границы: вторичная кнопка, разделители */

  /* Подпись личного бренда «Легко.». 02.09.2026 переведена на акцент макета
     по решению владельца: золото #D4AF37 давало на кремовом фоне контраст
     1,9:1 — ниже порога 3:1 даже для крупного текста. Прежнее значение для
     отката: #D4AF37. Слово остаётся отдельным и цветным, то есть как элемент
     бренда работает по-прежнему; сменился только оттенок. */

  /* Слабая линия по светлому фону. В макете разделители нарисованы
     векторами; здесь это правило CSS — линию картинкой не заказывают. */
  --rule: rgba(16, 16, 16, 0.14);

  /* --- Шрифты.

     Макет набран Six Caps (заголовок первого экрана, 200px),
     Barlow Condensed ExtraBold (числа, названия шагов, логотип) и Inter
     (весь текст). Ни одного из них в проекте нет, а внешние запросы
     странице запрещены — правило сильнее удобства, и Google Fonts сюда
     не подключается. Поэтому в каждом стеке первым стоит имя из макета:
     если владелец положит файлы в assets/ и добавит @font-face, вид
     сойдётся с макетом без единой правки ниже. Пока работают системные
     запасные, и вид отличается — сильнее всего в заголовке, где Six Caps
     вдвое уже любого системного узкого шрифта.

     Caveat (рукописные пометки макета) не подключается намеренно: по
     условию задачи аннотации автора макета в вёрстку не идут. */
  /* Oswald вместо Six Caps: у Six Caps нет кириллицы (проверено запросом к
     Google Fonts — только latin и latin-ext), а заголовок русский. Oswald
     узкий, тяжёлый и с полной кириллицей — ближайшее, чем этот заголовок
     вообще можно набрать. Системные запасные оставлены на случай, если файл
     шрифта не дойдёт: Impact из них ближе всех по плотности, замерено
     02.09.2026 — ширина строки «ИЗ НОВОЙ» при кегле 100px: Impact 398,9
     против 523,1 у Arial Narrow. */
  --font-display: 'Yanone Kaffeesatz', Impact, 'Arial Narrow', sans-serif;
  /* Тот же Oswald на числах и названиях шагов: Barlow Condensed из макета
     тоже без кириллицы (latin, latin-ext, vietnamese). Два узких гротеска на
     одной странице всё равно спорили бы между собой. */
  --font-cond:    'Yanone Kaffeesatz', 'Arial Narrow', system-ui, sans-serif;
  /* Рукописные пометки. В макете они набраны Caveat и по первой передаче в
     вёрстку не шли; 02.09.2026 владелец сказал, что хочет их на странице. */
  --font-hand:    'Caveat', 'Segoe Script', cursive;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Шкала отступов. Любое расстояние берётся только отсюда, новое
     значение не дописывается — берётся ближайшая ступень. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* --- Шкала кеглей. Те же правила. */
  --text-xs: 12px;
  --text-s: 13px;
  --text-m: 14px;
  --text-base: 16px;
  --text-l: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --text-4xl: 48px;
  /* Ступень добавлена 04.09.2026: владелец попросил заголовок экрана
     системы в полтора раза крупнее, а шкала кончалась на 48. 48 x 1,5 = 72,
     тот же шаг роста, что между 40 и 48 не ломается. */
  --text-5xl: 72px;

  /* --- Скругление. Три значения, все три взяты из макета: кнопки и
     карточки 4px, тёмная полоса метрик 8px, каменные плиты 12px. */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-slab: 12px;

  /* Ширина содержимого. В макете полоса контента 1336px в окне 1440 — то
     есть поля по 52px. Производные величины, не ступени шкалы.
     ЗАМЕР 02.09.2026: --wrap стоял на max-width вместе с этими полями, и
     контент выходил 1232 вместо 1336 — полосе недоставало 104px, а кадру
     первого экрана 104 из положенных ему 624. Поля теперь прибавляются к
     ширине, а не вычитаются из неё: max-width = --wrap + два поля = 1440,
     ровно ширина макета. */
  --wrap: 1336px;
  --gutter: 52px;
  /* Ширина боковой пилюли и её отступ от края. Производные, не ступени
     шкалы: ширина подобрана под самую длинную подпись («Результат» в 11px
     занимает 52px плюс поля), отступ снят с референса. */
  --sidenav-w: 60px;       /* в покое: только номера */
  /* 06.09.2026, замер по разметке владельца: правый край самого широкого
     пункта («Арсений / ez») стоит на 154px от левого края панели, то есть
     справа оставалось 58px пустоты при поле 9px слева и сверху. Ширина
     посажена по содержимому: 154 + 9 = 163, ближайшее чётное 164. Все
     внутренние ширины считаются от этой переменной и подтягиваются сами. */
  /* 164 оказалось перезажато: у пилюли скругление 30px, и угол съедает
     воздух справа сильнее, чем показывает прямое измерение до края.
     Владелец: «скругления визуально уменьшают, зажимают пространство».
     184 — середина между прежними 212 и зажатыми 164: поле справа 29px
     против 9 слева, и на глаз они сравниваются. */
  --sidenav-w-open: 184px; /* по наведению: номера и названия */
  --sidenav-gap: 20px;
}

/* --- Сброс и база --------------------------------------------------- */

/* overflow-x: clip, а не hidden. hidden делает элемент контейнером
   прокрутки, и любой position: sticky внутри начинает липнуть к нему, а
   не к окну — шапка уезжала на всю высоту прокрутки. clip обрезает так
   же, контейнера прокрутки не создаёт. Строка с hidden оставлена первой
   как запасная для браузеров без clip. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; }

/* Место под боковую пилюлю. Меню вынуто из потока (position: fixed), и без
   этого отступа текст левой колонки уходит под него. Ступенью шкалы здесь
   быть нечему: величина считается от ширины меню и его отступа. */
/* Порог 861px, а не 900: горизонтальной пилюля становится в медиазапросе
   860px, и при пороге 900 в полосе 861-899 меню оставалось вертикальным,
   а отступа под него уже не было — оно ложилось на текст. */
@media (min-width: 861px) {
  body { padding-left: calc(var(--sidenav-w) + var(--sidenav-gap) * 2); }
}

/* Пилюля внизу перекрывает конец страницы. Отступ равен её высоте плюс
   зазор снизу: замер 02.09.2026 — 62px пилюля, 16px зазор. */
@media (max-width: 860px) {
  body { padding-bottom: 96px; }
}

a { color: inherit; }

/* --- Боковое меню ---------------------------------------------------- */

/* Вертикальная пилюля слева вместо прежней прилипающей шапки, 02.09.2026.
   Геометрия снята замером с референса Hunyuan3D-WorldClaw: fixed, 18px от
   левого края, центровка по высоте, скругление 30px, рамка и двойная тень.
   Матовое стекло — просьба владельца: у референса backdrop-filter: none,
   здесь подложка размывается. Запасной непрозрачный фон стоит первой
   строкой: Firefox с выключенным backdrop-filter иначе показал бы меню
   насквозь. */
.sidenav {
  position: fixed;
  left: var(--sidenav-gap);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: var(--sidenav-w);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: 30px; /* производная: пилюля, значение с референса */
  /* Матовое белое стекло, 02.09.2026 по просьбе владельца. Прежний фон
     повторял цвет страницы и стеклом не читался. Первая строка —
     непрозрачный запасной фон для браузеров без backdrop-filter. */
  background: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(16, 16, 16, 0.12);
  box-shadow: 0 2px 4px rgba(58, 48, 33, 0.04),
              0 14px 30px rgba(58, 48, 33, 0.10);
  overflow: hidden;
  /* Раскрытие по наведению, как в референсе. Анимируется ширина самого
     меню, а не содержимое: подписи стоят на месте всегда и просто
     обрезаются, поэтому текст не прыгает по буквам при развороте. */
  transition: width 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* focus-within, а не только hover: с клавиатуры меню тоже должно
   раскрываться, иначе табом по нему ходишь вслепую. */
.sidenav:hover,
.sidenav:focus-within { width: var(--sidenav-w-open); }

.sidenav-mark,
.sidenav-write,
.sidenav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: var(--sidenav-w-open);
  flex: none;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 22px; /* производная: половина высоты строки пункта */
}

/* Подпись видна только в раскрытом меню. Гасится прозрачностью, а не
   display: none — иначе при развороте текст появлялся бы рывком. */
.sidenav-text {
  font-size: var(--text-m);
  line-height: 1.2;
  color: rgba(16, 16, 16, 0.72);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s linear;
}

.sidenav:hover .sidenav-text,
.sidenav:focus-within .sidenav-text { opacity: 1; }

.sidenav-mark { padding: 0; }
.sidenav-mark .sidenav-text { font-weight: 600; }

/* Логотип в белой плашке — как в референсе. */
.sidenav-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px; /* производная: скругление плашки логотипа */
  background: var(--paper);
  border: 1px solid rgba(16, 16, 16, 0.10);
  color: var(--ink);
}

.sidenav-badge svg {
  display: block;
  width: 26px;
  height: auto;
  fill: currentColor;
}

/* Тело меню: дорожка прокрутки слева, пункты справа от неё. */
.sidenav-body {
  position: relative;
  padding-left: var(--space-5);
  width: var(--sidenav-w-open);
  flex: none;
  box-sizing: border-box;
}

.sidenav-track {
  position: absolute;
  left: 8px; /* производная: середина между краем пилюли и номером */
  top: var(--space-2);
  bottom: var(--space-2);
  width: 2px;
  border-radius: 2px;
  background: rgba(16, 16, 16, 0.14);
  overflow: hidden;
}

.sidenav-progress {
  display: block;
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: height 0.12s linear;
}

.sidenav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidenav-link {
  padding: var(--space-2) var(--space-3);
  width: calc(var(--sidenav-w-open) - var(--space-5));
}

.sidenav-num {
  font-family: var(--font-cond);
  font-size: var(--text-s);
  font-weight: 800;
  line-height: 1;
  flex: none;
  width: 18px; /* производная: ширина двух цифр в этом кегле */
  color: rgba(16, 16, 16, 0.45);
}

.sidenav-link:hover { background: rgba(16, 16, 16, 0.06); }

.sidenav-link:focus-visible,
.sidenav-write:focus-visible,
.sidenav-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Текущий раздел: номер акцентом и светлая плашка, как в референсе. */
.sidenav-link.is-active { background: rgba(16, 16, 16, 0.07); }
.sidenav-link.is-active .sidenav-num { color: var(--accent); }
.sidenav-link.is-active .sidenav-text { color: var(--ink); font-weight: 600; }

.sidenav-write { padding: 0; }

.sidenav-badge-icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.sidenav-badge-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidenav-write:hover .sidenav-badge-icon {
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Кнопки --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* производная: минимальная площадь нажатия пальцем */
  /* 02.09.2026: кнопки сужены по просьбе владельца — боковое поле срезано
     с 24px до 16px, трекинг с 0,08em до 0,05em. Высота не тронута: 44px
     это минимальная площадь под палец, ниже опускать нельзя. */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.btn-solid {
  background: var(--ink);
  color: var(--surface);
}

.btn-solid:hover { background: var(--accent); }

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-outline:hover { border-color: var(--ink); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Подпись «скопировано» рисуется скриптом внутри кнопки почты. */
.copy-toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  border-radius: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

/* --- Секции --------------------------------------------------------- */

.screen {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
  /* 02.09.2026: прилипающей шапки больше нет, и прежние 80px оставляли
     над заголовком пустую полосу. Осталась одна ступень воздуха. */
  scroll-margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

/* Верхний отступ первого экрана на ступень меньше общего: шапка и так
   даёт 64px воздуха над заголовком. */
/* ПЕРВЫЙ ЭКРАН ЦЕЛИКОМ В КАДРЕ, 02.09.2026 по замечанию владельца: полоса
   метрик не помещалась и требовала прокрутки. Секция теперь ровно в высоту
   окна, содержимое стоит колонкой, полоса прижата книзу. Кадр ограничен по
   высоте, иначе на низких окнах он выдавливает полосу обратно. */
/* ЗАМЕР 02.09.2026 после выноса заголовка на всю полосу: при min-height
   первый экран вырос до 1268px и полоса метрик снова ушла за сгиб —
   минимум не ограничивает контент сверху, а кадр тянул сетку вниз своей
   натуральной высотой 556px. Теперь на широком окне высота задана жёстко
   (правило ниже), кадр ужимается под остаток, а на узком остаётся
   свободная: там первый экран честно длиннее окна. */
#hero {
  border-top: 0;
  box-sizing: border-box;
  min-height: 100vh;
  /* Поля срезаны на ступень 03.09.2026: 16px сверху и снизу уходят кадру.
     Первый экран — единственная секция с жёсткой высотой, тут каждый
     пиксель делится между заголовком, кадром и полосой. */
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

@media (min-width: 861px) {
  #hero { height: 100vh; }
}

.hero-grid { flex: 0 1 auto; }

/* 02.09.2026: надзаголовок переведён на узкий гротеск заголовков — по
   просьбе владельца он должен быть вытянутым, а не просто мелким. Тот же
   шрифт, что у чисел и заголовков секций, поэтому строка читается как часть
   одной системы, а не как отдельная подпись. */
.eyebrow {
  font-family: var(--font-cond);
  font-size: var(--text-l);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

/* Заголовки секций. Ступень --text-4xl (48px) — та же, что «EZ/Display M»
   в макете: 48px, ExtraBold, интерлиньяж 44,16 (0,92). */
.section-title {
  font-family: var(--font-cond);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: 20ch;
  /* Строки выравниваются по длине: в колонке 366px заголовок ломался как
     «ПОЧЕМУ ЭТО НЕ РАЗОВАЯ / УДАЧА» и последнее слово висело одно. */
  text-wrap: balance;
}

.section-title .accent { color: var(--accent); }

.lead {
  font-size: var(--text-l);
  line-height: 1.45;
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

/* Второй абзац лида стоит ближе к первому, чем блок лида к следующему
   элементу: два абзаца — одна мысль, закон близости. */
.lead + .lead { margin-top: calc(var(--space-6) * -1 + var(--space-4)); }

.body-text {
  font-size: var(--text-base);
  line-height: 1.45;
  max-width: 62ch;
  margin: 0 0 var(--space-4);
}

/* --- ЭКРАН 1. Первый экран ------------------------------------------ */

/* Колонка заголовка 640px, как в макете (узел 37:7 — «Hero exact
   headline», ширина 640 при полосе 1336). Прежние 520px были взяты по
   ширине текстового блока, и русский заголовок ломался в шесть строк. */
.hero-grid {
  display: grid;
  /* 03.09.2026: доли колонок перевёрнуты. Кадру отдана фиксированная
     доля 38%, тексту — остаток: кадр квадратный, и его размер задаёт
     ширина колонки, а не остаток высоты. При прежнем minmax(0,620px)
     слева текст получал 620px, а кадру доставался остаток высоты ряда —
     276px (замер 03.09.2026). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  gap: var(--space-8);
  /* stretch, а не center: при center колонка кадра получала высоту по
     содержимому, height: 100% у картинки не к чему было применить и она
     вылезала за ряд на 328px — обрезалось overflow сетки (замер
     02.09.2026: бокс 561x228 при картинке 561x556). */
  align-items: stretch;
  /* Ряд забирает остаток высоты первого экрана, а кадр внутри ужимается
     под него. Без min-height: 0 картинка распирает сетку и выдавливает
     полосу метрик за сгиб — та же ловушка, что и с полосой до этого. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Левая колонка держит всё содержимое первого экрана и объявлена
   контейнером: кегль заголовка считается от её ширины (cqw), а не от
   ширины окна. Иначе на окнах 1101-1300 строка заголовка вылезала за
   колонку и обрезалась overflow сетки. */
.hero-copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Заголовок первого экрана. ВНЕ ШКАЛЫ намеренно, причина записана здесь:
   макет задаёт 200px при ширине окна 1440 — это 4,2 ступени сверх шкалы,
   и ни одна ступень такого кегля не даёт. Кегль тянется за шириной окна,
   поэтому clamp, а не фиксированное число. Отрицательный трекинг и
   интерлиньяж 0,95 повторяют макет: строки там стоят вплотную, и именно
   это делает блок плитой, а не набором строк. */
.hero-title {
  font-family: var(--font-display);
  /* ЗАМЕР: при 187px заголовок вставал в шесть строк и занимал 1067px —
     первый экран раздувался до 1748px против 920px в макете. Максимум
     опущен до 140px и кегль тянется за шириной окна с коэффициентом 8,5vw:
     на 1440 это 122px и четыре строки. Русский заголовок длиннее
     английского из макета (31 знак против 28 в двух строках), поэтому
     кегль макета к нему не применим напрямую. */
  /* 02.09.2026, просьба владельца «ещё вытянутей»: кегль поднят с 8,5vw
     до 9,6vw (на 1440 это 138px против 122), интерлиньяж сжат с 0,95 до
     0,86, трекинг с -0,02 до -0,035em. Все три правки работают в одну
     сторону — буквы выше, строки плотнее, блок читается плитой.
     Отступ до разделителя срезан с 40px до 16px: владелец сказал, что
     воздуха после заголовка слишком много. */
  /* 02.09.2026, третья правка: заголовок вышел из колонки на всю полосу и
     стоит в две строки. Кегль поднят с 9,6vw до 13,2vw — на 1440 это 190px
     против 138. Замер: строка «ИЗ НОВОЙ НИШИ В» занимает при нём 1030px из
     1316 доступных, то есть запас есть и на длинном слове перенос не
     рвётся. */
  /* 13,2vw давали 190px и оставляли кадру 228px высоты — камень с
     подписями становился нечитаемым. 12vw = 173px на 1440: две строки
     сохраняются, кадру достаётся 336px. */
  /* 03.09.2026: 12vw давали 173px, заголовок съедал 314px из 900 и кадр
     ужимался до 278x276 — камень стоял значком в углу. 10vw = 144px:
     заголовок 262px, две строки держатся, кадру возвращается ~90px
     высоты. Это единственный рычаг: кадр квадратный, ширину ему даёт
     высота ряда. */
  /* 03.09.2026: заголовок вернулся в колонку, кегль считается от её
     ширины. 19cqw при колонке 721px — это 137px и две строки с запасом
     49px до края. Первым идёт запасной расчёт от ширины окна: браузер
     без cqw просто не применит второе правило. */
  font-size: clamp(44px, 9.5vw, 152px);
  font-size: clamp(44px, 19cqw, 152px);
  font-weight: 400;
  line-height: 0.86;
  /* Интерлиньяж 0,86 меньше высоты глифа с диакритикой: краткая у «Й» в
     первой строке выходила за верх блока и налезала на надзаголовок
     (замер 02.09.2026, кегль 138px). Отступ задан в em, чтобы держаться
     за кегль на любой ширине окна; вне шкалы отступов намеренно —
     величина производная от шрифта, а не от сетки. */
  padding-top: 0.1em;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink-max);
  margin: 0 0 var(--space-2);
}

/* Точка после заголовка — единственная цветная деталь в нём. В макете
   она стоит после «SHIP» и держит весь первый экран: без неё заголовок
   заканчивается ничем. */
.hero-title .dot { color: var(--accent-deep); }

/* «Легко.» и его точка — акцентом. Точка внутри .easy перекрывает правило
   выше именно потому, что стоит после него. */
.hero-title .easy,
.hero-title .easy .dot { color: var(--accent); }

/* Разделитель между заголовком и подзаголовком: точка и короткая линия.
   В макете это два вектора; здесь одно правило CSS. */
.hero-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.hero-divider::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero-divider::after {
  content: '';
  height: 1px;
  width: 250px;
  max-width: 60%;
  background: var(--rule);
}

/* Кегль подзаголовка опущен на ступень (16 -> 14) по просьбе владельца:
   под вытянутым заголовком прежний размер спорил с ним за внимание.
   Мера ширины поднята с 52ch до 66ch, чтобы абзац встал в три строки, а
   не в четыре: при 52ch строка обрывалась на середине мысли. */
.hero-copy .body-text {
  max-width: 66ch;
  font-size: var(--text-m);
  line-height: 1.5;
}

/* Акцент внутри абзаца: тот же узкий гротеск, что у чисел на странице. */
.hl {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* Перенос заголовка только на широком окне. */
.br-wide { display: inline; }

/* Правила .hero-proof сняты 02.09.2026 вместе с самой строкой: её текст
   перенесён в полосу метрик под первым экраном, см. .rail-item-context. */

/* Пункт охвата стоит без крупного числа, поэтому он ниже соседей на высоту
   строки числа. Выравнивание по центру возвращает его на общую ось. */
.rail-item-context { align-self: center; }

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.hero-visual {
  margin: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-visual img {
  /* ЗАМЕР: при max-height кадр получал ширину из атрибута width (1234) и
     стоял боксом 561x228 — картинка рисовалась по центру пустого поля,
     прижатая к правому краю с дырой слева. Высота задана жёстко, ширина
     считается от неё, пропорция держится сама. */
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  /* Кадр прижат к правому краю: слева от него стоит текст, и центровка
     оставляла между ними дыру. */
  object-position: right center;
}

/* --- Полоса доказательства под первым экраном ------------------------ */

/* В макете полоса несёт пять пунктов: +60% CTR lift, 2-3x ER uplift,
   7 layers, 1 operating loop, 90s proof cycle. Здесь их два. Причина не
   в вёрстке: четыре из пяти чисел макета не имеют источника, а «+60%»
   прямо расходится с фактом — CTR вырос с 1,7% до 3,4%, то есть вдвое.
   Цифра без предмета, к которому относится, владельцем уже забракована
   как вброс, поэтому в полосе стоят только проверяемые. */
/* Зерно на тёмной плашке, 02.09.2026 по просьбе владельца. Шум рисуется
   SVG-фильтром в data-URI, а не картинкой: файла нет, внешнего запроса
   нет, вес нулевой. Режим наложения soft-light оставляет плашку той же
   светлоты и добавляет только фактуру. */
.proof-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.proof-rail {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  /* ЗАМЕР: при --space-9 полоса начиналась на 912px и на окне высотой 900
     уходила под сгиб целиком. Это доказательство, его нельзя прятать —
     ступень опущена на одну. */
  /* 03.09.2026: собственный отступ снят. Первый экран — flex с gap 24px,
     и margin складывался с ним в 47px пустоты между кадром и полосой
     (замер: низ сетки 709, верх полосы 756). Отступ теперь один — gap. */
  margin-top: 0;
  display: grid;
  /* 02.09.2026: колонок стало три — в полосу переехала строка охвата
     из-под подзаголовка. При двух колонках третий пункт падал во второй
     ряд под первый и читался как оборванная строка (замер: ряд 2 x 2 при
     трёх пунктах). Ниже 1100px колонок снова две, ниже 600 — одна. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.rail-item {
  display: grid;
  gap: var(--space-1);
  position: relative;
}

/* Разделитель между пунктами — вертикальная линия, как в макете. */
.rail-item + .rail-item { padding-left: var(--space-7); }

.rail-item + .rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(243, 242, 239, 0.18);
}

.rail-value {
  font-family: var(--font-cond);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent);
}

.rail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface);
}

.rail-note {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--muted);
}

/* --- ЭКРАН 2. Три результата ---------------------------------------- */

/* Экрана с результатом в макете нет вовсе: все четыре его секции про
   процесс. Он добавлен по условию задачи и идёт сразу за первым, до
   всего процессного — числа читают раньше, чем описание метода. */
.results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
}

.result {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-5);
}

.result-value {
  display: block;
  font-family: var(--font-cond);
  font-size: clamp(var(--text-3xl), 6vw, 88px); /* вне шкалы: числа — главный объект экрана, см. .hero-title */
  font-weight: 800;
  line-height: 0.95;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.result-name {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.result-text {
  font-size: var(--text-m);
  line-height: 1.5;
  margin: 0;
  color: rgba(16, 16, 16, 0.72);
}

/* --- ЭКРАН 3. Система: переключатель, мелкая графика ----------------- */

/* Надзаголовок стоит над сеткой: в макете он выше обеих колонок, а вровень
   идут заголовок и экран. */
.system-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.system-topline .eyebrow { margin: 0; }


.system-copy { display: grid; align-content: start; }

/* Правило «.system-copy .selectors» снято 03.09.2026 вместе с переносом
   миниатюр из колонки: они больше не внутри текста. */

.system-stage { display: grid; align-content: start; }

/* Секция ровно в высоту окна, 03.09.2026. Тем же приёмом собран первый
   экран: секция — колонка, один элемент внутри неё помечен .fit-grow и
   забирает остаток высоты, остальные стоят своей. Медиа внутри растущего
   элемента вписывается целиком (object-fit: contain).
   Причина: секция системы вырастала до 1534px при окне 900 и третья
   миниатюра резалась сгибом, кейс — до 1124px. Правило проверяется
   автоматически: automation/showcase-check/check-fit.mjs.
   На узком окне высота не фиксируется — там текст длиннее экрана честно. */
.screen-fit {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Поля секции срезаны с 72px до 24px: в секции с жёсткой высотой они
     съедали 144px из 900, и растущему ряду оставалось 286 при нужных 361
     (замер 03.09.2026). Воздух между секциями держит линия сверху. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 861px) {
  .screen-fit { height: 100vh; }
}

.fit-grow {
  flex: 1 1 auto;
  min-height: 0;
}

/* Колонка экрана: строка тянется на всю высоту ячейки, иначе height:100%
   у .stage считается от auto и кадр рисуется натуральной высотой 486
   вместо доступных 382 (замер 03.09.2026). */
#system .system-stage {
  min-height: 0;
  height: 100%;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

/* Пометка прижата к правому краю верхней строки — её место в макете. */
.system-topline .hand-system {
  text-align: right;
  transform: rotate(3deg);
  flex: none;
}

/* --- Три миниатюры-кнопки ------------------------------------------- */

.selectors {
  display: grid;
  /* Разделы в ряд под экраном: одна группа, читается как плейлист.
     В колонке они вытягивали её на 174px длиннее правой.
     09.09.2026: разделов стало пять, и стоят они по ходу круга — гипотеза,
     задача, релиз, метрика, закрепление нормой. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: start;
  flex: 0 0 auto;
}

/* Кнопка, а не ссылка: это смена содержимого на месте, а не переход.
   Оформление сбрасывается вручную — браузерная кнопка приносит свой фон,
   рамку и центрирование текста. */
.selector {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.selector:hover { border-color: var(--rule); }

/* Активная подсвечена рамкой акцента и полосой слева — в макете ровно так
   отмечен выбранный ролик. */
.selector.is-active {
  border-color: var(--accent);
  background: rgba(255, 75, 8, 0.04);
}

.selector:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Миниатюра. Кадр подставляется фоном из разметки: у каждой кнопки свой
   файл, и держать три почти одинаковых правила в стилях незачем. */
.selector-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--ink) center / cover no-repeat;
  overflow: hidden;
}

/* Значок проигрывания — только у той миниатюры, за которой стоит видео. */
.selector-thumb svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  fill: var(--surface);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.selector-body { display: block; }

.selector-num {
  display: block;
  font-family: var(--font-cond);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

.selector-name {
  display: block;
  font-family: var(--font-cond);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.selector-desc {
  display: block;
  font-size: var(--text-m);
  line-height: 1.4;
  color: rgba(16, 16, 16, 0.66);
}

/* --- Большой экран --------------------------------------------------- */

.stage {
  margin: 0;
  background: var(--ink);
  border-radius: var(--radius-slab);
  padding: var(--space-3);
  /* Высота приходит от колонки, а не от картинки: иначе кадр 16:9 задаёт
     секции свою высоту и правило «секция в окно» ломается. */
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stage-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.stage-media img,
.stage-media video {
  display: block;
  width: 100%;
  /* contain, а не cover: кадр интерфейса обрезать нельзя — на нём
     показывают содержимое базы, а не фактуру. */
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--ink);
}

.stage-caption {
  font-size: var(--text-m);
  line-height: 1.4;
  color: var(--muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.stage-caption b {
  color: var(--surface);
  font-weight: 600;
}

/* --- Ряд процесса ---------------------------------------------------- */

.flow {
  list-style: none;
  /* Отступ даёт gap секции — свой margin складывался бы с ним. */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.flow-step {
  display: grid;
  justify-items: center;
  /* Название и подпись — одна группа, иконка отдельно: между иконкой и
     названием отступ вдвое больше внутреннего (закон близости). */
  gap: var(--space-2);
  position: relative;
  /* Поле шага срезано до 8px: при 16px подпись в колонке 141px ломалась
     в три строки против двух в макете (замер 03.09.2026). */
  padding: 0 var(--space-2);
}

.flow-step .flow-icon { margin-bottom: var(--space-2); }

/* Стрелка между шагами. У последнего её нет — ей некуда указывать. */
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--space-3) * -1);
  top: 18px;
  width: var(--space-7);
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4h33M29.5 1.2 33.5 4l-4 2.8' fill='none' stroke='%23ff4b08' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.7;
}

/* 03.09.2026 по макету: иконка крупнее и с более плотной обводкой — в
   макете она держит шаг наравне с подписью, а при 32px терялась. */
.flow-icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-label {
  font-family: var(--font-cond);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* Подпись под шагом. В макете каждый шаг объясняется двумя строками —
   без них поток читается как список слов. Формулировки собраны из
   утверждённого текста экрана и подписей к миниатюрам, новых слов нет. */
.flow-note {
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
  color: rgba(16, 16, 16, 0.62);
  text-wrap: balance;
}

/* --- Полоса плиток --------------------------------------------------- */

.benefits {
  list-style: none;
  /* 03.09.2026: блок открывает секцию «Ёмкость», линия и верхний отступ
     теперь приходят от самой секции. */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-7);
}

.benefit {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  position: relative;
}

/* Разделитель между плитками — тонкая линия, как в макете. */
.benefit + .benefit::before {
  content: '';
  position: absolute;
  left: calc(var(--space-7) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.benefit-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-name {
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  grid-column: 2;
}

.benefit-text {
  font-size: var(--text-m);
  line-height: 1.4;
  color: rgba(16, 16, 16, 0.66);
  margin: 0;
  grid-column: 2;
}


/* --- Объёмы, что проходит через систему ------------------------------ */

/* Вторичный ряд чисел под пятью свойствами системы. Кегль намеренно вдвое
   меньше, чем у .result-value: на экране результата числа — главный объект,
   здесь они справка о масштабе и не должны спорить с ними за внимание.
   Верхняя линия у пункта тоньше, чем у .result (1px против 2px), по той же
   причине. */
.volume {
  margin-top: var(--space-9);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-7);
}

.volume-title {
  font-family: var(--font-cond);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 var(--space-6);
}

.volume-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.volume-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.volume-value {
  font-family: var(--font-cond);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 0.95;
  color: var(--accent);
}

.volume-label {
  font-size: var(--text-m);
  line-height: 1.4;
  color: rgba(16, 16, 16, 0.66);
}

.volume-note {
  font-size: var(--text-m);
  line-height: 1.5;
  color: rgba(16, 16, 16, 0.66);
  max-width: 72ch;
  margin: var(--space-6) 0 0;
}

/* --- Рукописные пометки ---------------------------------------------- */

/* В макете это аннотации автора поверх полей: короткая фраза от руки с
   лёгким наклоном и подчёркиванием. По первой передаче они в вёрстку не
   шли; 02.09.2026 владелец сказал, что хочет их на странице.
   Подчёркивание рисуется фоном, а не картинкой, и намеренно неровное по
   краям — прямая линия под рукописным текстом читается как ошибка. */
.hand {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  transform: rotate(-4deg);
  transform-origin: left center;
  /* ЗАМЕР 02.09.2026: <p> блочный и занимает всю ширину секции, поэтому
     подчёркивание в 62% растянулось на 830px под рядом процесса и читалось
     случайной чертой поперёк экрана. fit-content сажает блок по тексту, и
     62% считаются уже от него. */
  width: fit-content;
  max-width: 100%;
}

.hand::after {
  content: '';
  display: block;
  width: 62%;
  height: 2px;
  margin-top: var(--space-1);
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.65;
}

/* 02.09.2026: пометка переехала с правого верхнего угла к левому краю
   колонки. Кадр после переверстки первого экрана стал вдвое ниже, и
   пометка легла прямо на камень — читались обе надписи поверх друг друга.
   03.09.2026: кадр снова занимает колонку целиком по ширине, свободного
   поля слева нет. Камень квадратный и центрирован по высоте ряда, поэтому
   под ним остаётся полоса пустоты — пометка стоит в ней. */
.hand-hero {
  position: absolute;
  left: 0;
  /* Отступ снизу подтягивает пометку к нижнему краю камня: тот
     центрирован по высоте ряда и кончается на 608 при ряде до 740
     (замер 03.09.2026), у самого низа пометка отрывалась от кадра. */
  bottom: var(--space-8);
  transform: rotate(-4deg);
  text-align: left;
  z-index: 2;
}

.hero-visual { position: relative; }

.hand-system {
  transform: rotate(3deg);
  text-align: left;
  padding-top: var(--space-2);
  white-space: nowrap;
}

.hand-flow {
  margin: var(--space-5) auto 0;
  text-align: center;
  transform: rotate(-2deg);
}

.hand-flow::after { margin: var(--space-1) auto 0; }

/* --- ЭКРАН 4. Скорость входа ---------------------------------------- */

/* Место под разборы чужих ниш. Пока их нет, рамка стоит пустой с честной
   подписью, а не заполняется выдуманными примерами: по условию задачи
   блок верстается сразу, содержимое приходит отдельно. */
.niche-slot {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
}

.niche-slot-note {
  grid-column: 1 / -1;
  font-size: var(--text-m);
  color: rgba(16, 16, 16, 0.55);
  margin: 0;
}

/* --- ЭКРАН 5. Кейс --------------------------------------------------- */

/* Кадр кейса вписывается в остаток высоты секции, а не задаёт её:
   при width/height из атрибутов видео 1440x742 растягивало секцию до
   1124px при окне 900. Колонка нужна, чтобы height:100% у видео было от
   чего считать — без неё процент падает на auto и берётся натуральная
   высота 636 при доступных 420 (замер 03.09.2026). */
.case-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-media video,
.case-media img {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  object-fit: contain;
}

.case-media {
  margin: var(--space-7) 0 0;
}

.case-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--ink);
}

.case-media figcaption {
  font-size: var(--text-m);
  margin-top: var(--space-3);
  color: rgba(16, 16, 16, 0.72);
}

/* --- Появление блоков ------------------------------------------------ */

/* Пометка ставится скриптом на элементы, которыми управляет GSAP. Без
   неё правило «уменьшить движение» ниже не нашло бы эти блоки, и они
   остались бы невидимыми именно у тех, кто просил меньше движения. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* При печати наблюдатель не срабатывает: страница не отрисовывается как
   область просмотра, и без этого правила на бумагу ушли бы пустые блоки. */
@media print {
  .reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* --- Узкие экраны ---------------------------------------------------- */

@media (max-width: 1100px) {
  .proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* В одну колонку контейнером становится вся полоса, и 19cqw дали бы
     кегль под 250px. Кегль возвращается к ширине окна. */
  .hero-title { font-size: clamp(44px, 9.5vw, 152px); }

  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Стрелка снимается вместе с одним рядом: при переносе она указывала
     бы с конца строки в пустоту. */
  .path li:not(:last-child)::after { content: none; }
}

@media (max-width: 860px) {
  :root { --gutter: var(--space-6); }

  .screen { padding: var(--space-9) var(--gutter); }

  .results { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Принудительный перенос заголовка снимается: на узком окне строки
     собираются сами, а жёсткий <br> оставлял бы дыру. */
  .br-wide { display: none; }

  /* ЗАМЕР на 375: пометка стояла абсолютом с поворотом и выходила за левый
     край на 2px. В колонке шириной 312px места сбоку от кадра нет вовсе —
     на узком окне она встаёт обычной строкой над ним. */
  .hand-hero {
    position: static;
    transform: rotate(-3deg);
    margin-bottom: var(--space-3);
  }

  .hero-visual { flex-direction: column; align-items: flex-start; }

  /* Четыре числа в ряд на 860 дают колонку в 190px: подпись «человек в
     команде, все задачи в одной системе» ломается на пять строк. */
  .volume-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .niche-slot { grid-template-columns: 1fr; padding: var(--space-6); }

  /* На узком окне пилюля ложится горизонтально внизу: колонка слева
     съедает треть ширины экрана. Раскрытия по наведению на телефоне нет,
     поэтому подписи там видны всегда, а дорожка прокрутки скрыта. */
  .sidenav {
    left: 50%;
    right: auto;
    top: auto;
    bottom: var(--space-4);
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - var(--space-8));
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 24px; /* производная: та же пилюля в меньшем росте */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav:hover, .sidenav:focus-within { width: auto; }

  .sidenav-mark { display: none; }
  .sidenav-track { display: none; }

  .sidenav-body { width: auto; padding-left: 0; }
  .sidenav-list { flex-direction: row; gap: var(--space-1); }

  .sidenav-link {
    width: auto;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2);
  }

  .sidenav-link .sidenav-text { opacity: 1; font-size: 11px; }
  .sidenav-num { width: auto; }

  .sidenav-write { width: auto; }
  .sidenav-write .sidenav-text { display: none; }
  .sidenav-badge { width: 36px; height: 36px; border-radius: 12px; }
}

@media (max-width: 600px) {
  .proof-rail {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-5);
  }

  /* В одну колонку разделитель становится горизонтальным: вертикальная
     линия слева от пункта, стоящего под другим, читается как отступ. */
  .rail-item + .rail-item {
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .rail-item + .rail-item::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .path { grid-template-columns: 1fr; }

  .volume-row { grid-template-columns: 1fr; gap: var(--space-6); }

  .link-row .btn { width: 100%; }
}

/* --- Экран 3 на узких окнах ------------------------------------------ */

@media (max-width: 1100px) {
  .system-copy .selectors { margin-top: var(--space-5); }
  .system-topline .hand-system { text-align: left; }
  /* 09.09.2026: пять разделов в один ряд на 1100 не встают — три и два. */
  .selectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selector { grid-template-columns: 1fr; gap: var(--space-3); }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .benefit + .benefit::before { content: none; }
}

@media (max-width: 860px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .flow-step:not(:last-child)::after { content: none; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .selectors { grid-template-columns: 1fr; }
  .selector { grid-template-columns: 96px minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits { grid-template-columns: 1fr; }
  .hand-hero { position: static; margin-bottom: var(--space-4); }
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА, 04.09.2026. Витрина живёт в двух версиях: «/» —
   русская, «/en/» — английская. Ссылка стоит в колонке рядом с кнопкой
   письма и повторяет её геометрию, чтобы не заводить в шапке третий размер.
   Правило самодостаточное — размер и центровка заданы здесь, а не взяты
   наследованием, иначе плашка с буквами поедет относительно плашки с иконкой. */
/* ЗАМЕР 04.09.2026 на 375: шапка тут — фиксированная строка 335px, и в
   неё уже уложены список разделов (270) и кнопка письма (36) с зазорами.
   Третий элемент дал переполнение 23px и выдавил кнопку письма на 391 при
   кромке 375. Ужимать список значит резать навигацию владельца, поэтому на
   узких экранах переключатель снят: главный сценарий английской версии —
   прямая ссылка /en/ в письме, а не переход с русской версии с телефона.
   Порог 861px тот же, что у FIT_MIN_WIDTH в check-fit.mjs. */
@media (max-width: 860px) {
  .sidenav-lang { display: none; }
}

.sidenav-lang-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
}


/* ЭКРАН СИСТЕМЫ. Две колонки: заголовок и текст под ним слева, кадр справа.
   Раскладка возвращена владельцем 04.09.2026 после пробы в одну колонку.
   Причина не только во вкусе — она замерена. Кадр во всю ширину давал
   1197x222, то есть 5,4:1, тогда как видео внутри 2108x1080, то есть 1,95:1.
   При object-fit: contain кадр вписывался как 433x222, и по бокам оставалось
   почти по 380px пустой черноты. Узкая колонка справа даёт около 2,2:1 —
   почти совпадение с материалом, и поля исчезают.

   Наложение текста на кнопки (замер 04.09.2026: 106px на 1366x768, 148px на
   1440x700) лечится нижней границей строки, а не переносом роста: minmax с
   min-content не даёт строке стать ниже текста, поэтому нехватку высоты
   забирает кадр, который умеет ужиматься, а абзацы стоят своей высотой. */
.system-grid {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  gap: var(--space-7);
}

#system .system-grid {
  align-items: stretch;
  grid-template-rows: minmax(min-content, 1fr);
}

.system-copy {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
}

/* Колонка кадра: строка тянется на всю высоту ячейки, иначе height: 100%
   у .stage считается от auto и кадр рисуется натуральной высотой. */
#system .system-stage {
  min-height: 0;
  height: 100%;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .system-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Экран выше выбора: сначала показываем, потом даём переключать.
     Работает только внутри сетки — прямым ребёнком секции этот order
     забросил бы кадр выше надзаголовка. */
  .system-stage { order: -1; }
}

/* ТРИ ПУСТЫХ УЧАСТКА ЭКРАНА СИСТЕМЫ, снято 04.09.2026 по разметке владельца.

   1. Между надзаголовком и заголовком стояло 105px пустоты. Причина не в
      отступах: рукописная пометка справа высотой 72px растягивала верхнюю
      строку, а надзаголовок в ней занимает 26px. Пометка выведена из потока
      в правый верхний угол секции — строка сжалась до своей строки текста,
      заголовок поднялся. На узких окнах пометка возвращается в поток, там
      она стоит слева и растягивать нечего.

   2 и 3. Внутри кадра оставалось по 60px чёрной пустоты сверху и снизу:
      контейнер держал пропорцию 1,51, тогда как видео внутри 1,95, и
      object-fit: contain честно вписывал материал в чужую рамку. Теперь
      пропорция кадра берётся у самого материала (--stage-ar, ставится
      скриптом переключения), а высота идёт от неё, а не от колонки.
      max-height оставлен: он держит прежнее правило «секция в высоту окна»,
      если материал окажется выше доступного места. */
#system { position: relative; }

.system-topline .hand-system {
  position: absolute;
  top: var(--space-6);
  right: var(--gutter);
  margin: 0;
}

#system .system-stage { align-content: start; }

.stage {
  /* Плашка прижата к содержимому. Без align-self она растягивалась
     колонкой до её высоты, и под кадром оставалось 152px черноты —
     нижний из трёх участков, отмеченных владельцем. Остаток высоты
     теперь уходит в светлый воздух секции, а не в тёмную пустоту. */
  align-self: start;
  height: auto;
  max-height: 100%;
}

.stage-media {
  /* flex: 1 1 auto из базового правила растягивал медиа под высоту колонки
     и перебивал пропорцию — кадр снова получал чужую рамку. Рост снят,
     высоту задаёт aspect-ratio. */
  flex: 0 0 auto;
  aspect-ratio: var(--stage-ar, 1.95);
  min-height: 0;
}

@media (max-width: 1100px) {
  /* В одну колонку пометка стоит слева обычной строкой — выводить её из
     потока незачем, а абсолютной она наехала бы на заголовок. */
  .system-topline .hand-system {
    position: static;
    top: auto;
    right: auto;
  }
}

/* Кадр теперь ровно по пропорции материала и больше не заполняет колонку
   до низа. Пока сетка оставалась растущей, освободившаяся высота падала
   дырой между кадром и кнопками, посреди экрана. Рост снят: блок стоит
   своей высотой, всё содержимое собирается вверху, а остаток высоты
   уходит одним куском к нижней кромке секции, где читается как поле, а не
   как провал. Замер 04.09.2026: содержимое 607px при 720 доступных на
   окне 768 — запас есть, сжимать нечего. */
/* снято 05.09.2026, см. блок «КАДР ЗАБИРАЕТ ЛИШНЮЮ ВЫСОТУ» в конце файла */

/* ЗАГОЛОВОК И МИНИАТЮРЫ ЭКРАНА СИСТЕМЫ, 04.09.2026 по правке владельца.

   Заголовок в полтора раза крупнее — только в этой секции: в остальных он
   остаётся на 48, и разъезжать всю страницу под одну правку незачем.

   Миниатюры увеличены со 122 до 180px и выровнены по левому краю с текстом
   над ними. Мешал горизонтальный padding кнопки: он сдвигал миниатюру на
   12px вправо, и ряд не вставал вровень с текстовым блоком. Вертикальный
   padding оставлен — он держит воздух вокруг подложки активной кнопки. */
#system .section-title {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
}

.selector {
  grid-template-columns: 180px minmax(0, 1fr);
}

/* Ряд сдвинут наружу на внутренний отступ кнопки. Прямое обнуление padding
   ставило миниатюру вровень с текстом, но подложка активной кнопки при этом
   резала её вплотную слева. Теперь отступ на месте, а сдвиг ряда выносит
   рамку за колонку — вровень с текстом стоит сама миниатюра, как и просили. */
.selectors {
  margin-inline: calc(-1 * var(--space-3));
}

@media (max-width: 600px) {
  .selector { grid-template-columns: 96px minmax(0, 1fr); }
}

/* КАДР КЕЙСА, 04.09.2026. Та же болезнь, что была на экране системы, только
   грубее: замер дал контейнер 1236x376 (3,29:1) на окне 900 и 1162x244
   (4,76:1) на 768, тогда как видео внутри 1,94:1. object-fit: contain честно
   вписывал материал, и по бокам оставалось от 253 до 387px черноты — у этого
   кадра, в отличие от первого экрана, подложка непрозрачная (background:
   var(--ink)), поэтому поля видны как чёрные полосы, а не как воздух.
   Растяжка снята, высоту задаёт пропорция из атрибутов width и height. */
.case-media video,
.case-media img {
  /* Подложка (background: var(--ink)) лежит на самом элементе, а не на
     контейнере. Значит полей не будет вовсе, если элемент получит размер
     ровно по материалу: высота берётся от доступного места, ширина
     считается от неё пропорционально, и фон совпадает с кадром.
     Прежняя попытка задать height: auto роняла кадр за низ секции на
     92-231px — это поймала новая проверка содержимого. */
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}


/* СХЕМА ПУТИ СТОИТ ПОЛОСОЙ, НЕ ВНУТРИ ЭКРАНА, 04.09.2026.

   Проба обратная: схему занесли в экран «Система», чтобы закрыть поле под
   кнопками. Влезала она только за счёт кадра — потолок высоты считался от
   окна и ужимал его с 833x486 до 482x297. Владелец посмотрел вживую и
   вернул решение назад: экран стал длиннее, а кадр, ради которого экран и
   существует, вдвое мельче.

   Полоса высоту окна не держит намеренно. Схема — пять шагов в строку,
   ей хватает своей высоты, и растягивать её на экран нечем. */
.flow-strip {
  padding-block: var(--space-7);
}

.flow-strip .flow {
  margin-block: 0;
}

/* ЛИШНЯЯ ВЫСОТА РАСХОДИТСЯ ПО ЗАЗОРАМ, А НЕ ПАДАЕТ ДЫРОЙ ВНИЗ, 05.09.2026.

   Владелец прислал скриншот своего окна: кнопки стоят вплотную к нижней
   кромке. Мой кадр при 1440x900 показывал под ними 157px пустоты. Оба замера
   верны — окна разные, и в этом весь диагноз. Замер по высотам: при 1440x740
   кнопки выходят за низ секции на 3px и описания ломаются на две строки, при
   1440x900 под ними 157px, при 2560x1312 — 544px.

   Отдать излишек кадру не выходит. Его ширину держит колонка сетки, а высоту
   пропорция материала: растянуть кадр по высоте можно только вернув чёрные
   поля внутри него — ровно то, что убирали 04.09. Проба это подтвердила: на
   1440x900 кадр вырастал до 809x548 при пропорции 1,95, то есть с 66px
   черноты сверху и снизу.

   Поэтому излишек не отдаётся никому, а раскладывается по зазорам секции.
   Одним куском внизу он читается как дыра, разложенный по четырём стыкам —
   как воздух. На окне 900 это по 33px, на окне 770 излишка почти нет и
   ничего не меняется.

   Проба «разложить по зазорам» (justify-content: space-between) отменена:
   на 1440x900 она давала 111px между надзаголовком и заголовком — ровно тот
   разрыв, который владелец забраковал 04.09. Излишек остаётся внизу одним
   куском. На его окне (около 1500x770) излишка нет вовсе: кнопки стоят в
   24px от кромки, кадр 851x436 ровно по пропорции материала. Дыра видна
   только на высоких окнах, и закрыть её без чёрных полей в кадре или
   разрыва под надзаголовком пока нечем. */

#system .system-grid {
  flex: 0 0 auto;
}

/* ЭКРАН СИСТЕМЫ СОБРАН ПО МАКЕТУ ВЛАДЕЛЬЦА, 06.09.2026.

   Он прислал рядом свой макет и текущий экран: «каша, почему по примеру не
   сделать». В макете левая колонка держит надзаголовок, заголовок, текст и
   список из трёх разделов, справа стоит один кадр, под обеими колонками
   идёт схема пути. У нас список был вынесен в ряд под кадром, а схема
   уехала отдельной полосой ниже — три яруса вместо двух.

   Второе, что он поймал сам: кадр менял пропорцию на каждом переключении.
   Замер материалов — 1440x738 (1,951), 1497x601 (2,491), 1800x572 (3,147).
   JS брал пропорцию у файла, и рамка прыгала. Владелец приводит материалы к
   размеру первой гифки, поэтому пропорция теперь одна и задана здесь. */

#system .stage { --stage-ar: 1440 / 738; }

/* Список разделов — вертикальный, в левой колонке под текстом. */
#system .selectors {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-5);
}

#system .selector {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  align-items: center;
}

/* Колонки по макету: текст уже кадра примерно вдвое. */
#system .system-grid {
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  gap: var(--space-7);
}

/* Схема стоит внутри экрана полосой во всю ширину, как в макете. */
#system .flow {
  flex: 0 0 auto;
  margin-top: var(--space-6);
}

/* ВЫСОТА ЭКРАНА СИСТЕМЫ, ЗАМЕР 06.09.2026.

   Первая сборка по макету переполнила окно 1440x900 на 99px: 25 поля +
   26 надзаголовок + 44 зазор + 711 сетка + 48 + 120 схема + 25 поля = 999
   при доступных 900. Внутри сетки 711 набирались так: заголовок 156,
   первый абзац 52, второй 104, три карточки по 110.

   Срезано там, где это не трогает утверждённый текст: у схемы снят
   собственный отступ (зазор секции уже есть), карточки уплотнены со 110 до
   88, абзацы этой секции переведены на мельчайший кегль шкалы — в макете
   текст под заголовком тоже мелкий, крупным там идёт только заголовок. */

#system .flow { margin-top: 0; }

#system .lead {
  font-size: var(--text-m);
  line-height: 1.5;
}

#system .selector {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
}

#system .selector-desc {
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* НИЗКОЕ ОКНО, 06.09.2026.

   При высоте окна около 700 описания в карточках и подписи под шагами схемы
   не помещаются вовсе: на них нужно 160px, которых нет. Скрываются они, а не
   сами карточки и шаги — путь и разделы остаются на месте и читаются, а
   расшифровка возвращается, как только высоты хватает. Порог 860 взят по
   замеру: на 900 всё стоит целиком с запасом. */
@media (max-height: 859px) {
  #system .selector-desc,
  #system .flow-note { display: none; }
  #system .selector { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ОЧЕНЬ НИЗКОЕ ОКНО, 06.09.2026. На 1440x700 схема выходила за низ секции на
   19px даже после скрытия подписей. Срезано на иконках схемы и на кегле
   заголовка: при высоте окна меньше 740 крупный заголовок стоит дороже, чем
   то, что он даёт. */
@media (max-height: 739px) {
  #system .flow-icon { width: 32px; height: 32px; }
  #system .flow-step .flow-icon { margin-bottom: var(--space-1); }
  #system .section-title { font-size: var(--text-3xl); }
}

/* ТЕКУЩИЙ ШАГ ВМЕСТО РУКОПИСНОЙ ПОМЕТКИ, 06.09.2026.

   В макете владельца шаг «HYPOTHESIS» подсвечен акцентом, и стрелки вокруг
   него нарисованы от руки — это то же указание «решение принимается здесь»,
   только не отдельной строкой под схемой. Строка забракована 04.09 за то,
   что удлиняла экран; подсветка не стоит ни пикселя высоты. */
.flow-step.is-current .flow-label { color: var(--accent); }
.flow-step.is-current .flow-icon { color: var(--accent); }

/* ИЗЛИШЕК ВЫСОТЫ РАСХОДИТСЯ НА ВЕРХ И НИЗ, 06.09.2026.

   На окнах выше 1000 под схемой оставалось от 275px (1920x1080) до 635px
   (2560x1440) — проверка gaps считает это дырой, и правильно делает.
   Отдать излишек кадру нельзя: его ширину держит колонка сетки, а высоту —
   пропорция материала, растянуть можно только чёрными полями внутри кадра.
   Разложить по зазорам (space-between) пробовали 05.09 — получался разрыв
   под надзаголовком, забракованный владельцем 04.09. Центрирование делит
   излишек надвое и не трогает расстояния между блоками: на 900 это по 10px,
   на 1440 — по 317px светлого поля сверху и снизу. */
#system.screen-fit { justify-content: center; }

/* ЯЗЫК НА УЗКОМ ЭКРАНЕ, 06.09.2026.

   Правило `@media (max-width: 860px) { .sidenav-lang { display: none } }`
   убирало RU / EN с телефона целиком. Нашёл ChatGPT чтением кода; проверено
   здесь замером. Английская версия существует ровно для того, чтобы её
   находили, а прямая ссылка /en/ в отклике переключателя не заменяет —
   человек, открывший сайт с телефона, второй язык не увидит вовсе. */
@media (max-width: 860px) {
  .sidenav-lang { display: flex; }
}

/* Место под язык в мобильном меню, 06.09.2026. Возврат RU / EN вытолкнул
   кнопку «Написать» за правый край: замер на 375 дал её левый край на 379.
   Полоса меню уплотняется, а не теряет пункт: у списка разделов срезан
   зазор, у самой полосы — внутренние поля. Размер кнопок не трогаем, 36px
   и так у нижней границы удобного нажатия. */
@media (max-width: 480px) {
  .sidenav { gap: var(--space-2); padding-inline: var(--space-2); }
  .sidenav-list { gap: var(--space-1); }
  .sidenav-link { padding-inline: var(--space-1); }
}


/* ======================================================================
   ПРАВКИ ПО РАЗБОРУ ВЛАДЕЛЬЦА, 06.09.2026.
   Каждый блок ниже подписан замером, который его вызвал: числа сняты
   скриптом на окне 1440x900 до правки.
   ====================================================================== */

/* 1. РУКОПИСНЫЕ ПОМЕТКИ ПЛОТНЕЕ.
   Было: font-size 22px при line-height 25,3px (1,15) и letter-spacing
   normal. У Caveat собственный внутренний просвет большой, и множитель
   1,15 поверх него разносит строки «Один цикл / на всё» на полтора
   интервала. Владелец: «строчки между собой разряжены, и между буквами
   тоже поменьше». */
.hand {
  line-height: 0.95;
  letter-spacing: -0.015em;
}

/* 2. ЗАГОЛОВКИ СЕКЦИЙ В ПОЛТОРА РАЗА КРУПНЕЕ.
   Было 48px — ступень --text-4xl. Ступень --text-5xl (72px) заведена в
   :root 04.09.2026 ровно под эту просьбу, но к правилу не применялась:
   замер 06.09 показал 48px на всех секциях. 48 x 1,5 = 72. Нижняя
   граница clamp поднята с 28 до 40 в ту же пропорцию. */
.section-title {
  font-size: clamp(var(--text-3xl), 5.6vw, var(--text-5xl));
}

/* 3. ПЕРВЫЙ ЭКРАН: КАМЕНЬ БОЛЬШЕ, ЗАЗОР ПОД КНОПКАМИ МЕНЬШЕ.

   Замер до правки: колонка кадра 470x724, картинка квадратная и потому
   рисовалась 470x470 — сверху и снизу по 127px пустого поля. Камень душила
   не высота, а ширина колонки. Тот же замер: кнопки кончаются на 603,
   тёмная полоса начинается на 764 — 161px пустоты между ними, потому что
   ряд забирал весь остаток экрана, а текст внутри него стоял по центру.

   Обе беды лечит одно: ряд перестаёт растягиваться (flex: 0 1 auto) и
   встаёт по содержимому, а кадр расширяется влево отрицательным полем.
   Отрицательное поле не двигает соседнюю колонку — сетка уже распределена,
   и текст остаётся ровно там, где стоял. Владелец просил именно этого:
   «чтобы он был больше, чтобы при этом не двигалось ничего вокруг».

   Величина -110px не с потолка: текст заголовка кончается на 829, кадр
   при этом поле начинает бокс с 808, а сама плита внутри квадрата занимает
   около 86% ширины — то есть до неё ещё около 40px. Больше сдвигать
   нельзя, плита наедет на заголовок. */
@media (min-width: 1101px) {
  #hero .hero-grid {
    flex: 0 1 auto;
    overflow: visible;
  }

  #hero .hero-visual {
    margin-left: -110px;
    height: auto;
    align-items: center;
  }

  #hero .hero-visual img {
    height: auto;
    width: 100%;
  }
}

/* 4. КАМЕНЬ ЛЕЖИТ НА ФОНЕ, А НЕ ЛЕТИТ.
   Просьба владельца. У кадра альфа-канал, поэтому тень берётся фильтром
   по силуэту, а не рамкой по боксу: box-shadow нарисовал бы квадрат вокруг
   прозрачных полей. Две тени: дальняя мягкая даёт объём, ближняя короткая —
   касание поверхности. */
/* 06.09.2026: кадр заменён на новый объект владельца. Он отрисован не на
   прозрачном фоне, а на светлом — замер углов дал #f3efe8…#f7f2ea против
   #F6F4EF у страницы. Разница в две-три единицы на глаз не читается, но
   прямоугольная граница картинки при ней всё же угадывается, поэтому край
   гасится маской: последние 8% радиуса уходят в прозрачность. Наложение
   multiply здесь не годится — фон картинки не белый, и перемножение сделало
   бы квадрат заметно темнее страницы.

   Свои тени сняты: у объекта есть собственная, отрисованная в кадре. */
.hero-visual img {
  -webkit-mask-image: radial-gradient(closest-side, #000 92%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 92%, transparent 100%);
}

/* 5. ЭКРАН РЕЗУЛЬТАТА: ДВЕ КОЛОНКИ, В ВЫСОТУ ОКНА.
   Замер до правки: секция 495px при окне 900 — «он такой узкий получается,
   и у нас начинается третий экран». Пустота справа от заголовка 852px.
   Композиция теперь та же, что на экранах системы и кейса. */
.results-grid {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.results-copy .section-title { margin-bottom: var(--space-4); }

/* Хвост заголовка мелким оранжевым — тем же начертанием, что надзаголовок
   первого экрана, но под заголовком, а не над ним. */
.eyebrow-under { margin: 0; }

#results.screen-fit { justify-content: center; }
#results .results { gap: var(--space-6); }

@media (max-width: 1100px) {
  .results-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* 6. ЭКРАН КЕЙСА: КАДР ВО ВСЮ КОЛОНКУ, БЕЗ ЧЁРНЫХ ПОЛЕЙ.
   Замер до правки: видео 731x376 в боксе 1236x420, по 252px поля с каждой
   стороны — «маленький экран в центре». Ссылка на Behance переехала в левую
   колонку под текст: она относится к кейсу, а не к кадру, и в подвале
   секции висела оторванной. */
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  min-height: 0;
}

.case-copy .lead { margin-bottom: var(--space-7); }

#case.screen-fit { justify-content: center; }
#case .case-media { margin: 0; }

@media (max-width: 1100px) {
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* 7. СХЕМА ПУТИ ПЛОТНЕЕ.
   Замер: шаг 234px при иконке 40px — по 97px пустоты слева и справа от
   каждой иконки. Пять шагов расползались на всю полосу 1236px и читались
   как пять отдельных карточек, а не как одна линия. Полоса посажена по
   содержимому и центрирована. */
.flow {
  max-width: 940px;
  margin-inline: auto;
  gap: var(--space-3);
}

/* 8. КАРТОЧКИ РАЗДЕЛОВ ПЛОТНЕЕ.
   Замер: миниатюра 116x65 в карточке высотой 95 — под кадром 30px пустого
   поля, потому что колонки выровнены по верху. Выравнивание по центру
   убирает разнобой, миниатюра поднята до 132px. */
#system .selector {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
}

/* 9. НИЗКИЕ ОКНА: ЗАГОЛОВОК СИСТЕМЫ УСТУПАЕТ.
   Прогон check-fit после правки 2 показал на английской версии при окне
   1366x768: надзаголовок выше верха секции на 4px, схема пути ниже низа на
   5px. Кегль 72px в высоту 768 не встаёт вместе со схемой — на таких окнах
   заголовок возвращается ближе к прежнему. */
@media (max-height: 799px) {
  #system .section-title { font-size: clamp(var(--text-2xl), 4.6vw, 56px); }
}


/* ======================================================================
   ВТОРОЙ КРУГ ПРАВОК ПО РАЗМЕТКЕ ВЛАДЕЛЬЦА, 06.09.2026.
   ====================================================================== */

/* 10. КНОПКИ МЕНЮ КРУГЛЫЕ.
   Прямая просьба владельца. Плашки 44x44 со скруглением 14px читались
   квадратными со срезанными углами и спорили с самой пилюлей меню, у
   которой скругление полное. */
.sidenav-badge { border-radius: 50%; }

/* 11. ПЕРВЫЙ ЭКРАН: ЗАЗОР ПОД КНОПКАМИ ЕЩЁ МЕНЬШЕ.
   После первой правки осталось 86px: высота ряда задана камнем (575), а
   текст в колонке занимает 512 — разница уходит в пустоту под кнопками.
   Владелец: «почему тут так много пространства, сделай меньше, и тогда
   чуть уменьши картинку справа». Кадр ужимается ровно настолько, чтобы
   ряд сел по тексту: поле сдвига с -110 до -60, бокс 530 вместо 580. */
@media (min-width: 1101px) {
  #hero .hero-visual { margin-left: -60px; }
}

/* 12. СХЕМА ПУТИ В ПРАВОЙ КОЛОНКЕ.
   Разметка переехала под кадр, поэтому ограничение ширины и центровка
   полосы больше не нужны: ширину задаёт колонка. Кадр забирает остаток
   высоты, схема стоит под ним фиксированной строкой. */
#system .system-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

#system .system-stage .stage {
  flex: 1 1 auto;
  min-height: 0;
}

#system .system-stage .flow {
  flex: 0 0 auto;
  max-width: none;
  margin-inline: 0;
  gap: var(--space-2);
}

/* Подписи под шагами в колонке 790px не встают: пять колонок по 158px, а
   строка «Метрики из VK, YouTube и маркетплейсов» требует 190. Схема тут
   работает названиями шагов, объяснение каждого стоит рядом в карточках
   разделов слева. */
#system .system-stage .flow-note { display: none; }
#system .system-stage .flow-icon { width: 32px; height: 32px; }

@media (max-width: 1100px) {
  #system .system-stage .flow { gap: var(--space-3); }
}

/* 13. РАМКА КАРТОЧКИ ПО СОДЕРЖИМОМУ.
   Владелец обвёл синим то, как должна стоять рамка: вплотную к миниатюре и
   названию. Оранжевая рамка активной карточки тянулась на всю колонку —
   469px при содержимом около 300 — и правая треть стояла пустой. Вторая
   колонка теперь считается по содержимому, а не забирает остаток; потолок
   100% оставлен, чтобы описание на высоких окнах переносилось внутри
   колонки, а не выталкивало карточку за её край. */
#system .selector {
  /* Потолок 260px, а не max-content: на окнах выше 859px описание карточки
     видно, и по содержимому рамка растянулась бы на всю колонку — та самая
     широкая рамка, которую владелец забраковал. С потолком описание
     переносится внутри, а рамка стоит одинаково плотно на любом окне. */
  grid-template-columns: 132px minmax(0, 260px);
  justify-self: start;
  max-width: 100%;
}

/* 14. ПОМЕТКА В ЛЕВОЙ КОЛОНКЕ.
   Строка надзаголовка снова несёт только надзаголовок, поэтому её правило
   переноса и запрет переноса строк пометке больше не нужны. */
.system-copy .hand-system {
  white-space: normal;
  padding-top: 0;
  margin-bottom: var(--space-5);
}


/* 15. КАДР СИСТЕМЫ БОЛЬШЕ НЕ ТЯНЕТСЯ.
   Своя же ошибка правки 12: колонка стала flex, и кадру дали flex: 1 1 auto —
   он забрал весь остаток высоты и перестал слушать собственную пропорцию
   1440/738. Отсюда чёрные поля сверху и снизу вокруг таблицы: материал
   рисуется по contain внутри вытянутого бокса. Владелец: «зачем-то вытянул
   вниз основное окно». Кадр возвращается к пропорции, остаток высоты
   колонки уходит в промежуток между кадром и схемой. */
#system .system-stage {
  justify-content: center;
}

#system .system-stage .stage {
  flex: 0 0 auto;
  height: auto;
}

/* 16. РАМКА КАРТОЧКИ ПО НАЗВАНИЮ.
   Потолок 260px всё ещё мерил рамку по описанию: 430px при содержимом
   около 290. Владелец показал синим, где рамка должна кончаться — сразу
   за названием. Описание из карточек убрано: оно и было тем, что тянуло
   рамку, а на окнах ниже 859px и без того пряталось, то есть владелец его
   не видел ни разу. То же самое написано подписью под кадром, когда раздел
   выбран, и шагами схемы под ним. */
#system .selector {
  grid-template-columns: 132px max-content;
  justify-self: start;
  max-width: 100%;
}

#system .selector-desc { display: none; }

/* 17. СТРОКА НАПРАВЛЕНИЙ НА ПЕРВОМ ЭКРАНЕ.
   Занимает зазор между кнопками и тёмной полосой — тот самый, который
   владелец обводил дважды. Разрядка 0,18em взята с референса: слова там
   стоят редко, и именно это делает строку полосой, а не подписью. */
.pillars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.68);
}

/* Точка-разделитель рисуется псевдоэлементом, а не символом в тексте:
   символ попал бы в выделение и в чтение с экрана. */
.pillars span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--space-4);
  vertical-align: middle;
}

/* 18. НА УЗКОМ ЭКРАНЕ КАРТОЧКА СНОВА ТЯНЕТСЯ ПО КОЛОНКЕ.
   max-content не сжимается: на 375px карточка выходила за правый край на
   9-35px (check-fit поймал на обеих версиях). Плотная рамка по названию —
   решение для десктопа, где колонка широкая; на телефоне колонка узкая, и
   рамка по содержимому и так совпадает с её шириной. */
@media (max-width: 860px) {
  #system .selector {
    grid-template-columns: 96px minmax(0, 1fr);
    justify-self: stretch;
  }
}

/* 19. ТРИ ПУСТОТЫ НА ЭКРАНЕ СИСТЕМЫ, ПО РАЗМЕТКЕ ВЛАДЕЛЬЦА.

   Первая — между надзаголовком «СИСТЕМА» и заголовком. Складывалась из
   собственного отступа строки надзаголовка (20px), общего зазора секции
   (24px) и внутреннего просвета Yanone Kaffeesatz над капслоком — шрифт
   рисует прописные заметно ниже верха строки, и при интерлиньяже 0,92 это
   ещё около 17px воздуха, которого нет в разметке. Первые два убраны, третий
   скомпенсирован отрицательным отступом в em: он производный от кегля, а не
   ступень шкалы, поэтому держится сам на любой ширине.

   Вторая — над кадром справа. Своя же правка 15: колонка получила
   justify-content: center, и кадр, ставший ниже колонки, встал по центру с
   полями сверху и снизу. Теперь кадр прижат к верху, схема к низу, и весь
   излишек высоты собран между ними — там он читается зазором, а не дырой.

   Третья — пометка «Живая база» сдвинута к правому краю колонки, куда
   владелец показал стрелкой. */
#system .system-topline { margin-bottom: 0; }

#system .system-copy .section-title { margin-top: -0.14em; }

#system .system-stage { justify-content: space-between; }

#system .system-copy .hand-system {
  margin-left: auto;
  margin-right: var(--space-2);
}


/* ======================================================================
   ЭКРАН СИСТЕМЫ — КОМПОЗИЦИЯ ПО МАКЕТУ ВЛАДЕЛЬЦА, 06.09.2026.
   Правила 12, 15, 16 и 19 выше относились к прежней раскладке в две
   колонки; ниже перекрыто всё, что от неё осталось.
   ====================================================================== */

/* Рубрика раздела — узкая строка над всем экраном. */
.section-rubric {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-cond);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.55);
}

.rubric-num { color: var(--accent); }

/* Шапка экрана: заголовок, объяснение и пометка одной строкой. Доли взяты
   с макета — заголовок занимает примерно треть, текст чуть меньше
   половины, пометке остаётся правый край. */
.system-head {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr) max-content;
  gap: var(--space-7);
  align-items: start;
}

.system-head .section-title { margin: 0; max-width: none; }
.system-head .lead { margin-bottom: var(--space-4); max-width: none; }
.system-head .lead:last-child { margin-bottom: 0; }
.system-head .hand-system {
  margin: 0;
  white-space: nowrap;
  /* 09.09.2026: было -3deg, у остальных четырёх пометок -4deg — разнобой
     нашёлся замером (matrix), на глаз незаметен. Приведено к общему углу. */
  transform: rotate(-4deg);
}

/* Тело экрана: кадр и столбик карточек. 200px под карточку — ширина
   миниатюры 16:9 плюс название; меньше не даёт «ЗАДАЧНИК» встать в строку. */
.system-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-6);
  align-items: stretch;
  min-height: 0;
}

/* Кадр держит собственную пропорцию и вписывается в остаток высоты: при
   ограниченной высоте ширина считается от неё, поэтому чёрных полей не
   остаётся ни по одной стороне. */
#system .system-body .stage {
  aspect-ratio: var(--stage-ar);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto 0 0;
  justify-self: start;
}

/* Карточки столбиком: миниатюра сверху, номер и название под ней. */
#system .selectors {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
}

#system .selector {
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2);
}

#system .selector-name { font-size: var(--text-l); margin: 0; }
#system .selector-num { margin: 0; }

/* Схема пути — полосой под кадром, в собственной рамке, как на макете. */
#system .flow {
  max-width: none;
  margin-inline: 0;
  gap: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  flex: 0 0 auto;
}

#system .flow-icon { width: 34px; height: 34px; }

@media (max-width: 1100px) {
  .system-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .system-head .hand-system { justify-self: start; }
  .system-body { grid-template-columns: minmax(0, 1fr); }
  #system .selectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  #system .selectors { grid-template-columns: minmax(0, 1fr); }
}

/* 20. СТОЛБИК КАРТОЧЕК НА НИЗКИХ ОКНАХ.
   Кадр умеет ужиматься под остаток высоты, а столбик из трёх карточек —
   нет: миниатюра 16:9 при ширине 200px даёт 112px, и три такие карточки с
   номером и названием требуют около 590px. На английской версии при 1366x768
   и 1280x800 они выходили за низ секции на 29 и 17px (check-fit). Номер
   раздела на таких окнах снимается, название опускается на ступень. */
@media (max-height: 819px) {
  #system .selector-num { display: none; }
  #system .selector-name { font-size: var(--text-base); }
  #system .selectors { gap: var(--space-3); }
}

/* 21. МАСКА КРАЯ СНЯТА ПОД НОВЫЙ КАДР.
   Радиальная маска гасила углы квадрата целиком — у прежнего объекта там был
   только фон, а у этого в нижних углах лежат камни, и маска срезала бы их.
   Шов теперь убран иначе: фон страницы подвинут ещё на три единицы, под
   замер углов этой картинки (#efebe4…#f4eee6). Прежние значения для отката:
   #F6F4EF (до 06.09), #F4F1EA (под предыдущий кадр). */
.hero-visual img {
  -webkit-mask-image: none;
  mask-image: none;
}

/* 22. ПОМЕТКА «ОДИН ЦИКЛ НА ВСЁ» УХОДИТ С КАМНЯ.
   Прежде она стояла в левом нижнем углу кадра: у того объекта угол квадрата
   был пустым фоном. Новый объект занимает кадр целиком и в этом углу тёмный,
   а пометка набрана чёрным — она пропала. Теперь она привязана к текстовой
   колонке, а не к кадру, и стоит в её правом нижнем углу: строка направлений
   занимает слева около 350px из 726, справа остаётся свободное поле у самой
   границы с кадром. Высоты первому экрану не добавляет — блок вне потока. */
.hero-copy { position: relative; }

#hero .hand-hero {
  left: auto;
  right: 0;
  bottom: 0;
  transform: rotate(-4deg);
}

/* Пометка отодвинута от кадра на ступень: замер показал, что при прижатии к
   самому краю колонки она заходила на кадр на 22px, а внизу новый объект
   широкий и тёмный — конец фразы снова терялся на камне. */
#hero .hand-hero { right: var(--space-8); }

/* 23. КРАЙ КАДРА ГАСНЕТ СНИЗУ И С БОКОВ.
   Замер углов нового объекта: верхние #f2eee6 и #f2eee8 — против #F1EDE6 у
   страницы это разница в одну единицу, шва там нет и фон трогать не нужно.
   Нижние углы другие: #ede8e0 и #eae3d9. Внизу кадра отрисован пол с бликом,
   он на 7-13 единиц темнее страницы, и его прямая граница читается
   прямоугольником. Две маски пересечением: нижние 8% высоты и по 4% с боков
   уходят в прозрачность — пол растворяется, камни остаются целыми. */
.hero-visual img {
  -webkit-mask-image:
    linear-gradient(to bottom, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}


/* 24. ПОЛОСА ДОКАЗАТЕЛЬСТВА НА ПЯТЬ ПУНКТОВ.
   Прежние три растягивались по трети полосы каждый; пять садятся плотнее,
   поэтому зазор между ними опущен на ступень, а разделительная линия
   осталась. Ниже 1100px колонок три, ниже 600 — одна. */
.proof-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.rail-item + .rail-item { padding-left: var(--space-5); }
.rail-value { font-size: var(--text-xl); }

@media (max-width: 1100px) {
  .proof-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .proof-rail { grid-template-columns: minmax(0, 1fr); }
  .rail-item + .rail-item { padding-left: 0; }
  .rail-item + .rail-item::before { display: none; }
}

/* 25. БЛОК «О ЧЁМ РЕЧЬ?» В ШАПКЕ СИСТЕМЫ.
   Занимает ту ячейку между заголовком и объяснением, которую владелец
   обвёл как пустую. Своей рамкой отделён от соседей: без неё три текстовых
   блока в ряд читаются одним абзацем, разорванным колонками. */
.system-head {
  grid-template-columns: minmax(0, 28%) minmax(0, 22%) minmax(0, 1fr) max-content;
}

.system-note {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}

.system-note-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-cond);
  font-size: var(--text-l);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.system-note-text {
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.45;
  color: rgba(16, 16, 16, 0.72);
}

@media (max-width: 1100px) {
  .system-head { grid-template-columns: minmax(0, 1fr); }
}

/* 26. ТРИ ЗАМЕЧАНИЯ ПО ЭКРАНУ СИСТЕМЫ, ЗАМЕР 06.09.2026.

   «Полоса на фоне» под кадром слева — это верхняя граница следующей секции
   (замер: #capacity, border-top 1px на y=924). Она идёт во всю ширину, но
   кадр перекрывает её справа, и наружу торчит только левый обрубок. Убрана
   у той секции, что стоит сразу за системой; между остальными разделители
   остаются.

   «Не хватает места сверху»: над рубрикой было 25px — поле секции 24 плюс
   линия. Поднято до 40.

   «Слишком широкое окно»: кадр занимал 1012px из 1236 и упирался в высоту —
   запас в теле составлял 3px. Потолок высоты опущен до 94%, кадр ужимается
   и по ширине, поскольку держит пропорцию.

   Заодно замер поймал то, чего никто не заметил: столбик карточек стоял
   1176-1400 при правом поле полосы 1388, то есть вылезал за него на 12px.
   Колонке возвращён нижний предел нуля, содержимому — разрешение сжиматься. */
#capacity { border-top: 0; }

#system { padding-top: var(--space-8); }

#system .system-body .stage { max-height: 94%; }

.system-body { grid-template-columns: minmax(0, 1fr) minmax(0, 200px); }

#system .selectors { min-width: 0; }
#system .selector { min-width: 0; }

/* Кадр ужат не потолком высоты, а долями строки: max-height в процентах при
   заданной пропорции браузер игнорирует — замер после правки 26 дал те же
   1012px ширины. Столбик карточек расширен с 200 до 240px, и кадр забирает
   остаток: 972x498 вместо 1012x553. Дыры между ними не появляется, потому
   что уменьшение одного идёт в увеличение другого. */
.system-body { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }

/* 27. СТОЛБИК КАРТОЧЕК ДЕЛИТ ВЫСОТУ КАДРА.
   После расширения колонки до 240px миниатюры 16:9 подросли до 148px, и три
   карточки стали 636 при кадре 557 — столбик вылез за низ секции на 67px
   (замер). Карточки больше не считают высоту от своей миниатюры: строка
   делится на три равные доли, а миниатюра занимает ту, что ей досталась. */
#system .selectors {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  min-height: 0;
}

#system .selector {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

#system .selector-thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

/* Вынос столбика за поле полосы. Замер: карточки стояли 1136-1400 при правом
   поле 1388. Виновата компенсация отступов из прежней раскладки — там
   карточки лежали в ряд под кадром и их поля гасились отрицательным полем в
   12px. В колонке справа гасить нечего, и эти 12px просто выносили столбик
   наружу с обеих сторон. */
#system .selectors { margin-inline: 0; }

/* 28. ОРАНЖЕВАЯ ПОЛОСА ПЕРЕШЛА НА ТЕКСТОВЫЙ БЛОК.
   Дублирующий абзац снят, блок с полосой сдвинут влево на его место — так
   просил владелец. Шапка снова из трёх колонок. */
.system-head {
  grid-template-columns: minmax(0, 28%) minmax(0, 1fr) max-content;
}

.system-lead {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}

.system-lead .system-note-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-cond);
  font-size: var(--text-l);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* 29. КАДР СЧИТАЕТСЯ ОТ ВЫСОТЫ, А НЕ ОТ ШИРИНЫ КОЛОНКИ.
   Владелец: «всё равно не влезает на экран». Кадр брал ширину колонки и
   выводил из неё высоту по пропорции — на широком окне колонка 1400px даёт
   717px высоты, и вместе с шапкой это больше окна. Теперь наоборот: высота
   равна остатку строки, ширина считается от неё, а потолок в 100% ширины
   ужимает обе стороны разом, если места по горизонтали не хватает. */
#system .system-body .stage {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: none;
}

@media (max-width: 1100px) {
  .system-lead { border-left: 0; padding-left: 0; }
}

/* Уточнение к 29: при явно заданной высоте браузер перестаёт выводить её из
   пропорции, и потолок ширины ломал соотношение — замер дал 972x565, то есть
   1,72 вместо 1,951, а внутри кадра появились бы поля. Правильный порядок
   обратный: ширину берём по колонке, высоту выводим из пропорции, а потолком
   ставим высоту строки — тогда при нехватке места ужимаются обе стороны. */
#system .system-body .stage {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* 30. НИЗКИЕ ОКНА: КАДР ОТДАЁТ ПОСЛЕДНИЕ ПИКСЕЛИ.
   check-fit: на 1366x768 кадр и столбик уходили за низ секции на 15px. Тело
   строки ужимается до остатка, но подпись под кадром и его собственные поля
   стоят своей высотой и этот остаток переполняют. На таких окнах подпись
   опускается на ступень, поля кадра — вдвое: вместе это 22px, с запасом. */
@media (max-height: 819px) {
  #system .stage { padding: var(--space-2); gap: var(--space-2); }
  #system .stage-caption {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-1) 0;
  }
}



/* ======================================================================
   28. ЗАГОЛОВОЧНЫЙ ШРИФТ — TT BLUESCREENS, ПРИМЕРКА 07.09.2026.

   ЛИЦЕНЗИЯ. Файлы взяты из бесплатной раздачи TypeType «free for personal
   use». Это НЕ веб-лицензия: на публичном сайте шрифт стоять не имеет
   права. Поэтому .ttf лежат в .gitignore и в публичный репозиторий не
   уезжают — на выложенной витрине заголовки откатятся на Yanone, пока
   владелец не купит лицензию на typetype.org (от $47.99 за начертание).
   Condensed в бесплатной раздаче нет вовсе, он только в платной Pro.

   ФОРМАТ. Оставлен ttf, не woff2: конвертировать нечем (ни woff2_compress,
   ни sharp в системе нет), а 55 КБ на начертание для локальной примерки
   терпимо. При покупке лицензии брать сразу woff2 у продавца.

   ЗАМЕР ПЛОТНОСТИ. Строка «ПОЧЕМУ ЭТО НЕ РАЗОВАЯ УДАЧА» при кегле 100px:
   TT Bluescreens Regular — 581px, Bold — 676px, запасной моноширинный —
   1620px. Шрифт втрое уже; заголовок в тот же кегль займёт вдвое меньше
   ширины, чем занимал в Yanone, и это надо будет пересчитать кеглем, а не
   оставить как есть.
   ====================================================================== */

/* Отдельная переменная, а не подмена --font-cond: тем же токеном набраны
   рубрики, пункты меню, названия карточек и числа плашки. Модульный
   рисунок хорош на крупном кегле и разваливается на 13-16px, поэтому
   служебная типографика остаётся на Yanone. Откат — одна строка. */
:root {
  /* 11.09.2026: TT Bluescreens снят — пробная лицензия не разрешает готовый
     проект. Владелец выбрал Yanone Kaffeesatz из сравнения шести шрифтов. */
  --font-title: 'Yanone Kaffeesatz', Impact, 'Arial Narrow', sans-serif;
}

.hero-title,
.section-title {
  font-family: var(--font-title);
}



/* ======================================================================
   29. УГОЛКИ ПО КРАЯМ ЭКРАНОВ, 07.09.2026 по макету владельца.

   Камни выходят за левый и правый край окна и обрезаются им. Обрезку даёт
   уже стоящее правило html { overflow-x: clip } — своего overflow секциям
   не задаём, иначе прилипание и тени внутри них сломаются.

   ФОН КАРТИНОК СВЕТЛЕЕ ФОНА СТРАНИЦЫ: замер углов дал #f6f3ee..#f8f5ef
   против #f1ede6 у страницы, и прямоугольник был бы виден светлым пятном.
   Гасится не маской, а mix-blend-mode: darken — он берёт минимум по каналу,
   поэтому фон картинки становится ровно фоном страницы, а камни и
   оранжевое свечение (#ec862b) остаются нетронутыми. На тёмной плашке этот
   приём не работает, поэтому ни один уголок на неё не заходит.

   Слой: уголок абсолютный и стоял бы поверх текста — позиционированные
   элементы красятся выше обычного потока. Поэтому прямые дети экранов
   подняты на z-index 1 одним правилом.
   ====================================================================== */

.edge {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: darken;
  height: auto;
}

.screen > *:not(.edge) {
  position: relative;
  z-index: 1;
}

/* Первый экран: камень выглядывает из левого верхнего угла и крупный
   обломок справа, выше тёмной плашки. */
.edge-hero-a { top: -40px; left: -172px; width: 290px; }
.edge-hero-b { bottom: 15%; right: -196px; width: 420px; }

/* Экран системы: слева вверху и крупный угловой справа внизу. */
.edge-system-a { top: 3%; left: -152px; width: 252px; }
.edge-system-b { bottom: -64px; right: -178px; width: 400px; }

/* Экран возможностей: один уголок слева внизу, чтобы ритм чередования
   левый-правый не обрывался. */
.edge-capacity-a { bottom: -30px; left: -162px; width: 276px; }

/* На узких окнах уголки съедают поля и лезут под текст: там их нет. */
@media (max-width: 1100px) {
  .edge { display: none; }
}



/* 30. УГОЛКИ: ПОДГОНКА ВЫЛЕТА И ГАШЕНИЕ ПЕРЕПОЛНЕНИЯ.

   ЗАМЕР при окне 1440: экран #hero начинается от края окна, а #system и
   #capacity сдвинуты на 100px под боковое меню — поэтому одинаковые
   отрицательные отступы давали разную видимую часть: 118px слева на первом
   экране против 200px на экране системы. Числа ниже приведены к общему
   виду: мелкий уголок показывает около 110px, крупный около 150px.

   ПЕРЕПОЛНЕНИЕ. html { overflow-x: clip } прокрутку не даёт, но ширину
   документа всё равно считает по вылету, и проверка влезаемости считала
   это дефектом. Клип переносится на body: там он обрезает содержимое до
   ширины окна и документ не расширяется. Секциям свой overflow не даём —
   он обрезал бы уголки по краю секции, а у сдвинутых экранов это край
   меню, а не край окна. */
body { overflow-x: clip; }

.edge-hero-b { right: -344px; }
.edge-system-a { left: -242px; }
.edge-system-b { right: -324px; }



/* 31. УГОЛКИ ПЕРЕСОБРАНЫ: ФОН ВМЕСТО КАРТИНКИ ЗА КРАЕМ.

   ДВЕ ОШИБКИ ПРЕДЫДУЩЕЙ ПРАВКИ, обе видны только замером.

   Первая: картинки стояли зеркально. У edge-left камни жались к левому
   краю файла, и при сдвиге элемента влево за край уходила как раз масса
   камня, а у края окна оставалась пустая половина с редкими обломками —
   ровно наоборот против макета. Файлы переименованы по месту установки:
   edge-l ставится слева (камни в правой части файла), edge-r справа.

   Вторая: <img> с отрицательным отступом расширял документ на 344px.
   html { overflow-x: clip } прокрутку глушит, но ширину документа считает
   по вылету, и проверка влезаемости справедливо считала это дефектом.
   Теперь уголок — пустой блок ровно по видимой части, а камень подан
   фоном со сдвигом: фон за границы блока не выходит и на размер документа
   не влияет вовсе.

   Экраны #system и #capacity сдвинуты вправо на ширину бокового меню,
   поэтому левые уголки тянутся до края окна через calc(100% - 100vw);
   на первом экране эта разница равна нулю и формула ничего не меняет.
   Правый край секции совпадает с краем окна, там достаточно right: 0. */

.edge {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: darken;
  background-repeat: no-repeat;
}

/* Левый верх первого экрана: из 290px картинки видно 118. */
.edge-hero-a {
  top: -40px;
  left: calc(100% - 100vw);
  width: 118px;
  height: 387px;
  background-image: url('assets/edge-l.webp');
  background-size: 290px 387px;
  background-position: -172px 0;
}

/* Правый край первого экрана, выше тёмной плашки: из 420px видно 150. */
.edge-hero-b {
  bottom: 15%;
  right: 0;
  left: auto;
  width: 150px;
  height: 560px;
  background-image: url('assets/edge-r.webp');
  background-size: 420px 560px;
  background-position: 0 0;
}

/* Экран системы: слева вверху 110px из 252. */
.edge-system-a {
  top: 3%;
  left: calc(100% - 100vw);
  width: 110px;
  height: 336px;
  background-image: url('assets/edge-l.webp');
  background-size: 252px 336px;
  background-position: -142px 0;
}

/* Экран системы: справа внизу 150px из 400. */
.edge-system-b {
  bottom: -64px;
  right: 0;
  left: auto;
  width: 150px;
  height: 533px;
  background-image: url('assets/edge-r.webp');
  background-size: 400px 533px;
  background-position: 0 0;
}

/* Экран возможностей: слева внизу, угловой обломок, 114px из 276. */
.edge-capacity-a {
  bottom: -30px;
  left: calc(100% - 100vw);
  width: 114px;
  height: 276px;
  background-image: url('assets/edge-l-bottom.webp');
  background-size: 276px 276px;
  background-position: -162px 0;
}

@media (max-width: 1100px) {
  .edge { display: none; }
}



/* 32. УГОЛКИ ПРИВЯЗАНЫ К КРАЮ ОКНА, А НЕ К КРАЮ СЕКЦИИ.

   ЗАМЕР показал ошибку предыдущей формулы: экран не прижат к правому краю
   с отступом под меню, как я считал, а центрирован — max-width плюс
   margin: 0 auto. Поэтому calc(100% - 100vw) работал только на 1440 и
   уносил левый уголок за пределы видимости на широких окнах: на 2560 он
   вставал в -510..-400, то есть исчезал совсем.

   Секция уже окна на одинаковую величину с обеих сторон, значит до края
   окна ровно половина этой разницы. Формула теперь верна на любой ширине,
   и уголок садится на край экрана, как на макете. */

.edge-hero-a,
.edge-system-a,
.edge-capacity-a { left: calc((100% - 100vw) / 2); }

.edge-hero-b,
.edge-system-b { right: calc((100% - 100vw) / 2); }



/* ======================================================================
   33. ТЕКСТУРЫ НА СТЫКАХ ЭКРАНОВ, 07.09.2026 по уточнению владельца.

   Прежде уголки сидели внутри экранов и привязывались к их краям — а
   экраны центрированы и имеют собственные поля, поэтому одна и та же
   формула давала разное: замер показал левый уголок системы в 50px от
   края окна вместо нуля, а правый — на 50px за краем.

   Теперь уголок стоит между секциями, прямым ребёнком main. У main своих
   полей нет, его ширина равна ширине окна, поэтому left: 0 и right: 0
   сажают камень ровно на край экрана без вычислений. Сам разделитель
   нулевой высоты и потока не занимает; камень внутри поднят на половину
   своей высоты, так что линия стыка проходит через его середину.

   Камень торчит из-за края: блок шириной с видимую часть, а картинка
   подана фоном со сдвигом — масса камня приходится на область за краем,
   внутрь летят обломки. Фон за границы блока не выходит и ширину
   документа не расширяет.

   Правила 29-32 выше относились к прежней расстановке внутри секций;
   их селекторов в разметке больше нет.
   ====================================================================== */

.edge {
  display: block;
  position: relative;
  height: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.edge::before {
  content: "";
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  mix-blend-mode: darken;
}

/* Стык первого экрана и системы — слева, самый крупный: из 460px видно 165. */
.edge-1::before {
  left: 0;
  width: 165px;
  height: 613px;
  background-image: url('assets/edge-l.webp');
  background-size: 460px 613px;
  background-position: -295px 0;
}

/* Стык системы и возможностей — справа: из 420px видно 150. */
.edge-2::before {
  right: 0;
  width: 150px;
  height: 560px;
  background-image: url('assets/edge-r.webp');
  background-size: 420px 560px;
  background-position: 0 0;
}

/* Стык возможностей и ниши — слева, угловой обломок: из 360px видно 130. */
.edge-3::before {
  left: 0;
  width: 130px;
  height: 360px;
  background-image: url('assets/edge-l-bottom.webp');
  background-size: 360px 360px;
  background-position: -230px 0;
}

/* Стык кейса и контакта — справа: из 360px видно 130. */
.edge-4::before {
  right: 0;
  width: 130px;
  height: 480px;
  background-image: url('assets/edge-r.webp');
  background-size: 360px 480px;
  background-position: 0 0;
}

@media (max-width: 1100px) {
  .edge { display: none; }
}

/* 34. ЗАГОЛОВКИ — BOLD, А НЕ BLACK.
   У .section-title стоит вес 800, и при трёх заведённых начертаниях
   браузер выбирал ближайшее вверх, то есть Black. Владелец показал файл
   Bold: он и должен стоять на заголовках. */
.hero-title,
.section-title {
  font-weight: 700;
}



/* 35. КАМНИ УХОДЯТ ПОД ТЕКСТ И ПЕРЕСТАЮТ ЛЕЗТЬ ВГЛУБЬ.

   Кадр стыка первого экрана и системы показал две ошибки разом.

   Первая: камень лежал ПОВЕРХ заголовка «Почему это не разовая удача» и
   строки направлений. Правило 29 поднимало на слой выше только прямых
   детей экрана, а заголовок лежит внутри .system-head, то есть внуком, и
   на общий слой не попадал. Поднимаем сами экраны: фона у них нет, камень
   остаётся виден сквозь них, а весь текст оказывается сверху.

   Вторая: 165px захода — это половина расстояния до начала заголовка, и
   камень садился прямо на буквы. На макете владельца камни выглядывают
   узкой полосой. Заход опущен до 60-70px: текст экрана начинается с 50px
   от края окна, так что пересечение остаётся минимальным и приходится на
   поле, а не на строку. */

main > section { position: relative; z-index: 1; }

.edge-1::before { width: 70px;  background-position: -390px 0; }
.edge-2::before { width: 70px; }
.edge-3::before { width: 60px;  background-position: -300px 0; }
.edge-4::before { width: 60px; }



/* 36. ЛЕВЫЕ КАМНИ ДОТЯНУТЫ ДО КРАЯ ОКНА.

   Кадр показал у левого края светлую полосу шириной около 100px, и камень
   висел за ней, задевая первые буквы заголовка. Причина: боковое меню
   отодвигает всё содержимое через padding-left на body, поэтому left: 0
   у камня — это край меню, а не край окна. Отступ компенсируется той же
   формулой, которой он задан, так что связь не разъедется при смене
   ширины меню. Справа поля нет, там right: 0 верен. */

.edge-1::before,
.edge-3::before {
  left: calc(-1 * (var(--sidenav-w) + var(--sidenav-gap) * 2));
}



/* 37. КАМЕНЬ ПЕРЕСТАЁТ БЫТЬ ПЛАШКОЙ.

   На кадре у текстуры читались три прямые границы: вертикальная по краю
   блока и две горизонтальные сверху и снизу. Осколок так не выглядит —
   видно, что картинку обрезали прямоугольником.

   Границы гасятся масками. По горизонтали растворение уводит внутренний
   край в ноль, поэтому заход можно вернуть к 100-120px: дальние обломки
   там уже полупрозрачные и на текст не давят. По вертикали растворение
   короче — сам камень к концам файла и так редеет.

   mask-composite: intersect перемножает обе маски; без него вторая просто
   заменяет первую и вертикальные концы остаются резаными. */

.edge::before {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%),
    var(--edge-fade);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%),
    var(--edge-fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.edge-1::before,
.edge-3::before { --edge-fade: linear-gradient(to right, #000 40%, transparent 100%); }

.edge-2::before,
.edge-4::before { --edge-fade: linear-gradient(to left, #000 40%, transparent 100%); }

.edge-1::before { width: 120px; background-position: -340px 0; }
.edge-2::before { width: 120px; }
.edge-3::before { width: 100px; background-position: -260px 0; }
.edge-4::before { width: 100px; }



/* 38. КАМНИ РАЗВЁРНУТЫ ПРАВИЛЬНОЙ СТОРОНОЙ.

   Замечание владельца: камни стоят не с той стороны. Проверка кадра его
   подтвердила — у левого края лежала сплошная масса скалы, а обломки,
   которые должны лететь внутрь страницы, оказывались обрезаны. Осколок
   читается наоборот: плотная часть уходит ЗА край, внутрь летит редеющая
   россыпь.

   Причина ошибки в именах файлов: я называл их по месту установки, а не
   по тому, что на них нарисовано, и дважды перепутал. Теперь имя говорит,
   где на картинке масса камня: mass-left ставится у ЛЕВОГО края и показывает
   свою левую часть, mass-right — у правого и показывает правую. Проверка
   одна: у края экрана должно быть плотно, вглубь страницы — россыпь. */

.edge-1::before {
  width: 120px;
  height: 613px;
  background-image: url('assets/mass-left.webp');
  background-size: 460px 613px;
  background-position: 0 0;
}

.edge-2::before {
  width: 120px;
  height: 560px;
  background-image: url('assets/mass-right.webp');
  background-size: 420px 560px;
  background-position: -300px 0;
}

.edge-3::before {
  width: 100px;
  height: 480px;
  background-image: url('assets/mass-left.webp');
  background-size: 360px 480px;
  background-position: 0 0;
}

.edge-4::before {
  width: 100px;
  height: 360px;
  background-image: url('assets/mass-right-bottom.webp');
  background-size: 360px 360px;
  background-position: -260px 0;
}



/* 39. ПРАВЫЙ КАМЕНЬ УХОДИТ С КАРТОЧЕК.

   Кадр стыка системы и возможностей: камень высотой 560px доходил до ряда
   карточек и ложился под строку «Одно рабочее место». Текст сверху и
   читается, но наложение лишнее. Заход сужен со 120 до 90px, высота
   обрезана до 400 — масштаб картинки при этом не меняется, просто видно
   меньшую её часть, так что камень не мельчает. */

.edge-2::before {
  width: 90px;
  height: 400px;
  background-position: -330px 0;
}



/* 40. ЧЕТВЁРТЫЙ КАМЕНЬ БЕРЁТ СВОЙ УГОЛ.
   У mass-right-bottom масса лежит в правом НИЖНЕМ углу файла, поэтому
   показ всей высоты давал сверху пустое поле, а маска подрезала как раз
   плотную часть. Кадр сдвинут в нижний угол картинки. */
.edge-4::before {
  width: 100px;
  height: 300px;
  background-size: 500px 500px;
  background-position: -400px -200px;
}


/* ======================================================================
   41. ТЕКСТУРЫ ВЛАДЕЛЬЦА ПО МЕСТАМ С МАКЕТА.

   Прежние четыре картинки были кадрами со светлым фоном, и он гасился
   режимом darken плюс маской по краям. Владелец прислал вырезанные PNG с
   прозрачностью (замер: прозрачных пикселей 72-89%), поэтому и режим
   смешивания, и маска сняты — они теперь только съедают обломки.

   Расстановка взята с макета и повторяет его диагональ:
   левый верх страницы -> правый край на стыке первого экрана и системы ->
   левый край на стыке системы и возможностей -> правый низ на стыке кейса
   и контакта. Стык возможностей и ниши остался без камня: на макете там
   пусто, пятый камень сбивает ритм.

   Имена файлов говорят, где на КАРТИНКЕ лежит масса камня, а не куда её
   ставят на странице: stones-tl — масса в левом верхнем углу, stones-r —
   у правой кромки, stones-l — у левой, stones-br — в правом нижнем углу.
   Прежние имена были даны по месту установки, и на этом дважды вышло
   зеркало.
   ====================================================================== */

.edge::before {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Верхний угол — не стык, а самое начало страницы: камень стоит за шапкой.
   translateY здесь не нужен, элемент и так на нулевой отметке main. */
.edge-top {
  display: block;
  position: relative;
  height: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.edge-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--sidenav-w) + var(--sidenav-gap) * 2));
  width: 300px;
  height: 340px;
  background-image: url('assets/stones-tl.webp');
  background-size: 430px 430px;
  background-position: -75px -55px;
  background-repeat: no-repeat;
}

@media (max-width: 1100px) {
  .edge-top { display: none; }
}

/* Стык первого экрана и системы — справа. */
.edge-1::before {
  left: auto;
  right: 0;
  width: 145px;
  height: 620px;
  background-image: url('assets/stones-r.webp');
  background-size: 465px 620px;
  background-position: -300px 0;
}

/* Стык системы и возможностей — слева. */
.edge-2::before {
  right: auto;
  left: calc(-1 * (var(--sidenav-w) + var(--sidenav-gap) * 2));
  width: 165px;
  height: 465px;
  background-image: url('assets/stones-l-v2.webp');
  background-size: 550px 465px;
  background-position: -55px 0;
}

/* Стык кейса и контакта — правый нижний угол. */
.edge-4::before {
  left: auto;
  right: 0;
  width: 160px;
  height: 380px;
  background-image: url('assets/stones-br-v2.webp');
  background-size: 380px 380px;
  background-position: -250px 0;
}


/* ======================================================================
   42. КАМНИ РАЗВЕДЕНЫ С ТЕКСТОМ.

   Замер пересечений (_overlap.mjs) плюс кадр стыка: правый камень ложился
   ровно на рукописную подпись «Живая база, открыта целиком» —
   x1295..1440 против x1256..1388, y590..1210 против y981..1043. Камень
   лежит ПОД секцией, так что подпись сверху, но тёмное по тёмному не
   читается, и никакой z-index этого не чинит. Камень поднят так, что его
   низ (977) встаёт выше подписи (981).

   Левый камень заходил на 26px на заголовок «Что даёт эта система» —
   это первая буква. Ширина ужата со 165 до 135.
   ====================================================================== */

.edge-1::before {
  transform: translateY(-85%);
  height: 385px;
  background-size: 465px 620px;
  background-position: -300px -120px;
}

.edge-2::before {
  width: 135px;
}


/* ======================================================================
   43. ЛЕВЫЙ КАМЕНЬ ВЫРОС.

   Кадр стыка «Система / Возможности»: боковое меню стоит на x22..80 и
   закрывало камень почти целиком — из 135px видимой полосы на камень
   оставалось 55. Масштаб поднят с 550 до 780 по ширине, видимая полоса
   со 135 до 205: масса выходит из-за края правее меню, обломки летят
   внутрь страницы. Кадр стыка справа при этом не трогаем — там ширина
   работает, потому что справа поля нет.
   ====================================================================== */

.edge-2::before {
  width: 205px;
  height: 660px;
  background-size: 780px 660px;
  background-position: -75px 0;
}


/* ======================================================================
   44. НИЖНИЙ КАМЕНЬ ВСТАЁТ НА ЛИНИЮ СТЫКА.

   Кадр стыка «Кейс / Контакт» показал две прямые границы: снизу и справа.
   Снизу — это край самой картинки, владелец обрезал массу по нижней
   кромке, и висящий в воздухе камень читался как обрубок. Камень
   опущен так, что кромка ложится ровно на линию, разделяющую секции, и
   прямой срез перестаёт читаться срезом.

   Справа камень не доходил до края окна 32px: показывалась область
   250..410 при ширине картинки 380, то есть последние 30 пикселей были
   пустыми. Сдвиг -220 упирает массу точно в край.
   ====================================================================== */

.edge-4::before {
  transform: translateY(-100%);
  background-position: -220px 0;
}


/* ======================================================================
   45. ПРАВКИ ВЛАДЕЛЬЦА ПО КАДРАМ 07.09.2026.

   1. Левый верхний угол выдвинут: показывалось 300 из 430, срез съедал
      обломки. Теперь видно 330 из 350 — камень целиком, масштаб мельче.

   2. Правый камень первого экрана владелец назвал кашей, и замер это
      подтверждает: плашка цифр стоит на y653..800, рукописная подпись на
      y981..1044, а камень шёл сплошным прямоугольником с 592 до 977 —
      его резало и то, и другое, а прямой нижний срез висел в пустоте.
      Возвращено растворение по вертикали (только по ней, боковой маски
      нет — правый край картинки и должен упираться в край окна). Плотная
      часть попадает ровно в коридор 800..980 между плашкой и подписью,
      растворение уходит под плашку сверху и под подпись снизу. Камень
      подан целиком: 300 из 300 по ширине, обломки слева — своя кромка.

   3. Левый камень по центру уменьшен на 30% (780 -> 546 по ширине).

   4. Правый нижний угол добавлен в самый конец лендинга — .edge-bottom
      последним в main, прямой срез картинки ложится на нижнюю границу
      страницы.
   ====================================================================== */

.edge-top::before {
  width: 330px;
  height: 332px;
  background-size: 350px 350px;
  background-position: -20px -18px;
}

.edge-1::before {
  transform: translateY(-50%);
  width: 300px;
  height: 400px;
  background-size: 300px 400px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 70%, transparent 100%);
}

.edge-2::before {
  width: 144px;
  height: 462px;
  background-size: 546px 462px;
  background-position: -52px 0;
}

.edge-bottom {
  display: block;
  position: relative;
  height: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.edge-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  width: 200px;
  height: 260px;
  background-image: url('assets/stones-br-v2.webp');
  background-size: 380px 380px;
  background-position: -180px -120px;
  background-repeat: no-repeat;
}

@media (max-width: 1100px) {
  .edge-bottom { display: none; }
}


/* ======================================================================
   46. ПРАВКИ ПЕРВОГО ЭКРАНА ПО РАЗМЕТКЕ ВЛАДЕЛЬЦА 07.09.2026.

   Замер до правки на окне 1440x900: заголовок 726x251 (кегль 138px при
   19cqw), кадр 530x530, полоса доказательства 1236x146, секция ровно 900.
   Свободного места под полосой оставалось 100px — из него и из полосы
   берётся высота на увеличение заголовка и кадра.

   1. Заголовок крупнее: 19cqw -> 23cqw, то есть 138 -> 167px. Верхний
      предел clamp поднят со 152 до 190, иначе рост упёрся бы в него сразу.
      Ширина строки это выдерживает: «Из новой ниши в» занимала 478 из 726.

   2. Кадр крупнее: figure разъезжается на 30px влево и на поле секции
      вправо. Влево больше нельзя — при -110px плита подходит к концу
      заголовка на 40px (см. слой 3), поэтому основной прирост идёт
      вправо, в gutter, до края окна.

   3. Пометка «Один цикл на всё» переехала в кадр, к правому верхнему углу
      объекта. В текстовой колонке она стояла у нижней границы и упиралась
      в полосу доказательства.

   4. Полоса доказательства тоньше: вертикальные поля со ступени 6 на 4.
      Вместе со снятыми подписями («На равных показах, 35+ SKU» и «Запуск
      перестал упираться в переделки» — вычеркнуты владельцем) полоса
      теряет около 45px.

   5. Камень на стыке первого и второго экрана: размытие краёв снято по
      прямой просьбе, камень погружён правее (видно 200 из 255 вместо 300
      из 300) и уменьшен на 15%.
   ====================================================================== */

@media (min-width: 1101px) {
  .hero-title {
    font-size: clamp(44px, 23cqw, 190px);
  }

  #hero .hero-visual {
    margin-left: -140px;
    margin-right: calc(-1 * var(--gutter));
  }
}

#hero .hand-hero {
  position: absolute;
  top: var(--space-2);
  right: var(--space-8);
  bottom: auto;
  left: auto;
  z-index: 2;
  transform: rotate(-4deg);
}

.proof-rail {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.edge-1::before {
  -webkit-mask-image: none;
  mask-image: none;
  width: 200px;
  height: 340px;
  background-size: 255px 340px;
  background-position: -55px 0;
}


/* ======================================================================
   47. КАМЕНЬ СТЫКА ПОДНЯТ НАД ПОДПИСЬЮ.

   После правки 46 камень встал на x1240..1440, y730..1070, а рукописная
   подпись «Живая база, открыта целиком» лежит на x1258..1389, y981..1044 —
   её хвост снова оказался на камне. Камень уменьшен ещё раз (255 -> 210 по
   ширине картинки) и поднят так, что нижний срез идёт на 975, за шесть
   пикселей до подписи. Выше он заходит на кадр первого экрана всего на
   25px — там прозрачное поле, а не объект.
   ====================================================================== */

.edge-1::before {
  transform: translateY(-73%);
  width: 165px;
  height: 280px;
  background-size: 210px 280px;
  background-position: -45px 0;
}


/* ======================================================================
   48. ВТОРОЙ ЭКРАН: БЛОК ТЕКСТА ПРИДВИНУТ К ЗАГОЛОВКУ.

   Правка владельца 07.09.2026. Рубрика «О чём речь?» снята из разметки:
   она называла то, что и так видно из текста под ней, а вместе с отступом
   съедала верх блока — из-за неё текст стоял ниже верхушки оранжевого
   разделителя, и полоса выступала пустым хвостом.

   Колонка заголовка ужата с 28% до 21%: заголовок в две строки занимает
   около 250px из 346, и остаток читался разрывом между ним и полосой.

   Рукописная пометка отодвинута от правого края на ступень — под неё
   опускается камень стыка, а тёмный текст на тёмном камне не читается.
   ====================================================================== */

.system-head {
  grid-template-columns: minmax(0, 21%) minmax(0, 1fr) max-content;
}

.system-head .hand-system {
  margin-right: var(--space-9);
}

/* Камень стыка опущен по разметке владельца и сужен, чтобы разойтись с
   пометкой: видно 110px из 210 вместо 165. */
.edge-1::before {
  transform: translateY(-43%);
  width: 110px;
  background-position: -100px 0;
}


/* ======================================================================
   49. ВЫРАВНИВАНИЕ ВТОРОГО ЭКРАНА И МАГНИТ ПРОКРУТКИ, 07.09.2026.

   1. Текстовый блок стоял выше заголовка: замер дал верх блока на 988, а
      заголовок начинается на 1010. Разница в 22px читается перекосом, тем
      более что оранжевая полоса тянется от самого верха блока.

   2. Зазор между колонками шапки опущен со ступени 7 на 5: полоса стояла
      на 444 при конце заголовка на 399, и блок отваливался от него.

   3. Столбик карточек начинался на 20px ниже кадра. Верх теперь общий.

   4. Магнит прокрутки. Делается штатным scroll-snap, без JS: тип магнита
      объявляется на прокручиваемом элементе, точка привязки — на секциях.
      Режим proximity, а не mandatory: mandatory притягивает всегда, и
      секцию выше окна (первый экран на ноутбуке 1280x800, любой экран на
      телефоне) становится невозможно долистать до низа — браузер утаскивает
      обратно. proximity срабатывает, только когда экран уже рядом.
      scroll-behavior: smooth здесь уже стоит, так что переход плавный.
   ====================================================================== */

.system-lead {
  margin-top: 22px;
}

.system-head {
  gap: var(--space-5);
}

#system .selectors {
  margin-top: 0;
  padding-top: 0;
  align-self: stretch;
}

html {
  scroll-snap-type: y proximity;
}

main > section {
  scroll-snap-align: start;
}

/* На узком окне секции длинные и магнит только мешает — там прокрутка
   свободная. */
@media (max-width: 1100px) {
  html { scroll-snap-type: none; }
}


/* ======================================================================
   50. КОМПОЗИЦИЯ НА ЧУЖИХ ЭКРАНАХ, 07.09.2026.

   Проверка сеткой 10 ширин x 7 высот (_grid.mjs) вместо четырёх точек
   check-fit нашла то, чего четыре точки не видели:

   - на высоте 800 первый экран переполнялся на 3-5px при ширинах 1440,
     1550, 1750 и 1920. Секция с height: 100vh переполняется молча: её
     высота остаётся 100vh, а содержимое вылезает за нижнюю кромку;
   - на 1150x1440 заголовок вставал в четыре строки вместо двух: кегль
     считается от ширины колонки (23cqw), и на узком окне колонка мала, а
     кегль от неё всё ещё крупный.

   Кегль теперь берёт минимум из трёх мер: ширины колонки, высоты окна и
   ширины окна. Высота окна нужна затем, что заголовок делит её с кадром и
   полосой; ширина окна — затем, что при узкой колонке строка не влезает.

   Второе: короткие секции. Замер долей окна показал 44-53% у «Возможностей»
   и 29-47% у контакта — магнит притягивал их к верху, под ними оставалась
   пустота и кусок следующей секции. Секция, к которой магнит притягивает,
   обязана занимать экран целиком, иначе притяжение показывает половину
   composition. «Ниша» — вставка на 488px, её из магнита убираем совсем.
   ====================================================================== */

@media (min-width: 1101px) {
  .hero-title {
    /* 09.09.2026: вторая строка выросла с «ПРОДАЖИ. ЛЕГКО.» (15 знаков) до
       «ПОТОК ПРОДАЖ. ЛЕГКО.» (20), то есть на треть. При прежних множителях
       она рвалась в три строки на ширинах 1650-1750 — замер check-grid.
       Все три множителя опущены на ту же треть, потолок с 210 до 172. */
    /* 11.09.2026: владелец показал пустое место между опорами и полосой
     цифр. Замер: вторая строка занимала 77% ширины колонки на всех пяти
     экранах — запас по ширине был, кегль держали множители. Колонка
     теперь заполняется до ~92% (21cqw), высота окна и потолок подняты,
     чтобы запас дошёл и до 1920x1080 и 2560x1440. */
  /* 11.09.2026, Yanone: при той же ширине строки он в 1,13 раза шире
     Bluescreens — все множители поделены на 1,13, иначе строка рвётся в три. */
  /* 11.09.2026, вечер: заголовок в три строки, «Легко.» — отдельной
     (решение владельца). В две строки при 22,5cqw «ЛЕГКО.» заходило на
     камень на 257-406px. Условие владельца: текст едва не касается
     картинки, но не наезжает. Подбор по видимому краю камня (пиксели кадра,
     не бокс) на шести окнах 1280-2560, RU и EN: предел 21,05-22,66cqw,
     упор везде в камень, высота окна не ограничивает ни разу. RU — 22cqw
     (предел 22,17-22,66), EN — 21cqw (предел 21,05-21,98, строка «to steady
     sales.» шире). Одна цифра на обе версии давала RU 42-108px до камня
     вместо «едва не касается». Потолок 300px, чтобы на 27" заголовок не
     останавливался раньше камня. */
  /* 11.09.2026, поздно: владелец попросил кегль на 15% меньше —
     22 -> 18,7cqw, EN 21 -> 17,85cqw, потолок 300 -> 255px. */
  font-size: clamp(44px, 18.7cqw, 255px);
  }

  :lang(en) .hero-title { font-size: clamp(44px, 17.85cqw, 255px); }

  /* Секции магнита занимают экран целиком и центрируют содержимое. */
  #capacity,
  #next {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Вставка «Ниша» короткая по замыслу — магнит её пропускает. */
#niche {
  scroll-snap-align: none;
}


/* ======================================================================
   51. КАДР ПЕРВОГО ЭКРАНА БОЛЬШЕ НЕ ТОРЧИТ ИЗ СВОЕГО РЯДА.

   Настоящая причина переполнения найдена замером по составным частям, а не
   по итоговой высоте: на 1440x800 ряд hero-grid 647, а кадр в нём 662 — он
   считает высоту от своей ширины (квадрат, width: 100%) и ряд его не
   ограничивает. На 2200x700 расхождение уже 547 против 700. Сумма полей,
   рядов и зазора при этом сходится в 800 ровно — поэтому по итоговой
   высоте секции ошибка не видна.

   Кадр теперь вписывается в ряд: высота ограничена рядом, ширина считается
   от неё. Чтобы max-height работал, у figure должна быть определённая
   высота — отсюда align-self: stretch и min-height: 0. Это та же ловушка,
   что записана в скилле web-design: height в процентах от auto-родителя
   молча игнорируется.
   ====================================================================== */

@media (min-width: 1101px) {
  #hero .hero-visual {
    align-self: stretch;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  #hero .hero-visual img {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
}


/* 52. КОНТАКТ НЕ РАСТЯГИВАЕТСЯ. Замер долей: при окне 1200 у него 422px
   содержимого и 923px пустоты — экран из одной строки и воздуха. Магнит его
   всё равно не достаёт: это последняя секция, страница кончается раньше,
   чем она встанет наверх (проверено _snap.mjs). Полноэкранной остаётся
   только «Возможности»: там 639px содержимого, и центрирование читается
   блоком по центру экрана, а не пустотой. */
#next {
  min-height: 0;
  display: block;
}


/* ======================================================================
   53. МАГНИТ ТОЛЬКО НА ПОЛНОЭКРАННЫХ СЕКЦИЯХ.

   Растяжка «Возможностей» до окна (слой 50) правило магнита выполняла, но
   проверка gaps показала цену: 174-240px пустоты под содержимым на ноутбуках
   и 353 на окне 1200. Секцию с 639px содержимого нельзя растянуть до 1200 без
   провала — можно только не притягивать к ней.

   Поэтому магнит остаётся ровно на трёх секциях, у которых высота окна задана
   по замыслу: первый экран, «Система», «Кейс». Короткие — «Возможности»,
   «Ниша», «Контакт» — из магнита выведены и живут своей высотой.
   ====================================================================== */

@media (min-width: 1101px) {
  #capacity,
  #next {
    min-height: 0;
    display: block;
  }
}

#capacity,
#niche,
#next {
  scroll-snap-align: none;
}


/* ======================================================================
   54. ПРЕДЕЛ ШИРИНЫ РАСТЁТ НА БОЛЬШИХ МОНИТОРАХ.

   На 2560x1440 под полосой доказательства оставалось 310px пустоты, на
   1920x1080 — 130, на макбуке 16 — 148. Причина не в полях и не в зазорах:
   ширина содержимого закреплена на 1336px, а кадр первого экрана — квадрат,
   и его высота считается от ширины колонки. Расти вниз ему нечем: лишняя
   высота окна уходит в поля, потому что вширь страница уже кончилась.

   Предел поднимается только там, где экран действительно большой по обеим
   сторонам: от 1800px ширины и 1000px высоты. Ниже — прежние 1336, чтобы не
   трогать раскладку на ноутбуках, где всё уже сведено по пикселям.
   ====================================================================== */

/* 11.09.2026: пределы подняты ещё на ступень (было 1560 / 1720 / 1880).
   Заголовок первого экрана стал меньше и перестал держать ширину, а поля
   на 2560x1440 оставались по 206px сверху и снизу. Замер с новыми
   пределами: 145px на 2560, 72 на 1920. Решение владельца. */
@media (min-width: 1700px) and (min-height: 1000px) {
  :root { --wrap: 1640px; }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  :root { --wrap: 1960px; }
}

@media (min-width: 2400px) and (min-height: 1300px) {
  :root { --wrap: 2200px; }
}


/* ======================================================================
   55. ЭКРАН МЕТОДА ВХОДА, 08.09.2026.

   Прежние пять плиток описывали пользу Notion-системы и держались на
   иконках; владелец назвал блок шумом. Теперь это четыре шага первого
   такта, и держатся они на номерах: шаги идут по порядку, а порядок
   иконкой не показать. Номер занимает то же место в сетке плитки, что
   занимала иконка, поэтому внутренняя раскладка не меняется.
   ====================================================================== */

.benefits-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benefit-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-cond);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding-top: 2px;
}

/* Подводка экрана идёт во всю полосу, а не в колонку текста: под ней стоят
   четыре плитки, и колонка вдвое у́же ряда читалась бы уступом. */
.lead-wide {
  max-width: 74ch;
}

@media (max-width: 1100px) {
  .benefits-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .benefits-steps { grid-template-columns: minmax(0, 1fr); }
}


/* ======================================================================
   56. ТРИ НОВЫЕ РУКОПИСНЫЕ ПОМЕТКИ, 08.09.2026.

   Приём был на двух экранах из шести и потому не читался приёмом. Тексты
   выбраны владельцем. Позиция общая: правый верхний угол секции, там же,
   где стоит пометка на экране «Система», — кроме кейса, где справа лежит
   видео и пометка идёт под подводкой в текстовой колонке.
   ====================================================================== */

/* Селектор с id: у .hand выше по файлу стоит position: relative, и одиночный
   класс его не перебивает. Кадр показал результат буквально — пометка легла
   поверх заголовка слева, потому что при relative свойство right сдвигает
   элемент от его места в потоке, а не прижимает к краю секции. */
#capacity .hand-capacity,
#niche .hand-niche {
  position: absolute;
  top: var(--space-10);
  right: var(--gutter);
  text-align: left;
  z-index: 2;
}

.hand-case {
  margin-top: var(--space-4);
}

/* На узком окне пометка встаёт в поток. Селектор с id намеренно: у .hand
   выше по файлу стоит position: relative с большей специфичностью, и
   одиночный класс его не перебивает — замер на 375 показал position
   relative при заявленном static, а right при relative сдвигает блок
   влево, из-за чего он вылезал за левый край на 2px. */
@media (max-width: 1100px) {
  #capacity .hand-capacity,
  #niche .hand-niche {
    position: static;
    right: auto;
    top: auto;
    margin-bottom: var(--space-5);
  }
}

/* 11.09.2026, параллакс камней (скрипт в index.html, выключается ?parallax=0).
   Без скрипта --drift и --spin не заданы, сдвиг и поворот нулевые. */
.edge-top::before,
.edge::before,
.edge-bottom::before {
  translate: 0 var(--drift, 0px);
  rotate: var(--spin, 0deg);
}

/* 11.09.2026: разделов в столбике стало пять (09.09), а правка 27 делила
   высоту на три доли. Четвёртый и пятый получали остаток по высоте подписи,
   миниатюры у них сжимались до нуля — замер 222x0 на 1280, 1440 и 1920.
   Доли теперь по числу разделов. Только широкое окно: ниже 1101 столбика
   нет, разделы стоят рядом по три. */
@media (min-width: 1101px) {
  #system .selectors { grid-template-rows: repeat(5, minmax(0, 1fr)); }
}


/* 11.09.2026: Yanone в две строки поверх картинки — решение владельца.
   Строки не переносятся внутри (две строки задаёт br), и вторая уходит за
   колонку на камень. Предел кегля — правый край строки на 60% ширины
   камня: замер на шести окнах дал 22,5-23cqw, по высоте запас от 20vh.
   На 1440 — 163px, на 1728 — 204 (Bluescreens был 153 и 190). */
@media (min-width: 1101px) {
  .hero-title { white-space: nowrap; }
  #hero .hero-copy { z-index: 2; }
  #hero .hero-visual { z-index: 1; }
}

/* 11.09.2026: после перехода на Yanone (он шире Bluescreens) заголовок
   «Почему это не разовая удача» на 1280x800 вставал в четыре строки в
   колонке 226px и сталкивал кадр системы на 34px ниже секции. На окнах
   1101-1439 кегль идёт от ширины окна: 4,1vw = 56px на 1366, где три строки
   уже влезали. */
@media (min-width: 1101px) and (max-width: 1439px) {
  #system .section-title { font-size: 4.1vw; }
}


/* ======================================================================
   57. РИТМ ПЕРВОГО ЭКРАНА, «СИСТЕМА» В ОКНО, РУБРИКИ НА ВСЕХ ЭКРАНАХ,
   11.09.2026.

   Первый экран. Владелец: «Й» упирается в надзаголовок, строка направлений
   прилипает к полосе цифр. Замер до правки: надзаголовок -> заголовок 12,
   заголовок -> разделитель 8, разделитель -> абзац 20, абзац -> кнопки 16,
   кнопки -> направления 24, направления -> полоса 21-101 (на 1280x720 — 21).
   Внутри групп стояло больше, чем между ними. Теперь четыре группы:
   [надзаголовок + заголовок], [разделитель + абзац], [кнопки],
   [направления]; внутри группы 16, между группами 32, до полосы цифр
   не меньше 56.
   Кегль заголовка берёт вторую меру — высоту окна. Без неё новые зазоры на
   ноутбуках не помещаются, и колонку срезает overflow ряда — молча, по
   высоте секции этого не видно.

   «Система». Заголовок в две строки — перенос задан в разметке, колонка
   заголовка по его ширине (max-content), а не долей полосы: при 21%
   он вставал в три строки на всех окнах до 2560. Низ секции получил то же
   поле, что верх: кадр стоял в 16-24px от кромки и читался обрезанным.

   Рубрика «номер + название» теперь на каждом экране раздела: 01 Система,
   02 Ниша (с экрана метода входа), 03 Кейс, 04 Контакт — те же номера и
   слова, что в боковом меню.
   ====================================================================== */

/* Замер после первого прохода: от базовой линии надзаголовка до верха
   кратки «Й» оставалось 19px при кегле 67 и 6px при 240 — кратка выходит
   над строкой на долю кегля, и поле в 0,14em её не покрывало. Поле в 0,2em
   держит зазор постоянным, 16-19px на всех окнах. Отступ под заголовком —
   ступень 5, а не 7: под строкой и так стоит свой просвет, и видимый зазор
   до разделителя выходил 46-74px. */
@media (min-width: 1101px) {
  #hero .eyebrow { margin-bottom: var(--space-3); }

  .hero-title {
    padding-top: 0.2em;
    margin-bottom: var(--space-5);
    font-size: clamp(44px, min(18.7cqw, calc(24vh - 106px)), 255px);
  }

  :lang(en) .hero-title { font-size: clamp(44px, min(17.85cqw, calc(24vh - 106px)), 255px); }

  .hero-divider { margin-bottom: var(--space-4); }
  #hero .hero-copy .body-text { margin-bottom: var(--space-7); }
  #hero .pillars { margin-top: var(--space-7); }

  .system-head { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  #system { padding-bottom: var(--space-8); }

  /* Кадр вписан в тело экрана по обеим сторонам. max-height: 100% у него не
     срабатывал — строка сетки тела auto, процент считается от неё и молча
     отбрасывается. На 1280x720 кадр был 457px при теле 433 и выходил за
     ряд на 24px; check-grid этого не видел, он мерит только прямых детей
     секции. Тело объявлено контейнером по размеру, ширина кадра — меньшая
     из ширины колонки и высоты тела, умноженной на пропорцию. Из высоты тела
     вычтены 60px — поля кадра и подпись под ним, их высота от ширины не
     зависит (замер: 41px на низких окнах, 59 на остальных). */
  #system .system-body { container-type: size; }

  #system .system-body .stage {
    width: min(100%, calc((100cqh - 60px) * var(--stage-ar)));
    height: auto;
    max-height: none;
  }
}

/* Номер рубрики в рост названия. Замер ширины букв на канве: у Yanone
   высота цифр 10px против 12 у заглавных при одном кегле 16px — номер
   читался мельче слова. Кегль номера поднят в ту же пропорцию. */
.rubric-num { font-size: 1.2em; line-height: 1; }

/* Рубрика шириной по тексту: во всю полосу её рамка ложилась под
   рукописную пометку в правом углу «Ниши» (gaps: наложение 28px). */
.section-rubric { width: fit-content; }


/* ======================================================================
   58. ШАПКА «СИСТЕМЫ»: ПОЛОСА В РОСТ ЗАГОЛОВКА, 11.09.2026.

   Владелец по листу 1280x720: текст рядом с заголовком съехал, оранжевая
   полоса должна быть высотой с заголовок; на больших окнах шапка мелкая.
   Полоса теперь идёт от верха заглавных первой строки до базовой линии
   второй, текст стоит от того же верха. Кегль заголовка — одна переменная
   --st, от неё считаются и оптические поправки полосы. На больших окнах
   заголовок растёт до 96px, текст — на ступень.
   ====================================================================== */

/* Полоса — псевдоэлемент, а не рамка блока: рамка тянется за текстом, и
   при длинном тексте полоса выходила ниже заголовка. Высота полосы — от
   верха заглавных первой строки до базовой линии второй: шаг строки 0,92
   плюс высота заглавной Yanone 0,75 (замер на канве). --lead-inset —
   расстояние от верха блока до верха заглавных первой строки текста, в em
   его кегля: на него блок поднят, чтобы текст и полоса начинались вровень
   с заголовком. */
@media (min-width: 1101px) {
  #system { --st: clamp(72px, 3.75vw, 96px); --lead-inset: 0em; }
  #system .system-head .section-title { font-size: var(--st); margin: 0; }

  #system .system-head { align-items: start; }

  #system .system-head .system-lead {
    position: relative;
    border-left: 0;
    padding: 0 0 0 var(--space-4);
    margin: calc(var(--st) * 0.02 - var(--lead-inset)) 0 0;
    font-size: var(--text-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Замер 11.09.2026 на кеглях 52-96: от верха заглавных до базовой линии
     второй строки заголовка 1,627 кегля; верх заглавных первой строки текста
     стоит на 0,5em + 13px от верха блока (14px — 20, 16 — 21, 18 — 22) и
     совпадает с верхом заглавных заголовка в пределах 2px. */
  #system .system-head .system-lead::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(0.5em + 13px);
    width: 2px;
    height: calc(var(--st) * 1.627);
    background: var(--accent);
  }

  /* Предел строки 76 знаков, а не 64: при 64 текст упирался в предел, а не
     в колонку, вставал в пять-шесть строк и выходил ниже заголовка. */
  #system .system-head .system-lead .lead {
    margin: 0;
    padding: 0;
    max-width: 76ch;
    font-size: 1em;
    line-height: 1.35;
  }
}

@media (min-width: 1101px) and (max-width: 1439px) {
  #system { --st: 4.1vw; }
  #system .system-head .system-lead { font-size: var(--text-m); }
}

@media (min-width: 2200px) {
  #system .system-head .system-lead { font-size: var(--text-l); }
}


/* ======================================================================
   59. ЗАГОЛОВОК «СИСТЕМЫ» КРУПНЕЕ, ПОЛОСА ПРИВЯЗАНА К НЕМУ, 11.09.2026.

   Владелец по своему окну: заголовок очень маленький, полоса и текст снова
   съехали. Причина съезда: полоса стояла от текста с поправкой в пикселях,
   подобранной на шести окнах, — на седьмом она не держалась. Теперь полоса —
   часть заголовка (::after), её верх и высота в em его кегля, от окна не
   зависят. Текст поднимается к верху заглавных тем же расчётом.
   --cap-x — верх заглавных от верха заголовка, в долях кегля;
   --cap-y — верх заглавных текста от верха блока, в долях кегля текста.
   Оба сняты замером на канве после обнуления полей.

   Кегль — меньшая из двух мер: 6vw по ширине и 11vh по высоте, чтобы
   выросшая шапка не выдавила кадр за низ окна. Рубрика прижата к
   заголовку (16), шапка отстоит от тела на 32 — внутреннее меньше
   внешнего.
   ====================================================================== */

@media (min-width: 1101px) {
  #system {
    --st: clamp(52px, min(6vw, 11vh), 150px);
    /* Замер 12.09.2026, восемь окон 1280-2560, кегль 77-150: верх
       заглавных заголовка на 0,026 кегля ниже его бокса; текст без
       поправки стоял на 4-5px выше — поднимается на ту же долю плюс
       0,1em своего кегля. */
    --cap-x: 0.026;
    --cap-y: -0.1;
    gap: var(--space-7);
  }

  #system .section-rubric { margin-bottom: calc(var(--space-4) - var(--space-7)); }

  #system .system-head { gap: var(--space-8); }

  #system .system-head .section-title {
    position: relative;
    padding: 0;
    line-height: 0.92;
  }

  #system .system-head .section-title::after {
    content: '';
    position: absolute;
    right: calc(var(--space-8) / -2 - 1px);
    top: calc(var(--cap-x) * 1em);
    width: 2px;
    height: 1.627em;
    background: var(--accent);
  }

  #system .system-head .system-lead {
    padding: 0;
    margin-top: calc(var(--st) * var(--cap-x) - var(--cap-y) * 1em);
  }

  #system .system-head .system-lead::before { content: none; }
}

@media (min-width: 1101px) and (max-width: 1439px) {
  #system { --st: clamp(52px, min(6vw, 11vh), 150px); }
}


/* ======================================================================
   60. ПЕРВЫЙ ЭКРАН КОМПАКТНЕЕ, ЗАГОЛОВОК КРУПНЕЕ, 12.09.2026.

   Владелец обвёл пустоты: над надзаголовком, под заголовком, между
   абзацем, кнопками, направлениями и полосой цифр. Слой 57 сделал
   обратное просьбе — ограничил кегль высотой окна с запасом (24vh - 106px)
   и раздвинул группы до 32, колонка стояла с полями 40-58px сверху и снизу.
   Теперь зазоры внутри групп 12, между группами 24, а кегль растёт до
   предела камня (RU 22cqw, EN 21cqw — замер 11.09) или до высоты, при
   которой колонка заполняет ряд: 30vh - 132px.
   ====================================================================== */

@media (min-width: 1101px) {
  .hero-title {
    font-size: clamp(44px, min(22cqw, calc(30vh - 132px)), 255px);
    margin-bottom: var(--space-3);
  }

  :lang(en) .hero-title { font-size: clamp(44px, min(21cqw, calc(30vh - 132px)), 255px); }

  .hero-divider { margin-bottom: var(--space-3); }
  #hero .hero-copy .body-text { margin-bottom: var(--space-6); }
  #hero .pillars { margin-top: var(--space-6); }
}

#capacity .section-rubric,
#next .section-rubric { margin-bottom: var(--space-6); }

#case .section-rubric { margin-bottom: var(--space-3); }


/* ======================================================================
   61. ТЕКСТ ШАПКИ «СИСТЕМЫ» РАСТЯНУТ ПО ДЛИНЕ ПОЛОСЫ, 14.09.2026.

   Владелец: «чтобы текстовый блок по вертикали занимал расстояние всей
   полосы разделителя». Замер до правки: текст 73px при полосе 187 на
   1920 и 81 при 244 на 2560 — абзацы жались к верху, под ними до конца
   полосы оставалась пустота.

   Кегль при этом не трогается: первая попытка растила его от --st, и на
   1600 последняя строка второго абзаца вываливалась за полосу. Высота
   блока приравнена к высоте полосы, два абзаца разведены по краям —
   первый стоит у начала полосы, последний кончается у её конца.
   ====================================================================== */

@media (min-width: 1101px) {
  #system .system-head .system-lead {
    /* Плюс 0,62em: полоса кончается на базовой линии второй строки
       заголовка, а низ блока лежит ниже своей последней базовой линии на
       полуинтерлиньяж и спуск шрифта. Замер на кеглях 14-18 дал 9-11px —
       ровно эта доля. Равняем краску по краске, а не боксы. */
    height: calc(var(--st) * 1.627 + 0.62em);
    justify-content: space-between;
    gap: 0;
  }
}


/* ======================================================================
   62. ПЕРВЫЙ ЭКРАН: ДВЕ СТРОКИ, ШИРЕ ПОЛОСА, КРУПНЕЕ ЗАГОЛОВОК, 14.09.2026.

   Замер на окне владельца 2000x884 объяснил, почему заголовок оставался
   мелким при всех прежних правках: ступени --wrap требовали высоты окна
   от 1000px, а у него 884 — страница держала полосу 1336 из 2000, колонка
   текста выходила 788, и кегль упирался в её ширину. Отсюда же «отодвинул
   направо»: слева от колонки стояло поле в 382px.

   Требование по высоте снято — ширину полосы задаёт ширина окна. Заголовок
   вернулся в две строки, «Легко.» стоит за «продаж.», и высотный предел
   пересчитан под две строки вместо трёх.
   ====================================================================== */

@media (min-width: 1700px) {
  :root { --wrap: 1640px; }
}

@media (min-width: 2200px) {
  :root { --wrap: 1960px; }
}

@media (min-width: 2400px) {
  :root { --wrap: 2200px; }
}

@media (min-width: 1101px) {
  /* Ширина: самая длинная строка теперь «поток продаж. Легко.» — 20 знаков
     против 13 у прежней. Замер ширины знака Yanone на кеглях 84-255 дал
     0,363 кегля, отсюда 7,25em на строку и доля колонки 13,8%.
     Высота: две строки вместо трёх, предел пересчитан от высоты окна. */
  /* 15.09.2026 отменено: заголовок во всю ширину полосы делал камень
     значком в углу — 333px на 2000x884 против 731. Тот же откат, что
     03.09. Заголовок и надзаголовок стоят над текстом в левой колонке,
     камень держит правую на всю высоту ряда. Выигрыш от снятия условия
     по высоте у --wrap остаётся: колонка на окне 2000x884 стала 977
     вместо 788. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    grid-template-areas: 'head visual' 'copy visual';
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .hero-head { grid-area: head; container-type: inline-size; }
  #hero .hero-copy { grid-area: copy; justify-content: start; }
  #hero .hero-visual { grid-area: visual; align-self: stretch; }

  /* Строка «поток продаж. Легко.» — 20 знаков, ширина знака Yanone 0,363
     кегля, отсюда 7,25em на строку и доля 13,8% ширины колонки. */
  .hero-title { font-size: clamp(44px, min(13.8cqw, calc(34vh - 128px)), 255px); }
  :lang(en) .hero-title { font-size: clamp(44px, min(12.6cqw, calc(34vh - 128px)), 255px); }
}


/* ======================================================================
   63. ДЫРА МЕЖДУ КАДРОМ И СТОЙКОЙ, ВОЗВРАТ КОЛОНКИ В ЦЕНТР, 15.09.2026.

   Замер на окне владельца 2000x884: между кадром и столбиком разделов
   438px пустого фона. Кадр вписан по высоте окна, а колонка под него
   была 1fr — на широком и низком окне остаток колонки уходил в пустоту
   посередине экрана. На 1440x900 того же зазора 24px, поэтому дыра не
   ловилась ни одной проверкой: она живёт только на широких низких окнах.

   Колонка кадра переведена на размер по содержимому, стойка получила
   предел 360px, вся пара встала по центру тела: свободное место ушло в
   поля по краям, а не в разрыв между двумя блоками.
   ====================================================================== */

@media (min-width: 1101px) {
  /* Тело переведено в flex: у сетки колонка кадра оставалась шириной в
     остаток ряда, потому что ширина кадра задана через min(100%, ...) и
     100% ссылается на саму колонку. В flex кадр занимает ровно свою
     ширину по пропорции и высоте, стойка — свою, пара стоит по центру. */
  #system .system-body {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  /* margin: 0 auto 0 0 у кадра (строка 2451) в flex давал правый auto —
     те самые 294px пустоты. Поля обнулены, центрирует контейнер. */
  #system .system-body .stage { flex: 0 0 auto; margin: 0; }
  #system .system-body .selectors { flex: 0 1 360px; min-width: 200px; }

  /* 16.09.2026: заголовок блока встал в одну строку, тело выросло в высоту,
     и кадр — он считает ширину от собственной высоты — раздался до 1530px.
     Пара «кадр + стойка» перестала помещаться в ряд: на 1728x1117 столбик
     кончался на 1730 при окне 1728 (check-fit, обе версии). При flex: 0 0 auto
     кадр сжиматься не умеет, поэтому ему задан потолок ширины — остаток ряда
     за вычетом минимальной стойки и зазора. Растяжку по высоте снимаем, иначе
     потолок ширины ломает пропорцию: с height: auto и обоими пределами кадр
     вписывается в остаток как contain. */
  #system .system-body .stage {
    align-self: center;
    height: auto;
    max-height: 100%;
    max-width: calc(100% - 200px - var(--space-6));
  }

  /* Колонка первого экрана снова по центру ряда: после выноса заголовка
     в отдельный блок она встала от верха и висела с 216px пустоты снизу. */
  #hero .hero-copy { justify-content: center; }
}


/* ======================================================================
   64. КАМЕНЬ ЗА ЗАГОЛОВКОМ, 15.09.2026.

   Композиция собрана владельцем на канве Claude Design (блок Б): камень
   крупный, смещён влево и вверх и уходит ЗА текст, заголовок в три строки
   поверх него. Пропорции сняты с его артборда 2000x884: камень 995px
   ширины при полосе 1640 (60,7%), левый край на 538px от начала полосы
   (32,8%), верх на 138px выше верха секции.

   Поэтому кадр выходит из ряда сетки и становится слоем: сетка отдаёт обе
   колонки тексту, камень лежит под ним абсолютом. Заголовок больше не
   ограничен шириной колонки — предел теперь ширина полосы.
   ====================================================================== */

@media (min-width: 1101px) {
  #hero { position: relative; }

  #hero .hero-visual {
    position: absolute;
    left: 32.8%;
    top: -138px;
    width: 60.7%;
    height: auto;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }

  #hero .hero-visual img { width: 100%; height: auto; }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'copy';
    grid-template-rows: auto minmax(0, 1fr);
  }

  .hero-head { grid-area: head; position: relative; z-index: 2; }
  #hero .hero-copy { grid-area: copy; position: relative; z-index: 2; }

  /* Три строки: самая длинная — «поток продаж.», 13 знаков, 4,72em.
     Предел по высоте считает три строки при интерлиньяже 0,86. */
  .hero-title { font-size: clamp(44px, min(20cqw, calc(26vh - 56px)), 255px); }
  :lang(en) .hero-title { font-size: clamp(44px, min(19cqw, calc(26vh - 56px)), 255px); }
}


/* ======================================================================
   65. ПЕРВЫЙ ЭКРАН ПО АРТБОРДУ «Б», 15.09.2026.

   Слой 64 перенёс с канвы только камень и растянул заголовок во всю
   полосу 1640px. В самом артборде «Б · три строки 173» заголовок стоит в
   колонке 977px, и именно поэтому он не наезжает на камень. Замер того,
   что получилось без этого: строка «ИЗ НОВОЙ НИШИ В» шла до 1863px, а
   камень начинается на 899 — буква «В» легла на плиту SIGNAL.

   Координаты сняты с артборда (окно 2000x884, полоса 1640):
     заголовок  ширина 977  = 59,6% полосы, кегль 173
     камень     x 899, y -51, 995x857  (60,7% полосы, слева 43,8%)
     абзац      max-width 583
     полоса цифр y 761, между ней и строкой направлений 32px
   ====================================================================== */

@media (min-width: 1101px) {
  /* Ширина колонки заголовка из артборда: 977 из 1640. */
  .hero-title { max-width: 59.6%; }

  /* Кегль до этого считал предел по ширине ПОЛОСЫ, а колонка теперь 59,6%
     от неё — на 1920, 1728, 1440 и 1280 строка вылезала из колонки на
     75-196px и молча обрезалась (замер check-canon, 9 находок). Третий
     предел: самая длинная строка RU — «ИЗ НОВОЙ НИШИ В», 4,71 кегля; EN —
     «TO STEADY SALES.», 4,84. Колонка 59,6cqw, отсюда 59,6/4,71 = 12,65 и
     59,6/4,84 = 12,31; взято на пару процентов ниже, чтобы строка не
     упиралась в край впритык. */
  /* 15.09.2026, вторая правка. Кегль оставался привязан к высоте окна
     (26vh - 56), и на окне выше 884 он разрастался: при 2000x1012 это 207
     вместо 173 из артборда — заголовок снова упирался в камень, хотя по
     ширине колонки формально влезал. Артборд задаёт пропорцию к полосе, а
     не к высоте: 173 из 1640 = 10,55cqw. Высота окна оставлена только как
     верхний предел — она может кегль уменьшить, но не увеличить.
     EN пропорционально длине строки: 10,55 x 4,71/4,84 = 10,27cqw. */
  .hero-title { font-size: clamp(44px, min(10.55cqw, calc(26vh - 56px)), 255px); }
  :lang(en) .hero-title { font-size: clamp(44px, min(10.27cqw, calc(26vh - 56px)), 255px); }

  /* Камень уезжал влево и вверх: слой 64 читал его левый край как 538px от
     начала полосы, в артборде это 718px. Отсюда и «засунут под текст».
     Доли подогнаны замером к артборду: 41,7% и -67px дают x 899, y -51 на
     окне 2000x884 — координаты отсчитываются от бокса секции, у которого
     свои поля, поэтому числа артборда сюда не переносятся напрямую. */
  #hero .hero-visual { left: 41.7%; top: -67px; }

  /* В артборде бокс камня 995x857 с object-fit: contain, то есть картинка
     вписана и видимый камень уже бокса. Квадрат 995x995 свисал на 76px
     ниже кромки окна. */
  #hero .hero-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 995 / 857;
    object-fit: contain;
  }

  /* Пометка ехала вместе с кадром и ушла за верхнюю кромку (y -119).
     В артборде она стоит на 1712x106; в долях кадра это 81,7% и 15,8%. */
  #hero .hero-visual .hand-hero {
    left: 81.7%;
    top: 15.8%;
    right: auto;
    bottom: auto;
  }

  /* Абзац в артборде уже колонки заголовка. */
  #hero .hero-copy .body-text { max-width: 583px; }

  /* Строка направлений слиплась с тёмной полосой: в артборде между ними
     32px. Зазор снизу у колонки, а не поле у полосы — полоса общая. */
  #hero .hero-copy .pillars { margin-bottom: var(--space-6); }
}

/* --------------------------------------------------------------
   Слой 66 — первый экран строго по артборду «Б · три строки 173»
   (projects/ez-showcase/artboards/TriStroki.dc.html, окно 2000x884).

   Слой 65 ставил камень по абсолютным числам артборда (718 -> 899),
   не заметив, что сама полоса контента на витрине стоит не там, где
   в артборде: боковой рельс добавляет body padding-left 100px, и
   содержимое центруется в остатке — полоса начиналась на 223 вместо
   180, поля выходили 223 слева и 137 справа. Камень от этого уехал
   вправо на 188 и вниз на 87, а заголовок получил другое поле под
   себя. Числа артборда отсчитываются от края окна, поэтому сначала
   ставится полоса, и только потом всё остальное — от неё.
   -------------------------------------------------------------- */
/* Артборд нарисован на 2000x884 — это соотношение 2,26. На окнах выше
   по пропорции прежняя раскладка тянет кегль от высоты и заполняет
   экран; фиксация полосы на 1640 там открывала пустоту под полосой
   цифр (267px на 2560x1440, 116 на 1728x1117 — находки gaps).
   Поэтому перенос артборда живёт на широких невысоких окнах. */
@media (min-width: 1100px) {
  /* Поле 180 из 2000 = 9vw. Рельс живёт внутри этого поля, как в
     артборде (там он на left 20, width 60), поэтому его 100px
     вычитаются из отступа, а не прибавляются к нему. */
  #hero {
    max-width: none;
    width: auto;
    margin: 0;
    padding-left: calc(9vw - 100px);
    padding-right: 0;
    padding-top: 35px;
  }

  /* Артборд: надзаголовок top 35, колонка top 87 — между ними 26. */
  #hero .eyebrow { margin-bottom: 26px; }

  /* Камень: бокс артборда left 718 при полосе на 180, то есть 538
     от начала полосы = 32,8% от 1640. Верх -138 от кромки окна,
     минус padding-top секции. */
  #hero .hero-visual { left: 32.8%; top: -173px; }

  /* Пометка: 1531/19 от кромки окна = 81,7% и 18,3% от бокса камня. */
  #hero .hero-visual .hand-hero { top: 18.3%; }
}

@media (min-width: 1100px) {
  /* padding-right: 0 у секции отдал гриду всю оставшуюся ширину — полоса
     разъехалась до 1805, и вместе с ней камень (1096 вместо 995), потому
     что его ширина считается долей полосы. Полоса держит 1640 сама. */
  #hero .hero-grid { width: min(1640px, 100%); }
}

@media (min-width: 1100px) {
  /* Полоса цифр живёт вне грида, поэтому её растянуло тем же нулевым
     полем справа: 1805 вместо 1640 из артборда. */
  #hero .proof-rail { width: min(1640px, 100%); }

  /* Артборд: полоса цифр top 761, у нас была 771 — поле снизу 26, не 16. */
  #hero { padding-bottom: 26px; }

  /* Пометка: 1531/19 от кромки окна. */
  #hero .hero-visual .hand-hero { top: 18.9%; }
}

@media (min-width: 1100px) {
  /* Числа артборда «Б»: контейнер 420, точка 7 цвета #FF4B08, линия 1px
     с непрозрачностью 0,14, зазор 10, поле снизу 12. */
  #hero .hero-rule { display: flex; align-items: center; gap: 10px; width: 420px; margin-bottom: 12px; }
  #hero .hero-rule-dot { width: 7px; height: 7px; border-radius: 50%; background: #FF4B08; }
  #hero .hero-rule-line { flex-grow: 1; height: 1px; background: rgba(16, 16, 16, 0.14); }
}

@media (min-width: 1100px) {
  /* Снято с самого артборда через getBoundingClientRect, а не прочитано
     из его исходника: в файле у картинки стоит left 718, но она лежит в
     контейнере со сдвигом 181, и на экране её бокс начинается на 899,
     верх -51. Пометка там же считается от бокса камня: 1712/106.
     Вёрстка по числам исходника уводила камень на 181 влево. */
  #hero .hero-visual { left: 43.84%; top: -86px; }
  #hero .hero-visual .hand-hero { left: 81.7%; top: 18.3%; }
}

@media (min-width: 1100px) {
  /* В артборде h1 высотой 446 = три строки по 148,8 (173 x 0,86). У нас
     выходило 481: «Легко.» лежит в span, который брал интерлиньяж не от
     заголовка, и третья строка получала лишние 35px — от этого «Легко.»
     и абзац стояли ниже артборда. */
  #hero .hero-title { line-height: 0.86; }
  #hero .hero-title .easy { line-height: 0.86; }
  /* Строки заголовка идут с шагом 149, как в артборде, но у нашего h1
     ниже последней строки остаётся выносной элемент — абзац вставал на
     584 против 564 из артборда. Поле снизу забирает эту разницу. */
  #hero .hero-title { margin-bottom: -8px; }
}

/* ======================================================================
   69. АБЗАЦ ПОД ЗАГОЛОВКОМ — НА МЕСТО ИЗ АРТБОРДА «Б».

   Замер 15.09.2026 на 2000x884: абзац стоял на 575 против 564 в артборде.
   Причина та же, что у слоя 67, но добрана не до конца: бокс h1 у нас 481
   при 446 в артборде (три строки по 148,8), и поле -8 снимало восемь из
   тридцати пяти. Остаток 11 забирается здесь. Числа артборда: h1 сверху
   106, абзац 564.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-title { margin-bottom: -19px; }
}

/* ======================================================================
   68. ПОЛОСА ЦИФР ПО АРТБОРДУ «Б · три строки 173»
   (projects/ez-showcase/artboards/TriStroki.dc.html, окно 2000x884).

   Замер 15.09.2026: место полосы сходилось (левый край 180, верх 761,
   ширина 1640 — совпало с артбордом), а её внутренности нет. Число шло
   кеглем 22 (--text-xl) вместо 26 из артборда, зазор между пунктами 20
   вместо 24, и у пунктов оставалось поле слева 20px от раскладки на три
   колонки. Из-за узких колонок подпись «Кругов правок на задачу» ложилась
   в две строки, полоса вырастала до 97px против 82 в артборде и съедала
   воздух под собой: снизу оставалось 26px вместо 41.

   26px вне шкалы кеглей витрины (12 13 14 16 18 22 28 40 48) намеренно:
   это снятое с артборда число, а ближайшие ступени дают либо прежний
   недобор, либо перебор высоты полосы. Исключение подписано здесь, как
   того требует web-design §5.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .proof-rail {
    padding: 16px 32px;
    gap: 24px;
  }

  /* В артборде пункты стоят без собственных полей — их разводит только
     зазор сетки. */
  #hero .rail-item + .rail-item { padding-left: 0; }

  #hero .rail-value { font-size: 26px; }

  /* Вертикаль полосы. В артборде она стоит 761..843, снизу 41px воздуха,
     и пункт там из двух строк. У нас у пятого пункта есть третья строка —
     примечание «И 12-15 рекламных кампаний», которого в артборде нет: оно
     поднимает строку сетки с 51 до 71 и всю полосу с 83 до 104. Сойтись
     разом по верхнему краю (761) и по нижнему (843) при этом нельзя.
     15.09.2026 владелец выбрал вложить примечание в подпись — полоса
     вернулась к двум строкам, как в артборде, и сходится по обоим краям:
     верх 761, низ 843, поле снизу 884 - 843 = 41. */
  #hero { padding-bottom: 41px; }
}

/* ======================================================================
   70. ПОРОГ СЛОЯ ПЕРЕНОСА ОПУЩЕН С 2/1 ДО 1,9/1.

   16.09.2026, находка владельца. Весь перенос артборда «Б» жил в запросе
   (min-width: 1500px) and (min-aspect-ratio: 2 / 1). Реальное окно
   владельца 2000x1012 даёт 1,976 — слой не включался, и он видел другой
   экран: полоса на 223 вместо 180, камень на Y 8 вместо -51, кегль числа
   22 вместо 26, линия над заголовком нулевой высоты. Числа сводились на
   2000x884 (2,26) и на его окне не работали ни одним.

   Порог 1,9 покрывает и 2000x1012, и 1600x810 (то же окно при системном
   масштабе 125%). Верхняя граница по-прежнему нужна: на высоких окнах
   вертикаль артборда (884) растягивается и под полосой цифр открывается
   пустота — её ловит gaps.
   ====================================================================== */

/* ======================================================================
   71. ПЕРВЫЙ ЭКРАН — СЦЕНА ПРОПОРЦИИ АРТБОРДА «Б».

   16.09.2026. Артборд projects/ez-showcase/artboards/TriStroki.dc.html
   нарисован на окне 2000x884. До этого слоя его числа переносились в
   раскладку, зависящую от высоты окна: на 2000x884 всё сходилось, а на
   реальном окне владельца 2000x1012 лишние 128px высоты расходились по
   зазорам — заголовок уезжал со 106 на 139, полоса цифр с 761 на 856,
   камень с -51 на -18. Композиция переставала быть той, которую он собрал
   руками.

   Здесь вся композиция живёт внутри блока пропорции 2000/884, вписанного
   в окно. Числа артборда заданы долями этого блока: горизонталь делится
   на 2000, вертикаль на 884, кегли — в cqw от его ширины. Высота окна
   больше не участвует: она только оставляет поля сверху и снизу.

   Сетка и .hero-head переведены в display: contents — их дети становятся
   детьми сцены и позиционируются от неё напрямую, как элементы артборда
   лежат в его корне.
   ====================================================================== */
/* Ниже порога сцены обёртка не должна существовать вовсе: #hero — flex, и
   лишний уровень между ним и сеткой ломает раскладку. Проверка grid поймала
   это переполнением hero на 1350x700 и 1440x700. */
.hero-scene { display: contents; }

/* Обёртка сместила базу отсчёта для камня: он абсолютный, и его 60,7%
   считались от ближайшего предка с позиционированием. До обёртки им была
   сетка (1640), после — секция (1744), и камень вырастал с 995 до 1059,
   выходя за правую кромку на 1920x1080, 1728x1117, 1440x900, 1366x768
   (находки fit). База закрепляется явно, чтобы не зависеть от того, какой
   предок окажется позиционированным. */
.hero-grid { position: relative; }

@media (min-width: 1100px) {
  #hero {
    display: flex;
    padding: 0;
    margin: 0 0 0 calc(-1 * var(--rail-w, 100px));
    width: calc(100% + var(--rail-w, 100px));
    max-width: none;
  }

  .hero-scene {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2000 / 884;
    max-height: 100%;
    margin: auto;
    container-type: inline-size;
  }

  #hero .hero-grid,
  #hero .hero-head { display: contents; }

  /* Надзаголовок артборда: 188 / 35, кегль 18, разрядка 0,72. */
  #hero .eyebrow {
    position: absolute;
    left: 9.4%;
    top: 3.96%;
    width: auto;
    margin: 0;
    font-size: 0.9cqw;
    letter-spacing: 0.036cqw;
  }

  /* Точка с линией: 181 / 87, ширина 420, точка 7, зазор 10. */
  #hero .hero-rule {
    position: absolute;
    left: 9.05%;
    top: 9.84%;
    width: 21%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5cqw;
  }
  #hero .hero-rule-dot { width: 0.35cqw; height: 0.35cqw; }

  /* Заголовок: 181 / 106, колонка 977, кегль 173, интерлиньяж 0,86. */
  #hero .hero-title {
    position: absolute;
    z-index: 3;
    left: 9.05%;
    top: 11.99%;
    width: 48.85%;
    max-width: none;
    margin: 0;
    font-size: 8.65cqw;
    line-height: 0.86;
    letter-spacing: -0.035em;
  }
  :lang(en) .hero-title { font-size: 8.42cqw; }
  #hero .hero-title .easy { line-height: 0.86; }

  /* Камень: бокс 899 / -51, 995 x 857. */
  /* Порядок слоёв, 16.09.2026. Текст поверх камня — прямое указание
     владельца. Плашка цифр тоже поверх камня, и это не своеволие, а
     физика файла: у hero-gate-v3.webp нет альфы, фон кремовый 243,240,232
     (замер через canvas). Положенный поверх плашки камень закрывает её
     правую половину светлым прямоугольником. В артборде картинка лежит в
     разметке ДО полосы, то есть полоса сверху, и камень уходит за неё
     основанием — то же самое здесь. */
  #hero .hero-visual {
    position: absolute;
    left: 44.95%;
    top: -5.77%;
    width: 49.75%;
    height: auto;
    margin: 0;
    z-index: 2;
  }
  #hero .hero-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 995 / 857;
    object-fit: contain;
  }
  /* Пометка внутри бокса камня: 1712 / 106 от кромки окна. */
  #hero .hero-visual .hand-hero {
    left: 81.71%;
    top: 18.32%;
    right: auto;
    bottom: auto;
    font-size: 1.1cqw;
    line-height: 0.95;
  }

  /* Нижняя колонка: абзац артборда стоит на 181 / 564, ширина 583,
     кегль 14 при интерлиньяже 21. Ниже поток, отступы артборда. */
  #hero .hero-copy {
    position: absolute;
    left: 9.05%;
    top: 63.8%;
    width: 82%;
    margin: 0;
    padding: 0;
    display: block;
    z-index: 3;
  }
  #hero .hero-copy .hero-divider { display: none; }
  #hero .hero-copy .body-text {
    margin: 0 0 1.2cqw;
    max-width: 35.55%;
    font-size: 0.7cqw;
    line-height: 1.5;
  }
  #hero .hero-copy .link-row {
    margin: 0 0 1.2cqw;
    display: flex;
    gap: 0.6cqw;
  }
  #hero .hero-copy .btn {
    padding: 0.6cqw 0.8cqw;
    font-size: 0.6cqw;
    letter-spacing: 0.03cqw;
  }
  #hero .hero-copy .pillars {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.7cqw;
    font-size: 0.6cqw;
    letter-spacing: 0.108cqw;
  }

  /* Полоса цифр: 180 / 761, ширина 1640, поля 16 и 32, зазор 24,
     число 26, подпись 12 с отбивкой 4. */
  #hero .proof-rail {
    position: absolute;
    z-index: 3;
    left: 9%;
    top: 86.09%;
    width: 82%;
    margin: 0;
    padding: 0.8cqw 1.6cqw;
    gap: 1.2cqw;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  #hero .rail-item + .rail-item { padding-left: 0; }
  #hero .rail-value { font-size: 1.3cqw; }
  #hero .rail-label { font-size: 0.6cqw; margin-top: 0.2cqw; }
}

/* ======================================================================
   72. УСЛОВИЕ ПО ПРОПОРЦИИ ОКНА СНЯТО СОВСЕМ.

   16.09.2026. Сцена артборда включалась только при (min-width: 1500px) и
   пропорции окна не ниже 1,9. У владельца окно с хромом браузера даёт
   меньше, и он четыре часа подряд видел старую раскладку, тогда как все
   замеры на эмулированных окнах показывали сведённые числа. Условие по
   пропорции убрано, порог ширины опущен до 1100: композиция артборда
   теперь работает на любом настольном окне, а на высоких окнах сцена
   просто оставляет поля сверху и снизу — она вписана по ширине.
   ====================================================================== */

/* ======================================================================
   73. РАЗБОР ЗАМЕЧАНИЙ ВЛАДЕЛЬЦА ПО КАДРУ 1600x900, 16.09.2026.

   Общая причина шести пунктов из семи: в слое 71 мелкий текст тоже был
   переведён в доли от ширины сцены. На окне 2000 это давало числа
   артборда, а на 1600 всё съезжало на 20% — абзац 11px вместо 14,
   подписи и кнопки туда же. Крупное (заголовок, камень) тянется
   пропорцией, мелкое живёт в своих кеглях.
   ====================================================================== */
@media (min-width: 1100px) {
  /* 1. Полоса с точкой над заголовком убрана — решение владельца,
        экономит высоту. */
  #hero .hero-rule { display: none; }

  /* 2. Абзац прилипал к заголовку: бокс h1 выше своих трёх строк на 35px
        за счёт выносных элементов, и зазор артборда 12 съедался. Отрыв
        задан явно, кегль возвращён к артборду. */
  #hero .hero-copy { top: 65.3%; }
  #hero .hero-copy .body-text {
    font-size: 14px;
    line-height: 21px;
    max-width: 583px;
    margin: 0 0 24px;
  }

  /* 3. Кнопки раздувались, потому что поля считались долей, а текст в них
        ужимался. Числа артборда: поля 12 и 16, кегль 12. */
  #hero .hero-copy .link-row { gap: 12px; margin: 0 0 24px; }
  #hero .hero-copy .btn {
    padding: 12px 16px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  /* 4. Строка направлений липла к плашке: в артборде между ними 33px. */
  #hero .hero-copy .pillars {
    font-size: 12px;
    letter-spacing: 2.16px;
    gap: 14px;
    margin: 0;
  }

  /* 5-6. Плашка: поля и зазор артборда в пикселях, а текст пунктов больше
          не липнет к разделителю — у разделителя своё поле. */
  #hero .proof-rail { padding: 16px 32px; gap: 24px; }
  #hero .rail-value { font-size: 26px; }
  #hero .rail-label { font-size: 12px; margin-top: 4px; }
  #hero .rail-item + .rail-item { padding-left: 20px; }

  /* 7. Камень вываливался ниже плашки: бокс картинки кончается на 806, а
        плашка начинается на 761, и справа от плашки торчал кусок светлого
        фона картинки. Бокс обрезан ровно по верхней кромке плашки:
        от верха бокса (-51) до 761 — это 812 из 857, снизу 5,25%. */
  #hero .hero-visual { clip-path: inset(0 0 5.25% 0); }
}

/* ======================================================================
   74. НИЖНЯЯ КОЛОНКА ПРИВЯЗАНА К ПЛАШКЕ, А НЕ К ВЕРХУ СЦЕНЫ.

   16.09.2026. После возврата нормальных кеглей блок под заголовком стал
   выше, и строка направлений ушла под плашку. Верх блока больше не
   задаётся: задаётся его низ — на 33px выше плашки, как в артборде
   (строка направлений 713-728, плашка 761). В долях сцены низ блока
   728/884, то есть отступ снизу 17,65%.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-copy {
    top: auto;
    bottom: 17.65%;
  }
}

/* ======================================================================
   75. НИЖНИЙ БЛОК НА ОКНАХ УЖЕ 1800.

   16.09.2026. Артборд нарисован на 2000: там на абзац, кнопки и строку
   направлений приходится своя доля высоты. На 1600 заголовок и камень
   ужимаются пропорцией сцены, а мелкий текст оставлен в кеглях артборда
   (14, 12) — и сумма перестаёт помещаться: блок налезал на «ЛЕГКО.».
   Кегли трогать нельзя, владелец забраковал мелкий текст; поджимаются
   зазоры и интерлиньяж абзаца. На 1800 и шире всё остаётся по артборду.
   ====================================================================== */
@media (min-width: 1100px) and (max-width: 1799px) {
  #hero .hero-copy .body-text {
    font-size: 13px;
    line-height: 19px;
    margin: 0 0 16px;
  }
  #hero .hero-copy .link-row { margin: 0 0 16px; }
  #hero .hero-copy .btn { padding: 10px 14px; }
}

/* ======================================================================
   76. КЕГЛЬ ЗАГОЛОВКА НА ОКНАХ УЖЕ 1800.

   16.09.2026. Доля артборда 8,65cqw верна на 2000: там три строки
   заголовка и нижний блок делят высоту сцены ровно. На 1440 мелкий текст
   остаётся в своих кеглях (иначе он нечитаем), и его доля высоты растёт —
   заголовок начинает налезать на абзац. Кегль поджат до 7,9cqw: на 1440
   это 114 вместо 125, три строки освобождают 27px, ровно столько и не
   хватало. На 1800 и шире действует доля артборда.
   ====================================================================== */
@media (min-width: 1100px) {
  /* 16.09.2026, вторая попытка. Фиксированный поджим 7,9cqw не закрывал
     касание: нижний блок живёт в пикселях (кегли артборда 14 и 12), а
     сцена масштабируется, поэтому доля высоты под заголовок падает
     нелинейно. Считается арифметикой, а не подбором:
       высота сцены = 44,2cqw;
       под заголовок отведено 71,4% этой высоты = 31,55cqw;
       нижний блок занимает ~150px, выносной элемент h1 ~35px — 185px;
       три строки при интерлиньяже 0,86 = 2,58 кегля.
     Отсюда предел (31,55cqw - 185px) / 2,58. На 2000 он даёт 173 —
     кегль артборда; на 1440 — 104, и абзац встаёт под заголовок, не
     задевая его. */
  #hero .hero-title { font-size: min(8.65cqw, calc((31.55cqw - 185px) / 2.58)); }
  :lang(en) .hero-title { font-size: min(8.42cqw, calc((30.7cqw - 185px) / 2.58)); }
}

/* ======================================================================
   77. ПЛАШКА ЦИФР — ПО СЛОВАМ ВЛАДЕЛЬЦА, 16.09.2026.

   Поле слева было 32 (число артборда) — текст прижимался к кромке.
   Втрое больше: 96. Высота плашки поднята примерно на пятую часть —
   вертикальные поля 24 вместо 16, с 82px до 98. Разделители между
   пунктами оставлены и отодвинуты от текста.
   ====================================================================== */
@media (min-width: 1100px) {
  /* Поле 96 с обеих сторон сжимало колонки, две подписи уходили в две
     строки и плашка росла до 119 вместо 98. Втрое больше поле нужно
     слева — там начинается чтение; справа остаётся число артборда. */
  #hero .proof-rail { padding: 24px 32px 24px 96px; gap: 16px; }
  #hero .rail-item + .rail-item {
    padding-left: 20px;
    border-left: 1px solid rgba(243, 242, 239, 0.18);
  }
}

/* ======================================================================
   78. ВСЁ В ДОЛЯХ СЦЕНЫ. ИСКЛЮЧЕНИЙ НЕТ.

   16.09.2026, корень пятичасовой проблемы. Слой 71 перевёл композицию в
   доли сцены 2000x884 — и это было верно. Слои 73, 75 и 76 вернули
   мелкому тексту пиксели (владелец сказал, что на 1600 он мелкий), и
   пропорции поехали: доля высоты под нижним блоком стала расти при
   сжатии, заголовок пришлось считать формулой, надзаголовок отошёл от
   него, плашка раздулась, камень вылез за её кромку. Каждая следующая
   правка чинила симптом.

   Композиция сохраняется тогда и только тогда, когда ВСЕ величины —
   кегли, поля, зазоры, координаты — доли одной и той же ширины сцены.
   Тогда любое окно даёт тот же экран в другом масштабе, и сверять
   нечего: пропорции не могут разойтись.

   Цена — на узком окне мелкий текст. Поэтому сцена включается от 1400px;
   ниже работает обычная адаптивная раскладка витрины, где текст живёт
   своими кеглями. Числа ниже — из артборда, делённые на 2000.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-title { font-size: 8.65cqw; }
  :lang(en) .hero-title { font-size: 8.42cqw; }

  #hero .hero-copy { top: 63.8%; bottom: auto; }

  #hero .hero-copy .body-text {
    font-size: 0.7cqw;      /* 14 из 2000 */
    line-height: 1.5;       /* 21/14 */
    max-width: 29.15%;      /* 583 из 2000 */
    margin: 0 0 1.2cqw;     /* 24 */
  }

  #hero .hero-copy .link-row { gap: 0.6cqw; margin: 0 0 1.2cqw; }
  #hero .hero-copy .btn {
    padding: 0.6cqw 0.8cqw; /* 12 / 16 */
    font-size: 0.6cqw;      /* 12 */
    letter-spacing: 0.03cqw;
  }

  #hero .hero-copy .pillars {
    font-size: 0.6cqw;
    letter-spacing: 0.108cqw;
    gap: 0.7cqw;
    margin: 0;
  }

  /* Плашка: поле слева 96 из 2000 — правка владельца, втрое от артборда;
     остальное — числа артборда, тоже долями. */
  #hero .proof-rail {
    padding: 1.2cqw 1.6cqw 1.2cqw 4.8cqw;
    gap: 0.8cqw;
  }
  #hero .rail-value { font-size: 1.3cqw; }
  #hero .rail-label { font-size: 0.6cqw; margin-top: 0.2cqw; }
  #hero .rail-item + .rail-item {
    padding-left: 1cqw;
    border-left: 1px solid rgba(243, 242, 239, 0.18);
  }
}

/* Ниже 1400 сцена не работает: масштаб сделал бы текст нечитаемым.
   Там действует обычная раскладка витрины. */
/* 16.09.2026: порог сцены опущен до 1100 — окно владельца уже 1400 в CSS-пикселях,
   и он видел запасную раскладку вместо сцены. */

/* ======================================================================
   79. ЧИСЛА ИЗ АРТБОРДА, СОХРАНЁННОГО ВЛАДЕЛЬЦЕМ 16.09.2026.

   Источник — canvas/from-owner/Main.dc.html, выгружен из его канвы
   (claude.ai/artifact/XGVf8RjNNKQ5CYEjAFwRaZ). Он подвинул блоки руками;
   ниже разница с прежним артбордом, пересчитанная в доли сцены 2000x884.

   надзаголовок   188/35   ->  189/47
   колонка        181/87   ->  181/96
   поле под h1    12       ->  5
   камень         718/-138 ->  711/-170 внутри колонки = 892/-74 от окна,
                                слой -5,5 (уходит под текст)
   заголовок                   слой 2
   подпись        1531/19  ->  1508/38 внутри колонки = 1689/134 от окна
   линия с точкой над заголовком удалена
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-rule { display: none; }

  /* 189 / 47 */
  #hero .eyebrow { left: 9.45%; top: 5.32%; }

  /* Колонка 181 / 96; заголовок поверх камня. */
  #hero .hero-title { left: 9.05%; top: 10.86%; z-index: 2; }

  /* Камень 892 / -74 от кромки окна, слой под текстом. */
  #hero .hero-visual { left: 44.6%; top: -8.37%; z-index: -1; }

  /* Подпись внутри бокса камня: (1689-892)/995 и (134+74)/857. */
  #hero .hero-visual .hand-hero { left: 80.1%; top: 24.27%; }

  /* Абзац: низ заголовка 96 + 446 + поле 5 = 547 из 884. */
  #hero .hero-copy { top: 61.88%; bottom: auto; }
}

/* ======================================================================
   80. КОЛОНКА — ОДИН БЛОК В ПОТОКЕ, КАК В АРТБОРДЕ.

   16.09.2026. Корень всех расхождений, которые владелец ловил шесть
   часов подряд. В его артборде заголовок, абзац, кнопки и строка
   направлений лежат в ОДНОМ контейнере (left 181, top 96, ширина 1640)
   обычным потоком, и расстояния между ними заданы полями внутри него.
   Слои 71-79 позиционировали каждый кусок отдельной координатой от края
   сцены — то есть переносили НЕ отступы, а точки. Любое расхождение в
   высоте текста (у нашего h1 бокс на 35px выше, чем считает артборд)
   сдвигало один кусок и не сдвигало соседние: блок разваливался, абзац
   слипался с заголовком, строка направлений уезжала под плашку.

   Теперь контейнер один и в потоке. Поля внутри — числа артборда,
   делённые на 2000: h1 5, абзац 24, кнопки 24. Камень и подпись лежат
   внутри него абсолютом ровно с теми координатами, что в файле
   владельца (711 / -170 и 1508 / 38 — от контейнера, не от окна).
   Надзаголовок в артборде вынесен из контейнера отдельно: 189 / 47.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 9.05%;            /* 181 */
    top: 10.86%;            /* 96 */
    width: 82%;             /* 1640 */
    gap: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  #hero .hero-head { display: contents; }

  /* Надзаголовок стоит отдельно от колонки — так он и лежит в артборде. */
  #hero .eyebrow {
    position: absolute;
    left: 9.45%;            /* 189 от сцены */
    top: 5.32%;             /* 47 от сцены */
    margin: 0;
    width: auto;
  }

  /* Заголовок в потоке колонки, поле снизу 5 из 2000. */
  #hero .hero-title {
    position: static;
    left: auto;
    top: auto;
    width: 59.57%;          /* 977 из 1640 */
    max-width: none;
    margin: 0 0 0.25cqw;
    z-index: 2;
  }

  /* Нижняя часть — тот же поток, без собственных координат. */
  #hero .hero-copy {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 2;
  }
  #hero .hero-copy .body-text { max-width: 35.55%; }  /* 583 из 1640 */

  /* Камень: координаты внутри контейнера, как в файле владельца. */
  #hero .hero-visual {
    position: absolute;
    left: 43.35%;           /* 711 из 1640 */
    top: -19.24%;           /* -170 от верха контейнера, в долях 884 */
    width: 60.67%;          /* 995 из 1640 */
    z-index: -1;
  }

  /* Подпись: 1508 / 38 внутри контейнера = 48,6% и 24,3% бокса камня. */
  #hero .hero-visual .hand-hero { left: 80.1%; top: 24.27%; }
}

/* ======================================================================
   81. ВСЁ ВНУТРИ КОЛОНКИ — В cqw ОТ СЦЕНЫ.

   16.09.2026, замер против артборда владельца (canvas/from-owner).
   Слой 80 собрал колонку в один поток, но координаты внутри неё остались
   в процентах — а процент для абсолютного элемента считается от бокса
   родителя, высота которого плавает вместе с текстом. Результат замера:
   надзаголовок 336/130 вместо 189/47, камень -28 вместо -74.

   Здесь всё переведено в cqw — доля ширины сцены, единственная
   стабильная база. И высота заголовка задана явно: его бокс у нас 481
   против 446 в артборде (виноват выносной элемент в «Легко.»), из-за
   чего весь поток ниже уезжал на 35px.

   Числа артборда: h1 446, абзац 547, кнопки 634, строка направлений 699,
   камень 711/-170 внутри колонки, надзаголовок 189/47 от окна.
   ====================================================================== */
@media (min-width: 1100px) {
  /* Надзаголовок: 8 вправо и 49 вверх от угла колонки. */
  #hero .eyebrow { left: 0.4cqw; top: -2.45cqw; }

  /* Бокс заголовка ровно три строки артборда: 446 из 2000. */
  #hero .hero-title { height: 22.3cqw; }

  /* Камень: 711 / -170 от угла колонки. */
  #hero .hero-visual { left: 35.55cqw; top: -8.5cqw; }
}

/* Абзац артборда — три строки по 21 = 63; у нас шрифт отдаёт 59, и всё
   ниже поднималось на 9px. Высота задана явно, 63 из 2000. */
@media (min-width: 1100px) {
  #hero .hero-copy .body-text { height: 3.15cqw; }
}

/* ======================================================================
   82. ИНТЕРЛИНЬЯЖ ТРЕТЬЕЙ СТРОКИ.

   16.09.2026, замер букв, а не рамок. Бокс заголовка совпадал с
   артбордом по всем числам, а строки внутри стояли иначе: шаг 162
   против 148,8. «Легко.» лежит в span, который брал интерлиньяж не от
   заголовка, и третья строка опускалась на 34px — она и наезжала на
   абзац. Рамки при этом сходились, поэтому замер боксов ничего не
   показывал: смотреть надо было на строки.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-title,
  #hero .hero-title .easy,
  #hero .hero-title .dot,
  #hero .hero-title span { line-height: 0.86; }
}

/* Строки заголовка стоят на 34px ниже, чем в артборде, при совпадающем
   боксе: метрики Yanone дают другой полуинтерлиньяж сверху. Сдвиг ровно
   на замеренную разницу, 34 из 2000. */
@media (min-width: 1100px) {
  #hero .hero-title { margin-top: -1.7cqw; }
}

/* Сдвиг заголовка вверх утянул за собой весь поток: абзац встал на 513
   вместо 547. Те же 34 возвращаются полем снизу — 1,7cqw плюс поле
   артборда 5 (0,25cqw). */
@media (min-width: 1100px) {
  #hero .hero-title { margin-bottom: 1.95cqw; }
}

/* Кнопки встали на 618 при 634 в артборде — поле под абзацем ужалось до
   8px. Недостающие 16 из 2000. */
@media (min-width: 1100px) {
  #hero .hero-copy .link-row { margin-top: 0.8cqw; }
}

/* ======================================================================
   83. ОПТИКА: РАВНЫЕ ЗАЗОРЫ В КОЛОНКЕ И ОСНОВАНИЕ КАМНЯ ПО ПЛАШКЕ.

   16.09.2026, правки владельца по кадру.

   1. Камень выходил правым краем за плашку: его бокс кончается на 1887,
      плашка на 1820. Основание объекта не должно вылезать за ширину
      плашки — она задаёт правую границу композиции. Обрезка справа:
      (1887-1820)/995 = 6,7% бокса.

   2. Зазоры внутри колонки выровнены на глаз, а не по числам артборда:
      между буквами заголовка и абзацем ~17px, столько же под абзацем и
      под кнопками. Раньше под абзацем и кнопками стояло 24 — группа
      читалась разорванной, хотя числа «сходились».
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-visual { clip-path: inset(0 6.7% 5.25% 0); }

  #hero .hero-copy .body-text { margin-bottom: 0; }
  #hero .hero-copy .link-row { margin-top: 0.85cqw; margin-bottom: 0.85cqw; }
  #hero .hero-copy .pillars { margin-top: 0; }
}

/* ======================================================================
   84. КАМЕНЬ ДВИГАЕТСЯ, А НЕ ОБРЕЗАЕТСЯ. ЗАЗОРЫ РАВНЫ ПО ФАКТУ.

   16.09.2026. Обрезка справа (слой 83) была ошибкой: срез делает объект
   нецельным. Правый край камня 1887 при правом крае плашки 1820 —
   камень сдвигается влево на 67, обрезка остаётся только снизу, где он
   уходит за плашку по замыслу.

   Зазоры в колонке были -1 / 14 / 14: заголовок и абзац перекрывались,
   а не отстояли. Все три сравнены по 14.
   ====================================================================== */
@media (min-width: 1100px) {
  #hero .hero-visual {
    left: 32.2cqw;                     /* 644 от колонки = 825 от окна */
    clip-path: inset(0 0 5.25% 0);
  }
  #hero .hero-title { margin-bottom: 2.75cqw; }
}

/* ======================================================================
   85. ЭКРАН КЕЙСА — СЦЕНА 1920x1080 ПО АРТБОРДУ Case.dc.html.

   16.09.2026. Источник — projects/ez-showcase/artboards/screens/Case.dc.html
   (канва TcSMsbjzbsGWxM3TC4mHKe, владельцем не правилась). Числа артборда
   поделены на 1920: сцена держит пропорцию, внутри неё только доли.
   Высота окна входит потолком через min() — сцена сужается, а не
   сплющивается. Ниже 1400 — обычная раскладка: копия, кадр, полоса.

   колонка     160 / 80, ширина 700, зазор 20
   заголовок   96, интерлиньяж 0,9
   кадр        920 / 80, 840x840
   полоса      160 / 960, 1600, поля 16/32, колонки через 32
   ====================================================================== */
.case-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  min-height: 0;
}

.case-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.case-copy > * { margin: 0; }
.case-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-l);
  letter-spacing: 0.04em;
  color: var(--accent);
}
.case-title { line-height: 0.9; letter-spacing: -0.02em; }
.case-role { font-size: var(--text-m); font-weight: 600; }
.case-clubs { font-size: var(--text-s); font-weight: 600; color: rgba(16, 16, 16, 0.6); }

.case-styles { display: flex; flex-direction: column; gap: var(--space-2); }
.case-styles-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.6);
}
.case-styles-row { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.case-styles-row img {
  display: block;
  width: 88px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
}

.case-scene .case-media { margin: 0; display: block; }
.case-scene .case-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.case-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
  margin: 0;
  padding: var(--space-4) var(--space-7);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--ink);
}
.case-strip li { display: flex; flex-direction: column; gap: var(--space-1); }
.case-strip-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent);
}
.case-strip-sub { font-size: var(--text-s); color: var(--muted); }

@media (max-width: 1100px) {
  .case-scene { grid-template-columns: minmax(0, 1fr); }
  .case-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .case-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .case-styles-row { flex-wrap: wrap; }
}

@media (min-width: 1100px) {
  #case.screen-fit:has(> .case-scene) {
    display: flex;
    padding: 0;
    margin: 0 0 0 calc(-1 * var(--rail-w, 100px));
    width: calc(100% + var(--rail-w, 100px));
    max-width: none;
  }

  #case .case-scene {
    display: block;
    position: relative;
    width: min(100%, calc(100vh * 1920 / 1080));
    aspect-ratio: 1920 / 1080;
    margin: auto;
    flex: 0 0 auto;
    container-type: inline-size;
  }

  /* Колонка 160 / 80, ширина 700, зазор 20. */
  #case .case-scene .case-copy {
    position: absolute;
    left: 8.333cqw;
    top: 4.167cqw;
    width: 36.458cqw;
    gap: 1.042cqw;
  }
  #case .case-scene .section-rubric { font-size: 1.146cqw; letter-spacing: 0.047cqw; margin: 0; }
  #case .case-scene .case-eyebrow { font-size: 0.9375cqw; letter-spacing: 0.0375cqw; }
  #case .case-scene .case-title { font-size: 5cqw; max-width: none; margin: 0; }
  #case .case-scene .lead { font-size: 0.833cqw; line-height: 1.5; max-width: 32.29cqw; margin: 0; }
  #case .case-scene .case-role { font-size: 0.729cqw; line-height: 1.5; max-width: 32.29cqw; }
  #case .case-scene .case-clubs { font-size: 0.677cqw; line-height: 1.5; max-width: 32.29cqw; }
  #case .case-scene .link-row { margin: 0; gap: 0.625cqw; }
  #case .case-scene .btn {
    padding: 0.625cqw 0.833cqw;
    font-size: 0.625cqw;
    letter-spacing: 0.031cqw;
    border-radius: 0.208cqw;
  }

  /* Превью 88x64 через 8, подпись 12 с разрядкой 1,5, поле сверху 8. */
  #case .case-scene .case-styles { gap: 0.417cqw; margin-top: 0.417cqw; }
  #case .case-scene .case-styles-label { font-size: 0.625cqw; letter-spacing: 0.078cqw; }
  #case .case-scene .case-styles-row { gap: 0.417cqw; }
  #case .case-scene .case-styles-row img { width: 4.583cqw; height: 3.333cqw; border-radius: 0.208cqw; }

  /* Кадр 920 / 80, 840x840. */
  #case .case-scene .case-media {
    position: absolute;
    left: 47.917cqw;
    top: 4.167cqw;
    width: 43.75cqw;
  }
  #case .case-scene .case-media img { border-radius: 0.417cqw; }

  /* Полоса 160 / 960, 1600, поля 16/32, колонки через 32. */
  #case .case-scene .case-strip {
    position: absolute;
    left: 8.333cqw;
    top: 50cqw;
    width: 83.333cqw;
    padding: 0.833cqw 1.667cqw;
    gap: 1.667cqw;
    border-radius: 0.417cqw;
  }
  #case .case-scene .case-strip li { gap: 0.208cqw; }
  #case .case-scene .case-strip-title { font-size: 1.25cqw; }
  #case .case-scene .case-strip-sub { font-size: 0.677cqw; }
}

/* 85а. Между 861 и 1399 сцены нет, и квадратный кадр брал высоту от ширины
   колонки: на 1280x800 полоса уходила под низ секции на 24px (fit).
   Кадр вписывается в высоту ряда, а не задаёт её. */
@media (min-width: 861px) and (max-width: 1099px) {
  .case-scene { grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .case-copy { align-self: center; }
  .case-scene .case-media { height: 100%; min-height: 0; display: flex; justify-content: center; }
  .case-scene .case-media img { width: auto; max-width: 100%; height: 100%; }
}

/* 85б. Превью ранних стилей ведут на свои работы в Behance (16.09.2026). */
.case-styles-row a { display: block; border-radius: inherit; }
.case-styles-row a:hover img, .case-styles-row a:focus-visible img { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ======================================================================
   86. ЭКРАНЫ ПОСЛЕ КЕЙСА — СИСТЕМА, КОМАНДА, НИША, КОНТАКТ.

   16.09.2026. Артборды System, Team, Niche, Contact.dc.html (канва
   TcSMsbjzbsGWxM3TC4mHKe), кадр 1920x1080. Та же схема, что у кейса:
   сцена пропорции кадра, внутри только доли 1920 (cqw). От 1100 сцена,
   ниже — поток.
   ====================================================================== */

/* Общее для потока (ниже 1100). */
.scene { display: flex; flex-direction: column; gap: var(--space-6); min-height: 0; }
.sys-headrow { display: grid; gap: var(--space-4); }
.sys-note, .sys-panel-note { font-size: var(--text-m); color: rgba(16, 16, 16, 0.6); margin: 0; }
.sys-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.sys-step {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0 0; border: 0; border-top: 2px solid var(--rule);
  background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
}
.sys-step.is-active { border-top-color: var(--accent); }
.sys-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sys-step .selector-num,
.team-list .selector-num { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--text-l); }
.sys-step-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-xl); }
.sys-step-desc { font-size: var(--text-s); line-height: 1.4; color: rgba(16, 16, 16, 0.6); }
.sys-stage { margin: 0; }
.sys-stage .stage-media { position: relative; width: 100%; aspect-ratio: 1140 / 580; }
.sys-stage .stage-media img,
.sys-stage .stage-media video { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); background: var(--ink); }
.stage-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  color: rgba(16, 16, 16, 0.6); font-size: var(--text-base);
}
.sys-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-panel .stage-caption { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--ink); }
.sys-badge {
  align-self: flex-start; padding: var(--space-1) var(--space-2); border-radius: var(--radius);
  background: var(--ink); color: var(--surface); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.sys-step-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-2xl); }
#system .sys-scene .hand-system { transform: none; padding: 0; }

.team-copy, .niche-copy, .contact-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.team-copy > *, .niche-copy > *, .contact-copy > * { margin: 0; }
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.team-list li { display: flex; gap: var(--space-4); }
.team-list li div { display: flex; flex-direction: column; gap: var(--space-1); }
.team-list b { font-size: var(--text-base); font-weight: 600; }
.team-list span:not(.selector-num) { font-size: var(--text-m); line-height: 1.5; color: rgba(16, 16, 16, 0.6); }
.team-media { margin: 0; display: grid; gap: var(--space-3); }
.team-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

@media (min-width: 1100px) {
  .screen-fit:has(> .scene) {
    display: flex;
    padding: 0;
    margin: 0 0 0 calc(-1 * var(--rail-w, 100px));
    width: calc(100% + var(--rail-w, 100px));
    max-width: none;
  }
  .scene {
    display: block;
    position: relative;
    width: min(100%, calc(100vh * 1920 / 1080));
    aspect-ratio: 1920 / 1080;
    margin: auto;
    flex: 0 0 auto;
    container-type: inline-size;
  }
  .scene .section-rubric { font-size: 1.146cqw; letter-spacing: 0.047cqw; margin: 0; }
  .scene .section-title { margin: 0; max-width: none; line-height: 0.9; letter-spacing: -0.02em; }
  .scene .lead { margin: 0; line-height: 1.5; }

  /* СИСТЕМА. Шапка 160 / 60, 1600, зазор 28; заголовок 96 в 640, текст
     640 справа через 64; шаги в 7 колонок через 20. */
  .sys-scene .sys-rubric { position: absolute; left: 8.333cqw; top: 3.125cqw; }
  .sys-scene .sys-headrow {
    position: absolute; left: 8.333cqw; top: 5.9cqw; width: 83.333cqw;
    display: flex; gap: 3.333cqw; align-items: flex-end;
  }
  .sys-scene .sys-title { font-size: 5cqw; width: 33.333cqw; flex: 0 0 auto; }
  .sys-scene .sys-lead { display: flex; flex-direction: column; gap: 0.417cqw; }
  .sys-scene .lead { font-size: 0.833cqw; max-width: 33.333cqw; }
  .sys-scene .sys-note { font-size: 0.729cqw; line-height: 1.5; max-width: 33.333cqw; }
  .sys-scene .sys-steps {
    position: absolute; left: 8.333cqw; top: 16.2cqw; width: 83.333cqw;
    grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.042cqw;
  }
  .sys-scene .sys-step { gap: 0.3125cqw; padding-top: 0.625cqw; border-top-width: 0.104cqw; }
  .sys-scene .sys-step .selector-num { font-size: 1.042cqw; }
  .sys-scene .sys-step-name { font-size: 1.354cqw; }
  .sys-scene .sys-step-desc { font-size: 0.677cqw; }

  /* Кадр 160 / 440, 1140x580. */
  .sys-scene .sys-stage { position: absolute; left: 8.333cqw; top: 22.917cqw; width: 59.375cqw; height: 30.208cqw; }
  .sys-scene .sys-stage .stage-media { height: 100%; aspect-ratio: auto; }
  .sys-scene .stage-media img,
  .sys-scene .stage-media video,
  .sys-scene .stage-empty { border-radius: 0.417cqw; font-size: 0.833cqw; }

  /* Панель 1340 / 440, 420, зазор 14. */
  .sys-scene .sys-panel { position: absolute; left: 69.792cqw; top: 22.917cqw; width: 21.875cqw; gap: 0.729cqw; }
  .sys-scene .sys-badge { font-size: 0.573cqw; padding: 0.208cqw 0.521cqw; border-radius: 0.208cqw; letter-spacing: 0.052cqw; }
  .sys-scene .sys-step-title { font-size: 1.667cqw; }
  .sys-scene .sys-panel .stage-caption { font-size: 0.781cqw; }
  .sys-scene .sys-panel-note { font-size: 0.677cqw; line-height: 1.5; }

  /* Пометка 1600 / 70, кегль 26. */
  #system .sys-scene .hand-system { position: absolute; left: 83.333cqw; top: 3.646cqw; font-size: 1.354cqw; line-height: 0.95; }

  /* КОМАНДА. Колонка 160 / 80, 720, зазор 20; кадр 960 / 80, 800x840;
     полоса как у кейса. */
  .team-scene .team-copy { position: absolute; left: 8.333cqw; top: 4.167cqw; width: 37.5cqw; gap: 1.042cqw; }
  .team-scene .team-title { font-size: 4.583cqw; width: 36.458cqw; }
  .team-scene .lead { font-size: 0.833cqw; max-width: 29.167cqw; }
  .team-scene .team-list { gap: 0.9375cqw; margin-top: 0.417cqw; }
  .team-scene .team-list li { gap: 0.833cqw; }
  .team-scene .team-list li div { gap: 0.208cqw; }
  .team-scene .team-list .selector-num { font-size: 1.146cqw; }
  .team-scene .team-list b { font-size: 0.833cqw; }
  .team-scene .team-list span:not(.selector-num) { font-size: 0.729cqw; }
  .team-scene .team-media {
    position: absolute; left: 50cqw; top: 4.167cqw; width: 41.667cqw; height: 43.75cqw;
    grid-template-rows: 1fr 1fr; gap: 0.833cqw;
  }
  .team-scene .team-media img { height: 100%; min-height: 0; object-fit: cover; object-position: left top; border-radius: 0.417cqw; }
  .team-scene .team-strip {
    position: absolute; left: 8.333cqw; top: 50cqw; width: 83.333cqw;
    padding: 0.833cqw 1.667cqw; gap: 1.667cqw; border-radius: 0.417cqw;
  }
  .team-scene .team-strip li { gap: 0.208cqw; }
  .team-scene .case-strip-title { font-size: 1.25cqw; }
  .team-scene .case-strip-sub { font-size: 0.677cqw; }

  /* НИША. Колонка 160 / 120, 1600, зазор 24; заголовок 96 в 1000;
     шаги в 4 колонки через 32, отступ сверху 48. */
  .niche-scene .niche-copy { position: absolute; left: 8.333cqw; top: 6.25cqw; width: 83.333cqw; gap: 1.25cqw; }
  .niche-scene .section-title { font-size: 5cqw; width: 52.083cqw; }
  .niche-scene .lead { font-size: 0.9375cqw; max-width: 39.583cqw; }
  .niche-scene .benefits {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.667cqw; margin: 2.5cqw 0 0; padding: 0;
  }
  .niche-scene .benefit {
    display: flex; flex-direction: column; gap: 0.521cqw;
    padding: 0.833cqw 0 0; margin: 0; border: 0; border-top: 1px solid var(--rule);
    background: none; box-shadow: none; min-height: 0;
  }
  .niche-scene .benefit-num { font-size: 1.25cqw; margin: 0; }
  .niche-scene .benefit-name { font-size: 1.5625cqw; margin: 0; line-height: 1; }
  .niche-scene .benefit-text { font-size: 0.781cqw; line-height: 1.5; margin: 0; }

  /* КОНТАКТ. Колонка 160 / 360, 1000, зазор 24; заголовок 120. */
  .contact-scene .contact-copy { position: absolute; left: 8.333cqw; top: 18.75cqw; width: 52.083cqw; gap: 1.25cqw; }
  .contact-scene .section-title { font-size: 6.25cqw; width: 52.083cqw; }
  .contact-scene .lead { font-size: 1.042cqw; max-width: 36.458cqw; }
  .contact-scene .link-row { margin: 0.417cqw 0 0; gap: 0.625cqw; }
  .contact-scene .btn { padding: 0.625cqw 0.833cqw; font-size: 0.625cqw; letter-spacing: 0.031cqw; border-radius: 0.208cqw; }
}

/* 86а. Окна выше 16:9 (1728x1117, 1440x900): сцена упирается в ширину,
   и секция в 100vh оставляла пустоту 90-145px (gaps). Секция берёт высоту
   сцены; на окнах шире 16:9 это и есть 100vh. Кадр шага — во весь бокс:
   материал 1,95 против кадра 1,97 давал поля по 15px. */
@media (min-width: 1100px) {
  .screen-fit:has(> .scene),
  #case.screen-fit:has(> .case-scene) { height: auto; }
  .sys-scene .stage-media img,
  .sys-scene .stage-media video { object-fit: cover; }
}

/* 86б. У #system свои поля 40/40 старше общего правила — секция выходила
   за окно на 80. Сцена на 1px ниже окна: линия секции сверху давала +1.
   Шапка системы идёт потоком артборда (зазор 28): заголовок у нас в одну
   строку, и ряд шагов поднимается следом. */
@media (min-width: 1100px) {
  #system.screen-fit:has(> .scene) { padding: 0; gap: 0; }
  .scene,
  #case .case-scene { width: min(100%, calc((100vh - 1px) * 1920 / 1080)); }
  .sys-scene .sys-headrow { top: 6.25cqw; }
  .sys-scene .sys-steps { top: 12.5cqw; }
}

/* 86в. Оптика после снимка 16.09.2026: названия шагов ниши — шрифт
   заголовков, как в артборде; старые разделители колонок сняты; подпись
   в панели системы стоит по левому краю панели. */
@media (min-width: 1100px) {
  .niche-scene .benefit-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
  .niche-scene .benefit + .benefit { border-left: 0; padding-left: 0; }
  .niche-scene .benefit::before,
  .niche-scene .benefit::after { content: none; display: none; }
  .niche-scene .benefit-text { color: var(--ink); }
  .sys-scene .sys-panel .stage-caption { padding: 0; }
}

/* 86г. 17.09.2026, решение владельца: экраны 02-05 на всю ширину, как
   первый. На окне 2000x884 сцена вписывалась по высоте (1570) и оставляла
   поля по 208 — это и была разница между его экраном и снимками 1920x1080.
   Теперь секция выше окна (~1117 на 2000x884), ширина всегда полная.
   Система: заголовок в одну строку, текст справа по его верху — при
   ширине 33.3cqw заголовок ложился в две строки и наезжал на шаги на 32px,
   а текст (align-items: flex-end) стоял выше заголовка. */
@media (min-width: 1100px) {
  .scene,
  #case .case-scene { width: 100%; }
  .sys-scene .sys-headrow { align-items: flex-start; }
  .sys-scene .sys-title { width: auto; white-space: nowrap; }
  .sys-scene .sys-lead { flex: 1 1 auto; min-width: 0; }
}
/* 86д. Правило #system .section-title (clamp до 72px) старше сцены по
   весу селектора — заголовок системы был 72 вместо 5cqw артборда. */
@media (min-width: 1100px) {
  #system .sys-scene .sys-title { font-size: 5cqw; }
}
/* 86е. Линия секции сверху давала +1px к высоте сцены на окнах 16:9. */
@media (min-width: 1100px) {
  .scene,
  #case .case-scene { margin-bottom: -1px; }
}
@media (min-width: 1100px) {
  #next .scene { margin-top: -1px; margin-bottom: 0; } /* #next — блок, не flex: нижний -1 проваливается */
}
@media (min-width: 1100px) {
  /* заголовок в строку сдвинул текст вправо, угол задевал пометку «Живая база» */
  .sys-scene .sys-lead .lead,
  .sys-scene .sys-note { max-width: 31.25cqw; }
}
@media (min-width: 1100px) {
  .sys-scene .sys-steps { top: 13.333cqw; } /* текст шапки в три строки: зазор до шагов был 10px */
}

/* 87. 17.09.2026, правки владельца по кадру своего окна.
   1. Мелкий текст первого экрана: абзац 14, кнопки и направления 12 из
      2000 не читались. Абзац 18, кнопки 15, направления 14. Высота абзаца
      больше не задана: текст в четыре строки уходил под кнопки.
   2. Одна сетка на все экраны. Первый экран стоит на линиях 9% и 91%
      окна (180 и 1820 из 2000), сцены 1920 — на 8,33% и 91,67%
      (160 и 1760 из 1920). Сцена 98,4% ширины по центру ставит их линии
      ровно на 9% и 91%: 0,008 + 0,984 × 160/1920 = 0,09. */
@media (min-width: 1100px) {
  #hero .hero-copy .body-text {
    font-size: 1.1cqw;      /* 18 при 2000: доли здесь от колонки 1627 */
    line-height: 1.5;
    max-width: 45%;
    height: auto;
  }
  #hero .hero-copy .btn {
    font-size: 0.92cqw;     /* 15 */
    padding: 0.74cqw 1.35cqw;
    min-height: 0;
    line-height: 1;
    letter-spacing: 0.03cqw;
  }
  #hero .hero-copy .pillars { font-size: 0.86cqw; letter-spacing: 0.15cqw; } /* 14 */

  .scene,
  #case .case-scene { width: 98.4%; margin-left: auto; margin-right: auto; }
}
/* 87а. Цифры в абзаце заданы отдельным кеглем и после подъёма абзаца
   стали мельче текста. Держатся долей от кегля абзаца. */
@media (min-width: 1100px) {
  #hero .hero-copy .body-text .hl { font-size: 1.3em; line-height: 1; }
}

/* 88. 17.09.2026. ЛЕСТНИЦА ОТСТУПОВ ПЕРВОГО ЭКРАНА (правка владельца).
   Отступы мерятся по буквам: от базовой линии до верха заглавных.
   Уровень 0 — между строками заголовка: 26 (задан интерлиньяжем 0,86).
   Уровень 1 — внутри блока смысла (надзаголовок → заголовок → абзац): 36.
   Уровень 2 — до действий (абзац → кнопки → направления): 50.
   Уровень 3 — колонка → плашка: 70. Шаг лестницы ~1,4.
   Было 20 / 26 / 63 / 19 / 18 / 32 — без логики.
   Колонке нужно на 90 больше: сцена 2000/960 вместо 2000/884 (влезает в
   16:9 и в окно владельца 2000x1012), надзаголовок выше, плашка ниже,
   камень едет вместе с плашкой. Вертикали — доли ширины сцены (cqw),
   не проценты высоты. Числа — px при сцене 1985, делённые на 19,85
   (сцена) или 16,27 (колонка — свой контейнер). */
@media (min-width: 1100px) {
  #hero { height: auto; min-height: 100vh; }
  .hero-scene { aspect-ratio: 2000 / 960; max-height: none; }

  #hero .hero-grid { top: 4.61cqw; }                 /* 91,5 */
  /* Надзаголовок: уровень 1 до заголовка; левый край по букве «И»
     (у «И» боковой отступ 5, у «К» 0). */
  #hero .eyebrow { top: -3.256cqw; left: 0.252cqw; }
  /* «Л» выступает влево на 2 при «И» на +5: сдвиг 7 = 0,041em. */
  #hero .hero-title .easy { margin-left: 0.041em; }

  #hero .hero-title { margin-bottom: 1.39cqw; }      /* заголовок → абзац 36 */
  #hero .hero-copy .link-row {
    margin-top: 2.755cqw;                             /* абзац → кнопки 50 */
    margin-bottom: 2.815cqw;                          /* кнопки → направления 50 */
  }

  #hero .proof-rail { top: 41.59cqw; bottom: auto; } /* направления → плашка 70 */
  #hero .hero-visual { top: -4.77cqw; }               /* камень стоит на плашке */
  /* Пометка вынесена вверх-вправо, за контур камня. */
  #hero .hero-visual .hand-hero { left: 92.1%; top: 16.6%; }
}
/* 88а. Оптическая доводка по пикселям кадра 2000x1012 (метрики Yanone
   врут: «Легко.» стоит на 10 ниже расчётной базовой линии). Было на глаз:
   надзаголовок → заглавные 46, «Легко.» → абзац 27. Оба сведены к 36;
   стопка поднята на 12, чтобы поля сверху и снизу были равны (~60).
   Камень опустился и открыл светлую кромку своего фона сверху и слева —
   края растворяются маской. */
@media (min-width: 1100px) {
  #hero .hero-grid { top: 4.005cqw; }
  #hero .eyebrow { top: -2.752cqw; }
  #hero .hero-title { margin-bottom: 1.843cqw; }
  #hero .proof-rail { top: 41.44cqw; }
  #hero .hero-visual { top: -4.92cqw; }
  #hero .hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%), linear-gradient(to right, transparent 13.5%, #000 17%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 7%), linear-gradient(to right, transparent 13.5%, #000 17%);
    mask-composite: intersect;
  }
}
/* 88б. Срез низа камня висел над плашкой на 30 — обрезка снята, низ
   уходит под плашку (она выше по слою), срез лежит на её кромке. */
@media (min-width: 1100px) {
  #hero .hero-visual { clip-path: none; }
}

/* 89. 17.09.2026. ВТОРОЙ ЭКРАН (КЕЙС), ВТОРИЧНАЯ КНОПКА, ПЛАШКА.
   Вторичная кнопка — кремовый фон страницы, не белый: на кремовой
   странице белая плашка читалась чужой. */
.btn-outline { background: var(--paper); }

/* Слайдер: кадры лежат друг на друге, виден активный. Вне сцены (узкие
   окна) — тот же порядок, кадр квадратный на всю колонку. */
.case-slider { position: relative; margin: 0; }
.case-slides { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: rgba(16, 16, 16, 0.06); }
.case-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.case-slide.is-active { opacity: 1; }
.case-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.case-slide-empty { display: grid; place-items: center; color: var(--muted); font-size: var(--text-s); letter-spacing: 0.08em; text-transform: uppercase; }
.case-nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.case-nav:hover { border-color: var(--ink); }
.case-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-nav svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2; }
.case-nav-prev { left: 16px; }
.case-nav-next { right: 16px; }
.case-dots { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.case-dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ink); background: transparent;
}
.case-dots button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .case-slide { transition: none; } }

/* Сцена кейса. Кегли — как на первом экране (абзац 18, кнопка 15, мелкие
   15–14 при ширине 2000): сцена 98,4% окна, 1cqw = 19,53 при окне 2000.
   Колонка — поток с лестницей отступов (web-design §5): рубрика → L2 →
   блок смысла (надзаголовок → заголовок → абзацы, L1) → L2 → кнопка → L2 →
   превью ранних стилей. L1 = 1.8cqw, L2 = 2.5cqw, подуровень 0.8cqw
   между строками-пояснениями. Кадр 840² на 920/80, точки под ним на L1. */
@media (min-width: 1100px) {
  #case .case-scene .case-copy { gap: 0; }
  #case .case-scene .case-copy > * { margin: 0; }
  #case .case-scene .case-eyebrow { margin-top: 2.5cqw; }
  #case .case-scene .case-title { margin-top: 1.8cqw; }
  #case .case-scene .lead { font-size: 0.917cqw; max-width: 33.5cqw; margin-top: 1.8cqw; }
  #case .case-scene .case-role { font-size: 0.82cqw; max-width: 33.5cqw; margin-top: 1.8cqw; }
  #case .case-scene .case-clubs { font-size: 0.768cqw; max-width: 33.5cqw; margin-top: 0.8cqw; }
  #case .case-scene .link-row { margin-top: 2.5cqw; }
  #case .case-scene .btn {
    font-size: 0.768cqw; padding: 0.614cqw 1.126cqw;
    letter-spacing: 0.03cqw; border-radius: var(--radius); line-height: 1; min-height: 0;
  }
  #case .case-scene .case-styles { margin-top: 2.5cqw; gap: 0.6cqw; }
  #case .case-scene .case-styles-label { font-size: 0.717cqw; }

  #case .case-scene .case-slides { border-radius: 0.417cqw; }
  #case .case-scene .case-slide-empty { font-size: 0.717cqw; }
  #case .case-scene .case-nav { width: 2.5cqw; height: 2.5cqw; }
  #case .case-scene .case-nav-prev { left: 1.25cqw; }
  #case .case-scene .case-nav-next { right: 1.25cqw; }
  #case .case-scene .case-dots { gap: 0.625cqw; margin-top: 1.8cqw; }
  #case .case-scene .case-dots button { width: 0.52cqw; height: 0.52cqw; }
}

/* СИСТЕМА. Текст шапки тянется до правого края сетки (1760), пометка
   «Живая база» уходит за край сетки, в правое поле. Кегли как на первом
   экране; правило #system .lead по весу старше сцены — отсюда #system. */
@media (min-width: 1100px) {
  #system .sys-scene .sys-lead .lead { font-size: 0.917cqw; max-width: none; }
  #system .sys-scene .sys-note { font-size: 0.768cqw; max-width: none; }
  #system .sys-scene .sys-step-name { font-size: 1.354cqw; }
  #system .sys-scene .sys-step-desc { font-size: 0.768cqw; }
  #system .sys-scene .hand-system { left: 91.9cqw; top: 3.125cqw; }
}

/* ПЛАШКА ПЕРВОГО ЭКРАНА. Число и подпись — один объект; расстояние от
   разделителя до текста было 16 — меньше, чем воздух вокруг самого
   объекта, и разделитель прилипал к тексту. Отступ от разделителя —
   уровень 2 лестницы (50 при 2000). */
@media (min-width: 1100px) {
  #hero .rail-item + .rail-item { padding-left: 2.52cqw; }  /* 50 при сцене 1985 */
}
/* 89а. Система, замер по пикселям кадра 2000x1012: заголовок → шаги 67,
   шаги → кадр 53. Оба — уровень 2 (~50): шаги и кадр подняты на 16. */
@media (min-width: 1100px) {
  .sys-scene .sys-steps { top: 12.51cqw; }
  .sys-scene .sys-stage,
  .sys-scene .sys-panel { top: 22.098cqw; }
}
/* 89б. Колонки плашки — по содержимому с равным разносом: при отступе
   50 от разделителя подпись последней ячейки в равной колонке 287
   переносилась, и плашка росла на строку. */
@media (min-width: 1100px) {
  #hero .proof-rail { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  #hero .rail-label { white-space: nowrap; }
}

/* 90. 17.09.2026, правки владельца по третьему и четвёртому экрану.
   Полая кнопка при наведении — оранжевая обводка. */
.btn-outline:hover { border-color: var(--accent); }

/* Магнит: секция встаёт разделительной линией вровень с верхом окна
   (прежние 24 сверху оставляли зазор над линией). */
@media (min-width: 1100px) {
  main > section { scroll-margin-top: 0; }
}

/* СИСТЕМА, лестница. Заголовок и текст справа — один блок (L1 = 1.8cqw),
   шаги относятся к окну, а не к заголовку: заголовок → шаги L2 (~50),
   шаги → окно L1 (~36). Номера шагов на сцене видны всегда: правило
   (max-height: 819px) прятало их, ряд становился ниже, и над окном
   копилась пустота. Панель: «Демо» → заголовок шага L1, заголовок →
   расшифровка и расшифровка → примечание — подуровень 0.8cqw.
   Пометка «Живая база» — вниз, в свободное поле под панелью. */
@media (min-width: 1100px) {
  .sys-scene .sys-headrow { gap: 1.8cqw; }
  #system .sys-scene .sys-step .selector-num { display: block; }
  .sys-scene .sys-stage,
  .sys-scene .sys-panel { top: 21.28cqw; }
  .sys-scene .sys-panel { gap: 0; align-items: flex-start; }
  .sys-scene .sys-panel > * { margin: 0; }
  .sys-scene .sys-step-title { margin-top: 1.8cqw; line-height: 1; }
  .sys-scene .sys-panel .stage-caption { margin-top: 0.8cqw; padding: 0; text-indent: 0; }
  .sys-scene .sys-panel-note { margin-top: 0.8cqw; }
  #system .sys-scene .hand-system { left: 78cqw; top: 46.6cqw; }
}

/* КОМАНДА. Пункты — вкладки слайдера справа. Рамка 800x500 (16:10) на
   тёмной подложке, кадр вписан целиком; расшифровка под рамкой (L1).
   Колонка: рубрика → L2 → заголовок → L1 → абзац → L2 → вкладки. */
.team-list button {
  display: flex; gap: var(--space-4); width: 100%; text-align: left;
  padding: var(--space-3) 0 0; margin: 0; background: none; cursor: pointer;
  border: 0; border-top: 1px solid var(--rule); color: var(--ink); font: inherit;
}
.team-list button[aria-selected="true"] { border-top: 2px solid var(--accent); }
.team-list button:hover b { color: var(--accent); }
.team-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.team-tab-text { display: flex; flex-direction: column; gap: var(--space-1); }
.team-tab-text b { font-size: var(--text-base); font-weight: 600; }
.team-tab-text span { font-size: var(--text-m); line-height: 1.5; color: rgba(16, 16, 16, 0.6); }
.team-slider .case-slides { aspect-ratio: 16 / 10; background: #111; }
.team-slider .case-slide img { object-fit: contain; }
.team-slider .case-slide-empty { color: rgba(243, 242, 239, 0.6); }
.slider-caption { margin: var(--space-4) 0 0; font-size: var(--text-m); line-height: 1.5; color: var(--muted); min-height: 3em; }

@media (min-width: 1100px) {
  .team-scene .team-copy { gap: 0; }
  .team-scene .team-copy > * { margin: 0; }
  .team-scene .team-title { margin-top: 2.5cqw; }
  .team-scene .lead { margin-top: 1.8cqw; font-size: 0.917cqw; max-width: 33.5cqw; }
  .team-scene .team-list { margin-top: 2.5cqw; gap: 1.25cqw; }
  .team-scene .team-list button { gap: 0.833cqw; padding-top: 0.8cqw; }
  .team-scene .team-list .selector-num { font-size: 1.146cqw; }
  .team-scene .team-tab-text { gap: 0.3cqw; }
  .team-scene .team-tab-text b { font-size: 1.1cqw; }
  .team-scene .team-tab-text span { font-size: 0.82cqw; }

  .team-scene .team-media { display: block; height: auto; grid-template-rows: none; }
  .team-scene .team-media img { height: 100%; min-height: 0; object-fit: contain; object-position: center; border-radius: 0; }
  .team-scene .case-slides { border-radius: 0.417cqw; }
  .team-scene .case-nav { width: 2.5cqw; height: 2.5cqw; }
  .team-scene .case-nav-prev { left: 1.25cqw; }
  .team-scene .case-nav-next { right: 1.25cqw; }
  .team-scene .case-nav { top: 13.02cqw; }            /* середина рамки 500 */
  .team-scene .case-slide-empty { font-size: 0.717cqw; }
  .team-scene .slider-caption { margin-top: 1.8cqw; font-size: 0.82cqw; max-width: 36cqw; }
}
/* 90а. Доводка по пикселям кадра 2000x1012.
   Панель системы: заголовок шага → расшифровка было 31, расшифровка →
   примечание 28 при «Демо» → заголовок 39 — подуровень почти равнялся L1.
   Сведено к ~18.
   Команда: заголовок → абзац 45 → 36; активная вкладка — чёрная, прочие
   приглушены; полоса поднята на L3 от вкладок (220 пустоты), сцена
   короче: 1920/960. */
@media (min-width: 1100px) {
  .sys-scene .sys-panel .stage-caption { margin-top: 0.15cqw; }
  .sys-scene .sys-panel-note { margin-top: 0.3cqw; }

  .team-scene { aspect-ratio: 1920 / 960; }
  .team-scene .lead { margin-top: 1.34cqw; }
  .team-scene .team-strip { top: 42.5cqw; }
}
.team-tab-text b { color: var(--muted); transition: color 0.2s ease; }
.team-list button[aria-selected="true"] .team-tab-text b { color: var(--ink); }
.slider-caption { color: rgba(16, 16, 16, 0.6); }

/* 91. 17.09.2026, НИША — макет владельца картинкой целиком.
   Рубрика и шапка — как у «Системы»: заголовок в строку, абзац справа
   (L1 = 1.8cqw). Картинка на L2 ниже шапки; каменные блоки (x 75–1370
   из 1448) стоят на линиях сетки 9% / 91%, поэтому сама картинка шире
   сетки: 83.333 × 1448 / 1295 = 93.18cqw, сдвиг влево 75 / 1448 от неё.
   Края фона растворены маской. Текст шагов — скрытым списком. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.niche-art { margin: 0; }
.niche-art img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 88%, transparent 100%),
                      linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 88%, transparent 100%),
              linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 1100px) {
  .niche-scene .niche-copy { top: 3.125cqw; gap: 0; }
  .niche-scene .niche-headrow {
    display: flex; gap: 1.8cqw; align-items: flex-start; margin-top: 0; /* по краске: рубрика → заглавные L1 */
  }
  .niche-scene .section-title { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .niche-scene .lead { flex: 1 1 auto; min-width: 0; max-width: 37.5cqw; font-size: 0.833cqw; }
  .niche-scene .niche-art {
    position: absolute; top: 7.22cqw; left: -4.826cqw; width: 93.18cqw; /* от .niche-copy; сверху в кадре ~10 пустоты и маска 4% — видимый зазор до камня ≈ L2 */
  }
}

/* 92. 17.09.2026, правки владельца по «Системе».
   Кнопки шагов: подписи сняты, название вплотную к номеру; полоса сверху
   стала стрелкой (поток слева направо). Выбранный шаг — прямоугольная
   рамка акцентом, при наведении — серая; стрелка у них прячется. Рамка —
   outline с отступом, текст остаётся на линиях сетки, а стрелка вынесена
   над кнопкой, чтобы поля рамки были равными со всех сторон.
   Панель: «Демо» → заголовок шага = заголовок → расшифровка. */
.sys-step { position: relative; border-top: 0; }
.sys-step::before,
.sys-step::after { content: ""; position: absolute; pointer-events: none; transition: opacity 0.2s ease; }
.sys-step::before { left: 0; right: 2px; top: -12px; height: 2px; background: var(--rule); }
.sys-step::after {
  right: 1px; top: -16px; width: 8px; height: 8px;
  border-top: 2px solid var(--rule); border-right: 2px solid var(--rule); transform: rotate(45deg);
}
.sys-step { outline: 2px solid transparent; outline-offset: 8px; transition: outline-color 0.2s ease; }
.sys-step:hover { outline-color: rgba(16, 16, 16, 0.28); }
.sys-step.is-active { outline-color: var(--accent); }
.sys-step:hover::before, .sys-step:hover::after,
.sys-step.is-active::before, .sys-step.is-active::after { opacity: 0; }
.sys-step:focus-visible { outline-color: var(--accent); }
@media (min-width: 1100px) {
  .sys-scene .sys-step { gap: 0.2cqw; padding-top: 0; border-top: 0; outline-width: 0.104cqw; outline-offset: 0.5cqw; }
  .sys-scene .sys-step .selector-num,
  .sys-scene .sys-step-name { line-height: 1; }
  .sys-scene .sys-step::before { top: -1.4cqw; height: 0.104cqw; right: 0.1cqw; }
  .sys-scene .sys-step::after {
    top: -1.4cqw; right: 0.05cqw; width: 0.45cqw; height: 0.45cqw;
    border-width: 0.104cqw; transform: translateY(calc(-50% + 0.052cqw)) rotate(45deg);
  }
  .sys-scene .sys-step-title { margin-top: 0.72cqw; }
}
/* 92а. Замер по пикселям 2000x1012 после снятия подписей.
   Шапка → стрелки L2 (~50), шаги → окно L1 (~36): ряд стал ниже на 110.
   «Демо» → заголовок шага и заголовок → расшифровка — по 16.
   Оптика: абзац рядом с заголовком стоит верхом строчных букв (x-height)
   по верху заглавных заголовка, а не верхом строки: −0.51em. */
@media (min-width: 1100px) {
  .sys-scene .sys-steps { top: 13.82cqw; }
  .sys-scene .sys-stage,
  .sys-scene .sys-panel { top: 18.74cqw; }
  .sys-scene .sys-step-title { margin-top: 0.62cqw; }
  .sys-scene .sys-panel .stage-caption { margin-top: 0.35cqw; }
  .sys-scene .sys-step-name { line-height: 0.85; } /* рамка: поля над номером и под названием равны по краске */
  #system .sys-scene .sys-lead .lead,
  .niche-scene .niche-headrow .lead { margin-top: -0.51em; }
}
/* 92б. Правки владельца по кадру его окна.
   Стрелка той же ширины, что рамка шага (выходит за текст на отступ
   рамки с обеих сторон); зазор между шагами 2cqw, чтобы соседние стрелки
   и рамки не сливались.
   Панель: зазоры мерятся оптически — до верха строчных абзаца, не до
   бокса. На 1600x834 было «Демо» → заголовок 12, заголовок → абзац 20;
   оба сведены к ~1cqw. */
@media (min-width: 1100px) {
  .sys-scene .sys-steps { gap: 2cqw; }
  .sys-scene .sys-step::before { left: -0.5cqw; right: -0.4cqw; }
  .sys-scene .sys-step::after { right: -0.45cqw; }
  .sys-scene .sys-step-title { margin-top: 0.86cqw; }
  .sys-scene .sys-panel .stage-caption { margin-top: 0.245cqw; }
}

/* 17.09.2026: цифры в строке роли кейса — акцентом, шрифт строки. */
.case-role .num,
.team-metrics .num { color: var(--accent); }


/* 17.09.2026: абзац первого экрана сокращён до трёх строк и стал на строку
   короче прежнего (26 при 1920). Плашка и камень подняты на ту же величину,
   иначе отступ «направления → плашка» вырастает с 60 до 85. */
@media (min-width: 1100px) {
  #hero .proof-rail { top: 40.075cqw; }
  #hero .hero-visual { top: -6.285cqw; }
}

/* 92в. Владелец: стрелки — на уровне кнопок, между ними, а не над ними.
   Кнопки шире, стрелка короткая: стоит в зазоре между рамками по
   вертикальному центру кнопки, у последнего шага её нет, при наведении и
   выборе не прячется. Зазор 4cqw: рамки по 0.5cqw с каждой стороны,
   стрелка 1.2cqw ровно посередине оставшихся 3cqw.
   Левый край панели: правило #system .stage-caption (max-height: 819px)
   старше сцены по весу и давало абзацу поле 4px слева — на окне владельца
   абзац стоял правее заголовка.
   Стрелки ушли из-над шагов, поэтому ряд и окно поднимаются на их место
   (1.4cqw): заголовок → номера остаётся L2, шаги → окно L1.
   ВНИМАНИЕ: этот слой уже один раз пропал — параллельная правка того же
   файла из другой сессии перезаписала хвост. Один писатель на файл. */
@media (min-width: 1100px) {
  .sys-scene .sys-steps { gap: 4cqw; top: 12.42cqw; }
  .sys-scene .sys-stage,
  .sys-scene .sys-panel { top: 17.34cqw; }
  .sys-scene .sys-step::before {
    left: calc(100% + 1.4cqw); right: auto; width: 1.2cqw;
    top: 50%; height: 0.104cqw; transform: translateY(-50%);
  }
  .sys-scene .sys-step::after {
    left: calc(100% + 2.1cqw); right: auto; top: 50%;
    width: 0.45cqw; height: 0.45cqw; border-width: 0.104cqw;
    transform: translate(-0.05cqw, -50%) rotate(45deg);
  }
  .sys-scene .sys-step:hover::before, .sys-scene .sys-step:hover::after,
  .sys-scene .sys-step.is-active::before, .sys-scene .sys-step.is-active::after { opacity: 1; }
  .sys-scene .sys-step:last-child::before,
  .sys-scene .sys-step:last-child::after { content: none; }
  #system .sys-scene .sys-panel .stage-caption { padding: 0; }
}

/* 18.09.2026: на окне владельца 1384x713 сцены выходили за нижний край на 45px.
   Причина: секция считала высоту от пропорции сцены, а не от окна — ширина
   min(100%, 100vh*16/9) не срабатывала, потому что высота секции сама росла из
   сцены. Здесь высота секции задана окном, а ширина сцены считается от неё. */
@media (min-width: 1100px) {
  .screen-fit:has(> .scene),
  .screen-fit:has(> .case-scene) { height: 100dvh; }
  .screen-fit > .scene,
  .screen-fit > .case-scene {
    width: min(100%, calc(100dvh * 1920 / 1080));
    max-height: 100dvh;
    align-self: center;
  }
  .screen-fit > .team-scene { width: min(100%, calc(100dvh * 1920 / 960)); }
}

/* 18.09.2026: превью до/после в «Команде». Видео лежит в слайде как картинка,
   подписи всплывают поверх и меняются на середине ролика. */
.team-ba { display: block; }
.team-ba-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-ba-label {
  position: absolute; left: 4%; bottom: 6%; margin: 0;
  display: grid; /* обе подписи в одной ячейке, видна только включённая */
}
.team-ba-label span {
  grid-area: 1 / 1;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(18px, 2.2cqw, 34px); line-height: 1; color: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.team-ba-label span.is-on { opacity: 1; transform: none; }
.team-ba-label span:last-child { color: var(--accent); }

/* 18.09.2026: «Команда» — кадры Notion шире, чем квадрат, поэтому слайды идут
   16:9; нижняя плашка снята, её числа встали строкой под абзацем. */
.team-slider .case-slides { aspect-ratio: 16 / 9; }
.team-metrics { margin: 0; font-size: var(--text-m); font-weight: 600; }

/* 18.09.2026: строка чисел под абзацем «Команды» — тем же кеглем, что абзац,
   иначе колонка уходит за нижний край окна (замер: низ колонки 725 при 713). */
@media (min-width: 1100px) {
  .team-scene .team-metrics { font-size: 0.833cqw; line-height: 1.5; max-width: 34cqw; margin-top: 0.6cqw; }
}

/* 18.09.2026: пять вкладок «Команды» с новой строкой чисел не помещались в
   окно 1384x713 (низ колонки 725). Ступень между вкладками ужата. */
@media (min-width: 1100px) {
  .team-scene .team-list { gap: 0.72cqw; }
}

/* 18.09.2026: кадр «Команды» шириной как материалы кейса (43,75cqw), сцена
   переведена на общую пропорцию 16:9 — прежние 1920/960 делали экран шире
   остальных и он выпадал из сетки. Точки листания — матовое стекло, как меню. */
@media (min-width: 1100px) {
  .team-scene { aspect-ratio: 1920 / 1080; }
  .screen-fit > .team-scene { width: min(100%, calc(100dvh * 1920 / 1080)); }
  .team-scene .team-media { left: 47.917cqw; width: 43.75cqw; height: 24.6cqw; }
  .team-scene .team-inner .case-dots { margin: 0; gap: 0.5cqw; }
  .team-scene .team-inner .case-dots button { width: 0.42cqw; height: 0.42cqw; }
}
.team-inner { position: absolute; inset: 0; }
.team-inner > .case-slides { aspect-ratio: auto; height: 100%; }
.team-inner > .case-dots {
  position: absolute; left: 0; right: 0; bottom: 4%;
  margin: 0; z-index: 2;
}
.case-dots button {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.case-dots button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); }

/* 18.09.2026: у кейса своё правило `#case .case-scene` со старым ограничением
   ширины, и оно било общее — сцена оставалась 1347 при высоте 713, то есть
   сжималась по вертикали. Здесь то же ограничение с нужной специфичностью. */
@media (min-width: 1100px) {
  #case .case-scene { width: min(100%, calc(100dvh * 1920 / 1080)); max-height: 100dvh; }
}

/* 18.09.2026, просьба владельца: кнопки со всей страницы — капсулой, стрелки
   слайдеров — матовым стеклом как меню, шаги «Системы» — чуть скруглены. */
.btn,
#case .case-scene .btn,
.contact-scene .btn,
#hero .hero-copy .btn { border-radius: 999px; }
.case-nav {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.case-nav:hover { background: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.7); }
.sys-step { border-radius: 4px; }
@media (min-width: 1100px) {
  .sys-scene .sys-step { border-radius: 0.36cqw; }
}

/* 18.09.2026: у секций задан display (flex/grid), и он бил атрибут hidden —
   снятый экран ниши продолжал рисоваться. */
[hidden] { display: none !important; }

/* 18.09.2026, просьба владельца: стрелки слайдеров на 15% меньше, обводка
   тоньше и светлее, сама стрелка белая. Размеры: 48 -> 41, 2,5cqw -> 2,125cqw. */
.case-nav {
  width: 41px; height: 41px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.case-nav:hover { border-color: rgba(255, 255, 255, 0.62); }
.case-nav svg { stroke-width: 1.6; }
@media (min-width: 1100px) {
  #case .case-scene .case-nav { width: 2.125cqw; height: 2.125cqw; }
}

/* 86ж. 18.09.2026: на окнах 16:10 сцена контакта (16:9) стояла у верха
   секции, под ней оставалось 90-145px пустоты. Секция — колонка, сцена по
   центру, как на остальных экранах. */
@media (min-width: 1100px) {
  #next:has(> .scene) { display: flex; flex-direction: column; justify-content: center; }
  #next > .scene { margin: 0 auto; }
}

/* 86з. 18.09.2026, решение владельца: рамка кадра кейса — по размеру
   материала. Квадрат 840x840 артборда остаётся областью, кадр вписывается
   в неё целиком и стоит по центру; обрезки cover больше нет (соцсети
   теряли 41% ширины). Точки и стрелки стоят от области, а не от кадра. */
.case-media .case-slides { background: none; border-radius: 0; }
.case-media .case-slide { display: grid; place-items: center; }
.case-media .case-slide img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto;
  object-fit: contain; border-radius: var(--radius-lg);
}
@media (min-width: 1100px) {
  #case .case-scene .case-media .case-slide img { border-radius: 0.417cqw; }
}

/* 89. 18.09.2026, правки владельца по снимку 2000x1012.
   Ширина: полоса первого экрана (9,05%..91,05% сцены 2000/960) сведена с
   полосой содержимого сцен 16:9 (8,333%..91,667%). Сцена первого экрана
   шире сцены 16:9 в 0,8333/0,82 = 1,01626 раза и стоит по центру так же. */
@media (min-width: 1100px) {
  .hero-scene {
    --hw: calc(min(100%, 100dvh * 1920 / 1080) * 1.01626);
    flex: none;
    width: var(--hw);
    margin: auto 0 auto calc(50% - var(--hw) / 2);
  }
}

/* Точки слайдера кейса — от низа текущего кадра (--dots-top ставит скрипт). */
.case-media.case-slider .case-dots {
  position: absolute; left: 0; right: 0; margin-top: 16px;
  top: var(--dots-top, 100%);
}
@media (min-width: 1100px) {
  #case .case-scene .case-media.case-slider .case-dots { margin-top: 1.8cqw; }
}

/* Кнопки шагов «Системы» — скругление как у плашки «Демо» (0,208cqw).
   outline-offset увеличивал радиус рамки на величину отступа, поэтому
   отступ переведён в поля кнопки с обратным полем: текст на месте, рамка
   на прежнем месте, радиус свой. Стрелки между шагами сдвинуты на поле. */
@media (min-width: 1100px) {
  .sys-scene .sys-step {
    padding: 0.5cqw; margin: -0.5cqw;
    outline-offset: 0; border-radius: 0.208cqw;
  }
  .sys-scene .sys-step::before { left: calc(100% + 0.9cqw); }
  .sys-scene .sys-step::after { left: calc(100% + 1.6cqw); }
  /* Зазор под рубрикой — как надзаголовок → заголовок первого экрана. */
  #case .case-scene .case-eyebrow { margin-top: 1.8cqw; }
}

/* Камни по стыкам, файлы владельца «Первый треугольник» и «Второй
   треугольник» (обрезаны по массе камня). Первый — справа под первым
   экраном, второй — слева после кейса. Угол внизу справа — stones-br-v2. */
.edge-1::before {
  left: auto; right: 0; width: 200px; height: 630px;
  background-image: url('assets/stones-tri-r.webp');
  background-size: 200px 630px; background-position: 0 0;
  -webkit-mask-image: none; mask-image: none;
}
.edge-2::before {
  right: auto; left: calc(-1 * (var(--sidenav-w) + var(--sidenav-gap) * 2));
  width: 286px; height: 630px;
  background-image: url('assets/stones-tri-l.webp');
  background-size: 286px 630px; background-position: 0 0;
  -webkit-mask-image: none; mask-image: none;
}

/* Магнит: каждый экран встаёт разделительной полосой ровно в верх окна.
   Все экраны от 1100 — ровно в высоту окна, поэтому режим mandatory. */
@media (min-width: 1100px) {
  html { scroll-snap-type: y mandatory; }
  main > section:not([hidden]) { scroll-snap-align: start; scroll-margin-top: 0; }
}
/* У #next раньше стояло scroll-snap-align: none (экран был короче окна);
   при mandatory без точки у последнего экрана до него не долистать. */
@media (min-width: 1100px) {
  html main > section#next { scroll-snap-align: start; }
}
/* Угол внизу справа показан всей массой камня (было срезано слева). */
.edge-bottom::before {
  width: 240px; height: 280px;
  background-size: 380px 380px; background-position: -141px -101px;
}

/* 89а. Зазор под рубрикой — по краске, как надзаголовок → заглавные первого
   экрана (30 при окне 2000x1012 = 1,667cqw сцены). Было: кейс 47, система
   38, команда 53, контакт 58. */
@media (min-width: 1100px) {
  #case .case-scene .case-eyebrow { margin-top: 0.855cqw; }
  #system .sys-scene .sys-headrow { margin-top: -0.445cqw; }
  #team .team-scene .team-title { margin-top: 1.222cqw; } /* было 2.5 */
  #next .contact-scene .section-title { margin-top: -1.556cqw; }
}
/* Второй треугольник уже поля до текста (243 при 2000): иначе ложится на
   рубрику «02 Система». */
.edge-2::before { width: 200px; height: 441px; background-size: 200px 441px; }
/* 89б. На окнах уже 16:9 сцена = 100% ширины, и первый экран в 1,016 раза
   шире окна — вылезал на 14-21px. Там он ограничен шириной секции (полоса
   расходится с остальными на 0,7% ширины, ~10px на сторону при 1440).
   Кейс: высота секции была auto (правило с id старше), при 1728x1117
   секция 972 — магнит mandatory показывал кусок следующего экрана. */
@media (min-width: 1100px) {
  .hero-scene {
    width: min(var(--hw), 100%);
    margin-left: calc(50% - min(var(--hw), 100%) / 2);
  }
  #case.screen-fit:has(> .case-scene) { height: 100dvh; }
}

/* 90. 18.09.2026, «Команда» по сетке сайта: 12 колонок по полосе 1600 с
   зазором 32 (тот же шаг, что у полос кейса), колонка 5,417cqw, шаг
   7,083cqw. Текст — колонки 1–5 (8,333..42,083), кадр — 6–12
   (43,75..91,667, ширина 47,917, высота 16:9 = 26,953). Было 37,5 / 43,75:
   владелец просил левый блок уже, кадр крупнее. */
@media (min-width: 1100px) {
  .team-scene .team-copy { width: 33.75cqw; }
  .team-scene .team-title { width: 33.75cqw; }
  .team-scene .lead,
  .team-scene .team-metrics { max-width: 33.75cqw; }
  .team-scene .team-media { left: 43.75cqw; width: 47.917cqw; height: 26.953cqw; }
  .team-scene .case-nav { top: 13.477cqw; }
}

/* Камни по просьбе владельца: треугольники вдвое меньше, угол в 1,5 раза. */
.edge-1::before { width: 100px; height: 315px; background-size: 100px 315px; }
.edge-2::before { width: 100px; height: 221px; background-size: 100px 221px; }
.edge-bottom::before {
  width: 160px; height: 187px;
  background-size: 253px 253px; background-position: -94px -67px;
}

/* 91. 18.09.2026, правки владельца.
   Рукописные пометки в 1,5 раза крупнее и с большим наклоном (было 20 и 24
   при 2000x1012, наклон −4° и 0°). Пометка «Живая база» придвинута к кадру
   системы: встаёт по левому краю панели, низом у низа кадра. */
@media (min-width: 1100px) {
  #hero .hero-visual .hand-hero { font-size: 1.65cqw; transform: rotate(-7deg); }
  #system .sys-scene .hand-system {
    font-size: 2.031cqw; transform: rotate(-5deg); transform-origin: left bottom;
    left: 69.79cqw; right: auto; top: 43.2cqw; bottom: auto;
  }
  /* Кнопки контакта — как на первом экране и в кейсе (высота 38 при 2000). */
  #next .contact-scene .btn {
    font-size: 0.768cqw; padding: 0.614cqw 1.126cqw;
    letter-spacing: 0.03cqw; line-height: 1; min-height: 0;
  }
}

/* 91а. «Система» вровень по левому краю: рамка шага стоит на 8,333cqw, как
   заголовок и кадр (раньше поле рамки выносило её на 0,5cqw влево). Шаг 06
   встаёт по левому краю панели «Демо» (69,79cqw): шаг сетки шагов
   (69,79 − 8,333) / 5 = 12,29cqw, рамка 9,48 → зазор 2,81. Стрелки — по
   центру зазора. */
@media (min-width: 1100px) {
  #system .sys-scene .sys-step { margin: 0; }
  #system .sys-scene .sys-steps { gap: 2.792cqw; }
  #system .sys-scene .sys-step::before { left: calc(100% + 0.8cqw); }
  #system .sys-scene .sys-step::after { left: calc(100% + 1.5cqw); }
}

/* 92. Плашка чисел внизу «Команды» — копия плашки первого экрана в долях
   сцены (доли героя × 1,01626). Полоса 8,333..91,667, верх 43,5cqw. */
@media (min-width: 1100px) {
  .team-scene .team-rail {
    position: absolute; left: 8.333cqw; top: 39.3cqw; width: 83.333cqw; margin: 0; /* 70 до подписи кадра при 2000 — уровень 3 */
    display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center;
    padding: 1.22cqw 1.63cqw 1.22cqw 4.88cqw; column-gap: 0.91cqw;
    border-radius: 0.73cqw; background: #101010; box-shadow: none;
  }
  .team-scene .team-rail .rail-item { display: grid; row-gap: 0.36cqw; padding: 0; border: 0; position: relative; }
  .team-scene .team-rail .rail-item + .rail-item { padding-left: 2.56cqw; border-left: 1px solid rgba(243, 242, 239, 0.18); }
  .team-scene .team-rail .rail-item::before { content: none; }
  .team-scene .team-rail .rail-value {
    font-family: var(--font-display); font-weight: 800; font-size: 1.32cqw; line-height: 1.1; color: var(--accent);
  }
  .team-scene .team-rail .rail-label {
    font-size: 0.61cqw; font-weight: 600; line-height: 1.45; letter-spacing: 0.049cqw;
    text-transform: uppercase; color: #F3F2EF;
  }
}
/* 92а. Пять чисел на плашке «Команды» — равные колонки, разделитель слева
   у каждой, кроме первой; поле текста от разделителя одно на всех. */
@media (min-width: 1100px) {
  .team-scene .team-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch;
    padding: 1.22cqw 0; column-gap: 0;
  }
  .team-scene .team-rail .rail-item,
  .team-scene .team-rail .rail-item + .rail-item { padding: 0 1.63cqw 0 2.56cqw; }
}

/* 93. 18.09.2026: тёмные плашки чисел — на текстуре камня владельца
   (tex-rail-a — первый экран, tex-rail-b — «Команда»). Текстура сама тёмная
   (средняя яркость ~20 из 255), прозрачность не нужна; сверху полупрозрачный
   слой цвета плашки, чтобы прожилки не спорили с подписями, а свечение по
   краям оставалось видно. */
#hero .proof-rail,
.team-scene .team-rail {
  background-color: #101010;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#hero .proof-rail {
  background-image: linear-gradient(90deg, rgba(16,16,16,0.35), rgba(16,16,16,0.6) 50%, rgba(16,16,16,0.35)), url('assets/tex-rail-a.webp');
}
.team-scene .team-rail {
  background-image: linear-gradient(90deg, rgba(16,16,16,0.35), rgba(16,16,16,0.6) 50%, rgba(16,16,16,0.35)), url('assets/tex-rail-b.webp');
}

/* 94. 18.09.2026: объект первого экрана — hero-gate-v5 (image 14 владельца,
   1161x1271, фон снят в альфу). Кадр уже бокса, стоит в нём через contain;
   прежняя маска слева (13,5–17%) резала бы камни — вместо неё низ кадра
   (отражение пола) растворяется к плашке. */
@media (min-width: 1100px) {
  #hero .hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}
/* 94а. Пол под воротами не снимается в альфу целиком (серый градиент) и
   читался прямоугольником: низ и бока кадра растворяются вместе.
   Пометка в 1,5 раза крупнее ломалась на три строки — держим две. */
@media (min-width: 1100px) {
  #hero .hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 97%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  #hero .hero-visual .hand-hero { white-space: nowrap; }
}
/* 93а. Свечение прожилок у краёв плашки ложилось под крайние подписи
   («13 лет», «FPY»): слой цвета плашки плотнее по краям. */
#hero .proof-rail {
  background-image: linear-gradient(90deg, rgba(16,16,16,0.78), rgba(16,16,16,0.5) 30%, rgba(16,16,16,0.5) 70%, rgba(16,16,16,0.78)), url('assets/tex-rail-a.webp');
}
.team-scene .team-rail {
  background-image: linear-gradient(90deg, rgba(16,16,16,0.78), rgba(16,16,16,0.5) 30%, rgba(16,16,16,0.5) 70%, rgba(16,16,16,0.78)), url('assets/tex-rail-b.webp');
}

/* 94б. 18.09.2026, владелец: ворота крупнее, отражение уходит под плашку.
   Кадр больше не вписывается в бокс 995/857 (там он упирался в высоту и
   занимал 79% ширины), а идёт своей пропорцией 1161/1271 на всю ширину
   бокса: +27%. Верх на месте, низ с отражением заходит под плашку чисел,
   плашка лежит поверх. */
@media (min-width: 1100px) {
  #hero .hero-visual img { aspect-ratio: 1161 / 1271; height: auto; }
  #hero .hero-visual { z-index: 1; }
  #hero .proof-rail { z-index: 3; }
  #hero .hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 93%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 93%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
/* 94в. Во всю ширину бокса левые камни заходили на «AI PRO-USER» и точку
   «Продаж.» — кадр 90% бокса, прижат вправо к краю полосы. Отражение гаснет
   к низу плашки (плашка перекрывает 86–97% высоты кадра). */
@media (min-width: 1100px) {
  #hero .hero-visual img { width: 90%; margin-left: 10%; }
  #hero .hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 92%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 92%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
/* 94г. Боковая маска размывала камни у краёв ворот. Теперь бока гаснут
   только в полосе пола (ниже 75% высоты кадра): слой A — непрозрачный верх,
   слой B — боковое затухание, их объединение пересекается с затуханием низа C. */
@media (min-width: 1100px) {
  #hero .hero-visual img {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 78%, transparent 92%),
      linear-gradient(to bottom, #000 75%, transparent 79%),
      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 78%, transparent 92%),
      linear-gradient(to bottom, #000 75%, transparent 79%),
      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in, source-over, source-over;
    mask-composite: intersect, add, add;
  }
}

/* 95. 18.09.2026, владелец: контакт по центру экрана, рядом с текстом две
   его фотографии каруселью. Фото 20cqw в квадрат, зазор 3,333cqw до текста,
   вся группа по центру сцены по обеим осям. Вторая фотография проявляется
   поверх первой: 8 с на цикл, смена за 0,8 с. */
.contact-photos {
  position: relative; margin: 0 0 var(--space-6);
  width: min(240px, 60vw); aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-lg); background: #101010;
}
.contact-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.contact-photos img + img { animation: contact-photo-swap 8s ease-in-out infinite; }
@keyframes contact-photo-swap {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-photos img + img { animation: none; opacity: 0; }
}
@media (min-width: 1100px) {
  #next .contact-scene {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3.333cqw;
  }
  #next .contact-scene .contact-photos {
    flex: none; width: 20cqw; margin: 0; border-radius: 0.417cqw;
  }
  #next .contact-scene .contact-copy {
    position: static; left: auto; top: auto; width: auto; max-width: 44cqw;
  }
  #next .contact-scene .section-title { width: auto; }
}

/* Угол внизу справа: бокс обрезал камни по своим краям (прямой срез слева
   и сверху). Картинка показана целиком, прозрачные поля — часть бокса. */
.edge-bottom::before {
  width: 253px; height: 253px;
  background-size: 253px 253px; background-position: 0 0;
}

/* 95а. Фото вровень с текстом: ряд «фото + текст» — своя строка по центру
   сцены, фото растянуто на высоту колонки текста и квадратное. */
@media (min-width: 1100px) {
  #next .contact-scene { display: flex; flex-direction: row; align-items: center; justify-content: center; }
  #next .contact-row { display: flex; align-items: stretch; gap: 3.333cqw; }
  #next .contact-scene .contact-photos {
    align-self: stretch; width: auto; height: auto; aspect-ratio: 1; margin: 0;
  }
}
@media (max-width: 1099px) {
  .contact-row { display: block; }
}

/* 96. Год работы под превью ранних стилей — при наведении и фокусе. */
.case-styles-row a { position: relative; }
.style-year {
  position: absolute; left: 0; top: 100%; margin-top: 6px;
  font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--muted);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.case-styles-row a:hover .style-year,
.case-styles-row a:focus-visible .style-year { opacity: 1; transform: none; }
@media (min-width: 1100px) {
  #case .case-scene .style-year { font-size: 0.66cqw; margin-top: 0.4cqw; }
}
/* 95б. aspect-ratio от растянутой высоты во flex не даёт ширину (замер: 0).
   Колонка текста в долях сцены постоянна — 23,005cqw (253 при сцене 1100),
   фото задано этим квадратом. */
@media (min-width: 1100px) {
  #next .contact-scene .contact-photos { width: 22.85cqw; height: auto; align-self: stretch; flex: none; } /* высота — ровно колонка текста, ширина ±2px */
}

/* 18.09.2026, просьба владельца: стрелки «Команды» того же размера, что у
   кейса (2,5 -> 2,125cqw, правило 5866 было старше общего уменьшения).
   Подпись под кадром ближе: зазор = высота строки подписи (0,82 x 1,5),
   внутреннее расстояние группы «кадр + подпись» меньше внешнего до плашки. */
@media (min-width: 1100px) {
  .team-scene .case-nav { width: 2.125cqw; height: 2.125cqw; }
  .team-scene .slider-caption { margin-top: 1.23cqw; }
}

/* 18.09.2026: «Ниша» возвращена. Правило #capacity { scroll-snap-align: none }
   (id) било общее main > section:not([hidden]) — при mandatory экран был бы
   недостижим, как раньше контакт. */
@media (min-width: 1100px) {
  html main > section#capacity { scroll-snap-align: start; }
}
/* «Ниша» на окнах 16:10: сцена стояла у верха, под ней 90–145px пустоты
   (gaps, 1440x900 и 1728x1117). Как у контакта: секция — колонка, сцена по центру. */
@media (min-width: 1100px) {
  #capacity:has(> .scene) { display: flex; flex-direction: column; justify-content: center; }
  #capacity > .scene { margin: 0 auto; }
}

/* 19.09.2026, файлы владельца «Разделитель 1–3» (папка «Графика»):
   stones-divider — полоса по центру стыка системы и команды, stones-r-v3 —
   у правой кромки на стыке команды и контакта, stones-bl — левый нижний угол
   контакта вместо прежнего правого. Разделители лежат поверх линии стыка. */
.edge-join-a, .edge-join-b { z-index: 2; }
.edge-join-a::before, .edge-join-b::before, .edge-bottom::before {
  -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal;
}
.edge-join-a::before {
  left: 50%; width: 520px; height: 70px; transform: translate(-50%, -50%);
  background-image: url('assets/stones-divider.webp');
  background-size: 520px 70px; background-position: 0 0;
}
.edge-join-b::before {
  left: auto; right: 0; width: 180px; height: 213px;
  background-image: url('assets/stones-r-v3.webp');
  background-size: 180px 213px; background-position: 0 0;
}
.edge-bottom::before {
  right: auto; left: calc(-1 * (var(--sidenav-w) + var(--sidenav-gap) * 2));
  width: 230px; height: 178px;
  background-image: url('assets/stones-bl.webp');
  background-size: 230px 178px; background-position: 0 0;
}
@media (max-width: 1100px) { .edge-join-a, .edge-join-b { display: none; } }

/* 19.09.2026. «НИША» — ЧЕТЫРЕ КАМНЯ ВОРОТ. Композиция по макету владельца:
   слева рубрика, заголовок в четыре строки (последняя акцентом) и абзац;
   справа четыре камня в ряд, под каждым номер, плита и хронология.
   Камни — jpg с фоном, приведённым к белому: подложка var(--paper) и
   умножение дают ровно цвет бумаги без края. */
#capacity { border-top: 1px solid var(--rule); }
.gate-stones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.gate-stone { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.gate-stone-art { background: var(--paper); }
.gate-stone-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.gate-stone-copy { display: flex; flex-direction: column; border-left: 1px solid var(--rule); padding-left: var(--space-3); }
.gate-num { font-family: var(--font-display); font-weight: 700; color: var(--accent); line-height: 1; font-size: 28px; }
.gate-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 6px 0 0; font-size: 22px; color: var(--ink); }
.gate-years { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.gate-years b { color: var(--accent); font-weight: 600; margin-right: 0.35em; }
.gate-accent { color: var(--accent); }
@media (min-width: 1100px) {
  .gate-scene .gate-copy { position: absolute; left: 8.333cqw; top: 10cqw; width: 27cqw; display: flex; flex-direction: column; gap: 1.25cqw; }
  .gate-scene .section-title { font-size: 4.6cqw; }
  .gate-scene .lead { font-size: 0.9375cqw; max-width: 22cqw; margin: 0; }
  .gate-scene .gate-stones {
    position: absolute; left: 37.5cqw; top: 4.2cqw; width: 54.167cqw;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.667cqw;
  }
  .gate-scene .gate-stone { gap: 1cqw; }
  .gate-scene .gate-stone-copy { padding-left: 1.04cqw; border-left-width: 0.052cqw; }
  .gate-scene .gate-num { font-size: 1.98cqw; }
  .gate-scene .gate-name { font-size: 1.6cqw; margin-top: 0.4cqw; }
  .gate-scene .gate-years { font-size: 0.729cqw; margin-top: 0.7cqw; }
}
/* Края кадров камней растворены: у jpg фон к краям чуть темнее белого,
   и умножение проявляло прямоугольник. Год — отдельной колонкой, перенос
   строки встаёт под текст, а не под год. */
.gate-stone-art img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.gate-years li { display: grid; grid-template-columns: 3.2em 1fr; }
.gate-years b { margin-right: 0; }
@media (min-width: 1100px) { .gate-scene .gate-stones { top: 6.5cqw; } }
/* 19.09.2026, владелец: под полосой камней между системой и командой линии
   стыка нет, сами камни на 20% меньше (520x70 -> 416x56). */
#team { border-top: 0; }
.edge-join-a::before { width: 416px; height: 56px; background-size: 416px 56px; }

/* 19.09.2026: камни «Ниши» — один кадр владельца над колонками подписей.
   Фон кадра приведён к белому, ложится на бумагу умножением, края гаснут. */
.gate-art { margin: 0 0 var(--space-4); background: var(--paper); }
.gate-art img {
  display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 1100px) {
  .gate-scene .gate-art { position: absolute; left: 37.5cqw; top: 3.6cqw; width: 54.167cqw; margin: 0; }
  .gate-scene .gate-stones { top: 38.2cqw; }
}
/* 19.09.2026, владелец: боковое затухание белило нижние камни ворот по
   краям. Бока гаснут только ниже 81% высоты кадра (низ камней — 80%). */
@media (min-width: 1100px) {
  #hero .hero-visual img {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 78%, transparent 92%),
      linear-gradient(to bottom, #000 81%, transparent 85%),
      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 78%, transparent 92%),
      linear-gradient(to bottom, #000 81%, transparent 85%),
      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
/* Кадр «Для ниши 2» во всю ширину: камни у краёв больше не режутся. Ширина
   подобрана так, чтобы шаг камней на кадре (21,9% ширины) совпал с шагом
   колонок подписей (13,958cqw), середина ряда — с серединой колонок. */
@media (min-width: 1100px) {
  .gate-scene .gate-art { left: 33.6cqw; top: 3.2cqw; width: 63.77cqw; }
  .gate-scene .gate-stones { top: 38.6cqw; }
}

/* 20.09.2026: кадр «Для ниши 3» без дуги. Шаг камней 21,57% ширины кадра,
   середина ряда — 49,26%: ширина 64,71cqw ставит камни над колонками. */
@media (min-width: 1100px) {
  .gate-scene .gate-art { left: 32.7cqw; top: 2cqw; width: 64.71cqw; }
  .gate-scene .gate-stones { top: 38.8cqw; }
}
/* 20.09.2026, владелец: линий на стыках экранов нет нигде — границу держат
   воздух и камни. Магнит мягче: proximity вместо mandatory, экран
   подтягивается, когда прокрутка и так остановилась рядом. */
main > section.screen { border-top: 0; }
@media (min-width: 1100px) {
  html { scroll-snap-type: y proximity; }
}
/* Линия у «Ниши» ставилась правилом с id — снимается таким же. */
html main > section#capacity { border-top: 0; }

/* 20.09.2026, владелец: экран должен доезжать до края, магнит вернулся в
   mandatory; плавность самого притягивания задаёт браузер. */
@media (min-width: 1100px) {
  html { scroll-snap-type: y mandatory; }
}

/* Пометка от руки в «Нише» и стрелка от неё к колонкам с годами. */
.gate-arrow { display: block; width: 90px; height: 45px; color: var(--accent); opacity: 0.7; margin-top: var(--space-2); }
@media (min-width: 1100px) {
  .gate-scene .hand-gate { position: absolute; left: 8.333cqw; top: 40cqw; font-size: 1.15cqw; }
  .gate-scene .gate-arrow { position: absolute; left: 20cqw; top: 43.4cqw; width: 9cqw; height: 4.5cqw; margin: 0; }
}
/* Пометка и стрелка лежат внутри .gate-copy, поэтому их координаты
   считаются от неё: 10cqw сцены уже учтены. */
@media (min-width: 1100px) {
  .gate-scene .hand-gate { left: 0; top: 30cqw; }
  .gate-scene .gate-arrow { left: 12cqw; top: 32.4cqw; }
}

/* ======================================================================
   20.09.2026. НАБОР РУКОПИСНЫХ ОТМЕТОК.
   Рисованные обводки лежат фоном-картинкой в data-URI: их можно вешать на
   любое слово или блок, они тянутся за текстом и не мешают выделению.
   Цвет задаётся stroke внутри картинки, поэтому акцент прописан как
   %23FF4B08 (это #FF4B08 в адресе). Пометка привязывается к экрану, а не
   к слайду: слайды сменяются, подпись остаётся.
   .mark-underline — подчёркивание от руки вместо оранжевого текста;
   .mark-circle    — обводка овалом вокруг слова или числа;
   .mark-bracket   — скобка слева от строки списка.
   ====================================================================== */
.mark-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 45 3, 92 12, 140 6 S 186 4, 197 8' fill='none' stroke='%23FF4B08' stroke-width='3' stroke-linecap='round' opacity='0.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left calc(100% + 0.18em);
  background-size: 100% 0.32em;
  padding-bottom: 0.18em;
}
.mark-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M104 6 C 40 2, 6 22, 12 44 C 18 68, 96 78, 146 72 C 190 66, 198 34, 176 18 C 158 6, 120 3, 96 8' fill='none' stroke='%23FF4B08' stroke-width='3' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 118% 148%;
  padding: 0.1em 0.35em;
}
.mark-bracket {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M11 3 C 4 18, 3 44, 4 50 C 3 58, 4 82, 11 97' fill='none' stroke='%23FF4B08' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0.5em 100%;
  padding-left: 0.9em;
}
/* 20.09.2026, пересохранённый кадр «Для ниши 3»: шаг камней 21,82% ширины,
   середина ряда 47,25%. Кадр обрезан по камням, поэтому стал ниже. */
@media (min-width: 1100px) {
  .gate-scene .gate-art { left: 34.36cqw; top: 1.5cqw; width: 63.96cqw; }
  .gate-scene .gate-stones { top: 37.2cqw; }
}

/* Рукописные пометки экранов: кейс, команда, контакт. */
.hand-team, .hand-contact, .hand-case { transform: rotate(-3deg); }
@media (min-width: 1100px) {
  .case-scene .hand-case { position: absolute; left: 8.333cqw; top: 46cqw; font-size: 1.15cqw; z-index: 2; }
  .team-scene .hand-team { position: absolute; left: 8.333cqw; top: 43cqw; font-size: 1.15cqw; z-index: 2; }
  .contact-scene .hand-contact { position: absolute; left: 8.333cqw; top: 41cqw; font-size: 1.15cqw; z-index: 2; }
}

/* Обводка числа в полосе: svg лежит поверх значения, цвет — от текста. */
.ring-host { position: relative; display: inline-block; }
.ring-mark { position: absolute; left: -9%; top: -32%; width: 118%; height: 164%; color: var(--accent); opacity: 0.85; pointer-events: none; }

/* Значок камня перед названием колонки в «Нише». */
.gate-icon { width: 1em; height: 1.33em; color: var(--accent); vertical-align: -0.28em; margin-right: 0.3em; }
/* Пометка «Команды» встала под плашкой и обрезалась — поднята в свободную
   полосу под столбиком вкладок, над плашкой чисел. */
@media (min-width: 1100px) { .team-scene .hand-team { top: 31cqw; } }
/* Пометка «Команды» наезжала на столбик вкладок — переставлена в пустую
   полосу под подписью кадра, над плашкой чисел. */
@media (min-width: 1100px) { .team-scene .hand-team { left: 50cqw; top: 30.5cqw; } }
/* Пометка «Команды» — справа от подписи кадра: единственное свободное
   место между кадром и плашкой чисел (замер 20.09.2026). */
@media (min-width: 1100px) { .team-scene .hand-team { left: 76cqw; top: 28.6cqw; } }
/* На экране «Команды» свободного поля между кадром и плашкой нет: пометка
   лежит на самом кадре, в правом нижнем углу, и написана цветом бумаги. */
@media (min-width: 1100px) {
  .team-scene .hand-team { left: 77cqw; top: 21cqw; color: var(--paper); z-index: 3; }
}
/* Кадр «Команды» меняется слайдами: на светлом ролике белая пометка
   пропадала. Пометка ушла под плашку чисел, в свободную полосу внизу. */
@media (min-width: 1100px) {
  .team-scene .hand-team { left: 8.333cqw; top: 40cqw; color: var(--ink); }
}
/* Считаем от низа сцены: верх у «Команды» занят кадром и плашкой. */
@media (min-width: 1100px) {
  .team-scene .hand-team { top: auto; bottom: 1.5cqw; }
}

/* 20.09.2026, замечания владельца.
   1. Подчёркивание тянулось по ширине слова вместе с толщиной линии: у
      длинных слов оно становилось нитью, у коротких — жирной дугой. Линия
      рисуется с non-scaling-stroke, поэтому толщина одна при любой ширине,
      а волна тянется.
   2. Кадр «Ниши» срезался маской сверху — верхнего затухания больше нет,
      снизу оно начинается позже, и под камнями остаётся поле. */
.mark-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 50 2, 96 10, 142 5 S 188 3, 197 7' fill='none' stroke='%23FF4B08' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='0.8'/%3E%3C/svg%3E");
  background-size: 100% 0.26em;
  background-position: left calc(100% + 0.12em);
  padding-bottom: 0.12em;
}
.gate-art img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
@media (min-width: 1100px) {
  .gate-scene .gate-art { top: 1cqw; }
  .gate-scene .gate-stones { top: 38.2cqw; }
}
/* Полоса подчёркивания считалась в em: под заголовком в 60px она
   растягивалась в 16px и читалась размашистой дугой, а не чертой. Высота
   полосы задана в пикселях — волна одинаковая под любым кеглем. */
.mark-underline {
  background-size: 100% 6px;
  background-position: left calc(100% + 2px);
  padding-bottom: 2px;
}

/* 21.09.2026, замечания владельца.
   1. Линия читалась волной, а не подчёркиванием: размах кривой был почти
      во всю высоту полосы. Размах уменьшен до доли пикселя, линия идёт
      ровно под словом и лишь чуть дрожит, как от руки.
   2. В «Нише» сняты номера колонок и стрелка; пометка о годах переставлена
      вплотную к таблице.
   3. Обводка в плашке «Команды» шла вокруг всей строки «2,4 → 0,7» и от
      этого вытягивалась в плоский эллипс. Теперь она вокруг результата.
   ====================================================================== */
.mark-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6.8 C 38 5.4, 74 7.9, 112 6.4 C 144 5.2, 172 7.2, 198 6.1' fill='none' stroke='%23FF4B08' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 100% 6px;
  background-position: left calc(100% + 2px);
  padding-bottom: 2px;
}
@media (min-width: 1100px) {
  .gate-scene .hand-gate { left: 21.7cqw; top: 29.6cqw; white-space: nowrap; }
}
/* Замер 21.09.2026: «0,7» — коробка 17×19 px, почти квадрат. Доли от неё
   давали вертикальный овал, поэтому обводка считается от кегля строки. */
.ring-mark { left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2.5em; height: 2.05em; }

/* 21.09.2026, слово владельца: «размер, как у надписи „Реальные базы“, и
   межстрочное чуть поменьше». Замер: .hand-system идёт 25,74 px при сцене
   1268 px — это 2,03cqw. Пометки экранов стояли на 1,15cqw (14,6 px) и
   рядом с ней читались мелочью. Пометка «Ниши» от крупного кегля упиралась
   в таблицу, поэтому её левый край подвинут. */
.hand { line-height: 0.88; }
@media (min-width: 1100px) {
  .case-scene .hand-case,
  .team-scene .hand-team,
  .contact-scene .hand-contact,
  .gate-scene .hand-gate { font-size: 2.03cqw; }
  .gate-scene .hand-gate { left: 18.7cqw; }
}