/* ORYX — вариант B «Витрина».
   Мир: световой короб локальной точки и латунная кромка.
   Основание — дневной тёплый белый. Тёмно-синий приходит крупными полями
   (рельс шапки, три полноширинных панели, ценники и короб героя), а не подложкой
   всей страницы. Латунь — только светящаяся кромка и буквы на коробе.
   Стратегия цвета Committed: синего много, но он владеет регионами.

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

:root {
  color-scheme: light;

  /* Основание */
  --paper:      #F7F5F1;  /* дневной свет, при котором короб видно */
  --paper-2:    #EFEBE3;  /* второй уровень светлого — врезки внутри карточек */
  --band:       #ECE5D6;  /* полоса-секция: заметно теплее и глубже основания */
  --plate:      #FFFFFF;  /* эмалированная табличка */

  /* Фирменный тёмно-синий — панели коробов */
  --navy:       #0B1930;
  --navy-2:     #14263F;  /* врезка внутри короба */
  --navy-3:     #1D3453;  /* ховер на тёмном */

  /* Латунь — кромка и буквы, не больше ~5% площади */
  --brass:      #C2A56B;
  --brass-lit:  #E4CE9C;  /* включённая кромка */
  /* Латунь на светлом даёт 2,2:1 — читать нечего. Там, где латунь несёт смысл
     на бумаге (номера шагов, маркеры, знак аккордеона), работает потемневшая
     латунь: 5,3:1. Светлая латунь на бумаге остаётся только линейками. */
  --brass-ink:  #7E6229;
  --brass-wash: #F0E7D6;  /* акцентная секция */
  --brass-line: rgba(194,165,107,.42);
  --brass-line-on: rgba(228,206,156,.34);

  /* Оксблад — главная кнопка на светлом */
  --ox:         #5E1D28;
  --ox-strong:  #4B1520;

  /* Текст */
  --ink:        #14181F;  /* 16.6:1 на paper */
  --ink-2:      #4A5462;  /* 7.4:1 на paper */
  --ink-ghost:  #A9AFB8;  /* бледный шаблон номера в поле телефона — подсказка, не текст */
  --on:         #F4F1EA;  /* 16.3:1 на navy */
  --on-2:       #B9C6D8;  /* 8.9:1 на navy */

  --line:       rgba(20,24,31,.14);
  --line-on:    rgba(244,241,234,.16);

  /* Rubik — выбор заказчика в панели 2026-09-11. Unbounded остался одному знаку ORYX
     в шапке: первый вордмарк был набран им, и заказчик вернул именно его. */
  --font-d: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-t: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Unbounded", "Trebuchet MS", system-ui, sans-serif;

  --r-pill: 999px;
  --r-plate: 10px;
  --r-box: 20px;

  /* Две ручки, которые переопределяет панель твиков (`tweaks.js`). Они живут здесь,
     а не в панели: ручка обязана быть токеном, иначе «плотнее» и «слабее свечение»
     пришлось бы править в каждом компоненте, и однажды они разъедутся с миром.
     Значения здесь — те, что видит посетитель; панель их только переопределяет. */
  --density: .78;    /* множитель вертикального воздуха секций; «плотнее» — выбор заказчика в панели 2026-09-11 */

  /* Метки площадок на первом экране. Не фирменная палитра, а цвет, по которому
     площадку узнают с первого взгляда; живёт только внутри таблички площадки. */
  --pf-yandex:      #E8401C;
  --pf-yandex-wash: #FDEDE8;
  --pf-gis:         #22963A;
  --pf-gis-wash:    #E7F4E9;
  /* Знак подтверждённой организации у названия в карточке — синий, как на площадке. */
  --verify:         #2F7CF6;
  --glow-gain: 1;    /* множитель силы света от курсора: 1 — как есть, 0 — выключено */

  --measure: 68ch;

  /* Шкала кегля — ревью 2026-09-15: на странице было около 38 разных размеров. Текст
     берёт ступень шкалы, а не своё значение. Крупные цифры, заголовки секций и первый
     экран — свои размеры: их мало, и они держат композицию. Карточка организации в
     коробе первого экрана — рисунок интерфейса площадки, у неё свой масштаб. */
  --fs-xs:   .8125rem;                          /* подписи и ярлыки */
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-body: 1.0625rem;                         /* основной текст страницы: 17 px, на ПК 18 */
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   clamp(1.25rem, 1.9vw, 1.75rem);    /* заголовки карточек */
  --fs-2xl:  clamp(1.5rem, 2.3vw, 2.125rem);    /* цены и «стало» в парах */
  --shadow-plate: 0 1px 2px rgba(20,24,31,.05), 0 14px 34px -18px rgba(11,25,48,.34);
  --shadow-tag:   0 2px 4px rgba(20,24,31,.06), 0 18px 40px -20px rgba(11,25,48,.5);
  --shadow-box:   0 8px 20px -12px rgba(11,25,48,.4), 0 40px 80px -40px rgba(11,25,48,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.3,1);
}

/* ---------- поверхности, которые мы не рисовали, но всё равно наши ---------- */

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--brass) var(--paper-2);
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: var(--paper-2); }
html::-webkit-scrollbar-thumb { background: var(--brass); border: 3px solid var(--paper-2); border-radius: var(--r-pill); }
html::-webkit-scrollbar-thumb:hover { background: #A98C52; }

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

::selection { background: var(--navy); color: var(--brass-lit); }
[data-tone="dark"] ::selection { background: var(--brass); color: var(--navy); }

/* Кегль растёт вместе с окном: заказчик смотрит с монитора и просил крупнее.
   Телефона это не касается — там базовые 17 px остаются. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.62 var(--font-t);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--ox);
  overflow-x: hidden;
}
[data-tone="dark"] { caret-color: var(--brass-lit); }
/* Корень, а не body: тогда вместе с текстом растут и все размеры в rem —
   заголовки карточек, цифры, подписи. На телефоне корень не трогаем. */
@media (min-width: 1100px) { html { font-size: 106%; } }
@media (min-width: 1400px) { html { font-size: 112%; } }

:focus-visible {
  outline: 2px solid var(--ox);
  outline-offset: 3px;
  border-radius: 3px;
}
[data-tone="dark"] :focus-visible, [data-tone="accent"] :focus-visible { outline-color: var(--brass-lit); }

/* Выезжает трансформой, а не `top`: анимация геометрии заставляет браузер
   пересчитывать раскладку на каждом кадре. */
.skip {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  background: var(--navy); color: var(--brass-lit);
  padding: 12px 18px; border-radius: var(--r-plate); text-decoration: none; font-weight: 600;
  transform: translateY(calc(-100% - 24px));
  transition: transform 180ms var(--ease);
}
.skip:focus { transform: translateY(0); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- типографика ---------- */

h1, h2, h3 { font-family: var(--font-d); font-weight: 800; margin: 0; text-wrap: balance; }

/* Верхняя граница подобрана по самой длинной строке заголовка на 1440 и шире:
   Unbounded очень широкий, и «крупнее» упирается не в вкус, а в ширину колонки. */
h1 {
  font-size: clamp(2.35rem, 5.4vw, 4.7rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.038em;
}
.h-sec {
  font-size: clamp(1.9rem, 3.8vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.034em;
}
.h-big {
  font-size: clamp(2.15rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-family: var(--font-d);
  margin: 0;
}
.h-sec--on, .h-min--on { color: var(--on); }
/* Заголовок секции на тёмном тоне светлеет сам: тон переключается атрибутом — и из
   панели твиков тоже, — а класс --on пришлось бы переставлять руками вслед за ним. */
[data-tone="dark"] .h-sec { color: var(--on); }
[data-tone="dark"] .sub { color: var(--on-2); }
.h-min {
  font-family: var(--font-t);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.h-min--on { color: var(--brass); }

p { margin: 0 0 16px; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-md); line-height: 1.55; color: var(--ink); }
.lead--on { color: var(--on); }
.sub { color: var(--ink-2); max-width: 60ch; margin: 20px 0 0; }
.note { font-size: var(--fs-base); color: var(--ink-2); }
.hair { border: 0; border-top: 1px solid var(--brass-line); margin: 28px 0; max-width: 460px; }

.ic { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.14em; }
.ic--lg { width: 22px; height: 22px; }

a { color: var(--ox); text-underline-offset: 4px; text-decoration-thickness: 1px; }
[data-tone="dark"] a { color: var(--brass-lit); }
.link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { border-bottom-color: transparent; }
.link--go { min-height: 44px; }

/* видимые пометки — там, где факта у нас нет.
   Это не подпись мелким шрифтом, а дырка в данных: чип держит те же 12 px
   внутреннего поля, что и любой другой контейнер с заливкой и рамкой. */
.ph, [data-placeholder] {
  font-family: var(--font-t);
  font-size: .92em;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ox);
  background: rgba(94,29,40,.07);
  border: 1px dashed rgba(94,29,40,.45);
  border-radius: var(--r-plate);
  padding: 12px 14px;
  display: inline-block;
}
/* Внутри бегущей строки чип встаёт на собственную строку, а не разрывает абзац. */
.check__text .ph, .note--stub .ph { margin-top: 8px; }
[data-tone="dark"] .ph, [data-tone="dark"] [data-placeholder] {
  color: var(--brass-lit);
  background: rgba(228,206,156,.1);
  border-color: rgba(228,206,156,.5);
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 var(--fs-base)/1.2 var(--font-t); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn--sm { min-height: 44px; padding: 12px 18px; font-size: var(--fs-base); }
.btn--wide { width: 100%; }
/* Контурная кнопка: вторая на первом экране. Прежде там стояла ссылка с подчёркиванием,
   и заказчик сказал, что кнопок не видно. */
a.btn--line, .btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--brass-lit); transform: translateY(-2px); }

/* Селектор с `a`, потому что на тёмных секциях ссылки перекрашиваются в латунь,
   и без этого латунная кнопка получала латунный текст — 1,5:1. */
a.btn--ox, .btn--ox { background: var(--ox); color: #FFF; box-shadow: 0 2px 4px rgba(11,25,48,.16), 0 16px 30px -18px rgba(11,25,48,.55); }
.btn--ox:hover { background: var(--ox-strong); transform: translateY(-2px); }

a.btn--brass, .btn--brass { background: var(--brass); color: var(--navy); }
.btn--brass:hover { background: var(--brass-lit); transform: translateY(-2px); }
/* Нажатие — лёгкое «вдавливание» (правка заказчика 2026-09-24): кнопка отвечает пальцу,
   а не только курсору, — на телефоне наведения нет вовсе. Нажатие отрабатывает быстрее
   наведения, иначе отклик запаздывал бы за пальцем. Недоступная кнопка не вдавливается —
   правило ниже снимает трансформу. */
.btn:active, .cardtabs__b:active, .msg:active {
  transform: translateY(1px) scale(.97);
  transition-duration: 70ms;
}

.btn:disabled { background: #B7B2A8; color: #4A4741; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- сетка секций ---------- */

.wrap { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px); }

main > section, footer[data-section] { padding: calc(clamp(64px, 9.5vw, 168px) * var(--density, 1)) 0; }
[data-tone="dark"] { background: var(--navy); color: var(--on); }
[data-tone="accent"] { background: var(--brass-wash); }
/* Полоса-секция. Тонкая латунная линейка сверху делает границу двух светлых
   блоков не догадкой, а фактом. */
[data-tone="band"] { background: var(--band); box-shadow: inset 0 1px 0 var(--brass-line); }
[data-tone="band"] .delta { background: var(--plate); }

/* ---------- 1 · шапка-рельс ---------- */

.rail {
  position: sticky; top: 0; z-index: 50;
  padding: 0 !important;
  background: var(--navy);
  border-bottom: 1px solid var(--brass-line-on);
}
/* Шапка шире колонки контента: заказчик 2026-09-11 просил сделать её «чуть-чуть
   пошире» — больше воздуха между знаком, пунктами и кнопками. Поля выросли, а рельс
   раздвинут до 1680: в прежних 1380 выросшим полям на широком мониторе было бы тесно. */
.rail__in {
  max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 72px);
  min-height: clamp(76px, 6.4vw, 100px); display: flex; align-items: center; gap: clamp(28px, 3vw, 56px);
}
/* Знак — слово ORYX, набранное Unbounded 800 латунью с разрядкой: самый первый
   вордмарк сайта. Заказчик 2026-09-11 перебрал свой файл с засечками и два округлых
   варианта и вернул именно этот. Файлы вордмарка остались в `assets/`, но в сборке
   не участвуют. */
.mark {
  font: 800 clamp(20px, 1.7vw, 26px)/1 var(--font-mark);
  letter-spacing: .16em;
  color: var(--brass);
  text-decoration: none;
  padding: 12px 0 12px 2px;
  display: inline-flex; align-items: center; flex: none;
  transition: color 180ms var(--ease);
}
.mark:hover { color: var(--brass-lit); }
.rail__nav { display: flex; gap: clamp(26px, 2.6vw, 48px); margin-left: auto; }
.rail__nav a {
  color: var(--on-2); text-decoration: none; font-size: var(--fs-base); font-weight: 600;
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.rail__nav a:hover { color: var(--on); border-bottom-color: var(--brass); }
/* Текущий раздел (rail.js, правка 2026-09-24) — латунью и с чертой снизу: так же, как
   наведение, только ярче и держится, пока раздел на экране. */
.rail__nav a[aria-current="true"] { color: var(--brass-lit); border-bottom-color: var(--brass-lit); }
.rail__side { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 24px); margin-left: auto; }
/* Телефон — настоящая ссылка: номер прислал заказчик 2026-09-15. Правило висит на тоне,
   иначе латунный цвет ссылок тёмной секции перебил бы его. */
[data-tone] .tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--on); text-decoration: none; white-space: nowrap;
  font: 600 var(--fs-sm)/1.2 var(--font-t); font-variant-numeric: tabular-nums;
  transition: color 180ms var(--ease);
}
[data-tone] .tel .ic { width: 18px; height: 18px; color: var(--brass-lit); }
[data-tone] .tel:hover { color: var(--brass-lit); }
.rail__menu-side .tel { padding: 12px 16px; border-radius: var(--r-plate); background: rgba(244,241,234,.05); }
.foot-tel { margin: 0 0 10px; }
/* Telegram и MAX в шапке — круглые значки-ссылки (правки заказчика 2026-09-15 и
   2026-09-16). Без пунктира: пунктир на этой странице значит «факта нет». */
.msg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--brass-lit); background: rgba(244,241,234,.05);
  box-shadow: inset 0 0 0 1px var(--brass-line-on);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.msg:hover { background: rgba(194,165,107,.16); color: var(--on); }
.msg .ic { width: 20px; height: 20px; }
/* Только для программ чтения с экрана. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Точки под каруселями нужны только на телефоне, где ряды листаются вбок. */
.dots { display: none; }
.rail .btn--sm { min-height: 48px; padding: 13px 22px; font-size: var(--fs-base); }

/* Латунная нить прогресса — единственное движение шапки. Только трансформа. */
.rail__thread { height: 3px; background: rgba(244,241,234,.07); overflow: hidden; }
.rail__thread i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
}

/* ---------- кнопка разделов и панель под рельсом ----------
   Раньше на 1340 навигация просто выключалась, и вместе с ней с рельса пропадали
   телефон и Telegram: открыть их было нечем — ни на телефоне, ни на обычном
   ноутбуке. Теперь то, что не помещается в строку, уезжает в панель под рельсом,
   а кнопка стоит ровно на тех ширинах, где эта панель — единственный путь. */

.rail__burger {
  display: none;                     /* пока разделы помещаются в строку — не нужна */
  position: relative;
  align-items: center; gap: 9px;
  min-height: 48px; min-width: 48px; padding: 12px 16px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--on);
  box-shadow: inset 0 0 0 1px var(--line-on);
  font: 600 var(--fs-base)/1.2 var(--font-t); cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.rail__burger:hover { color: var(--brass-lit); box-shadow: inset 0 0 0 1px var(--brass-line-on); }
.rail__burger-ic { width: 20px; height: 20px; }
.rail__burger-ic--close, .rail__burger[aria-expanded="true"] .rail__burger-ic--menu { display: none; }
.rail__burger[aria-expanded="true"] .rail__burger-ic--close { display: block; }
.rail__burger[aria-expanded="true"] { background: var(--navy-3); color: var(--brass-lit); }

.rail__menu { background: var(--navy-2); box-shadow: inset 0 1px 0 var(--brass-line-on); }
.rail__menu[hidden] { display: none; }
.rail__menu-in {
  max-width: 1680px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 72px) 20px;
  display: grid; gap: 14px;
}
.rail__menu-nav { display: grid; gap: 6px; }
.rail__menu-nav a {
  display: flex; align-items: center; min-height: 48px;
  padding: 12px 16px; border-radius: var(--r-plate);
  color: var(--on); text-decoration: none;
  font-size: var(--fs-base); font-weight: 600;
  background: rgba(244,241,234,.05);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.rail__menu-nav a:hover { background: rgba(194,165,107,.16); color: var(--brass-lit); }
.rail__menu-nav a[aria-current="true"] { background: rgba(194,165,107,.16); color: var(--brass-lit); box-shadow: inset 3px 0 0 var(--brass-lit); }
/* Телефон и Telegram здесь не дубликат ради дубликата: ниже 760 и 560 их на рельсе
   уже нет, и панель — единственное место, где они остаются доступны. */
.rail__menu-side {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line-on);
}

/* Разделы уходят с рельса, когда перестают в него помещаться. Порог 1340 подобран
   после укрупнения шрифта и полей: на 1280 четыре пункта переносились на вторую
   строку. Telegram и телефон уходят следом — но уже в панель, а не в никуда. */
@media (max-width: 1340px) {
  .rail__nav { display: none; }
  .rail__side { margin-left: auto; }
  .rail__burger { display: inline-flex; }
}
@media (max-width: 760px) { .rail__msg { display: none; } }
@media (max-width: 620px) {
  /* Рельс на телефоне держит три вещи: знак, заявку и разделы. Поля и подпись
     кнопки ужимаются ровно настолько, чтобы третья вещь встала в ту же строку. */
  .rail__in { gap: 12px; }
  .rail__side { gap: 8px; }
  .rail .btn--sm { padding: 13px 16px; }
  .rail__burger { padding: 12px; gap: 0; }
  .rail__burger-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 560px) { .rail__phone { display: none; } }

/* ---------- 2 · первый экран ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(clamp(52px, 9vw, 150px) * var(--density, 1)) !important;
}
/* Поле за композицией — свет короба: тёплое пятно света вокруг короба и лёгкая тень
   в нижнем углу. Заказчик сказал, что на первом экране «очень много фона и мало
   объектов»; из полей, предложенных в панели твиков, он выбрал это. Карта города,
   сетка и полоса остались в панели. Слой декоративный — псевдоэлемент, без узлов. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 72% at 76% 50%, rgba(194,165,107,.36), rgba(194,165,107,.12) 55%, rgba(194,165,107,0) 76%),
    radial-gradient(34% 44% at 8% 96%, rgba(11,25,48,.07), rgba(11,25,48,0) 70%);
}
/* Рамка композиции — тонкая тёмно-синяя линия примерно в сантиметре от текста и от
   короба: заказчик просил «обвести, подчеркнуть то, что имеется на главном экране».
   Сетка героя — это ещё и `.wrap` с полями по бокам, поэтому по горизонтали рамка
   отступает внутрь на ширину поля и выходит наружу на свой сантиметр. */
.hero__grid {
  position: relative;
  --frame-gap: clamp(12px, 2.8vw, 40px);
  --wrap-pad: clamp(20px, 5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: clamp(40px, 4.5vw, 72px);
  align-items: center;
}
.hero__grid::before {
  content: ''; position: absolute; pointer-events: none;
  inset: calc(-1 * var(--frame-gap)) calc(var(--wrap-pad) - var(--frame-gap));
  border: 1px solid rgba(11,25,48,.5);
  border-radius: 6px;
}
.hero__say { container-type: inline-size; }
/* Кегль заголовка ограничен шириной колонки: «Карточка работает на вас» — выбор
   заказчика 2026-09-11 — встаёт в две строки только так. Коэффициент подобран по
   самой длинной строке, «работает на вас» с неразрывными пробелами. */
.hero h1 { font-size: min(clamp(2.35rem, 5.4vw, 4.7rem), 12.6cqi); }
.hero .lead { max-width: 46ch; }
/* Площадки — таблички с меткой, а не мелкие чипы: заказчик сказал, что значков
   Яндекс Карт и 2ГИС не видно. Метка окрашена в цвет площадки — по нему их узнают
   быстрее, чем по подписи. Логотипы самих площадок не рисуем: это чужие знаки. */
.hero__ships { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* Таблички тёмные — выбор заказчика в панели 2026-09-11: на тёмно-синем метка
   площадки светится своим цветом и видна издалека. */
.ship {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); border-radius: 16px;
  padding: 12px 22px 12px 12px;
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
  font: 800 var(--fs-md)/1.1 var(--font-d); letter-spacing: -.02em; color: var(--on);
}
.ship__pin {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(244,241,234,.08); color: var(--brass-lit);
  box-shadow: 0 0 22px -6px currentColor;
}
.ship__pin .ic { width: 28px; height: 28px; }
.ship[data-platform="yandex"] .ship__pin { color: var(--pf-yandex); }
.ship[data-platform="gis"] .ship__pin { color: var(--pf-gis); }
/* Обе кнопки крупные: заказчик сказал, что кнопок на первом экране не видно. */
.hero__do { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(28px, 3vw, 44px); }
.hero__do .btn { min-height: 64px; padding: 20px 36px; font-size: var(--fs-md); }
/* Длинная надпись главной кнопки («Получить бесплатную консультацию» — варианты
   2026-09-15) переносится внутри кнопки, а не распирает строку за колонку. */
.hero__do .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; }
/* Заявка — с латунным ореолом: кольцо расходится от кнопки и гаснет, только
   трансформой и прозрачностью. «Услуги и цены» — латунный контур. Выбор заказчика
   в панели твиков 2026-09-11 («заявка с ореолом»). */
.hero__do .btn--ox { position: relative; box-shadow: 0 0 0 5px rgba(194,165,107,.22), 0 18px 40px -16px rgba(94,29,40,.8); }
.hero__do .btn--ox::after {
  content: ''; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--brass-lit); opacity: 0;
  animation: heroBtnRing 2.6s var(--ease) infinite;
}
@keyframes heroBtnRing {
  0%        { transform: scale(.96); opacity: .8; }
  70%, 100% { transform: scale(1.12); opacity: 0; }
}
/* «Услуги и цены» — текстовая ссылка со стрелкой, а не вторая кнопка: по весу она почти
   равнялась главной — правка заказчика 2026-09-15. */
.hero__do .btn--line {
  min-height: 44px; padding: 10px 2px; gap: 8px; font-size: var(--fs-base);
  background: none; box-shadow: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.hero__do .btn--line:hover { background: none; box-shadow: none; color: var(--ox); transform: none; }

.hero__box { position: relative; }

/* ---------- короб: рама первого решения правой части ---------- */

/* Снизу поле короба выше, чем по бокам: с нижней кромки свисает полоса виджетов, и
   карточка организации обязана оставаться целиком видна над ней — с запасом на то,
   что виджеты плавают вверх на 6 px. */
.signbox {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(194,165,107,.16), transparent 62%),
    var(--navy);
  border-radius: var(--r-box);
  padding: clamp(40px, 3.6vw, 52px) clamp(26px, 3vw, 40px) clamp(58px, 5vw, 70px);
  box-shadow: var(--shadow-box), inset 0 0 0 1px var(--brass-line-on);
  isolation: isolate;
}
.signbox::before {
  content: ''; position: absolute; inset: 11px; border-radius: 12px;
  border: 1px solid var(--brass-line); pointer-events: none;
}
.signbox__screw {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); opacity: .55;
}
.signbox__screw--tl { left: 15px; top: 15px; }
.signbox__screw--tr { right: 15px; top: 15px; }
.signbox__screw--bl { left: 15px; bottom: 15px; }
.signbox__screw--br { right: 15px; bottom: 15px; }
/* Латунная кромка короба разгорается при появлении — собственное движение первого
   экрана. Гаснет она не в ноль, а до трети: погасшую кромку не отличить от её
   отсутствия, а без JS и при reduced-motion она просто горит. */
.signbox__edge {
  position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(228,206,156,0), var(--brass-lit), rgba(228,206,156,0));
  transform: scaleX(.3); opacity: .5;
  transition: transform 900ms var(--ease-out) 180ms, opacity 900ms var(--ease-out) 180ms;
}
.hero__box[data-reveal-state="in"] .signbox__edge,
.hero__box:not([data-reveal-state]) .signbox__edge { transform: scaleX(1); opacity: 1; }

/* ---------- карточка организации на Яндекс Картах ----------
   Это не заглушка и не серые прямоугольники: галерея, название, рейтинг со
   звёздами, число отзывов, категория, адрес, режим работы и ряд действий — всё
   то, что человек видит в настоящей карточке. Фотографии нарисованы SVG:
   свет, размытие дальнего плана, виньетка и зерно. */

.ycard {
  background: var(--plate);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,25,48,.16), 0 28px 60px -28px rgba(11,25,48,.55);
  color: #1B2029;
}
.ycard__gallery {
  position: relative;
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr);
  gap: 3px; background: #1B2029;
  aspect-ratio: 16 / 9;
}
.shot { position: relative; overflow: hidden; background: #241B14; }
.shot--main { grid-row: 1 / 3; }
.shot__img { display: block; width: 100%; height: 100%; }
.ycard__count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(12,16,24,.72); color: #FFF;
  border-radius: var(--r-pill); padding: 6px 12px;
  font: 600 12px/1.2 var(--font-t);
  backdrop-filter: blur(3px);
}
.ycard__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
/* Синяя галочка подтверждения стоит сразу за названием — правка заказчика 2026-09-15. */
.ycard__ok { width: 1.05em; height: 1.05em; flex: none; color: var(--verify); }
.ycard__name {
  display: flex; align-items: center; gap: 8px;
  margin: 0; max-width: none;
  font: 800 clamp(1.18rem, 1.5vw, 1.42rem)/1.2 var(--font-d);
  letter-spacing: -.028em; color: #10141B;
}
.ycard__rate { margin: 0; max-width: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ycard__score {
  font: 800 1.16rem/1 var(--font-d); letter-spacing: -.03em; color: #10141B;
  font-variant-numeric: tabular-nums;
}
.ycard__stars { display: inline-flex; gap: 2px; color: #F0A93C; }
.yst { width: 16px; height: 16px; }
.ycard__reviews { font-size: 13.5px; color: #55606E; }
.ycard__cat { margin: 0; max-width: none; font-size: 13.5px; color: #55606E; }
.ycard__meta { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.ycard__meta li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #414B58; line-height: 1.35; }
.yic { width: 16px; height: 16px; flex: none; color: #7B8695; margin-top: .1em; }
.ycard__acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.yact {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #DCE0E6; border-radius: var(--r-pill);
  padding: 12px 15px; font: 600 13.5px/1 var(--font-t); color: #2C3541;
  background: #FFF;
}
.yact .yic { width: 15px; height: 15px; margin: 0; color: #5B6674; }
.yact--go { background: #1E6BE6; border-color: #1E6BE6; color: #FFF; }
.yact--go .yic { color: #FFF; }
.yact--icon { padding: 12px 13px; }
.ycard--compact .ycard__gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 21 / 9; }
.ycard--compact .shot--side { display: none; }
.ycard--compact .shot--main { grid-row: auto; }

/* ---------- плавающий виджет: было → стало ---------- */

.hwid {
  position: absolute; z-index: 4;
  display: grid; gap: 6px;
  min-width: 168px;
  background: var(--plate); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-plate);
  padding: 14px 16px;
  box-shadow: var(--shadow-tag);
}
.hwid--brass { background: var(--brass); color: var(--navy); border-color: transparent; }
.hwid__label { font: 600 .74rem/1 var(--font-t); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hwid--brass .hwid__label { color: #3A2E12; }
.hwid__pair { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.hwid__was { font-size: 1rem; color: var(--ink-2); }
.hwid--brass .hwid__was { color: #4A3A16; }
.hwid__ic { align-self: center; color: var(--brass-ink); width: 17px; height: 17px; }
.hwid--brass .hwid__ic { color: var(--navy); }
.hwid__now { font: 800 1.5rem/1 var(--font-d); letter-spacing: -.03em; }

/* ---------- решение A: карточка в коробе ---------- */

.heroviz { position: relative; }
/* Виджеты идут одной полосой по нижней кромке короба, по центру, а не по углам:
   заказчик 2026-09-11 сказал, что по углам им не хватает «энергии, жизни», и выбрал
   в панели твиков «полосу снизу». Первым стоит трафик — латунный, это его правка того
   же дня. Полоса свисает на треть высоты виджета: карточку не задевает, до рамки
   остаётся зазор. Жизнь — в движении: виджеты плавают вразнобой, а цифра «стало»
   въезжает снизу, когда короб появляется. Всё на трансформе и прозрачности. */
.heroviz--box .hwids {
  position: absolute; z-index: 4; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  display: flex; gap: 12px; align-items: flex-start;
}
.heroviz--box .hwids .hwid {
  position: relative; min-width: 0; flex: none; padding: 12px 16px;
  animation: hwidFloat 5.6s var(--ease) infinite;
}
.heroviz--box .hwids .hwid:nth-child(2) { animation-delay: -1.9s; }
.heroviz--box .hwids .hwid:nth-child(3) { animation-delay: -3.7s; }
@keyframes hwidFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hwid__now { display: inline-block; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid__now { animation: hwidRoll 700ms var(--ease-out) 260ms both; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid:nth-child(2) .hwid__now { animation-delay: 380ms; }
.hero__box[data-reveal-state="in"] .heroviz--box .hwid:nth-child(3) .hwid__now { animation-delay: 500ms; }
@keyframes hwidRoll {
  from { transform: translateY(70%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (max-width: 900px) {
  /* На телефоне сначала обещание, потом карточка: ниша приходит с телефона,
     и первым должен читаться заголовок, а не мокап. */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__box { margin-top: 12px; }
}
@media (max-width: 720px) {
  /* Виджеты перестают висеть по краям короба и встают под ним: на узком экране
     они съели бы половину карточки. */
  .heroviz .hwid { position: static; margin-top: 12px; min-width: 0; }
  .heroviz--box .hwids { position: static; transform: none; flex-wrap: wrap; margin-top: 12px; }
  .heroviz--box .hwids .hwid { margin-top: 0; }
  .signbox { padding: 18px; }
  .signbox::before { inset: 8px; }
  .signbox__screw { width: 6px; height: 6px; }
  .signbox__screw--tl, .signbox__screw--tr { top: 11px; }
  .signbox__screw--bl, .signbox__screw--br { bottom: 11px; }
  .signbox__screw--tl, .signbox__screw--bl { left: 11px; }
  .signbox__screw--tr, .signbox__screw--br { right: 11px; }
}
/* ---------- 3 · причины ----------
   Ярлык витрины: лампа слева гаснет, пока строка не появилась, и зажигается
   вместе с ней. Это тот же жест, что и во всех остальных секциях, — свет
   включается, — только в самом мелком масштабе. */

/* Каждая ситуация — своя плашка с латунной кромкой слева, переход к услуге — кнопкой:
   «плашки» — выбор заказчика в панели твиков 2026-09-11. */
.reasons__list { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 12px; }
.reason {
  display: grid;
  grid-template-columns: 44px minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(16px, 2.6vw, 40px);
  row-gap: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-plate);
  background: var(--plate);
  box-shadow: inset 3px 0 0 var(--brass), var(--shadow-plate);
}
.reason h3 { font-size: var(--fs-xl); line-height: 1.14; letter-spacing: -.028em; }
.reason p { color: var(--ink-2); margin: 0 0 18px; }
.reason .link { color: var(--ox); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 12px 18px; }
.reason .link:hover { border-color: currentColor; background: rgba(94,29,40,.06); }

.reason__lamp {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 520ms var(--ease), background-color 520ms var(--ease), box-shadow 520ms var(--ease);
}
.reason__lamp .ic { width: 20px; height: 20px; }
.reason[data-reveal-state="in"] .reason__lamp {
  color: var(--brass-ink);
  background: #F4EBD8;
  box-shadow: inset 0 0 0 1px var(--brass-line), 0 8px 20px -10px rgba(194,165,107,.95);
}
/* На тёмном тоне — выбор заказчика в панели 2026-09-11 — ярлыки перекрашены здесь же.
   Правила висят на тоне секции, а не на её номере: панель умеет вернуть полосу, и
   тогда ярлыки сами возвращаются к чернилам светлой секции. */
.reasons[data-tone="dark"] .reason {
  background: rgba(244,241,234,.05);
  box-shadow: inset 3px 0 0 var(--brass), inset 0 0 0 1px var(--line-on);
}
.reasons[data-tone="dark"] .reason .link:hover { background: rgba(228,206,156,.1); }
.reasons[data-tone="dark"] .reason h3 { color: var(--on); }
.reasons[data-tone="dark"] .reason p { color: var(--on-2); }
.reasons[data-tone="dark"] .reason .link { color: var(--brass-lit); }
.reasons[data-tone="dark"] .reason__lamp {
  color: var(--on-2); background: rgba(244,241,234,.06);
  box-shadow: inset 0 0 0 1px var(--line-on);
}
.reasons[data-tone="dark"] .reason[data-reveal-state="in"] .reason__lamp {
  color: var(--brass-lit); background: rgba(194,165,107,.16);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), 0 10px 24px -12px rgba(228,206,156,.8);
}

@media (max-width: 760px) {
  .reason { grid-template-columns: 36px minmax(0, 1fr); row-gap: 12px; }
  .reason__body { grid-column: 2; }
  .reason__lamp { width: 32px; height: 32px; }
}

/* ---------- 4 · цифры ----------
   Цифра живёт только рядом с названным источником: подпись стоит прямо под своим
   утверждением, а не сноской внизу страницы.

   С 2026-09-11 здесь четыре строки заказчика. Табличка тёмно-синяя с латунной
   кромкой, строки идут столбцом: цифра слева, утверждение и источник справа —
   «тёмная панель» и «в столбец» выбраны заказчиком в панели твиков. Колонка цифр
   одна на все строки (subgrid): широкое «77–94%» не сдвигает соседей. */

.choice {
  position: relative; overflow: hidden;
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  background: var(--navy); color: var(--on);
  border: 1px solid transparent;
  border-radius: var(--r-box);
  padding: clamp(12px, 1.2vw, 18px) clamp(26px, 3.2vw, 48px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
/* Латунная кромка сверху: гаснет, пока табличка не появилась. */
.choice::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}
.choice[data-reveal-state="in"]::before { transform: scaleX(1); }

.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(22px, 3.4vw, 56px);
}
/* Утверждение стоит на одной линии с цифрой, по её середине, а источник — под
   утверждением: правка заказчика 2026-09-11, прежде текст опускался ниже цифры.
   Обёртка текста раскрыта (`display: contents`), и утверждение с источником встают
   в сетку строки сами: цифра и утверждение — первая строка, источник — вторая. */
/* Первая строка `grid-template-columns` — запас для браузеров без subgrid (Chrome до 117,
   Safari до 16): там объявление subgrid отбрасывается, колонки становились неявными
   `auto`, делили свободное место поровну — и короткое утверждение («Негативные отзывы
   отпугивают») уезжало вправо. Цифры набраны tabular-nums, одной ширины, поэтому
   `max-content` в каждой строке даёт ту же колонку, что и общая сетка. */
.fact {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: auto auto;
  grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(22px, 3.4vw, 56px);
  grid-template-columns: subgrid;
  align-items: center; row-gap: 8px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--brass-line-on);
}
.fact__body { display: contents; }
.fact__v { grid-column: 1; grid-row: 1; }
.fact__t { grid-column: 2; grid-row: 1; }
.fact__src { grid-column: 2; grid-row: 2; align-self: start; }
.fact:first-child { border-top: 0; }
.fact__v {
  font: 800 clamp(2.8rem, 5.6vw, 5.2rem)/.9 var(--font-d);
  letter-spacing: -.045em; color: var(--brass-lit);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fact__t {
  margin: 0; max-width: 34ch;
  font: 800 var(--fs-xl)/1.18 var(--font-d);
  letter-spacing: -.02em; color: var(--on);
}
.fact__src { margin: 0; max-width: none; font-size: var(--fs-sm); line-height: 1.45; color: var(--on-2); }
@media (max-width: 720px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact {
    grid-template-rows: auto auto auto; align-items: start;
    grid-template-columns: minmax(0, 1fr); grid-template-columns: subgrid;
  }
  .fact__v, .fact__t, .fact__src { grid-column: 1; }
  .fact__t { grid-row: 2; }
  .fact__src { grid-row: 3; }
}

/* Набора «Сколько отзывов нужно карточке» (шкала порога и коридора) больше нет:
   заказчик убрал его 2026-09-11 — «просто убери». Стили ушли вместе с ним. */

/* ---------- 5 · три канала — световой короб ---------- */

.channels { padding: calc(clamp(56px, 9vw, 150px) * var(--density, 1)) 0 !important; }
.lightbox {
  position: relative;
  border-radius: var(--r-box);
  background: var(--navy-2);
  padding: clamp(30px, 4vw, 68px);
  /* обрезка нужна самому эффекту: свечение живёт внутри короба, а не вокруг него */
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.55), 0 44px 84px -46px rgba(0,0,0,.6);
}
.lightbox__in { position: relative; z-index: 2; }
.lightbox__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 78% at 50% 0%, rgba(194,165,107,.20), transparent 66%);
}
/* Кромка короба. Свет уходит внутрь панели (inset), а не висит цветным нимбом
   снаружи: снаружи короб отбрасывает обычную нейтральную тень со смещением. */
.lightbox::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  border: 2px solid var(--brass);
  box-shadow: inset 0 2px 52px -14px rgba(228,206,156,.5);
}

/* Авторский момент: короб зажигается один раз, слева направо. Повторов нет. */
.lightbox[data-reveal-state="out"]::after { clip-path: inset(0 100% 0 0); opacity: .3; }
.lightbox[data-reveal-state="out"] .lightbox__glow { opacity: 0; }
.lightbox[data-reveal-state="in"]::after { animation: ignite 900ms var(--ease-out) both; }
.lightbox[data-reveal-state="in"] .lightbox__glow { animation: warmup 1200ms 140ms var(--ease) both; }

@keyframes ignite {
  0%   { clip-path: inset(0 100% 0 0); opacity: .3; filter: blur(3px); }
  58%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0);   opacity: 1;  filter: blur(0); }
}
@keyframes warmup { from { opacity: 0; } to { opacity: 1; } }

.channels .lead--on { margin-top: 22px; max-width: 62ch; }
/* «Три источника клиентов» — одной строкой на любой ширине, правка заказчика
   2026-09-11: кегль подгоняет `vitrina.js`, если строка не влезает. */
.channels .h-sec { white-space: nowrap; }

/* Три луча сходятся в одну карточку: три источника клиентов сразу, а не один.
   Луч своего канала разгорается, когда курсор или клавиатура доходят до колонки. */
.beams { position: relative; margin: clamp(34px, 3.6vw, 56px) 0 0; height: clamp(96px, 11vw, 168px); }
.beams__svg { display: block; width: 100%; height: 100%; }
.beam { opacity: .45; transition: opacity 240ms var(--ease), stroke-width 240ms var(--ease); }
.beam-end { opacity: .5; transition: opacity 240ms var(--ease), r 240ms var(--ease); }
.beams__hub {
  position: absolute; left: 50%; top: -22px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brass); color: var(--navy);
  border-radius: var(--r-pill); padding: 12px 20px;
  font: 600 var(--fs-sm)/1 var(--font-t); white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(228,206,156,.8);
}
.lightbox:has(.channel:nth-child(1):hover) .beam--1,
.lightbox:has(.channel:nth-child(1):focus-within) .beam--1,
.lightbox:has(.channel:nth-child(2):hover) .beam--2,
.lightbox:has(.channel:nth-child(2):focus-within) .beam--2,
.lightbox:has(.channel:nth-child(3):hover) .beam--3,
.lightbox:has(.channel:nth-child(3):focus-within) .beam--3 { opacity: 1; stroke-width: 4; }
.lightbox:has(.channel:nth-child(1):hover) .beam-end--1,
.lightbox:has(.channel:nth-child(1):focus-within) .beam-end--1,
.lightbox:has(.channel:nth-child(2):hover) .beam-end--2,
.lightbox:has(.channel:nth-child(2):focus-within) .beam-end--2,
.lightbox:has(.channel:nth-child(3):hover) .beam-end--3,
.lightbox:has(.channel:nth-child(3):focus-within) .beam-end--3 { opacity: 1; r: 7px; }

.channels__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(34px, 4vw, 56px);
}
/* Каждый канал — на своей врезке короба: «три карточки» — выбор заказчика в панели
   твиков 2026-09-11. Колонки с линейкой сверху остались в панели вторым решением. */
.channel {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-box);
  background: rgba(244,241,234,.05);
  box-shadow: inset 0 0 0 1px var(--brass-line-on);
}
.channel h3 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.024em; color: var(--brass); }
.channel p { color: var(--on-2); margin: 12px 0 0; font-size: var(--fs-base); }
.channels__out {
  margin: clamp(32px, 4vw, 52px) 0 0; max-width: 74ch;
  border-left: 1px solid var(--brass);
  padding: 4px 0 4px 22px;
  color: var(--on); font-size: var(--fs-base);
}
@media (max-width: 820px) { .channels__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 5 · услуги ----------
   Устройство выбрано заказчиком 2026-09-22 по присланному им видео чужого сайта:
   тёмно-синий короб, шапка-полоса с номером и названием, под ней подводка, короб
   «Что входит» с галочками через линейки, внизу золотая полоса — цены в ряд и
   кнопка во всю ширину под ними.
   Раскладка одна на все ширины: порядок строго сверху вниз, двух колонок в теле
   карточки нет. На компьютере меняются только кегль и поля — «один в один, как на
   телефоне, только крупнее», его прямые слова.
   Между карточками 72 px на компьютере: прежние 16 глаз не читал как паузу, и три
   тёмных короба на светлом поле слипались в одно пятно. */

.services__list { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 44px; }
.service {
  position: relative; border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  background-color: var(--navy);
  background-image: linear-gradient(160deg, var(--navy-2), rgba(11,25,48,0));
  box-shadow: inset 0 0 0 1px var(--brass-line-on), 0 20px 44px -28px rgba(11,25,48,.6);
}
/* Шапка-полоса. Линейка снизу отбивает её от тела карточки. */
.service__say {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; min-width: 0;
  padding: 18px 20px; box-shadow: inset 0 -1px 0 var(--brass-line);
}
.service__n {
  font: 800 2.2rem/1 var(--font-d); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: rgba(244,241,234,.42);
}
.service h3 {
  font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.02em; font-weight: 800;
  margin: 0 auto 0 0; color: var(--on); min-width: 0;
}
.service__verb {
  margin: 0; padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .04em;
  color: var(--brass-lit); box-shadow: inset 0 0 0 1px var(--brass);
}

.service__body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  padding: 20px; align-content: start; justify-items: start;
}
/* Строка не тянется во всю ширину короба: длиннее примерно 90 знаков её читать
   тяжело — глаз теряет начало следующей. Короб при этом остаётся широким. */
.service__sum { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--on-2); max-width: 74ch; }

.service__box {
  display: grid; gap: 12px; width: 100%;
  padding: 16px 17px; border-radius: 16px;
  background: rgba(228,206,156,.07); box-shadow: inset 0 0 0 1px var(--brass-line);
}
.service__cap {
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass);
}
.service__does { list-style: none; margin: 0; padding: 0; display: grid; }
/* Поля у всех строк одинаковые, выравнивание по центру: тогда текст сидит по
   середине между линейками, а галочка стоит напротив его середины, сколько бы
   строк он ни занял. */
.service__does li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  align-items: center; padding: 13px 0;
}
.service__does li + li { border-top: 1px solid rgba(194,165,107,.2); }
.service__does span { font: 600 var(--fs-base)/1.4 var(--font-t); color: var(--on); max-width: 78ch; }
.service__tick { width: 22px; height: 22px; display: grid; place-items: center; color: var(--brass); }
.service__tick .ic { width: 18px; height: 18px; }
/* Пометка — не пункт работы, а мера услуги: без галочки и латунью. */
.service__does li.service__note { grid-template-columns: minmax(0, 1fr); }
.service__note span { color: var(--brass-lit); font-weight: 800; }

/* Зона покупки: цены в ряд, кнопка во всю ширину под ними. */
.prices {
  background-color: var(--brass);
  background-image: linear-gradient(135deg, var(--brass-lit), rgba(194,165,107,0));
  padding: 18px 20px 20px; display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.price { display: grid; gap: 6px; min-width: 0; }
.price + .price { padding-left: 16px; box-shadow: inset 1px 0 0 rgba(11,25,48,.22); }
.price__where {
  font: 600 var(--fs-xs)/1.25 var(--font-t); letter-spacing: .06em;
  text-transform: uppercase; color: rgba(11,25,48,.86);
}
.price__sum {
  font: 800 clamp(1.6rem, 6.4vw, 2.1rem)/1 var(--font-d); letter-spacing: -.035em;
  color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* «/мес» — мельче суммы, чтобы цифра оставалась главной (вариант A, выбор заказчика
   2026-09-24). С припиской «17 200 ₽/мес» на узком телефоне шире колонки, поэтому кегль
   суммы ограничен ещё и шириной своей колонки — см. .price { container-type }. */
.price__per { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: .12em; }
.price { container-type: inline-size; }
.price__sum { font-size: min(clamp(1.6rem, 6.4vw, 2.1rem), 19cqi); }
/* Кнопка в золотой зоне — тёмная: латунная на латуни не читалась бы. */
.prices .service__go {
  grid-column: 1 / -1; margin: 0;
  background: var(--navy); color: var(--brass-lit); box-shadow: inset 0 0 0 1px var(--navy);
}
.prices .service__go:hover { background: var(--navy-2); }

/* Жёлтой приписки под ценами (.pricenote) больше нет: заказчик убрал её 2026-09-22.
   Факт FACTS.priceNote остался — он правда об услугах, но на странице не выводится. */

@media (min-width: 900px) {
  .services__list { gap: 72px; }
  .service__say { padding: 22px 30px; gap: 24px; }
  .service h3 { font-size: var(--fs-xl); }
  .service__body { padding: 26px 30px; gap: 20px; }
  .service__sum { font-size: var(--fs-body); }
  .service__box { padding: 20px 22px; gap: 14px; }
  .service__does li { padding: 15px 0; }
  .service__does span { font-size: var(--fs-body); }
  .prices { padding: 24px 30px 28px; gap: 20px; }
  .price + .price { padding-left: 30px; }
  .price__sum { font-size: min(2.4rem, 19cqi); }
  .price__where { font-size: var(--fs-sm); }
}

/* ---------- 6 · шаги ----------
   Устройство перенесено с видео, которое прислал заказчик 2026-09-21: лента с
   номерами, у каждого шага своя карточка, статус плашкой в правом верхнем углу,
   внутри кусок интерфейса. Третий шаг — панель с растущим графиком и тремя
   плитками, копия шестой карточки того блока.
   Тёмно-синей таблички здесь больше нет: следом идёт тёмное табло «До и после»,
   и два тёмных блока подряд сливались в одно пятно.
   Состояние «доехало» берём у reveal.js — он и так метит `[data-reveal]` своим
   `data-reveal-state`; второго наблюдателя заводить не за чем. Базовым считаем
   конечное состояние, спрятано всё в `[data-reveal-state="out"]`: при выключенном
   JS атрибута не появится вовсе и страница покажет шаги целиком. */

/* Круглые пятна света — тот цвет, которого блоку не хватало. Рисуем фоном секции,
   а не узлами: узел с `right: -14%` торчал бы за правый край страницы. */
.steps {
  background-image:
    radial-gradient(46% 34% at 6% 16%, rgba(194,165,107,.30), rgba(194,165,107,0) 68%),
    radial-gradient(38% 30% at 97% 56%, rgba(126,98,41,.14), rgba(126,98,41,0) 68%),
    radial-gradient(34% 26% at 34% 100%, rgba(11,25,48,.08), rgba(11,25,48,0) 70%);
}
.steps__list {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 26px);
}
.step {
  position: relative; display: grid;
  grid-template-columns: 44px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px);
  align-items: center;
}
/* Нить порядка работ. Одна пара псевдоэлементов на ряд: бледная по всей высоте,
   латунная поверх неё — пройденная часть. Низ уходит в зазор до следующего ряда,
   иначе нить рвалась бы между карточками. */
.step::before, .step::after {
  content: ''; position: absolute; left: 21px; top: 0;
  bottom: calc(-1 * clamp(16px, 2vw, 26px)); width: 2px;
}
.step::before { background: var(--brass-line); }
.step::after {
  background: linear-gradient(180deg, var(--brass), var(--brass-ink));
  transform-origin: top center; transition: transform 700ms var(--ease-out);
}
/* У последнего ряда нить кончается не в зазоре, а у нижней кромки карточки:
   оборванная на полпути линия выглядела недоделанной. */
.step:last-child::before, .step:last-child::after { bottom: 0; }
.step[data-reveal-state="out"]::after { transform: scaleY(0); }

.step__n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; padding: 12px; border-radius: 50%; display: grid; place-items: center;
  line-height: 1; text-align: center;
  background: var(--brass); color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 7px rgba(194,165,107,.12);
  font: 800 var(--fs-xs)/1 var(--font-d); font-variant-numeric: tabular-nums;
  transition: background-color 320ms var(--ease), color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.step[data-reveal-state="out"] .step__n {
  background: var(--paper); color: var(--brass-ink);
  box-shadow: inset 0 0 0 2px var(--brass-line);
}

.step__card {
  position: relative; border-radius: 24px; padding: clamp(20px, 2.4vw, 30px);
  display: grid; gap: 12px; align-content: start;
  background: linear-gradient(160deg, var(--plate), var(--paper));
  box-shadow: inset 0 0 0 1px var(--brass-line), 0 16px 34px -26px rgba(11,25,48,.34);
}
.step__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.step h3 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--ink); }
.step p { color: var(--ink-2); margin: 0; max-width: 52ch; }
/* Плашка статуса как в видео: залитая, в правом верхнем углу карточки. */
.step__term {
  flex: none; display: inline-flex; align-items: center; margin: 0; border: 0;
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--brass); color: var(--navy);
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .03em; white-space: nowrap;
  font-variant-numeric: tabular-nums; justify-self: start;
}

/* ---------- кусок интерфейса внутри шага ---------- */

.step__mock {
  margin-top: 2px; padding: 14px; border-radius: 18px;
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: 9px; min-width: 0;
}
.step__cap { font: 600 var(--fs-xs)/1 var(--font-t); color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.step__field {
  padding: 12px 14px; border-radius: 10px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--fs-sm);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Отметка появляется не сразу, а когда шаг доехал: маленькое событие, ради
   которого блок и затевался. */
.step__ok {
  display: inline-flex; align-items: center; gap: 8px; color: var(--brass-ink);
  font: 600 var(--fs-sm)/1.2 var(--font-t);
  transition: opacity 320ms var(--ease) 320ms, transform 320ms var(--ease) 320ms;
}
.step[data-reveal-state="out"] .step__ok { opacity: 0; transform: translateY(4px); }
.step__ok svg { width: 15px; height: 15px; }
.step__rows { display: grid; gap: 7px; }
.step__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 12px 14px; border-radius: 10px; font-size: var(--fs-sm);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2);
  transition: background-color 380ms var(--ease) 260ms, box-shadow 380ms var(--ease) 260ms, color 380ms var(--ease) 260ms;
}
.step__row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step__row--on { background: var(--brass-wash); box-shadow: inset 0 0 0 1px var(--brass-line); color: var(--ink); font-weight: 600; }
.step[data-reveal-state="out"] .step__row--on {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-weight: 400;
}
.step__tick {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brass); color: var(--navy);
  display: grid; place-items: center; flex: none;
  transition: opacity 260ms var(--ease) 420ms, transform 260ms var(--ease-out) 420ms;
}
.step[data-reveal-state="out"] .step__tick { opacity: 0; transform: scale(.6); }
.step__tick svg { width: 11px; height: 11px; }

/* ---------- третий шаг: текст слева, панель справа ---------- */

.step__say { display: grid; gap: 12px; align-content: center; }
.step__panel {
  position: relative; overflow: hidden;
  padding: clamp(16px, 1.8vw, 22px); border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(228,206,156,.55), rgba(228,206,156,0) 58%),
    linear-gradient(165deg, var(--plate), var(--brass-wash));
  box-shadow: inset 0 0 0 1px var(--brass-line);
  display: grid; gap: clamp(14px, 1.6vw, 20px); min-width: 0;
}
@media (min-width: 900px) {
  .step__card--split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .step__card--split .step__term {
    position: absolute; z-index: 2;
    top: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px);
  }
}

/* ---------- график: копия линии из видео ----------
   Кривая с горизонтальной касательной в каждом узле — отсюда её волна. Рисуется
   прочерчиванием штриха, точки вспыхивают по очереди вслед за линией: обе величины
   раскладку не считают, кадр стоит дёшево. Штрих меряем в единицах рисунка, без
   non-scaling-stroke: толщина, радиусы и длина штриха масштабируются вместе с
   шириной, и пропорции держатся на любой ширине сами. */

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: rgba(20,24,31,.12); stroke-width: .8; }
.chart__line {
  fill: none; stroke: url(#chart-brass); stroke-width: 3.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 420); stroke-dashoffset: 0;
  transition: stroke-dashoffset 1500ms var(--ease-out) 200ms;
  filter: drop-shadow(0 0 4px rgba(194,165,107,.4));
}
.step[data-reveal-state="out"] .chart__line { stroke-dashoffset: var(--len, 420); }
.chart__dot {
  fill: #A8863F; transform-origin: center; transform-box: fill-box;
  filter: drop-shadow(0 0 3px rgba(194,165,107,.5));
  transition: opacity 260ms var(--ease) var(--in, 0ms), transform 300ms var(--ease-out) var(--in, 0ms);
}
.step[data-reveal-state="out"] .chart__dot { opacity: .3; transform: scale(.5); filter: none; transition-delay: 0ms; }
.chart__dot--last { fill: var(--brass-ink); }

/* ---------- три плитки с числами ---------- */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  padding: 14px; border-radius: 14px; min-width: 0;
  background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px var(--brass-line);
  display: grid; gap: 3px; align-content: start;
}
.tile__val {
  font: 800 clamp(1.45rem, 2.4vw, 1.85rem)/1 var(--font-d);
  color: var(--brass-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tile__key { font: 600 var(--fs-xs)/1.25 var(--font-t); color: var(--ink); }

@media (max-width: 760px) {
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .step__card { border-radius: 20px; }
  .step__head { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
}
/* На телефоне плитки в ряд не живут: колонка в треть экрана рвёт «посетителей»
   пополам. Коробки снимаем совсем — тройка разворачивается списком через тонкую
   линейку: число прижато к одной черте, слова начинаются с одного места, и слово
   стоит по середине числа, а не на его базовой линии (выбор заказчика 2026-09-22;
   по базовой линии подпись читалась приклеенной к низу крупной цифры). */
@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tile {
    grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: 12px; padding: 11px 0; border-radius: 0;
    background: none; box-shadow: none; border-top: 1px solid var(--brass-line);
  }
  .tile:first-child { border-top: 0; padding-top: 2px; }
  .tile:last-child { padding-bottom: 2px; }
  .tile__val { justify-self: end; font-size: 1.55rem; }
  .tile__key { font-size: var(--fs-base); }
}

/* Блока «7 · опоры» больше нет: заказчик убрал его целиком 2026-09-11. */

/* ---------- 9 · отчётность: панель короба ----------
   Пять мест выдачи — пять световых ячеек панели. Яркость и длина трубки —
   доля трафика этого места. Строка «Ваша точка» одна и переезжает с пятого
   места на первое; двух нарисованных состояний рядом здесь нет, потому что
   расчёт показывает именно перемещение. Слева у каждой ячейки оставлена
   пустая полоса — это дорожка, по которой строка ходит. */

.board {
  margin-top: clamp(30px, 3.5vw, 48px);
  background: var(--navy); color: var(--on);
  border-radius: var(--r-box);
  padding: clamp(20px, 2.6vw, 34px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.board__head {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-items: center; justify-content: space-between;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.board__lead { margin: 0; color: var(--on-2); font-size: var(--fs-base); max-width: 48ch; }
/* Переключатель без общей обоймы: заливка обоймы прижимала бы надписи кнопок
   к своей границе, а поля обоймы прибавили бы к 44 px цели ещё вдвое. */
.board__ctl { display: flex; gap: 8px; flex: none; }
.board__btn {
  min-height: 44px; padding: 12px 20px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--on-2);
  box-shadow: inset 0 0 0 1px var(--line-on);
  font: 600 var(--fs-base)/1.2 var(--font-t); cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.board__btn:hover { color: var(--on); }
.board__btn[aria-pressed="true"] { background: var(--brass); color: var(--navy); }

.board__cells { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
/* Колбы в ячейках — «панель с колбами», выбор заказчика в панели твиков 2026-09-11.
   Панель без колб осталась там вторым решением. Первая колонка сетки — дорожка, по
   которой ездит «Ваша точка». */
.board__cell {
  display: grid;
  /* Колонка доли — по своему содержимому, сжимается полоска: при фиксированных 140 px
     «34% посетителей» на крупном экране вылезало за плашку (жалоба заказчика 2026-09-16). */
  grid-template-columns: 132px 92px minmax(0, 1fr) max-content;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(244,241,234,.04);
  box-shadow: inset 0 0 0 1px var(--line-on);
  transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.board__place { grid-column: 2; font-size: var(--fs-base); color: var(--on-2); font-variant-numeric: tabular-nums; }
.board__tube {
  grid-column: 3;
  height: 12px; border-radius: var(--r-pill);
  background: rgba(6,14,28,.55);
  box-shadow: inset 0 0 0 1px var(--line-on);
  overflow: hidden;
}
.board__tube i {
  display: block; height: 100%;
  width: calc(var(--lit, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(194,165,107,.5), var(--brass-lit));
  opacity: calc(.4 + .6 * var(--lit, 0));
}
.board__share {
  grid-column: 4;
  font: 600 var(--fs-base)/1.2 var(--font-t); color: var(--brass-lit);
  text-align: right; font-variant-numeric: tabular-nums;
  /* «34% посетителей» — одной строкой, правка заказчика 2026-09-15. */
  white-space: nowrap;
}
.board__cell[data-you] {
  background: rgba(194,165,107,.13);
  box-shadow: inset 0 0 0 1px var(--brass-line);
}
/* Чужие места показывают свою долю тем же способом — только тише, чтобы ваша
   ячейка оставалась главной, а не тонула в пяти одинаковых колбах. */
.board__cell:not([data-you]) .board__tube i {
  background: linear-gradient(90deg, rgba(194,165,107,.28), rgba(194,165,107,.5));
  opacity: calc(.4 + .3 * var(--lit, 0));
}
.board__cell:not([data-you]) .board__share { color: var(--on-2); opacity: .62; }

/* Одна строка, которая действительно едет. */
.board__you {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--h, 52px);
  transform: translate3d(0, var(--y, 0px), 0);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--brass-lit);
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 14px;
  pointer-events: none;
  /* Едет только трансформой. Высоту строка берёт от ячейки сразу, без перехода:
     анимация `height` — это раскладка на каждом кадре, а не композитинг. */
  transition: transform 640ms var(--ease-out);
}
.board__you-t {
  font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); background: var(--brass-lit);
  border-radius: var(--r-pill); padding: 12px 14px;
}

.board__live { margin: 18px 0 0; color: var(--on); font-size: var(--fs-base); font-weight: 600; }

@media (max-width: 900px) {
  /* На телефоне «ваша точка» встаёт над строкой, а не слева от неё: сверху
     оставлена полоса ровно под высоту пилюли, иначе она легла бы на номер места. */
  /* Номер места — по своей ширине, доле — всё остальное: при крупном системном шрифте
     «посетителей» уходит на вторую строку внутри плашки, а не вылезает за её край
     (жалоба заказчика 2026-09-16). Одна строка обязательна только на ПК. */
  .board__cell {
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 58px; row-gap: 12px; column-gap: 14px;
  }
  .board__place { grid-column: 1; white-space: nowrap; }
  .board__share { grid-column: 2; white-space: normal; }
  .board__tube { grid-column: 1 / -1; }
  .board__you { align-items: flex-start; padding: 8px 0 0 12px; }
}

/* Что меняется в карточке по тому же расчёту — и что в нём не двигалось. */
/* «Что меняется в карточке» — одно тёмно-синее табло во всю ширину, пять пар в ряд:
   «табло» — выбор заказчика в панели твиков 2026-09-11. Короба «Что в отчёте» рядом
   больше нет, и пары получили всё место. Табло — это скруглённая обойма из ячеек, у самой
   обоймы заливки нет: латунная линейка между ячейками нарисована тенью соседней ячейки.
   У ячейки подпись сверху, «было → стало» снизу, «стало» латунью и крупно; рейтинг —
   смысловая вершина, он крупнее прочих. */
.reporting__grid { margin-top: clamp(30px, 3.5vw, 48px); }
.deltas__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border-radius: var(--r-box); overflow: hidden;
  box-shadow: var(--shadow-box);
}
.delta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--navy); color: var(--on);
}
.delta + .delta { box-shadow: inset 1px 0 0 var(--brass-line-on); }
.delta__label { font: 600 var(--fs-xs)/1.25 var(--font-t); letter-spacing: .08em; text-transform: uppercase; color: var(--on-2); }
.delta__pair { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-variant-numeric: tabular-nums; }
.delta__was { color: var(--on-2); font-size: var(--fs-base); }
.delta__ic { color: var(--brass); align-self: center; }
.delta__now { font: 800 var(--fs-2xl)/1 var(--font-d); letter-spacing: -.03em; color: var(--brass-lit); }
.delta[data-kind="rating"] .delta__now { font-size: clamp(2rem, 3vw, 2.8rem); }

/* Белая табличка — форма заявки. Короба «Что в отчёте» больше нет, и его стили ушли с ним. */
.plate { background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-box); padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--shadow-plate); }

/* ---------- 9 · разбор и форма ---------- */

/* Весь блок разбора — тёмно-синий короб внутри акцентной секции: «тёмный короб» —
   выбор заказчика в панели твиков 2026-09-11. Текст внутри перекрашен здесь же;
   форма заявки остаётся белой табличкой на коробе. */
.audit__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
  width: min(calc(100% - 2 * clamp(12px, 3vw, 44px)), 1380px);
  background: var(--navy); color: var(--on);
  border-radius: var(--r-box); padding: clamp(26px, 4vw, 60px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.audit__say .h-sec { color: var(--on); }
.audit__say .sub, .audit__say .note { color: var(--on-2); }
/* Пять пунктов разбора — сжатый список с галочками, а не нумерованная простыня:
   заказчик назвал прежнюю подачу нечитабельной. Порядок здесь ничего не значит,
   поэтому и номеров нет. */
.audit__list {
  margin: clamp(24px, 2.6vw, 34px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 22px;
}
.audit__list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  color: var(--on); font-size: var(--fs-base); line-height: 1.42;
}
.audit__tick {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: var(--navy);
}
.audit__tick .ic { width: 15px; height: 15px; }
.audit__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: clamp(26px, 3vw, 34px) 0 18px; }
.audit__meta dt { font: 600 var(--fs-xs)/1 var(--font-t); letter-spacing: .1em; text-transform: uppercase; color: var(--on-2); margin-bottom: 6px; }
.audit__meta dd { margin: 0; font-weight: 600; font-size: var(--fs-base); color: var(--on); }

.audit__form { background: var(--plate); }
.f { margin-bottom: 18px; }
.f label { display: block; font-weight: 600; font-size: var(--fs-base); margin-bottom: 7px; color: var(--ink); }
.f input[type="text"], .f input[type="tel"], .f input[type="url"] {
  width: 100%; min-height: 50px;
  border: 1px solid var(--line); border-radius: var(--r-plate);
  background: var(--paper); color: var(--ink);
  padding: 12px 15px; font: 400 var(--fs-base)/1.4 var(--font-t);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.f textarea {
  width: 100%; min-height: 88px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-plate);
  background: var(--paper); color: var(--ink);
  padding: 12px 15px; font: 400 var(--fs-base)/1.4 var(--font-t);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.f textarea:focus { background: var(--plate); border-color: var(--ox); }
.f textarea[aria-invalid="true"] { border-color: var(--ox); background: rgba(94,29,40,.05); }
.f textarea::placeholder { color: #5F6874; }
/* Вкладки «Есть карточка / Нет карточки» над полем ссылки (выбор заказчика 2026-09-24). */
.cardtabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px;
  border-radius: 12px; background: var(--paper-2);
}
.cardtabs__b {
  min-height: 44px; padding: 12px 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-2); font: 600 var(--fs-sm)/1.2 var(--font-t);
}
.cardtabs__b[aria-pressed="true"] { background: var(--plate); color: var(--ink); box-shadow: 0 1px 3px rgba(20,24,31,.12); }
.cardtabs__b:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }
.f input::placeholder { color: #5F6874; }
/* Шаблон номера за «+7»: слой поверх поля с теми же полями и шрифтом. Набранная часть
   прозрачна (её показывает само поле), остаток — бледный. Слой не ловит нажатий. */
.f__phone { position: relative; }
.f__ghost {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; padding: 0 16px;
  font: 400 var(--fs-base)/1.4 var(--font-t); white-space: pre;
}
.f__ghost::before { content: attr(data-typed); color: transparent; }
.f__ghost::after { content: attr(data-rest); color: var(--ink-ghost); }
.f input:hover { border-color: rgba(20,24,31,.28); }
.f input:focus { background: var(--plate); border-color: var(--ox); }
.f input[aria-invalid="true"] { border-color: var(--ox); background: rgba(94,29,40,.05); }

.check { position: relative; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; font-size: var(--fs-sm) !important; color: var(--ink-2) !important; line-height: 1.45; min-height: 44px; padding-top: 2px; }
/* Скрытый input растянут на всю подпись: цель касания — вся строка согласия,
   а не квадратик 22 px. */
/* `.f label { display: block }` сильнее, чем `.check`, и перебивал flex: квадратик
   вставал над текстом, а не слева от него, и gap с выравниванием молчали. Кегль и цвет
   выше уже отбиты у того же правила через !important — раскладку отбиваем
   специфичностью. Поймано 2026-09-23 на снимке согласия со ссылкой на политику. */
.f label.check { display: flex; }
.check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* Прозрачный чекбокс растянут на всю строку — по квадратику легко попасть, — но
   так он лёг и поверх ссылки на политику: нажатие по словам ставило галочку, а не
   открывало политику (замечание заказчика 2026-09-23). Ссылка встаёт над ним;
   остальной текст строки по-прежнему ставит галочку. */
.check__text a { position: relative; z-index: 1; }
.check__text { flex: 1 1 auto; }
.check__box {
  width: 22px; height: 22px; flex: none;
  border: 1px solid rgba(20,24,31,.3); border-radius: 6px;
  display: grid; place-items: center; background: var(--paper); color: transparent;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.check input:checked + .check__box { background: var(--ox); border-color: var(--ox); color: #FFF; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ox); outline-offset: 3px; }
.f--check { padding: 6px 0 4px; }

.form-error {
  margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--ox); background: rgba(94,29,40,.07);
  border-radius: 8px; padding: 12px 14px; max-width: none;
}
.note--stub { margin-top: 16px; }

.form-done { }
/* Цвет — явно: `.audit__form` сидит внутри `.audit__grid`, у которого фон навy и текст
   `--on`, а сама форма перекрашивает в белое только фон, не текст. Без своего цвета
   заголовок экрана «что дальше» рисовался светлым по белому — нашла самопроверка,
   которая впервые прогнала реальную отправку внутри настоящей страницы, а не в
   изолированной заготовке shared/self-check.html. */
.form-done__title { font: 800 var(--fs-lg)/1.25 var(--font-d); letter-spacing: -.026em; color: var(--ink); margin: 0 0 16px; }
.form-done__steps { margin: 0; padding-left: 1.2em; display: grid; gap: 14px; color: var(--ink-2); }
.form-done__steps b { display: block; color: var(--ink); font-weight: 600; }
.form-done__nowrap { white-space: nowrap; }
/* «Написать в Telegram сейчас» — для тех, кто не хочет ждать (правка 2026-09-24). */
.form-done__tg {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 22px;
  border-radius: var(--r-pill); background: var(--navy); color: var(--brass-lit);
  font: 600 var(--fs-base)/1.2 var(--font-t); text-decoration: none;
}
.form-done__tg:hover { background: var(--navy-2); }
.form-done__alt { margin: 8px 0 0; text-align: center; color: var(--ink-2); max-width: none; }
.form-done__alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.form-done__stub, .form-done__stub-next { font-size: var(--fs-base); color: var(--ink-2); margin-top: 12px; }

/* ---------- окно «Подключить услугу» (выбор заказчика 2026-10-13) ----------
   Белая табличка поверх затемнения цвета короба. Поля, согласие и экран «что дальше» —
   те же правила `.f`, `.check`, `.form-done`, что у формы разбора: окно не заводит
   второго вида формы. На телефоне — шторка снизу (в блоке телефона в конце файла). */
.svcdlg {
  width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  margin: auto; padding: 0; border: 0; border-radius: var(--r-box);
  background: var(--plate); color: var(--ink); box-shadow: var(--shadow-box);
  overscroll-behavior: contain;
}
.svcdlg::backdrop { background: color-mix(in srgb, var(--navy) 62%, transparent); }
.svcdlg[open] { animation: svcdlg-in 220ms var(--ease-out); }
@keyframes svcdlg-in { from { opacity: 0; transform: translateY(14px); } }
/* Страница под окном не прокручивается — иначе колесо мыши уводит её из-под окна. */
html:has(.svcdlg[open]) { overflow: hidden; }
.svcdlg__head { display: flex; gap: 14px; align-items: flex-start; padding: 26px 26px 0; }
.svcdlg__say { flex: 1 1 auto; min-width: 0; }
.svcdlg__h { margin: 0; font: 800 var(--fs-xl)/1.18 var(--font-d); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.svcdlg__sub { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); max-width: none; }
.svcdlg__x {
  flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; padding: 12px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: background-color 160ms var(--ease);
}
.svcdlg__x:hover { background: var(--paper-2); }
.svcdlg__x:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }
.svcdlg__x .ic { width: 18px; height: 18px; }
.svcdlg__body { padding: 20px 26px 26px; }

/* Отметки вариантов: строка — площадка и цена; отмеченная обведена тёмно-синим. */
.svcopts { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; display: grid; gap: 8px; }
.svcopts legend { padding: 0; margin-bottom: 7px; font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.f label.svcopt {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 52px; margin: 0; padding: 12px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-plate); background: var(--paper);
  font-weight: 400; transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.svcopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svcopt__box {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid rgba(20,24,31,.3); border-radius: 6px; background: var(--plate); color: transparent;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.svcopt input[type="radio"] + .svcopt__box { border-radius: 50%; }
.svcopt__where { font-weight: 600; color: var(--ink); }
.svcopt__sum { font: 800 var(--fs-md)/1.2 var(--font-d); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svcopt__sum .price__per { font-size: .72em; color: var(--ink-2); }
.f label.svcopt:hover { border-color: rgba(20,24,31,.28); }
.svcopt input:checked + .svcopt__box { background: var(--navy); border-color: var(--navy); color: var(--brass-lit); }
.f label.svcopt:has(input:checked) { border-color: var(--navy); background: var(--plate); box-shadow: inset 0 0 0 1px var(--navy); }
.svcopt input:focus-visible + .svcopt__box { outline: 2px solid var(--ox); outline-offset: 3px; }
/* После отправки уходят и подпись («оставьте контакты» уже неправда), и название услуги —
   заказчик 2026-10-13: «это не нужно». Услуга и так названа в плашке «Что дальше».
   В шапке остаётся только крестик; окно по-прежнему подписано скрытым заголовком. */
.svcdlg:has([data-form-done]) .svcdlg__say { visibility: hidden; height: 0; }
/* Крестик — в угол поверх экрана, иначе над ним пустая полоса высотой с кнопку.
   Модальный <dialog> — `position: fixed`, он и есть опора. */
.svcdlg:has([data-form-done]) .svcdlg__head { position: absolute; top: 0; right: 0; padding: 20px 20px 0 0; }
.svcdlg:has([data-form-done]) .svcdlg__body { padding-top: 30px; }
/* Экран «Заявка принята» — вариант B «По центру» (выбор заказчика 2026-10-13, артефакт
   «Экран «Заявка принята» ORYX»): большая галочка в латунном ореоле, заголовок крупно по
   центру, под ним срок ответа, ниже одна плашка «Что дальше». Галочка нарисована рамкой,
   а не глифом: глифов-иконок на сайте нет. Форма разбора внизу этого вида не получила. */
.svcdlg [data-kind="service"] { text-align: center; }
.svcdlg [data-kind="service"] .form-done__title {
  position: relative; display: grid; justify-items: center; row-gap: 22px;
  margin: 0 0 10px; font-size: var(--fs-2xl); line-height: 1.1;
}
.svcdlg [data-kind="service"] .form-done__title::before {
  content: ""; width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); box-shadow: 0 0 0 8px var(--brass-wash);
}
.svcdlg [data-kind="service"] .form-done__title::after {
  content: ""; position: absolute; left: 50%; top: 28px; width: 13px; height: 24px;
  border: solid var(--brass-lit); border-width: 0 3.5px 3.5px 0; transform: translate(-50%, -62%) rotate(45deg);
}
.form-done__lead { margin: 0 auto; max-width: 30ch; color: var(--ink-2); line-height: 1.5; }
.form-done__lead b { color: var(--ink); font-weight: 600; }
.form-done__next {
  margin: 18px 0 0; max-width: none; padding: 14px 16px; text-align: left;
  border-radius: var(--r-plate); background: var(--paper); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5;
}
.form-done__next b { display: block; margin-bottom: 2px; color: var(--ink); font-size: var(--fs-base); font-weight: 600; }
@media (max-width: 860px) { .audit__grid { grid-template-columns: 1fr; } }

/* ---------- 11 · вопросы ---------- */

.faq__list { margin-top: clamp(30px, 3.5vw, 48px); max-width: 88ch; }
.qa { border-top: 1px solid var(--brass-line); }
.qa:last-child { border-bottom: 1px solid var(--brass-line); }
.qa > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center;
  padding: 20px 0; min-height: 44px;
  font: 600 var(--fs-md)/1.4 var(--font-t);
  color: var(--ink);
  transition: color 160ms var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
/* Вопрос размечен H3 ради структуры страницы, но выглядит строкой вопроса, как
   раньше: общее правило заголовков (дисплейный вес 800) здесь не нужно. */
.qa__q { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
.qa > summary:hover { color: var(--ox); }
.qa__ic { width: 28px; height: 28px; color: var(--brass-ink); transition: transform 260ms var(--ease); }
.qa[open] .qa__ic { transform: rotate(45deg); }
.qa[open] .qa__ic .qa-v { opacity: 1; }
.qa__a { padding: 0 0 24px; }
/* ≈65 знаков в строке: при 74ch ответ на ПК шёл по 97 знаков — ревью 2026-09-15. */
.qa__a p { color: var(--ink-2); max-width: 60ch; }

/* ---------- 12 · финал и футер ---------- */

.closing { padding-bottom: calc(clamp(48px, 9vw, 150px) * var(--density, 1)) !important; }
/* Призыв стоит на световой панели — выбор заказчика в панели твиков 2026-09-11.
   Латунная кромка сверху разгорается при появлении: собственное движение секции с
   тех пор, как знак ORYX из подвала убран. */
.closing__top {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end;
  background: var(--navy-2); border-radius: var(--r-box);
  padding: clamp(26px, 3.4vw, 52px);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), 0 30px 70px -40px rgba(228,206,156,.55);
}
.closing__top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.closing__top[data-reveal-state="in"]::before,
.closing__top:not([data-reveal-state])::before { transform: scaleX(1); }
/* Подводки над кнопкой больше нет: формулировку условий заказчик назвал прямо
   в списке того, что писать не надо. Остались заголовок и кнопка. */
/* Колонка действия шириной с кнопку: фраза «Или напишите в Telegram» встаёт по центру
   кнопки, а не у левого края — правка заказчика 2026-09-16. */
.closing__do { display: grid; justify-items: center; max-width: 340px; }
.closing__do .btn { max-width: 340px; }
/* Второй способ связи прямо на финальном экране — тоже открытое место, не значение. */
.closing__tg { margin: 18px 0 0; color: var(--on-2); font-size: var(--fs-base); text-align: center; }
.closing__tg .ph { margin-top: 8px; }
/* Внутри фразы «Или напишите в Telegram» слово-ссылка набрано как сама фраза. */
.closing__tg .tel--msg { font-size: inherit; vertical-align: middle; }
.closing__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--brass-line-on);
}
.closing__cols p { color: var(--on-2); font-size: var(--fs-base); margin-bottom: 10px; }
/* «Связаться», «Разделы», «Реквизиты» — подписи, а не заголовки (SEO 2026-09-23:
   были H3 и засоряли структуру страницы). Вид прежний — правило абзацев выше их
   не перекрашивает. */
.closing__cols .h-min { font-size: var(--fs-xs); color: var(--brass); margin-bottom: 16px; }
/* Реквизиты ИП: три строки вплотную друг к другу. Отдельного вида у последней больше
   нет — строку про орган регистрации заказчик убрал 2026-09-23, а ИНН должен читаться
   так же, как ОГРНИП над ним. */
.reqs p { margin-bottom: 4px; }
/* Ссылка на политику — своя строка под реквизитами, не бегущий текст: цель касания
   тянем до 44 px, как у остальных ссылок подвала (`.closing__nav a`), а не оставляем
   высотой в одну строку. */
.closing__cols p a { display: inline-flex; align-items: center; min-height: 44px; }

/* Русское название агентства — нижняя строка подвала, тише колонок (2026-10-22). */
.closing__brand {
  margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 20px; max-width: none;
  border-top: 1px solid var(--line-on); color: var(--on-2); font-size: var(--fs-sm);
}

/* Разделы страницы в подвале вместо «Где мы» — правка заказчика 2026-09-15. */
.closing__nav { display: grid; align-content: start; }
.closing__nav a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--on-2); font-size: var(--fs-base); text-decoration: none;
  transition: color 180ms var(--ease);
}
.closing__nav a:hover { color: var(--brass-lit); }
/* Знака ORYX внизу футера больше нет: заказчик убрал его 2026-09-11 — «вообще убери». */

/* ---------- согласие на cookie ----------
   Появляется, только когда в фактах есть номер счётчика Метрики (shared/consent.js).
   Тёмно-синий короб с латунной кромкой — тот же язык, что у коробов страницы.
   Выше шапки (50), ниже панели твиков (90): заказчик в панели баннер не теряет.
   На ПК — карточкой в правом нижнем углу (правка заказчика 2026-09-23): по центру
   снизу баннер ложился на главную кнопку первого экрана. На телефоне — во всю ширину.
   «Принять» и «Отклонить» одного размера, отказ тоже на виду — контуром, а не
   серой подписью: согласие, которое выманивают неравными кнопками, — не согласие. */
.consent {
  position: fixed; z-index: 60; right: 24px; bottom: 24px;
  width: min(400px, calc(100% - 48px));
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; padding: 20px 22px; border-radius: var(--r-box);
  background-color: var(--navy); color: var(--on);
  box-shadow: inset 0 0 0 1px var(--brass-line-on), var(--shadow-box);
}
.consent__text { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--on-2); }
.consent a { color: var(--brass-lit); }
.consent__do { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent__btn { min-height: 44px; min-width: 0; padding: 10px 16px; }
.consent__btn--no { background: transparent; color: var(--on); box-shadow: inset 0 0 0 1px var(--brass); }
.consent__btn--no:hover { background: rgba(228,206,156,.12); transform: translateY(-2px); }
.consent__btn--no:active { transform: translateY(1px) scale(.97); }
@media (max-width: 860px) {
  .closing__top { grid-template-columns: 1fr; align-items: start; }
  .closing__cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- свет короба: курсор — источник ----------
   Модуль `shared/glow.js` пишет позицию курсора и силу света; как это выглядит,
   решает мир. Здесь свет ложится на поверхность короба и разгорается по латунной
   кромке. Значения по умолчанию — ноль, поэтому без JS, на телефоне и при
   reduced-motion всё выглядит ровно так же, только не светится. */

[data-glow] { position: relative; }
[data-glow]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: calc(var(--glow-strength, 0) * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease);
  background: radial-gradient(210px 210px at var(--glow-x, 50%) var(--glow-y, 50%),
              rgba(194,165,107,.16), transparent 70%);
}
[data-glow] > * { position: relative; z-index: 1; }

/* Кромка канала — его верхняя линейка: она и разгорается. У услуги карточка
   стала коробом со скруглением и обрезкой, и линия над ней не видна: там по
   курсору разгорается обводка по периметру. */
.channel::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--brass); opacity: calc(var(--glow-strength, 0) * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease); pointer-events: none;
}
.service::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--brass);
  opacity: calc(var(--glow-strength, 0) * var(--glow-gain, 1) * .8);
  transition: opacity 260ms var(--ease);
}
.channel::after { background: var(--brass-lit); left: var(--r-box); right: var(--r-box); top: 0; }
.channel[data-glow]::before {
  background: radial-gradient(230px 230px at var(--glow-x, 50%) var(--glow-y, 50%),
              rgba(228,206,156,.13), transparent 70%);
}
/* У ячейки табло кромка идёт по всему периметру — это уже настоящий короб. */
.board__cell::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--brass-lit);
  opacity: calc(var(--glow-strength, 0) * .75 * var(--glow-gain, 1));
  transition: opacity 260ms var(--ease);
}

/* ---------- пламя главной кнопки ----------
   Свет живёт под поверхностью кнопки, а не нимбом вокруг неё. Пик яркости
   подобран так, чтобы белый текст под курсором держал 4.5:1 к подсвеченному
   оксбладу, а не тонул в тёплом пятне. */

.btn--ox[data-flame] {
  background-image: radial-gradient(150px 150px at var(--flame-x, 50%) var(--flame-y, 50%),
      rgba(232,212,168, calc(.26 * var(--flame-intensity, 0) * var(--glow-gain, 1))),
      rgba(194,165,107, calc(.10 * var(--flame-intensity, 0) * var(--glow-gain, 1))) 46%,
      rgba(194,165,107, 0) 74%);
}

/* ---------- движение ---------- */

/* Спецификация: появление секции — 200–400 мс. Дольше только авторский момент
   («зажигание» короба), и он появлением секции не является. */
[data-reveal] { --reveal-shift: 18px; --reveal-duration: 340ms; }
.hero__box[data-reveal] { --reveal-shift: 26px; --reveal-duration: 400ms; }
/* Нить порядка работ живёт в блоке шагов выше: с переносом устройства с видео
   она стала парой псевдоэлементов самого ряда, и второе описание здесь только
   перебивало бы первое. Наведение на шаг подсветку номера больше не меняет —
   номер и так горит латунью, как только шаг доехал. */


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  /* короб не зажигается, а просто горит */
  .lightbox::after, .lightbox[data-reveal-state] ::after { animation: none !important; clip-path: inset(0) !important; opacity: 1 !important; filter: none !important; }
  .lightbox[data-reveal-state="in"]::after, .lightbox[data-reveal-state="out"]::after { animation: none !important; clip-path: inset(0) !important; opacity: 1 !important; }
  .lightbox__glow, .lightbox[data-reveal-state] .lightbox__glow { animation: none !important; opacity: 1 !important; }
}

/* ---------- телефон ----------
   Правка заказчика 2026-09-11: на ПК и ноутбуке всё устраивает, «там ничего трогать не
   нужно», а на телефоне страница вдвое длиннее, чем надо, первый экран разрознен,
   текста — как в новостной статье. Поэтому всё ниже живёт только внутри этого запроса:
   ни одно правило не выходит за 720 px. Сокращение — выбор того, что показать на узком
   экране, а не удаление: на десктопе тот же текст стоит целиком.

   Вторым заходом (тот же день) заказчик выбрал в панели твиков решения для шести
   блоков: короб первого экрана на телефоне скрыт совсем, «Узнаёте себя» и «Три
   источника» идут каруселью с пояснениями, разбор — только формой. Услуги и «до/после»
   остались в положении «как сейчас». Выбор перенесён сюда, ручки ушли из панели. */
@media (max-width: 720px) {
  /* Поля секций плотнее — страница короче на несколько экранов. */
  main > section, footer[data-section] { padding: 40px 0; }
  .hero { padding-top: 28px !important; padding-bottom: 40px !important; }
  .channels { padding: 40px 0 !important; }
  .closing { padding-bottom: 40px !important; }
  .sub { margin-top: 10px; font-size: var(--fs-base); }

  /* Первый экран: собран плотнее — линейки по 14 px, а не по 28. */
  .hero__grid { row-gap: 24px; }
  .hero .hair { margin: 14px 0; }
  .hero .lead { font-size: var(--fs-base); line-height: 1.5; }
  /* Площадки — светлые ярлыки: тонкий контур и мелкая метка. Тёмные таблички
     перебивали кнопки — выбор заказчика 2026-09-11. */
  .hero__ships { gap: 8px; }
  .ship {
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
    padding: 12px 16px 12px 12px; gap: 8px; border-radius: var(--r-pill);
    font: 600 var(--fs-sm)/1.1 var(--font-t);
  }
  .ship__pin { width: 20px; height: 20px; border-radius: 50%; background: none; box-shadow: none; }
  .ship__pin .ic { width: 18px; height: 18px; }
  /* Заявка — во всю ширину, «Услуги и цены» — ссылкой под ней: выбор заказчика
     2026-09-11. Двух громоздких кнопок одна над другой, на которые он жаловался, нет. */
  .hero__do { flex-wrap: wrap; gap: 4px 10px; margin-top: 18px; }
  .hero__do .btn { min-width: 0; padding: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .hero__do .btn--ox { flex: 1 0 100%; min-height: 54px; font-size: var(--fs-base); }
  .hero__do .btn--line {
    flex: 1 0 100%; min-height: 44px; font-size: var(--fs-base);
    background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px;
  }
  .hero__do .btn--line:hover { background: none; color: var(--navy); transform: none; }

  /* Короба героя на телефоне нет: заказчик выбрал «только текст и кнопки» — карточка
     организации и виджеты остаются десктопу. */
  .hero__box { display: none; }

  /* Баннер cookie на телефоне — во всю ширину, текст над кнопками, кнопки поровну. */
  .consent { right: 12px; bottom: 12px; width: calc(100% - 24px); gap: 14px; padding: 16px; }

  /* «Узнаёте себя» — карусель: плашки листаются вбок, каждая с пояснением, и переход
     к услуге остаётся кнопкой. Выбор заказчика 2026-09-11. */
  .reasons__list {
    margin-top: 20px;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-right: -20px; padding-right: 20px; padding-bottom: 6px;
  }
  .reason {
    flex: 0 0 84%; scroll-snap-align: start;
    grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto 1fr;
    row-gap: 10px; padding: 16px;
  }
  .reason__lamp { width: 30px; height: 30px; }
  .reason h3 { font-size: var(--fs-md); }
  /* Текст — во всю ширину плашки; кнопка — латунная и прижата к низу, поэтому на всех
     плашках стоит на одной высоте. Подпись «Закрывается услугой» скрыта: кнопка называет
     одну услугу. Выбор заказчика 2026-09-11.
     Срез в четыре строки (`-webkit-line-clamp: 4`) убран 2026-09-22: третья причина в
     него не влезала и обрывалась многоточием. Обрезать текст плашки нечем — плашка
     тянется по самой длинной, все три становятся одной высоты. Проверка стережёт, что
     на 390 ни один абзац причины не подрезан. */
  .reason__body { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .reason p { font-size: var(--fs-base); margin-bottom: 14px; }
  /* По длине надписи, а не во всю ширину: стрелка стоит рядом со словами — правка
     заказчика 2026-09-11. */
  .reasons[data-tone] .reason .link {
    margin-top: auto; align-self: flex-start; gap: 10px;
    min-height: 48px; padding: 12px 18px; border: 0; border-radius: var(--r-pill);
    background: var(--brass); color: var(--navy); font-size: var(--fs-sm);
  }
  .reasons[data-tone] .reason .link:hover { background: var(--brass-lit); }
  .reason .link__pre { display: none; }

  /* «Решают по отзывам» — чуть мельче целиком: правка заказчика 2026-09-11. */
  .choice { margin-top: 20px; padding: 12px 18px; }
  .fact { padding: 16px 0; row-gap: 6px; }
  .fact:first-child { padding-top: 6px; }
  .fact:last-child { padding-bottom: 6px; }
  .fact__v { font-size: 2.3rem; }
  .fact__t { font-size: var(--fs-base); }
  .fact__src { font-size: var(--fs-sm); }

  /* Три источника — тоже карусель: подводка и канал за каналом со своим механизмом.
     Вывод про SEO остаётся десктопу. Схемы со ступицей и ветками на телефоне нет:
     над каруселью три ветки читались нелогично — выбор заказчика 2026-09-11. */
  .channels .lead--on { margin-top: 12px; font-size: var(--fs-base); }
  .beams { display: none; }
  /* Золотое свечение короба слабее: на телефоне короб казался светлым, и карточки
     каналов читались хуже — правка заказчика 2026-09-11. На десктопе свечение прежнее. */
  .lightbox__glow { background: radial-gradient(115% 60% at 50% 0%, rgba(194,165,107,.08), transparent 62%); }
  .lightbox::after { box-shadow: inset 0 2px 24px -14px rgba(228,206,156,.26); }
  .channels__grid {
    margin-top: 20px;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-right: -20px; padding-right: 20px; padding-bottom: 6px;
  }
  .channel { flex: 0 0 82%; scroll-snap-align: start; padding: 16px 18px; }
  .channel p { display: block; font-size: var(--fs-base); }
  .channels__out { display: none; }

  /* Услуги: карточка на телефоне та же, что на компьютере, — так её и выбрали
     2026-09-22. Подводка услуги здесь видна: прежде её прятали как «длинный текст»,
     но в утверждённой карточке она часть устройства. Жёлтой плашки про разницу
     в цене больше нет вовсе — заказчик убрал её 2026-09-22.
     Правку сроков и полей карточка держит сама, отдельных переопределений нет. */
  .services__list { margin-top: 20px; }

  /* До и после: подсказка над панелью и колбы опущены, ячейки короче. Строка «Ваша
     точка» держится подсветкой ячейки, её подпись остаётся для скринридера. Пары — по
     одной в строку: подпись слева, «было → стало» справа. */
  .board { padding: 14px; }
  .board__lead { display: none; }
  .board__head { margin-bottom: 12px; }
  .board__ctl { width: 100%; }
  .board__btn { flex: 1 1 0; padding: 12px; }
  .board__cell { padding: 12px 14px; row-gap: 0; }
  .board__tube { display: none; }
  .board__you-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .board__live { margin-top: 12px; font-size: var(--fs-base); }
  .reporting__grid { margin-top: 20px; }
  .deltas__list { grid-template-columns: minmax(0, 1fr); }
  .delta { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; }
  .delta + .delta { box-shadow: inset 0 1px 0 var(--brass-line-on); }
  .delta__now, .delta[data-kind="rating"] .delta__now { font-size: var(--fs-lg); }

  /* Разбор — только форма: заказчик выбрал убрать список пунктов на телефоне, форма
     заявки короба тоньше и плотнее. */
  .audit__grid { gap: 20px; padding: 20px 16px; }
  .audit__list, .audit__meta, .audit__say .note { display: none; }
  .audit__form { padding: 18px 16px; }
  .audit__form .h-min { margin-bottom: 12px; }
  .f { margin-bottom: 10px; }
  .f label { margin-bottom: 4px; font-size: var(--fs-sm); }
  .f input[type="text"], .f input[type="tel"], .f input[type="url"] { min-height: 46px; padding: 10px 14px; }
  .f__ghost { padding: 0 15px; }
  .note--stub { margin-top: 10px; font-size: var(--fs-sm); }

  /* Финал «Начнём с разбора» — по центру: на телефоне заголовок и кнопка стояли по
     левому краю и казались съехавшими — правка заказчика 2026-09-15. */
  .closing__top { justify-items: center; text-align: center; }
  .closing__do { display: grid; justify-items: center; width: 100%; }
  .closing__do .btn { margin-inline: auto; }

  /* Разделы в подвале — двумя колонками: четыре ссылки столбиком удлиняли страницу. */
  .closing__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

  /* Мелкий текст — не меньше 14 px: источники цифр, состав цены, ярлыки услуг и сроки
     шагов шли по 12,5 px — ревью 2026-09-15. */
  .service__verb { font-size: var(--fs-sm); letter-spacing: .06em; }
  .step__term { font-size: var(--fs-sm); }

  /* Точки под каруселями — ревью 2026-09-15: по краю следующей карточки листание
     угадывали не все. Кнопка — 44 px, точка внутри — рисунок. */
  .dots { display: flex; justify-content: center; margin-top: 2px; }
  .dots__b {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .dots__b::before {
    content: ''; width: 8px; height: 8px; border-radius: 4px;
    background: var(--on-2); opacity: .5;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), background-color 220ms var(--ease);
  }
  .dots__b[aria-current="true"]::before { background: var(--brass-lit); opacity: 1; transform: scaleX(2.4); }

  /* Окно «Подключить услугу» — шторка снизу во всю ширину: до кнопок достаёт большой палец. */
  .svcdlg {
    width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0;
    border-radius: var(--r-box) var(--r-box) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .svcdlg[open] { animation-name: svcdlg-up; }
  @keyframes svcdlg-up { from { transform: translateY(40px); opacity: 0; } }
  .svcdlg__head { padding: 20px 16px 0; }
  .svcdlg__body { padding: 16px 16px 20px; }
  .svcopts { margin-bottom: 12px; }
  .svcopts legend { margin-bottom: 4px; font-size: var(--fs-sm); }
  .f label.svcopt { min-height: 48px; padding: 10px 14px; gap: 10px; }
}