/*
   performa — styles.css · ОСНОВНОЙ СЛОЙ КОМПОНЕНТОВ
 Здесь — про этот файл.

   ПОРЯДОК СЛОЁВ: tokens.css → styles.css → adaptive.css → articles.css.
   Всё, что зависит от ШИРИНЫ экрана, живёт в adaptive.css, а не здесь.

   🔴 ПРАВИЛО, КОТОРОЕ ЗДЕСЬ НАРУШАЛИ ЧАЩЕ ВСЕГО
   Меняешь поведение компонента — УДАЛИ старое объявление, а не
   перекрывай новым. Шапку чинили четыре захода подряд именно потому,
   что слои копились: на прокрутке белое 0.90 у .hdr складывалось
   с белым 0.72 у .hdr__in, и «стекло» было глухой плашкой.
   И проверяй ВСЕ состояния компонента: :hover, .is-compact, .open —

   🔴 НЕ резать этот файл регуляркой по селектору: скрипт принял
   селектор ИЗ КОММЕНТАРИЯ за настоящий и оборвал соседний блок.
   Комментарии выкусывать до разбора, после правки — считать скобки.

   Единственный источник значений — css/tokens.css (подключается первым).

   Reference lock:
   · макро — макет Conscellence (утверждён клиентом): светлая база + тёмные
     блоки, ghost+solid в заголовке, тёмная строка-список с акцентным
     CTA-рядом внизу, нумерованные карточки 01/02/03 на волосяных линиях.
   · крафт — Metalab / Elementor / Pipe (Refero): крупная дисплейная
     типографика как главная иерархия, ИНВЕРСИЯ ПОВЕРХНОСТЕЙ вместо теней,
     волосяные линии, щедрый воздух, один насыщенный акцент.

   Анти-slop правила этого файла:
   · никаких трёх одинаковых скруглённых карточек с тенью — вместо них
     нумерованные ряды/асимметричные сетки на 1px-линиях;
   · никаких эмодзи — только инлайновые SVG-иконки одного веса (1.6);
   · тень только под тем, что реально «висит»; иерархия — инверсией фона;
   · крупные цифры — самостоятельный дизайн-объект, а не подпись.
*/

/* ---------- 1. ШРИФТЫ (self-host, WEB-СТАНДАРТ §3.1) ---------- */
@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/unbounded.woff2') format('woff2');
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/golos-text.woff2') format('woff2');
}
/*
 🔴 ОДИН ФАЙЛ НА СЕМЕЙСТВО (латиница+кириллица), без unicode-range.
   Раздельные сабсеты давали промежуточное состояние «латиница загружена,
   кириллица ещё нет»: Chrome перекладывал заголовок и обратно —
   CLS 0.14–0.28 на Slow-4G. Один файл = одно состояние = один swap.
*/

/*
 🔴 METRIC-MATCHED FALLBACK — против CLS от font-display:swap.
   size-adjust посчитан замером ширины строки при 100px:
     Unbounded 700  = 5847.7 / Arial 700 = 4472.5 → 130.8%
     Golos Text 400 = 4968.5 / Arial 400 = 4651.5 → 106.8%
*/
@font-face{
  font-family:'Unbounded Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:130.8%;
  ascent-override:78%;
  descent-override:20%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Golos Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:106.8%;
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
}

/* ---------- 2. RESET (WEB-СТАНДАРТ §1.2) ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  overflow-x:hidden;              /* §4.1: страховка на html, а не только body */
  scroll-behavior:auto;           /* §4.2: НЕ smooth — плавность делает JS */
  -webkit-text-size-adjust:100%;
  scroll-padding-top:104px;
}

body{
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  /*
 🔴 overflow-x:hidden ЗДЕСЬ делал body скролл-контейнером (overflow-y
     становился auto) и глушил position:sticky у всех потомков — липкие
     панели просто уезжали вместе со страницей. clip обрезает так же, но
     скролл-контейнера НЕ создаёт. От бокового скролла страницу держит
     overflow-x:hidden на html выше; гейт scrollTo(9999,0)→scrollX===0 это
     проверяет на каждой ширине.
*/
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /*
 🔴 НЕ включать здесь font-feature-settings со стилистическими сетами:
     ss01 у Unbounded — это ОБВЕДЁННЫЕ ЦИФРЫ, и «4 недели / 2–3 раза / 40–70%»
     превращались в «④ недели / ②–③ раза / ④⓪–⑦⓪%».
*/
}

img,video,svg{max-width:100%;display:block}
/*
 🔴 width/height в разметке — ПРЕЗЕНТАЦИОННЫЕ ПОДСКАЗКИ CSS.
   Без height:auto высота берётся из атрибута, а aspect-ratio игнорируется.
*/
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* §4.1 — глобальный пояс: авторский display больше не перебивает [hidden] */
[hidden]{display:none!important}

:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible{outline-color:var(--c-accent-text)}

::selection{background:var(--c-accent);color:var(--c-accent-ink)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. ИКОНКИ (единый вес, никаких эмодзи) ---------- */
.ico{
  width:1em;height:1em;
  flex:none;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/* ---------- 4. СЕТКА И РИТМ ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{padding-block:var(--section-y)}
section.sec-sm{padding-block:var(--section-y-sm)}

/*
 🔴 Стык двух секций С ОДИНАКОВЫМ полотном складывает padding-bottom и
   padding-top — зазор выходит ВДВОЕ шире шага ритма и читается как дыра
   (§4.1). Половиним обе стороны такого стыка: суммарно там ровно один шаг.
   Там, где полотно МЕНЯЕТСЯ (светлое → тёмное), паддинг остаётся полным —
   он работает внутренним полем цветного блока, а не зазором между секциями.
*/
section:not(.on-dark) + section:not(.on-dark){padding-top:calc(var(--section-y) * .5)}
section:not(.on-dark):has(+ section:not(.on-dark)){padding-bottom:calc(var(--section-y) * .5)}

/* Тёмная секция — утилита ВСЕГДА в паре с реальным тёмным фоном (§4.1). */
.on-dark{background:var(--c-dark);color:var(--c-on-dark)}
.on-dark p,.on-dark .lead{color:var(--c-on-dark-mut)}
.on-dark strong,.on-dark b{color:var(--c-on-dark)}
/*
 🔴 Правило цвета ссылок в контейнере обязано исключать кнопки и
   акцентные плашки — иначе оно перекрашивает их текст и роняет контраст
   (§4.1, «цвет ссылок подвала перекрашивает текст кнопки-CTA»).
   Здесь .row-cta лежит на ультрамариновой заливке: accent-text на ней = 2.03:1.
*/
.on-dark a:not(.btn):not(.btn-cta):not(.ccard):not(.ph){color:var(--c-accent-text)}

/* ---------- 5. ТИПОГРАФИКА ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
  /*
     Теперь переносим ТОЛЬКО по границам слов; за то, чтобы длинное русское
     слово влезло в колонку, отвечают размер (--fs-display) и max-width
     заголовка, а не дефис. break-word оставлен как последний предохранитель
     от горизонтального overflow на 320px.
*/
  hyphens:manual;
  -webkit-hyphens:manual;
  word-break:normal;
  overflow-wrap:break-word;
}
h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h1)}
h3{font-size:var(--fs-h3)}

.hi{color:var(--c-accent)}
.on-dark .hi{color:var(--c-accent-text)}

/*
   Обводка рисуется наружу от глифа и не входит в inline-бокс: первая буква
   обрезалась левым краем контейнера, а на стыке со сплошной частью строки
   контур наезжал на соседнее слово. Замена: тот же смысловой контраст «прошлое → наше»,
   но приглушённым цветом, а не обводкой. Ничего не обрезается и не наезжает
   ни на одной ширине.
*/
.ghost{
  color:var(--c-muted);
  opacity:.55;
}
.on-dark .ghost{color:var(--c-on-dark-mut);opacity:.7}

strong{font-weight:var(--fw-semibold)}
.lead{
  font-size:var(--fs-lg);
  color:var(--c-muted);
  max-width:64ch;
}
.lead strong{color:var(--c-ink)}
.on-dark .lead strong{color:var(--c-on-dark)}

/*
 ===== ШАПКА СЕКЦИИ: кикер + заголовок =====

   Роль разделителя взял на себя штрих перед кикером.
*/
.sh{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-bottom:var(--stack-md);
}
.sh__kicker{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--sp-3);
}
/* штрих-якорь: держит левый край шапки без номера секции */
.sh__kicker::before{content:"";width:24px;height:1px;flex:none;background:var(--c-accent)}
.on-dark .sh__kicker{color:var(--c-on-dark-mut)}
.on-dark .sh__kicker::before{background:var(--c-accent-text)}
.sh__title{max-width:30ch}
.sh--split .sh__title{max-width:34ch}
.sh__lead{margin-top:var(--sp-4)}
.sh__aside{align-self:end;justify-self:start}

/* Стрелка-глиф у заголовка (приём из reference lock) */
.sh__arrow{
  width:.7em;height:.7em;
  color:var(--c-accent);
  display:inline-block;
  vertical-align:.05em;
  margin-left:.15em;
}

/*
   6a. Компоновка хаотичная. „Конверсия / Средний чек /
   LTV / Отток“ болтаются сами по себе посередине. Текст двумя столбцами
   в одну строчку, разным шрифтом, не отделён.»
   Стало: ОДНА панель с рамкой. Внутри — шапка (заголовок + ссылка) и две
   колонки: слева читаемая сверху вниз лестница «проблема → результат →
   метрики → кнопка», справа система из 4 звеньев. Метрики больше не
   висят полосой между текстом и карточками, а стоят плитками внутри
   левой колонки — как подпись к абзацу-результату.
   Разделители — ПЛИТКИ, не линии.
*/
.flag{
  display:grid;
  gap:var(--stack-md);
  padding:clamp(1.25rem,.8rem + 1.9vw,2.25rem);
  background:var(--c-surface);
  border:var(--rule);
  border-radius:var(--r-xl);
}
.flag__head{display:grid;gap:var(--sp-4)}
@media (min-width:900px){
  .flag__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-6)}
}
.flag__head-t{display:grid;gap:var(--sp-2)}
.flag__h{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-display-sub);
  line-height:1.12;
  letter-spacing:var(--ls-tight);
  max-width:26ch;
}
.flag__more{justify-self:start;white-space:nowrap}
@media (min-width:900px){.flag__more{justify-self:end}}

.flag__body{display:grid;grid-template-columns:1fr;gap:var(--stack-md)}
@media (min-width:980px){
  .flag__body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-7)}
}
.flag__col{display:grid;gap:var(--sp-5);align-content:start}
.flag__note{
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--c-muted);
  border-left:2px solid var(--c-accent);
  padding-left:var(--sp-5);
}
.flag__note b{color:var(--c-ink);font-weight:var(--fw-semibold)}
.flag__lead{font-size:var(--fs-lg);line-height:1.55;color:var(--c-muted)}
.flag__lead strong{color:var(--c-ink);font-weight:var(--fw-semibold)}
.flag__cta{justify-self:start}

/* Метрики — четыре плитки, без линеек-разделителей */
.fchips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}
@media (min-width:560px){.fchips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fchip{
  display:grid;
  gap:var(--sp-2);
  padding:var(--sp-4);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.fchip__ico{width:20px;height:20px;color:var(--c-accent)}
.fchip--dn .fchip__ico{color:var(--c-muted)}
.fchip__t{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}

/*
 Правая колонка — система из 4 звеньев. Плитки на тонированном поле:
   тот же приём «блок, а не линия», что и у метрик.
*/
.sys{display:grid;gap:var(--sp-3);align-content:start}
.sys__i{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  column-gap:var(--sp-4);
  row-gap:var(--sp-1);
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.sys__ico{width:22px;height:22px;color:var(--c-accent);grid-row:span 2}
.sys__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-body);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.sys__d{font-size:var(--fs-sm);line-height:1.5;color:var(--c-muted)}

/* ---------- 6. КНОПКИ ---------- */
.btn,.btn-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  font-family:var(--font-btn);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  line-height:1.2;
  text-align:center;
  padding:1.15rem 1.9rem;
  min-height:52px;
  border-radius:var(--r-sm);
  background:var(--c-accent);
  color:var(--c-accent-ink);
  border:1px solid var(--c-accent);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-spring);
}
/* Заливка-свайп снизу вверх — декоративный слой, кликов не ловит */
.btn::before,.btn-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--c-accent-press);
  transform:translateY(101%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.btn__ico{transition:transform var(--dur) var(--ease-out)}
.btn:active,.btn-cta:active{transform:scale(.985)}
.btn[disabled],.btn-cta[disabled]{
  background:var(--c-accent-disabled);
  border-color:var(--c-accent-disabled);
  cursor:not-allowed;
}
.btn[disabled]::before,.btn-cta[disabled]::before{display:none}
.btn--lg,.btn-cta--large{padding:1.35rem 2.4rem;min-height:60px;font-size:var(--fs-body)}
.btn--mini{padding:.7rem 1.15rem;min-height:44px;font-size:var(--fs-xs);gap:var(--sp-2)}
.btn--block{width:100%}

/* secondary на светлом — контур, заливается акцентом на hover */
.btn--ghost{
  background:transparent;
  color:var(--c-ink);
  border-color:var(--c-ink);
}
.btn--ghost::before{background:var(--c-ink)}
.on-dark .btn--ghost{color:var(--c-on-dark);border-color:rgba(255,255,255,.32)}
.on-dark .btn--ghost::before{background:var(--c-on-dark)}

/* ---------- 7. ССЫЛКА-СТРЕЛКА (единый почерк по сайту) ---------- */
.alink{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  color:var(--c-accent);
  padding-block:var(--sp-2);
  position:relative;
}
.alink .ico{transition:transform var(--dur) var(--ease-out)}
.alink::after{
  content:"";
  position:absolute;
  left:0;right:1.6em;bottom:.35rem;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur) var(--ease-out);
  pointer-events:none;
}
.on-dark .alink{color:var(--c-accent-text)}

/* ---------- 8. HOVER-ЯЗЫК (только мышь, §1.6) ---------- */
@media (hover:hover) and (pointer:fine){
  .btn:hover::before,.btn-cta:hover::before{transform:translateY(0)}
  .btn:hover,.btn-cta:hover{box-shadow:var(--sh-accent)}
  .btn:hover .btn__ico,.btn-cta:hover .btn__ico{transform:translateX(4px)}
  .btn--ghost:hover{color:var(--c-surface);border-color:var(--c-ink);box-shadow:none}
  .on-dark .btn--ghost:hover{color:var(--c-dark);border-color:var(--c-on-dark)}

  .alink:hover::after{transform:scaleX(1)}
  .alink:hover .ico{transform:translateX(5px)}
}
/* тач: без залипшего hover, но с отчётливым press */
@media (hover:none){
  .btn:active::before,.btn-cta:active::before{transform:translateY(0)}
}

/* ---------- 9. REVEAL-ON-SCROLL ---------- */
.rv{
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--rv-delay,0ms);
}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}   /* fail-open без JS */

/*
 Reveal для крупных медиа.
   🔴 Было clip-path: inset(0 0 100% 0). Живому посетителю он показывался
   корректно, НО clip-path на <img loading="lazy"> не композитится при
   полностраничном/поэлементном скриншоте — на снимке вместо фото оставался
   пустой серый бокс. Именно так «пропали фото» в ревью по скринам.
   Композитим тем же, чем и остальной reveal: opacity + сдвиг.
*/
.rv-mask{
  opacity:0;
  transform:translateY(calc(var(--reveal-y) * .7)) scale(.985);
  transform-origin:50% 100%;
  transition:opacity var(--dur-slower) var(--ease-out),
             transform var(--dur-slower) var(--ease-out);
}
.rv-mask.in{opacity:1;transform:none}
html:not(.js) .rv-mask{opacity:1;transform:none}

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

.progress{
  position:fixed;
  top:0;left:0;
  height:2px;width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--c-accent);
  z-index:10000;
  pointer-events:none;
  will-change:transform;
}

/* ---------- 11. ШАПКА ---------- */
.hdr{
  position:fixed;
  top:0;left:0;right:0;
  z-index:500;
  background:color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid transparent;
  padding-block:var(--sp-4);
  transition:padding var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.hdr.is-compact{
  padding-block:var(--sp-3);
  background:color-mix(in srgb, var(--c-bg) 94%, transparent);
  border-bottom-color:var(--c-line);
}
.hdr.is-hidden{transform:translateY(-100%)}

.hdr__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}

.brand{display:block;min-width:0;flex:0 1 auto;overflow:hidden}
/*
 🔴 На index обе строки шапки — <span>, на monetizatsiya — <div>. Инлайновые
   спаны текли в одну строку, дескриптор налезал на имя бренда, а nowrap +
   text-overflow на инлайне не работают вовсе. Раскладку задаёт CSS, а не
   выбор тега в разметке.
*/
.brand__name,.brand__desc{display:block}
.brand__name{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-tight);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__name b{font-weight:var(--fw-extra);color:var(--c-accent)}
.brand__desc{font-size:var(--fs-xs);color:var(--c-muted);margin-top:2px}

.nav{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:nowrap}
.nav a{
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--c-muted);
  padding-block:var(--sp-2);
  position:relative;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
/* подчёркивание раскрывается от курсора */
.nav a:not(.nav__cta)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1.5px;
  background:var(--c-accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur) var(--ease-out);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .nav a:not(.nav__cta):hover{color:var(--c-ink)}
  .nav a:not(.nav__cta):hover::after{transform:scaleX(1)}
}
.nav__cta{color:var(--c-accent-ink)!important}

/*
 Правило снято: за узкие ширины теперь отвечает
   css/adaptive.css §1 — тот же <nav> становится бургер-панелью.
   Скрывать пункты нельзя было и потому, что `:not()` даёт правилу больший
   вес и оно гасило ссылки уже ВНУТРИ открытой панели.
*/
@media (max-width:480px){
  .hdr__in{gap:var(--sp-3)}
  /*
 Имя бренда переносим, а не обрезаем: «Максим Попц…» с многоточием
     читается как поломка, а не как сокращение.
*/
  .brand__name{font-size:var(--fs-xs);white-space:normal;line-height:1.2}
  .btn-cta--mini{padding-inline:.8rem;font-size:var(--fs-cap)}
}

/*
   12. HERO
*/
.hero{
  position:relative;
  padding-top:calc(var(--sp-7) + 40px);
  padding-bottom:var(--section-y);
  overflow:hidden;
  /*
 Полотно чистое,
     единственный акцент — почти незаметное ультрамариновое свечение
     из-за плеча портрета. Ни линий, ни точек, ни блобов.
*/
  background:
    radial-gradient(76% 62% at 86% -6%, color-mix(in srgb, var(--c-accent) 8%, transparent) 0%, transparent 62%),
    var(--c-bg);
}
.hero>.container{position:relative;z-index:1}

.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--stack-md);align-items:end}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--sp-5);
}
.hero__eyebrow::before{content:"";width:28px;height:1px;background:var(--c-accent)}
.hero__eyebrow b{color:var(--c-accent);font-weight:var(--fw-extra)}

/*
 🔴 Заголовок героя: 22ch вместо 17ch. Узкая колонка загоняла «дополнительных»
   в перенос по слогам («дополнительны-х»); ширина + запрет переноса внутри
   слова (см. h1,h2 в блоке типографики) убирают его совсем.
*/
.hero h1,.hero__h1{margin-bottom:var(--sp-5);max-width:22ch}
.hero__sub,.hero__subtitle{
  font-size:var(--fs-lg);
  color:var(--c-muted);
  max-width:46ch;
  margin-bottom:var(--sp-5);
}
.hero__sub strong{color:var(--c-ink)}

/* строка-заверение: вертикальная линия вместо рамки-карточки */
.hero__badge{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--c-muted);
  border-left:2px solid var(--c-accent);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);
  margin-bottom:var(--sp-6);
  max-width:48ch;
}
.hero__badge .ico{color:var(--c-accent);margin-top:.15em}

.hero__cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
/*
 🐛 display:flex делал каждый текстовый узел ОТДЕЛЬНЫМ flex-элементом:
   на узком экране «В подарок после разбора —» и «чек-листы под ваш кейс»
   переносились независимо и разъезжались в две колонки (тот же класс, что
   «чек-бокс 152-ФЗ рассыпается на flex-элементы», §4.1). Обычная строка.
*/
.hero__gift{
  display:block;
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--c-muted);
}
.hero__gift .ico{color:var(--c-accent);display:inline-block;vertical-align:-.15em;margin-right:.45em}
.hero__gift b{color:var(--c-ink);font-weight:var(--fw-semibold)}

/* Медиа: портрет с компактным оверлеем-подписью в нижней кромке кадра */
.hero__media{position:relative;width:100%;max-width:460px;justify-self:center}
.hero__img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  border-radius:var(--r-xl);
  background:var(--c-surface-2);
}
/*
 Теперь один компактный оверлей
   по нижней кромке: имя + роль + регалии чипами. Кадр не растёт.
*/
.hero__shot{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden}
.hero__cred{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:var(--sp-8) var(--sp-5) var(--sp-5);
  color:var(--c-on-dark);
  /* градиент только по нижней кромке: подпись читается, кадр не мутнеет */
  background:linear-gradient(to top,
    rgba(10,12,32,.94) 0%, rgba(10,12,32,.88) 34%, rgba(10,12,32,.55) 68%, rgba(10,12,32,0) 100%);
}
.hero__cred-name{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:1.1;
  letter-spacing:var(--ls-tight);
}
.hero__cred-role{font-size:var(--fs-xs);color:var(--c-on-dark-mut)}

/*
 Регалии — чипы внутри оверлея. Волосяная рамка по стеклу, без заливки:
   плашка остаётся «поверх кадра», а не второй карточкой.
*/
.hero__creds{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__creds li{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:.3rem .65rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  line-height:1.25;
  color:var(--c-on-dark);
}
.hero__creds .ico{color:var(--c-accent-text);width:.9em;height:.9em}
/*
 🔴 ЗДЕСЬ БЫЛИ УДАЛЁННЫЕ КОМПОНЕНТЫ.
   Сняты .note, .rows/.row/.row-cta и .chips/.chip: ни один
   селектор не встречался НИ НА ОДНОЙ странице. Это остатки ранних версий — их держали
   «на всякий случай», а они путали каждую следующую правку.
   Нужен такой компонент снова — писать заново, а не искать
   в истории: старый был под другую сетку.
*/

/* ---------- 13. КРУПНЫЕ ЦИФРЫ ---------- */
.stats{
  display:grid;
  grid-template-columns:1fr;
  border-top:var(--rule);
  margin-top:var(--stack-lg);
}
.stat{
  padding:var(--sp-5) 0;
  border-bottom:var(--rule);
  position:relative;
}
.stat__n{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);
  line-height:.95;
  text-wrap:nowrap;
  color:var(--c-ink);
  letter-spacing:-.035em;
  margin-bottom:var(--sp-3);
  font-variant-numeric:tabular-nums;
  display:block;
}
.stat__n em{font-style:normal;color:var(--c-accent)}
.stat__l{font-size:var(--fs-sm);color:var(--c-muted);max-width:26ch}
.on-dark .stat{border-color:var(--c-dark-line)}
.on-dark .stat__n{color:var(--c-on-dark)}

/*
   14b. «УТЕЧКИ» — общий компонент проблемных секций
   index §2 «Старые способы роста» и monetizatsiya §2 «Три утечки».
   Раньше обе были заголовок + строки на волосяных линиях. Теперь —
   один объект: тёмная панель-инверсия, три столбца, у каждого убывающая
   акцентная шкала (прибыль утекает от первого пункта к третьему), вывод
   акцентной строкой в подвале той же панели.
   Никакой нумерации «01/02/03»: индекс несёт шкала, а не цифра.
*/
.leaks{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--c-dark);
  color:var(--c-on-dark);
  padding:clamp(1.5rem,3.4vw,2.75rem);
}
.leaks::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(62% 70% at 6% 0%, rgba(22,76,135,.34), transparent 62%),
    radial-gradient(46% 60% at 100% 100%, rgba(46,107,184,.16), transparent 64%);
}
.leaks__list{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
.leak{
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:var(--sp-3);
  padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12);
}
.leak__ico{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--c-accent-2);
  color:var(--c-accent-text);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-2);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.leak__ico .ico{width:1.2em;height:1.2em}
.leak__k{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
}
.leak__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.15rem,1rem + .75vw,1.5rem);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  color:var(--c-on-dark);
}
.leak__d{font-size:var(--fs-sm);color:var(--c-on-dark-mut)}
/*
 Шкала «сколько прибыли ещё доезжает» — чистая графика, для скринридера её
   нет. Ширина убывает по позиции: пункт 1 → 3.
*/
.leak__meter{
  display:block;
  align-self:end;
  margin-top:var(--sp-4);
  height:3px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.leak__meter i{
  display:block;height:100%;
  width:var(--meter,60%);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--c-accent-2),rgba(46,107,184,.15));
}
.leak:nth-child(1) .leak__meter i{--meter:78%}
.leak:nth-child(2) .leak__meter i{--meter:46%}
.leak:nth-child(3) .leak__meter i{--meter:19%}

/*
 Вывод секции — акцентная строка в подвале панели, не отдельный абзац
   в пустоте: секция читается как один законченный объект.
*/
.leaks__out{
  position:relative;
  margin-top:var(--sp-6);
  padding:var(--sp-6) 0 0 var(--sp-6);
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--c-on-dark);
  max-width:52ch;
}
.leaks__out::before{
  content:"";
  position:absolute;
  left:0;top:var(--sp-6);bottom:0;
  width:2px;
  border-radius:var(--r-pill);
  background:var(--c-accent-2);
}
.leaks .hi{color:var(--c-accent-text)}
@media (hover:hover) and (pointer:fine){
  .leak:hover .leak__ico{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
}
@media (min-width:768px){
  .leaks__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6) var(--sp-7)}
  /*
 Общая базовая линия в колонках: иконки, заголовки, тексты и шкалы стоят
     ровными строками (та же механика, что §36). Число строк зависит от того,
     есть ли у пунктов caps-метка («Утечка 1») — на главной её нет.
*/
  .leaks__list{grid-template-rows:auto auto auto auto}
  .leak{grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--sp-3)}
  .leaks__list:has(.leak__k){grid-template-rows:auto auto auto auto auto}
  .leaks__list:has(.leak__k) .leak{grid-row:span 5}
  .leaks__out{margin-top:var(--sp-7);padding-top:var(--sp-7)}
  .leaks__out::before{top:var(--sp-7)}
}
@supports not (grid-template-rows: subgrid){
  @media (min-width:768px){
    .leaks__list,.leaks__list:has(.leak__k){grid-template-rows:none}
    .leak,.leaks__list:has(.leak__k) .leak{grid-row:auto;grid-template-rows:none;align-content:space-between}
  }
}

/* ---------- 15. КАРТОЧКИ (тонкая линия, без тени) ---------- */
.card{
  position:relative;
  background:var(--c-surface);
  border:var(--rule);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  transition:border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out);
}
.card--accent{border-color:var(--c-accent);background:var(--c-accent-soft)}
.card__k{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
}
.card__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
}
.card__d{font-size:var(--fs-sm);color:var(--c-muted);flex:1}
.card__d--note{flex:none;display:flex;align-items:flex-start;gap:var(--sp-3)}
.card__d--note .ico{color:var(--c-accent);margin-top:.2em}
.card__foot{margin-top:auto}
.on-dark .card{background:var(--c-dark-2);border-color:var(--c-dark-line)}
.on-dark .card__d{color:var(--c-on-dark-mut)}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--c-accent);transform:translateY(var(--hover-lift))}
  .on-dark .card:hover{border-color:var(--c-accent-2)}
  .card:hover .alink::after{transform:scaleX(1)}
  .card:hover .alink .ico{transform:translateX(5px)}
}

/*
   17. «СВЕТОФОР ПРИБЫЛИ» — интерактивный виджет
*/
.svet{display:grid;grid-template-columns:1fr;gap:var(--stack-md);align-items:start}

/*
 ---------- Опросник: шаг-карточка вместо строки на линейке ----------
   Раньше это был плоский список «вопрос + пилюли» на волосяных линиях —
 Теперь каждый
   вопрос — карточка-шаг с номерным бейджем; отвеченная карточка гасится и
   получает акцентную кромку, так что взгляд сам едет к следующей.
*/
.svet__quiz{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.svet__q{
  position:relative;
  background:var(--c-surface);
  border:var(--rule);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
/* акцентная кромка слева — состояние «ответ дан» */
.svet__q::before{
  content:"";
  position:absolute;
  left:-1px;top:var(--sp-5);bottom:var(--sp-5);
  width:2px;
  border-radius:var(--r-pill);
  background:var(--c-accent);
  opacity:0;
  transition:opacity var(--dur) var(--ease-out);
}
.svet__q.is-done::before{opacity:1}
.svet__q.is-done{background:transparent}
.svet__ql{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:center;
  font-weight:var(--fw-medium);
  font-size:var(--fs-body);
  line-height:1.4;
  margin-bottom:var(--sp-4);
}
/* номер вопроса — бейдж, а не приписка сбоку */
.svet__ql i{
  font-style:normal;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-xs);
  letter-spacing:0;
  color:var(--c-accent);
  background:var(--c-accent-soft);
  border-radius:var(--r-sm);
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.svet__q.is-done .svet__ql i{background:var(--c-accent);color:var(--c-accent-ink)}
.svet__opts{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding-left:calc(var(--sp-4) + 32px)}
.svet__opt{
  position:relative;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--c-muted);
  background:transparent;
  border:var(--rule);
  border-radius:var(--r-pill);
  padding:.55rem 1.05rem .55rem .8rem;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
/* точка-переключатель слева: вариант читается как выбор, а не как тег */
.svet__opt::after{
  content:"";
  order:-1;
  flex:none;
  width:14px;height:14px;
  border-radius:50%;
  border:1.5px solid currentColor;
  opacity:.55;
  transition:opacity var(--dur-fast) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.svet__opt::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--c-accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur) var(--ease-out);
}
.svet__opt[aria-pressed="true"]{
  color:var(--c-accent-ink);
  border-color:var(--c-accent);
  font-weight:var(--fw-semibold);
}
.svet__opt[aria-pressed="true"]::before{transform:scaleX(1)}
.svet__opt[aria-pressed="true"]::after{opacity:1;box-shadow:inset 0 0 0 3px var(--c-accent)}
@media (hover:hover) and (pointer:fine){
  .svet__q:hover{border-color:var(--c-line)}
  .svet__opt:hover{border-color:var(--c-accent);color:var(--c-accent)}
  .svet__opt[aria-pressed="true"]:hover{color:var(--c-accent-ink)}
}

/*
 ---------- Панель-вердикт: тёмная, липкая ----------
   Липкость у «Светофора» оставлена намеренно: колонка вопросов вдвое выше,
   и ответ слева должен сразу отражаться справа.
*/
@media (min-width:1024px){.svet__panel{position:sticky;top:104px}}
.svet__panel{
  background:var(--c-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  position:sticky;
  top:112px;
  overflow:hidden;
}
.svet__panel::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(90% 60% at 100% 0%,rgba(46,107,184,.22),transparent 62%);
}
.svet__panel>*{position:relative}

/*
 ---------- Светофор в корпусе ----------
   Кольцевой gauge не читался как «светофор» — а секция называется именно так.
   Три лампы в корпусе: погашенные тусклые, активная горит и даёт свет.
*/
.svet__score{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-6)}
.lamp{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:9px 8px;
  border-radius:var(--r-pill);
  background:#050B14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.lamp__l{
  display:block;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.lamp.r .lamp__l--r{background:#FF6B7C;box-shadow:0 0 0 3px rgba(255,107,124,.20),0 0 18px 2px rgba(255,107,124,.55)}
.lamp.y .lamp__l--y{background:#FFC451;box-shadow:0 0 0 3px rgba(255,196,81,.20),0 0 18px 2px rgba(255,196,81,.5)}
.lamp.g .lamp__l--g{background:#54D9AB;box-shadow:0 0 0 3px rgba(84,217,171,.20),0 0 18px 2px rgba(84,217,171,.5)}

.svet__meta{min-width:0;flex:1}
.svet__scoretxt{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums;
}
/* сплошная шкала прогресса: сколько из шести точек уже отмечено */
.svet__prog{
  display:block;
  margin-top:var(--sp-3);
  height:4px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.svet__prog i{
  display:block;height:100%;width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--c-accent-2),var(--c-accent-text));
  transition:width var(--dur-slow) var(--ease-out);
}
.svet__hint{font-size:var(--fs-xs);color:var(--c-on-dark-mut);margin-top:var(--sp-1)}

.svet__rows{margin-bottom:var(--sp-5)}
.svet__row{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  padding-block:var(--sp-3);
  border-bottom:var(--rule-dark);
  transition:color var(--dur) var(--ease-out);
}
.svet__row:last-child{border-bottom:none}
/* точка-состояние перед названием точки утечки */
.svet__row::before{
  content:"";
  flex:none;
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.svet__row.r,.svet__row.y,.svet__row.g{color:var(--c-on-dark)}
.svet__row.r::before{background:#FF6B7C;box-shadow:0 0 10px rgba(255,107,124,.6)}
.svet__row.y::before{background:#FFC451;box-shadow:0 0 10px rgba(255,196,81,.6)}
.svet__row.g::before{background:#54D9AB;box-shadow:0 0 10px rgba(84,217,171,.6)}
.svet__bar{
  margin-left:auto;
  width:56px;height:4px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  overflow:hidden;
  flex:none;
}
.svet__bar i{
  display:block;height:100%;width:0;
  border-radius:inherit;
  background:rgba(255,255,255,.3);
  transition:width var(--dur-slow) var(--ease-out),background var(--dur) var(--ease-out);
}
.svet__row.r .svet__bar i{width:33%;background:#FF6B7C}
.svet__row.y .svet__bar i{width:66%;background:#FFC451}
.svet__row.g .svet__bar i{width:100%;background:#54D9AB}
.svet__verdict{
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  line-height:1.55;
  padding-top:var(--sp-5);
  border-top:var(--rule-dark);
}
/* вердикт въезжает, а не подменяется молча — «эффектный вывод результата» */
.svet__verdict.is-new{animation:sv-in var(--dur-slow) var(--ease-out) both}
@keyframes sv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.svet__verdict b{
  color:var(--c-on-dark);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  display:block;
  margin-bottom:var(--sp-3);
}
.svet__panel.r .svet__verdict b{color:#FF8A97}
.svet__panel.y .svet__verdict b{color:#FFC451}
.svet__panel.g .svet__verdict b{color:#54D9AB}
.svet__cta{width:100%;margin-top:var(--sp-5)}

/*
   18. СРАВНЕНИЕ «обычный подход vs performa»
*/

.cmp{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  background:transparent;
  align-items:stretch;
}
.cmp__col{
  border:var(--rule);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cmp__col--bad{background:var(--c-surface)}
.cmp__col--good{background:var(--c-dark);color:var(--c-on-dark);border-color:transparent}
/*
 ультрамариновое свечение только у «нашей» колонки: иерархия цветом,
   а не тенью под обеими карточками
*/
.cmp__col--good::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,rgba(46,107,184,.26),transparent 62%);
}
.cmp__col>*{position:relative}
.cmp__h{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-2);
  border-bottom:var(--rule);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
/* иконка-чип в шапке колонки: тот же почерк, что у «Утечек» и «Форматов» */
.cmp__ico{
  width:38px;height:38px;
  flex:none;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;
}
.cmp__ico .ico{width:1.05em;height:1.05em}
.cmp__col--bad .cmp__ico{color:var(--c-danger)}
.cmp__col--good .cmp__ico{color:var(--c-accent-text)}
.cmp__col--good .cmp__h{color:var(--c-on-dark);border-bottom-color:var(--c-dark-line)}
.cmp__li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--c-muted);
  padding-block:var(--sp-3);
  border-bottom:var(--rule);
  transition:color var(--dur) var(--ease-out);
}
.cmp__li:last-child{border-bottom:none}
.cmp__li .ico{margin-top:.15em;width:1.05em;height:1.05em}
.cmp__col--bad .cmp__li .ico{color:var(--c-danger)}
.cmp__col--good .cmp__li{color:var(--c-on-dark-mut);border-bottom-color:var(--c-dark-line)}
.cmp__col--good .cmp__li .ico{color:var(--c-accent-text)}
@media (hover:hover) and (pointer:fine){
  .cmp__col--bad .cmp__li:hover{color:var(--c-ink)}
  .cmp__col--good .cmp__li:hover{color:var(--c-on-dark)}
}

/*
   19. КЕЙСЫ
*/
.cases{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}

/*
 Слайдер кейсов на .slider__track / .slider__arrows
   (горизонтальная лента со scroll-snap и стрелками в шапке секции)
 «КЕЙСЫ · КАРУСЕЛЬ-ОРБИТА» ниже и §6b main.js).
   Правила не оставлены «на всякий случай»: мёртвый слой под новым — то
   самое, из-за чего шапку чинили четыре захода подряд.
   .arw остался — на нём стрелки новой навигации .oc-nav.
*/
.arw{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:var(--rule);
  border-radius:var(--r-pill);
  color:var(--c-ink);
  background:transparent;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
}
.on-dark .arw{border-color:var(--c-dark-line);color:var(--c-on-dark)}
.arw .ico{width:1.05em;height:1.05em}
.arw[disabled]{opacity:.32;cursor:default}
.arw[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .arw:not([disabled]):hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
}
/*
 ---------- Карточка кейса ---------------------------------------------
*/
.ccard{
  position:relative;
  display:flex;
  flex-direction:column;
  border:var(--rule-dark);
  border-radius:var(--r-lg);
  background:var(--c-dark-2);
  overflow:hidden;
  isolation:isolate;
}
.ccard,.ccard:visited{color:var(--c-on-dark)}
/*
 Верхняя зона — «шапка кейса»: бейдж и цифры на отдельной подложке.
   Ниже — тело с заголовком, описанием и ссылкой.
*/
.ccard__top{
  position:relative;
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(46,107,184,.16),transparent 62%),
    rgba(255,255,255,.02);
  border-bottom:var(--rule-dark);
}
.ccard__body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  flex:1;
  padding:var(--sp-5);
}
.ccard__more{margin-top:auto;align-self:flex-start}
.ccard__badge{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
  margin-bottom:var(--sp-4);
}
/*
 Цифры кейса — одна строка-«спека» с волосяными разделителями: так шапки
   двух соседних карточек в треке остаются одной высоты, а тела начинаются
   на общей линии. Раньше третья метрика переносилась и ломала ритм.
*/
/*
 Сетка метрик жёстко 2×2 — независимо от того, две метрики в кейсе, три
   или одна. Иначе шапки соседних карточек трека расходятся по высоте и тела
   начинаются на разных линиях; ровно это и читалось как «текст разрознен».
*/
/*
   Прежняя сетка 2×2 с рядами по 3.6rem была рассчитана строго на три
   ЧИСЛОВЫЕ метрики. Но у части кейсов метрика записана фразой («вывод
   продукта на рынок», «первые стабильные продажи»), и в жёстком слоте
   такие фразы висели одинокими строками с провалами между ними —
   карточки читались как оформленные по-разному.
   Теперь метрика — ЧИП: одна и та же плашка и у «×8 выручка / 5 мес»,
   и у «первые стабильные продажи». Число внутри чипа остаётся крупным
   и акцентным, фраза без числа просто занимает весь чип. Ряд переносится
   сам, без пустых слотов — шапка стала ниже, и секция снова помещается
   в экран. ═════════════════════════════════════════════════════════════
*/
.ccard__metrics{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.ccard__m{
  display:inline-flex;
  align-items:baseline;
  gap:var(--sp-2);
  min-width:0;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  border:1px solid var(--c-dark-line);
}
.ccard__m b{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-body);
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:-.02em;
  color:var(--c-accent-text);
  font-variant-numeric:tabular-nums;
}
.ccard__m span{
  font-size:var(--fs-xs);
  line-height:1.35;
  color:var(--c-on-dark-mut);
}
/*
 Чип без числа набирается тем же кеглем, что подписи остальных: иначе
   он снова выбивался бы из ряда.
*/
.ccard__m--word span{color:var(--c-on-dark)}
.ccard__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
}
/*
 🔴 На КАРТОЧКЕ описание — тизер в четыре строки, а не весь абзац.
   Слот карусели один на все девять кейсов, и его задаёт самая длинная
   карточка: без клампа она растягивала секцию до 927px, и та переставала
   помещаться в экран. Полный текст никуда не делся — по клику окно
   показывает разбор целиком (см. `.lb .ccard__d` ниже: там клампа нет).
*/
.ccard__d{
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  display:-webkit-box;
  -webkit-line-clamp:4;
  line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/*
 Заглушка медиа — честная, не имитирует контент и не строит фейк-плеер.
   теперь это компактная строка-ссылка в общем ритме сайта.
*/
.ph{
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  gap:var(--sp-2);
  border-top:var(--rule);
  border-bottom:var(--rule);
  padding:var(--sp-5) 0;
  color:var(--c-muted);
  background:transparent;
}
.on-dark .ph{border-top-color:var(--c-dark-line);border-bottom-color:var(--c-dark-line)}
@media (min-width:768px){
  /*
 На планшете четыре колонки душат заголовок — метка и стрелка по краям,
     заголовок с описанием в середине двумя строками.
*/
  .ph{grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:var(--sp-4) var(--sp-5)}
  .ph .ph__t{grid-column:2}
  .ph .alink{grid-column:3;grid-row:1 / span 2;justify-self:end}
}
@media (min-width:1024px){
  .ph{grid-template-columns:180px minmax(0,1.05fr) minmax(0,1.35fr) auto;align-items:center}
  .ph .ph__t{grid-column:3}
  .ph .alink{grid-column:4;grid-row:auto}
}
.on-dark .ph{border-color:var(--c-dark-line);color:var(--c-on-dark-mut)}

.ph__t{font-size:var(--fs-sm)}

/*
   20. ЭКСПЕРТ
*/
.exp{display:grid;grid-template-columns:1fr;gap:var(--stack-md);align-items:start}
/* колонка с портретом: на «Практикуме» под ним стоят чипы-регалии */
.exp__side{display:flex;flex-direction:column;gap:var(--sp-4)}
@media (min-width:900px){
  /*
 Портрет держится у верхней кромки, пока справа проезжают регалии:
     колонки перестают быть «фото и простыня рядом».
*/
  .exp__side,.exp>.exp__ph{position:sticky;top:calc(var(--sp-7) + 40px)}
}
.exp__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.exp__ph{
  width:100%;
  aspect-ratio:4/5;
  max-height:470px;
  object-fit:cover;
  object-position:top center;
  border-radius:var(--r-lg);
  background:var(--c-surface-2);
}
/*
   Раньше это был аккуратный, но безликий столбик: имя кеглем H2, мелкие
   акцентные циферки, чипы довеском под фото. Иерархию теперь держит РАЗМЕР
   (референс Dennis Snellenberg): имя дисплейным кеглем, номера регалий —
   крупные приглушённые цифры на своей колонке, портрет держится липким
   якорем, пока справа едут регалии. Ни одной карточки. Не оставляем
   мёртвым: следующая правка легла бы поверх него.
*/
.exp__role{font-size:var(--fs-lg);color:var(--c-muted);margin-bottom:var(--sp-5)}
.exp__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--stack-md)}
.exp__reg{border-top:var(--rule)}
.exp__r{
  padding-block:var(--sp-3);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--c-muted);
  padding-block:var(--sp-5);
  border-bottom:var(--rule);
}
.exp__r i{
  font-style:normal;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.5rem,1.2rem + .9vw,2.1rem);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--c-line);
  min-width:1.6em;
  padding-top:0;
  font-variant-numeric:tabular-nums;
}
.on-dark .exp__r i{color:var(--c-dark-line)}
.exp__r b{color:var(--c-ink);font-weight:var(--fw-semibold)}
/* ряд с вложенным списком (Практикум): заголовок ряда отбит от перечня */
.exp__r b + br,.exp__r b + ul{margin-top:var(--sp-2)}
.exp__r ul{margin-top:var(--sp-3)}
.exp__r .bio-logos{display:flex}
.exp__quote{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:clamp(1rem,.92rem + .45vw,1.2rem);
  line-height:1.5;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
  margin-top:var(--stack-md);
  padding-left:var(--sp-6);
  border-left:2px solid var(--c-accent);
  max-width:52ch;
}

/*
   21. TG-ЛЕНТА — сама листается вверх
*/
/*
 ---------- Раскладка «Разборы»: 2×2 видео-карточки + телефон ----------
   Как у Максима: телефон занимает правую колонку на оба ряда, слева —
   четыре компактные карточки роликов.
*/
.cgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media (min-width:560px){.cgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .cgrid{grid-template-columns:1fr 1fr 360px;grid-template-rows:auto auto}
  .cgrid .phone{grid-column:3;grid-row:1 / 3}
}
.phone{max-width:360px;width:100%;justify-self:center;align-self:start}
@media (max-width:999px){.cgrid .phone{grid-column:1 / -1}}
.phone__sub{margin-top:var(--sp-4)}
.phone__sub .btn{width:100%;justify-content:center}

/*
 Карточка ролика — компактная: постер 16:10, бейдж площадки, play и две
   строки текста. Реальных роликов ещё нет, поэтому это не ссылка, а кнопка
   в лайтбокс с честной заглушкой — битых href на сайте не заводим.
*/
.vcard{
  display:flex;
  flex-direction:column;
  border:var(--rule);
  border-radius:var(--r-md);
  background:var(--c-surface);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  isolation:isolate;
}
.vcard__top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/9;
  background:
    radial-gradient(80% 110% at 50% 100%,rgba(22,76,135,.18),transparent 66%),
    var(--c-dark);
  border-bottom:var(--rule);
  overflow:hidden;
}
/*
   Обложки скачаны с YouTube и лежат ЛОКАЛЬНО в site/img (*.webp):
   CSP в .htaccess — `img-src 'self' data:`, и картинка с i.ytimg.com
   просто не отрисовалась бы. CSP не расширяли; материалы внесены
   в ЮР/реестр-материалов.md как материалы Заказчика.
   🔴 Карточка Reels остаётся на фирменной плашке: Instagram не отдаёт
   обложку без авторизации (og:image на публичной странице пуст), а
   подставлять чужой или выдуманный кадр нельзя.
   🔴 Обложка кладётся ПОД уже существующий скрим карточки
   (`.vcard__top::after` в adaptive.css) — свой второй градиент здесь
   не нужен, а `position` у play и подписи трогать НЕЛЬЗЯ: они разведены
   по углам обложки тем же файлом, и правило с более высокой
   специфичностью сложило бы их обратно в центр.
*/
/*
 🔴 Обложка показывается ЦЕЛИКОМ, а подпись стоит ПОД ней.
   Раскладка «текст на обложке» родилась, когда настоящих превью не было:
   вместо кадра там было пустое синее поле, и заголовок закрывал пустоту. Мешали две вещи сразу:
     · слот был 16:10, а обложки роликов 16:9 — object-fit:cover срезал
       бока, и на кадре обрубались собственные слова обложки
       («КАССОВ…», «…РОДАВАТЬ»);
     · поверх обложки, у которой есть свой крупный заголовок, ложился
       ВТОРОЙ заголовок карточки — два текста дрались за одно место.
   Теперь пропорция слота ровно 16:9 (кроп нулевой), скрим не нужен,
   подпись живёт на своей полосе.
*/
.vcard--shot .vcard__top{
  aspect-ratio:16/9;
  flex:none;
  padding:0;
  border-bottom:var(--rule-dark);
}
.vcard--shot .vcard__top::after{content:none}   /* скрим больше не нужен */
/*
 Бейдж площадки лежит на чужой картинке, у которой своя типографика.
   Полупрозрачной плашки мало: на светлых участках обложки метка тонула.
   Делаем её плотной, с размытием фона — так она читается поверх любого
   кадра и остаётся элементом ИНТЕРФЕЙСА, а не частью обложки.
*/
.vcard--shot .vcard__badge{
  background:rgba(6,10,20,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.22);
}
.vcard--shot .vcard__b{
  position:static;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  gap:var(--sp-2);
}
.vcard__shot{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  /*
 Лёгкое приглушение, чтобы четыре разные обложки читались одной
     семьёй, а не набором чужих превью. На ховере кадр оживает в полный
     цвет и чуть приближается — тот же жест, что зум превью в портфолио.
*/
  filter:saturate(.94) brightness(.94);
  transition:filter var(--dur) var(--ease-out),transform 520ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .vcard--shot:hover .vcard__shot{filter:none;transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .vcard--shot:hover .vcard__shot{transform:none}
}
/*
 Поля обложке не нужны: кадр идёт от кромки до кромки, а бейдж, play
   и подпись стоят абсолютно и от padding не зависят.
*/
.vcard--shot .vcard__top{padding:0}
/* Кольца — только там, где обложки нет: на кадре они читались бы мусором. */
.vcard--shot .vcard__top::before{content:none}
/*
 Где превью нет, вместо фейкового кадра — тот же мотив расходящихся колец,
   что у карточки «Видеоотзывы»: поле читается как осознанная графика
   бренда, а не как не загрузившаяся картинка.
*/
.vcard__top::before{
  content:"";
  position:absolute;
  width:150px;height:150px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.018);
  pointer-events:none;
}
.vcard__badge{
  position:absolute;
  top:var(--sp-3);left:var(--sp-3);
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,7,15,.62);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:10.5px;
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
}
.vcard__badge .ico{width:1.1em;height:1.1em}
.vcard__play{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--c-accent-2);
  background:rgba(46,107,184,.16);
  color:#fff;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.vcard__play .ico{width:1em;height:1em;margin-left:2px}
.vcard__b{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);flex:1}
.vcard__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(.95rem,.9rem + .25vw,1.06rem);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
}
.vcard__m{font-size:var(--fs-xs);color:var(--c-muted);margin-top:auto}
.vcard:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.feed__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.feed__handle{font-size:var(--fs-xs);color:var(--c-muted)}

/*
 ---------- Корпус телефона ----------
 Она растворяла
   верх и низ ленты в мутную дымку — на светлом полотне это читалось как
   грязь, а не как приём. Теперь ленту обрезает ЭКРАН: чёткий край корпуса.
   Никаких fade, никаких свечений.
*/
.phone{
  position:relative;
  background:#050B14;
  border-radius:38px;
  padding:8px;
  /* волосяная внутренняя грань — рант корпуса, а не тень-по-умолчанию */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), var(--sh-lg);
  isolation:isolate;
}
.phone__speaker{
  display:block;
  width:54px;height:5px;
  margin:2px auto 6px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
}

/*
   21b. ЭКРАН TELEGRAM
   Прежде это были «тёмные плашки в корпусе» — не читалось как приложение.
   Собран настоящий экран канала: статус-бар, шапка с аватаром, обои,
   сообщения-пузыри, строка ввода. Идентичность канала переехала сюда из
   левой колонки — слов на странице не прибавилось.
   Всё, кроме самих постов, помечено aria-hidden: скринридеру нужен текст,
   а не бутафория интерфейса.
*/
.tg{
  --tg-screen:#0C1520;      /* полотно чата, в семье --c-dark */
  --tg-chrome:#132030;      /* шапка и строка ввода */
  --tg-bubble:#152539;      /* пузырь сообщения */
  --tg-accent:#7FB2E8;      /* акцент интерфейса */
  display:flex;
  flex-direction:column;
  border-radius:28px;
  overflow:hidden;
  background:var(--tg-screen);
}

/*
   бутафорские часы на сайте читались как глупость. Экран начинается сразу
   с шапки канала.
*/

/* --- шапка канала */
.tg__bar{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--tg-chrome);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tg__back,.tg__more{width:18px;height:18px;color:var(--tg-accent)}
.tg__more{color:var(--c-on-dark-mut)}
.tg__av{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--c-accent-2),var(--c-accent));
  color:var(--c-accent-ink);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:15px;
  line-height:1;
}
/*
 🔴 Буква аватара и плейсхолдер строки ввода рисуются из CSS: в разметке
   они были бы ДОБАВЛЕННЫМ текстом и роняли гейт сверки с исходником.
   Оба узла лежат внутри aria-hidden — для скринридера их нет.
*/
.tg__av::before{content:"p"}
.tg__field::before{content:"Broadcast"}
.tg__id{display:flex;flex-direction:column;min-width:0;gap:1px}
.tg__id .feed__name{
  font-size:13px;
  font-weight:var(--fw-semibold);
  color:var(--c-on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tg__id .feed__handle{font-size:11px;color:var(--c-on-dark-mut)}

/* --- полотно чата: обои своей отрисовки, не копия телеграмных дудлов */
.feed__window{
  position:relative;
  /*
 🔴 flex:1 в колоночном флексе перебивал height: экран рос под всю
     высоту трека (16 сообщений), и лента переставала клипаться.
*/
  flex:none;
  padding:var(--sp-4) var(--sp-3);
  overflow:hidden;
  /*
 Единица фиксированная, не vh: экран не
     должен зависеть от высоты окна — на низком ноутбуке текст резался.
*/
  height:470px;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(92,104,255,.16) 0%, transparent 58%),
    radial-gradient(100% 70% at 90% 100%, rgba(22,76,135,.14) 0%, transparent 60%),
    var(--tg-screen);
}

/*
 Клампа больше нет: в пузыре
   лежит ПОЛНЫЙ текст поста, а клик по пузырю открывает его крупно в
   лайтбоксе (правило B — модалка на конкретную единицу контента).
*/
.post{
  position:relative;
  max-width:92%;
  background:var(--tg-bubble);
  border:none;
  border-radius:14px;
  padding:12px 13px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  cursor:pointer;
  text-align:left;
  transition:background var(--dur) var(--ease-out);
}
/*
 имя канала над постом — как в реальном Telegram-канале; текстовый узел
   рисуется из CSS, чтобы не появляться в сверке слов
*/
.post::before{
  content:"Максим Попцов | performa";
  font-size:11.5px;
  font-weight:var(--fw-semibold);
  line-height:1.2;
  color:var(--tg-accent);
}
.post__t{
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:13px;
  line-height:1.3;
  letter-spacing:0;
  color:var(--c-on-dark);
}
.post__d{
  font-size:12.5px;
  line-height:1.45;
  color:#C3D0E0;
}
/* цитата-врезка внутри поста — как «блок с кавычкой» в Telegram */
.post__q{
  font-size:12px;
  line-height:1.45;
  color:#A8B8CC;
  padding:6px 0 6px 9px;
  border-left:2px solid var(--tg-accent);
  background:rgba(124,137,255,.07);
  border-radius:0 6px 6px 0;
}
/*
 дата — как в телеграме: мелко, в правом НИЖНЕМ углу пузыря.
   В разметке она идёт первой, поэтому переставляем order'ом, а не DOM'ом.
*/
.post__meta{
  order:2;
  align-self:flex-end;
  display:flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-text);
  font-size:10.5px;
  font-weight:var(--fw-regular);
  letter-spacing:0;
  text-transform:none;
  color:#8497AD;
  margin-top:-2px;
}
.post__meta::after{content:none}
/* «глаз» просмотров у даты — как в канале; чистая графика, вне сверки слов */
.post__meta::before{
  content:"";
  width:12px;height:8px;
  flex:none;
  background:currentColor;
  clip-path:path("M6 0C2.7 0 0 4 0 4s2.7 4 6 4 6-4 6-4-2.7-4-6-4zm0 6.2A2.2 2.2 0 1 1 6 1.8a2.2 2.2 0 0 1 0 4.4z");
}
@media (hover:hover) and (pointer:fine){
  .post:hover{background:#1B2C42}
  .post:hover .post__t{color:#fff}
}
.post:focus-visible{outline:2px solid var(--tg-accent);outline-offset:2px}

/* --- строка ввода */
.tg__input{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--tg-chrome);
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--c-on-dark-mut);
}
.tg__input .ico{width:17px;height:17px;flex:none}
.tg__field{
  flex:1;
  font-size:12.5px;
  color:#6D7F95;
}
/*
 --- смена постов СЛАЙДОМ
   Текущий пост уезжает вправо, следующий въезжает слева. Один easing на
   оба движения, поэтому смена читается как единый жест, а не как «мигнуло».
   Слайды лежат стопкой в одной точке — высота экрана фиксирована и не
   скачет от длины поста.
*/
.feed__track{position:absolute;inset:var(--sp-4) var(--sp-3)}
.feed__track .post{
  position:absolute;
  inset:0;
  max-width:100%;
  overflow:hidden;
  transform:translateX(-104%);
  opacity:0;
  visibility:hidden;
  transition:
    transform var(--slide-dur,620ms) var(--slide-ease,cubic-bezier(.22,1,.36,1)),
    opacity var(--slide-dur,620ms) var(--slide-ease,cubic-bezier(.22,1,.36,1)),
    visibility 0s linear var(--slide-dur,620ms);
}
.feed__track .post.is-on{
  transform:none;
  opacity:1;
  visibility:visible;
  transition-delay:0s,0s,0s;
  z-index:1;
}
/* уходящий — вправо */
.feed__track .post.is-out{transform:translateX(104%);opacity:0;visibility:visible;z-index:0}
@media (prefers-reduced-motion:reduce){
  .feed__track .post{transition-duration:0s}
}

/* точки-индикаторы под лентой */
.phone__dots{
  display:flex;
  gap:6px;
  justify-content:center;
  padding:9px 0 7px;
  background:var(--tg-screen);
}
.phone__dots i{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  transition:background var(--dur) var(--ease-out),width var(--dur) var(--ease-out);
}
.phone__dots i.on{width:18px;border-radius:3px;background:var(--tg-accent)}

/*
 Прежние .post-плашки удалены: их правила лежали НИЖЕ новых и
   молча перебивали экран Telegram (тот же класс, что «две копии CSS»).
*/

/* ---------- 22. ССЫЛКИ НА ПЛОЩАДКИ ---------- */
.links{border-top:var(--rule)}
@media (hover:hover) and (pointer:fine){
}

/* Площадки */
.socials{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule);margin-top:var(--stack-md)}
.soc{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--sp-4);
  align-items:center;
  padding:var(--sp-3) 0;
  border-bottom:var(--rule);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-body);
  min-height:56px;
}
.soc__ico{
  width:40px;height:40px;
  border:var(--rule);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-ink);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.soc__ico .ico{width:1.1em;height:1.1em}
.soc__go{color:var(--c-muted);transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .soc:hover .soc__ico{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
  .soc:hover .soc__go{transform:translate(4px,-4px);color:var(--c-accent)}
}

/* стрелка в акцентном CTA-ряду */
@media (hover:hover) and (pointer:fine){
  .row-cta:hover .row-cta__go{background:var(--c-accent-ink);color:var(--c-accent);transform:translateX(5px)}
}

/* ---------- 23. СТАТЬИ ---------- */
.arts{
  display:flex;
  gap:var(--sp-5);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  scrollbar-width:none;
  padding-bottom:var(--sp-3);
}
.arts::-webkit-scrollbar{display:none}
.acard{
  flex:0 0 min(300px,78vw);
  scroll-snap-align:start;
  border-top:2px solid var(--c-ink);
  padding-top:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  transition:border-color var(--dur) var(--ease-out);
}
.acard__k{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
}
.acard__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-sm);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  flex:1;
}
.acard__m{font-size:var(--fs-xs);color:var(--c-muted)}
@media (hover:hover) and (pointer:fine){
  .acard:hover{border-color:var(--c-accent)}
}

/* ---------- 24. ФОРМАТЫ ---------- */
.fmts{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule)}
.fmt{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  align-items:start;
  padding:var(--sp-4) 0;
  border-bottom:var(--rule);
}
.fmt__ico{
  width:44px;height:44px;
  border:var(--rule);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-accent);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.fmt__ico .ico{width:1.35em;height:1.35em}
.fmt__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-2);
}
.fmt__d{font-size:var(--fs-sm);color:var(--c-muted);max-width:44ch}
.fmt__tag{
  display:inline-block;
  margin-top:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-muted);
}
@media (hover:hover) and (pointer:fine){
  .fmt:hover .fmt__ico{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
}

/* ---------- 25. FAQ ---------- */
.faq-list{border-top:var(--rule)}
.faq__i,.faq-item{border-bottom:var(--rule)}
.faq__q{
  width:100%;
  text-align:left;
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--sp-5);
  align-items:center;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(.95rem,.9rem + .4vw,1.15rem);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
  padding:var(--sp-4) 0;
  min-height:56px;
  transition:color var(--dur-fast) var(--ease-out);
}
.faq__mark{
  width:34px;height:34px;
  flex:none;
  border:var(--rule);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-accent);
  transition:background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.faq__mark .ico{width:.85em;height:.85em}
.faq__i.open .faq__mark,.faq-item.open .faq__mark{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:var(--c-accent-ink);
  transform:rotate(45deg);
}
/*
 🔴 Свёрнутый ответ прятался ТОЛЬКО геометрией (max-height:0), а его
   содержимое оставалось в дереве доступности: ссылка внутри закрытого
   FAQ имела tabIndex 0 и ловила фокус с клавиатуры — пользователь табал
   «в никуда».
   `visibility:hidden` убирает содержимое и из фокуса, и из скринридера,
   при этом анимацию высоты не ломает: возвращаем видимость сразу,
   а высоту — по переходу.
*/
.faq__a{
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  transition:max-height var(--dur-slow) var(--ease-out),
             visibility 0s linear var(--dur-slow);
}
.faq__i.open .faq__a,.faq-item.open .faq__a{
  visibility:visible;
  transition:max-height var(--dur-slow) var(--ease-out), visibility 0s;
}
.faq__a p,.faq__a-in__inner{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  padding-bottom:var(--sp-6);
  max-width:68ch;
}
/*
 многоабзацный ответ: нижнее поле несёт обёртка, а не каждый абзац —
   иначе между абзацами вырастал двойной провал
*/
.faq__a-in p{padding-bottom:0}
.faq__a-in p+p,.faq__a-in ul+p,.faq__a-in p+ul__inner p+p{margin-top:var(--sp-4)}
.faq__a a a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}
.faq-list-inline{margin:var(--sp-4) 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.faq-list-inline li{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  padding-left:var(--sp-6);
  position:relative;
}
.faq-list-inline li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:12px;height:1.5px;
  background:var(--c-accent);
}
.faq-list-inline strong{color:var(--c-ink)}
@media (hover:hover) and (pointer:fine){
  .faq__q:hover:hover{color:var(--c-accent)}
  .faq__q:hover .faq__mark:hover .faq__mark{border-color:var(--c-accent)}
}

/*
   26. ФИНАЛЬНЫЙ CTA
*/
.final,.final-cta{
  position:relative;
  background:var(--c-dark);
  color:var(--c-on-dark);
  overflow:hidden;
}
.final::before,.final-cta::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(60% 55% at 12% 0%,rgba(22,76,135,.32),transparent 62%);
}
.final>.container,.final-cta>.container{position:relative;z-index:1}
.final__grid{display:grid;grid-template-columns:1fr;gap:var(--stack-md);margin-bottom:var(--stack-md)}
.final__box p{color:var(--c-on-dark-mut);margin-bottom:var(--stack-md);max-width:52ch}
.final__box strong{color:var(--c-on-dark)}
.getlist{margin-bottom:var(--stack-md);border-top:var(--rule-dark)}
.getlist li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  padding-block:var(--sp-3);
  border-bottom:var(--rule-dark);
}
.getlist .ico{color:var(--c-accent-text);margin-top:.15em}

/* Форма */
.form{display:flex;flex-direction:column;gap:var(--sp-3)}
.form input,.form-input,.form-textarea{
  font-size:16px;              /* §1.4 — iOS не зумит */
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  border-radius:0;
  padding:.7rem 0;
  min-height:48px;
  color:var(--c-on-dark);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.form input::placeholder,.form-input::placeholder,.form-textarea::placeholder{color:var(--c-on-dark-mut)}
.form input:focus,.form-input:focus,.form-textarea:focus{
  border-bottom-color:var(--c-accent-2);
  outline:none;
}
.form .btn{margin-top:var(--sp-4)}
.form__note{font-size:var(--fs-xs);color:var(--c-on-dark-mut)}
.form__status{font-size:var(--fs-sm);color:var(--c-accent-text);min-height:1.4em}
.form__status[data-state="err"]{color:#FF8A97}

/* Бонус-блок */
.bonus{
  border:var(--rule-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  align-self:start;
  background:rgba(255,255,255,.03);
}
.bonus__badge{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
  margin-bottom:var(--sp-5);
}
.bonus__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-5);
}
.bonus__li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  padding-block:var(--sp-4);
  border-top:var(--rule-dark);
}
.bonus__li .ico{color:var(--c-accent-text);margin-top:.15em}

.contacts{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule-dark)}
.contact{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--sp-5);
  align-items:center;
  padding:var(--sp-4) 0;
  border-bottom:var(--rule-dark);
  min-height:64px;
}
.contact .ico{color:var(--c-accent-text)}
.contact .k{
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark-mut);
  display:block;
  margin-bottom:2px;
}
.contact .v{font-weight:var(--fw-medium);font-size:var(--fs-body)}
.contact__go{color:var(--c-on-dark-mut);transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .contact:hover .contact__go{transform:translateX(6px);color:var(--c-accent-text)}
}

/* ---------- 27. ФУТЕР ---------- */
footer,.footer{
  background:var(--c-dark);
  color:var(--c-on-dark);
  padding-block:var(--section-y-sm);
  border-top:var(--rule-dark);
}
.foot__logo{height:22px;width:auto;margin-bottom:var(--sp-5)}
.foot__top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--stack-md);
  padding-bottom:var(--stack-md);
  border-bottom:var(--rule-dark);
}
.foot__tag{font-size:var(--fs-sm);color:var(--c-on-dark-mut);max-width:38ch}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.foot__col h3{
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark-mut);
  margin-bottom:var(--sp-4);
}
.foot__col a{
  display:inline-flex;
  align-items:center;
  font-size:var(--fs-sm);
  color:var(--c-on-dark);
  padding-block:var(--sp-2);
  min-height:36px;
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur) var(--ease-out);
}
.foot__note{color:var(--c-on-dark-mut);font-size:var(--fs-xs);display:block;margin-top:var(--sp-3)}
.foot__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-top:var(--stack-md);
  font-size:var(--fs-xs);
  color:var(--c-on-dark-mut);
}
.foot__legal a{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .foot__col a:hover{color:var(--c-accent-text);transform:translateX(3px)}
  .foot__legal a:hover{color:var(--c-accent-text)}
}
.foot__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.foot__links a{
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  padding-block:var(--sp-2);
  min-height:36px;
  display:inline-flex;
  align-items:center;
  transition:color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .foot__links a:hover{color:var(--c-accent-text)}
}
.footer__inner{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.footer__brand{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-3);
}
.footer__line{font-size:var(--fs-sm);color:var(--c-on-dark-mut)}
.footer__line a{color:var(--c-accent-text);text-decoration:underline;text-underline-offset:3px}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-5)}
.footer__legal a{
  font-size:var(--fs-xs);
  color:var(--c-on-dark-mut);
  text-decoration:underline;
  text-underline-offset:3px;
  padding-block:var(--sp-2);
  min-height:36px;
  display:inline-flex;
  align-items:center;
}

/*
   28. СТРАНИЦА «МОНЕТИЗАЦИЯ»
*/
/*
 Лучше
   сделать, как в html, который я скидывал».

   Все прежние слои удалены, а не перекрыты. Их было ТРИ, и они спорили
   друг с другом: полоса на волосяной линии → сетка «заголовок | лид»
   в две колонки на ≥1024 → карточка на светлой подложке с пунктами-плитками.

   Осталась ОДНА линейная колонка, как в присланном HTML: тёмная карточка
   с золотой кромкой, заголовок капсом золотом по центру, лид, три пункта
   с золотыми буллетами, отбивка линией, вывод. ═════════════════════════
*/
.bridge{
  background:var(--c-dark);
  color:var(--c-on-dark);
  border:1px solid color-mix(in srgb,var(--c-warm) 34%,transparent);
  border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.4vw,2.75rem);
}
.bridge__h{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:clamp(.95rem,.85rem + .5vw,1.15rem);
  letter-spacing:var(--ls-caps);
  line-height:1.35;
  text-transform:uppercase;
  text-align:center;
  color:var(--c-warm);
  margin-bottom:var(--stack-md);
}
.bridge__p{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-on-dark);
  margin-bottom:var(--sp-5);
}
.bridge__list{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
/*
 Буллет — золотая точка, а не иконка-галочка: так в эталоне.
   Рисуем ::before, чтобы не держать в разметке <use> ради кружка.
*/
.bridge__li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-on-dark-mut);
}
.bridge__li::before{
  content:"";
  width:7px;height:7px;
  margin-top:.62em;
  border-radius:50%;
  background:var(--c-warm);
}
.bridge__li b{color:var(--c-on-dark);font-weight:var(--fw-semibold)}
/* Вывод отделён линией — в эталоне ровно так, отбивка вместо линейки слева. */
.bridge__foot{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-on-dark);
  border-top:1px solid var(--c-dark-line);
  margin-top:var(--stack-md);
  padding-top:var(--stack-md);
}
/*
 Селектор с .bridge обязателен: общее правило `.on-dark strong,.on-dark b`
   (0,1,1) перебивало одиночный класс и красило акцент в белый.
*/
.bridge .bridge__hi{color:var(--c-warm);font-weight:var(--fw-semibold)}

/* VSL-заглушка */
.vsl{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-dark);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:var(--sp-3);
  padding:var(--sp-6);
  color:var(--c-on-dark);
  max-width:860px;
  margin-bottom:var(--stack-md);
  cursor:pointer;
  border:var(--rule-dark);
  transition:border-color var(--dur) var(--ease-out);
}
.vsl::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(70% 90% at 78% 10%,rgba(22,76,135,.4),transparent 62%);
}
.vsl>*{position:relative}
.vsl__len{
  position:absolute;
  top:var(--sp-5);right:var(--sp-5);
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark-mut);
}
.vsl__play{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--c-accent);
  color:var(--c-accent-ink);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-3);
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out);
}
.vsl__play .ico{width:1.1em;height:1.1em}
.vsl__t{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(1.1rem,.95rem + .9vw,1.6rem);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-head);
  max-width:24ch;
}
.vsl__cap{font-size:var(--fs-sm);color:var(--c-on-dark-mut)}
@media (hover:hover) and (pointer:fine){
  .vsl:hover{border-color:var(--c-accent-2)}
  .vsl:hover .vsl__play{transform:scale(1.08);box-shadow:var(--sh-accent)}
}

.domino{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.75rem);
  line-height:1.35;
  letter-spacing:var(--ls-tight);
  max-width:38ch;
  margin-top:var(--stack-md);
}

/* Артефакты */
.deliv{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule);margin-bottom:var(--stack-lg)}
.deliv li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--c-muted);
  padding-block:var(--sp-5);
  border-bottom:var(--rule);
}
.deliv .ico{color:var(--c-accent);margin-top:.15em}
.deliv b{color:var(--c-ink);font-weight:var(--fw-semibold)}

/* Макет артефакта */
.mock{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-dark);
  border:var(--rule-dark);
  color:var(--c-on-dark);
}
.mock__bar{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:var(--rule-dark);
}
.mock__dots{display:flex;gap:6px}
.mock__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.mock__title{font-size:var(--fs-xs);color:var(--c-on-dark-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__body{display:grid;grid-template-columns:1fr}
.mock__side{padding:var(--sp-5);border-bottom:var(--rule-dark)}
.mock__brand{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-body);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-5);
}
.mock__grp{
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark-mut);
  margin:var(--sp-4) 0 var(--sp-2);
}
.mock__it{font-size:var(--fs-xs);color:var(--c-on-dark-mut);padding:.4rem 0}
.mock__it.on{color:var(--c-accent-text);font-weight:var(--fw-semibold)}
.mock__main{padding:var(--sp-5)}
.mock__branch{
  font-size:var(--fs-xs);
  color:var(--c-on-dark-mut);
  padding-bottom:var(--sp-4);
  border-bottom:var(--rule-dark);
  margin-bottom:var(--sp-5);
}
.mock__branch b{color:var(--c-accent-text)}
.mock__flow{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.mnode{
  border:var(--rule-dark);
  border-radius:var(--r-sm);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
}
.mnode--core{border-color:rgba(46,107,184,.5);background:rgba(46,107,184,.08)}
.mnode__k{font-size:var(--fs-cap);color:var(--c-on-dark-mut);letter-spacing:.08em;text-transform:uppercase}
.mnode__t{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.mnode__d{font-size:var(--fs-cap);color:var(--c-on-dark-mut)}
.mprev{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.doc{border:var(--rule-dark);border-radius:var(--r-sm);padding:var(--sp-5)}
.doc__k{
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
  margin-bottom:var(--sp-4);
}
.doc__r{font-size:var(--fs-xs);color:var(--c-on-dark-mut);padding-block:var(--sp-3);border-top:var(--rule-dark)}
.doc__r b{color:var(--c-on-dark)}
.doc--script{counter-reset:dr}
.doc__r.num{counter-increment:dr;padding-left:var(--sp-6);position:relative}
.doc__r.num::before{
  content:counter(dr);
  position:absolute;left:0;top:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:var(--c-accent-text);
}
.artcap{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--stack-md);max-width:60ch}

/* Таймлайн */
.timeline{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--rule);margin-bottom:var(--stack-lg)}
.tl{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
  padding-block:var(--sp-6);
  border-bottom:var(--rule);
  position:relative;
}
.tl__k{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  letter-spacing:var(--ls-tight);
  color:var(--c-accent);
}
.tl__d{font-size:var(--fs-sm);color:var(--c-muted);max-width:44ch}

/*
 ---------- ГАРАНТИИ ----------
   Было: белая карточка, три колонки на горизонтальных волосяных линиях —
   читалось как таблица, а не как обещание. Стало: цельный объект с
   акцентной шапкой-щитом, иконками у каждого пункта и ВЕРТИКАЛЬНЫМИ
   разделителями (они читаются как колонки, а не как строки таблицы).
*/
.guar{
  border:var(--rule);
  border-radius:var(--r-xl);
  background:var(--c-surface);
  overflow:hidden;
}
.guar__badge{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1rem,.92rem + .5vw,1.25rem);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
  padding:var(--sp-5) clamp(1.25rem,3vw,2.5rem);
  background:var(--c-accent-soft);
  border-bottom:var(--rule);
}
.guar__shield{
  width:44px;height:44px;
  flex:none;
  border-radius:50%;
  background:var(--c-accent);
  color:var(--c-accent-ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.guar__shield .ico{width:1.25em;height:1.25em}
.guar__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:clamp(1.25rem,3vw,2.5rem);
}
.guar__i{
  display:grid;
  align-content:start;
  gap:var(--sp-3);
  padding-block:var(--sp-5);
  border-top:var(--rule);
}
.guar__i:first-child{border-top:none;padding-top:0}
.guar__ico{
  width:40px;height:40px;
  border:1px solid var(--c-accent);
  border-radius:50%;
  color:var(--c-accent);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-2);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.guar__ico .ico{width:1.15em;height:1.15em}
.guar__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
}
.guar__d{font-size:var(--fs-sm);color:var(--c-muted)}
.guar__note{
  font-size:var(--fs-xs);
  color:var(--c-muted);
  padding:var(--sp-5) clamp(1.25rem,3vw,2.5rem);
  border-top:var(--rule);
  background:var(--c-bg);
}
@media (hover:hover) and (pointer:fine){
  .guar__i:hover .guar__ico{background:var(--c-accent);color:var(--c-accent-ink)}
}
@media (min-width:768px){
  .guar__i{
    border-top:none;
    border-left:var(--rule);
    padding:0 0 0 var(--sp-6);
  }
  .guar__i:first-child{border-left:none;padding-left:0}
}

/*
 ---------- Отзывы ----------
   Карточка читается как видеоотзыв: метка, метрики, цитата, подпись.
   Клик открывает окно с этим отзывом (там, где видео есть). Сетка .revs
   и модификаторы .rev--wide / .rev--soon удалены вместе с раскладкой
   «два в ряд + полоса „Скоро“ снизу» — их больше нечему обслуживать.
*/
.rev{
  position:relative;
  border:var(--rule-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  background:var(--c-dark-2);
  overflow:hidden;
  isolation:isolate;
}
/*
 🔴 Чип-play вместо постера 16:9. Постером служил пустой градиент с кнопкой
   по центру — без реального кадра это и есть тот самый нейрослоп. Обещание
   видео теперь несёт компактный чип, а вес карточки — сама цитата.
*/
.rev__chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  align-self:flex-start;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
}
.rev__chipico{
  width:34px;height:34px;
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  border:1px solid var(--c-accent-2);
  background:rgba(46,107,184,.14);
  color:var(--c-on-dark);
  transition:background 420ms cubic-bezier(.22,1,.36,1),
             color 420ms cubic-bezier(.22,1,.36,1),
             transform 420ms cubic-bezier(.22,1,.36,1);
}
.rev__chipico .ico{width:.95em;height:.95em;margin-left:1px}
.rev__q{margin-top:auto}
/*
 Цифры — лента на волосяных линиях: ×8 / 15→41% / +80% читаются как одна
   спека, а не как три случайно рассыпанных числа.
*/
.rev__metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:var(--sp-4);
  padding-block:var(--sp-4);
  border-block:var(--rule-dark);
}
.rev__m{display:flex;flex-direction:column;gap:3px;min-width:0}
.rev__m b{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:clamp(1rem,.9rem + .45vw,1.25rem);
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.rev__m span{font-size:var(--fs-cap);line-height:1.3;color:var(--c-on-dark-mut)}
/*
 Цитата — главный визуальный вес карточки (референс Rox): редакторский
   кегль, а не подпись под фейковым превью.
*/
.rev__q{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:clamp(1.05rem,.95rem + .55vw,1.4rem);
  line-height:1.4;
  letter-spacing:var(--ls-tight);
  color:var(--c-on-dark);
  flex:1;
}
.rev__by{display:flex;align-items:center;gap:var(--sp-4);padding-top:var(--sp-5);margin-top:var(--sp-2);border-top:var(--rule-dark)}
.rev__av{
  width:40px;height:40px;
  border-radius:50%;
  flex:none;
  border:1px solid var(--c-accent-2);
  color:var(--c-accent-text);
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);
}
.rev__by b{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.rev__by span{font-size:var(--fs-xs);color:var(--c-on-dark-mut)}
@media (hover:hover) and (pointer:fine){
  .rev:hover{border-color:var(--c-accent-2);transform:translateY(var(--hover-lift))}
}

/*
   29. СТРАНИЦА «ПРАКТИКУМ»
*/
.hero__pre-card{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  max-width:60ch;
  margin-bottom:var(--sp-5);
  padding-left:var(--sp-5);
  border-left:2px solid var(--c-line);
}
.hi-inline{color:var(--c-accent);font-weight:var(--fw-semibold)}
.hi-underline{
  color:var(--c-ink);
  font-weight:var(--fw-semibold);
  box-shadow:inset 0 -.4em 0 var(--c-accent-soft);
}
.hero__product-eyebrow{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  color:var(--c-accent);
  margin-bottom:var(--sp-3);
}
/*
 «Живой онлайн-практикум» — вторая половина кикера, а не отдельная строка:
   две подряд идущие мелкие строки читались как разрозненные метки.
*/
.hero__product-meta{
  font-family:var(--font-text);
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  letter-spacing:0;
  text-transform:none;
  color:var(--c-muted);
}
.hero__product-meta::before{content:"·";margin-right:.55em;color:var(--c-line)}
.hero__h1{max-width:17ch}
.hero__subtitle{margin-bottom:var(--stack-md)}
/* Пояснения к первому экрану — полоса под ним */
.hero__notes{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--stack-md);
  margin-top:var(--stack-lg);
  padding-top:var(--stack-md);
  border-top:var(--rule);
}
.hero__notes-col{display:flex;flex-direction:column;gap:var(--sp-5);justify-content:center}
@media (min-width:900px){
  .hero__notes{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-7);align-items:stretch}
}
.hero__sub-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--sp-5);
  align-items:center;
  background:var(--c-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
}
.hero__sub-card-text{font-size:var(--fs-sm);color:var(--c-on-dark-mut);margin:0}
.hero__sub-card .em-strong{color:var(--c-on-dark);font-weight:var(--fw-semibold)}
.hero__sub-card-arrow{
  flex:none;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  color:var(--c-accent-text);
  display:inline-flex;align-items:center;justify-content:center;
  animation:nudge 2.6s var(--ease-in-out) infinite;
}
.hero__sub-card-arrow .ico{width:1.2em;height:1.2em}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.em-strong{color:var(--c-ink);font-weight:var(--fw-semibold)}
.hero__diff{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  border-left:2px solid var(--c-accent);
  padding-left:var(--sp-5);
  max-width:60ch;
}
.hero__diff strong{color:var(--c-ink)}
.praktikum-vsl{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-dark);
  max-width:860px;
  border:var(--rule);
}
.praktikum-vsl iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/*
 ---------- Фасад VSL: плеер грузится по клику ----------
   🔴 Vimeo-iframe на загрузке страницы тянул сторонние скрипты и ронял
   Best Practices до 77. Теперь на первом экране лежит статичный фасад,
   а тяжёлый плеер подставляется первым же кликом.
*/
.vsl-facade{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-color:transparent;
  background:
    radial-gradient(72% 90% at 50% 0%,rgba(46,107,184,.32),transparent 62%),
    var(--grad-dark);
  transition:box-shadow var(--dur) var(--ease-out);
}
.vsl-facade__play{
  width:72px;height:72px;
  border-radius:50%;
  background:var(--c-accent);
  color:var(--c-accent-ink);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-accent);
  transition:transform var(--dur) var(--ease-spring);
}
.vsl-facade__play .ico{width:1.35em;height:1.35em}
@media (hover:hover) and (pointer:fine){
  .vsl-facade:hover .vsl-facade__play{transform:scale(1.08)}
}
.vsl-facade:active .vsl-facade__play{transform:scale(.97)}

.vsl-warning{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  max-width:60ch;
}
.cta-wrap{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
/*
   А то сейчас очень мелко выглядит, а это важная инфа».
   Прежние .trust-line / .trust-line__warn УДАЛЕНЫ, а не перекрыты: строка
   несла ещё и «Следующий поток — дата уточняется», и после снятия
   этой фразы от компонента ничего не осталось. Знак — тот же щит
   #i-shield, что в секции «Гарантия результата» ниже по странице.
*/
.trust-box{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--c-accent-2);
  border-left:3px solid var(--c-accent);
  border-radius:var(--r-md);
  background:var(--c-accent-soft);
  color:var(--c-ink);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  line-height:1.5;
}
.trust-box__ico{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-accent-text);
  background:var(--c-surface);
  border:1px solid var(--c-accent-2);
}
.trust-box__ico .ico{width:1.25em;height:1.25em}

/*
 ---------- «Кому подходит» — чек-лист-объект ----------
   Было: семь пунктов-галочек в сетке на волосяных линиях. Стало: карточки
   с крупным маркером, ровным ритмом и внятной кромкой; акцент — сам маркер,
   а не линейка под строкой.
*/
.aud-list{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.audience-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:center;
  padding:var(--sp-5);
  border:var(--rule);
  border-radius:var(--r-md);
  background:var(--c-surface);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--c-ink);
  transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.audience-card__mark{
  width:34px;height:34px;
  flex:none;
  border-radius:50%;
  background:var(--c-accent-soft);
  color:var(--c-accent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.audience-card__mark .ico{width:1.05em;height:1.05em;stroke-width:2.4}
@media (hover:hover) and (pointer:fine){
  .audience-card:hover{border-color:var(--c-accent);transform:translateY(var(--hover-lift))}
  .audience-card:hover .audience-card__mark{background:var(--c-accent);color:var(--c-accent-ink)}
}

.big-idea__card{
  background:var(--c-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,4.5rem);
  position:relative;
  overflow:hidden;
}
.big-idea__card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(55% 75% at 100% 0%,rgba(46,107,184,.26),transparent 60%);
}
.big-idea__lead,.big-idea__body{position:relative;z-index:1}
.big-idea__lead{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(1.5rem,1.1rem + 2vw,2.6rem);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--stack-md);
  max-width:20ch;
}
.big-idea__lead strong{color:var(--c-accent-text);font-weight:var(--fw-extra)}
.big-idea__body{font-size:var(--fs-lg);color:var(--c-on-dark-mut);max-width:62ch}
.big-idea__body strong{color:var(--c-on-dark)}

.case-headline{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-h1);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  max-width:22ch;
  margin-bottom:var(--stack-lg);
}
/*
 ---------- «Реальный кейс»: три ясных яруса ----------
   1) метрики акцентным блоком на тёмном, 2) «Было → Что сделали» двумя
   карточками, 3) таблица метрик. Раньше всё шло подряд на светлом фоне
   и читалось как «месиво».
*/
.case-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-bottom:var(--stack-lg);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:
    radial-gradient(60% 80% at 8% 0%,rgba(22,76,135,.34),transparent 62%),
    var(--c-dark);
  color:var(--c-on-dark);
  padding:clamp(1.5rem,3.4vw,2.75rem);
}
.case-stat{padding-block:var(--sp-5);border-bottom:var(--rule-dark)}
.case-stat:last-child{border-bottom:none}
.case-stat__value{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(2.25rem,1.4rem + 3.4vw,3.75rem);
  line-height:.92;
  color:var(--c-accent-text);
  letter-spacing:-.04em;
  margin-bottom:var(--sp-3);
  font-variant-numeric:tabular-nums;
}
.case-stat__label{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--c-on-dark);
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.case-stat__sub{
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  font-weight:var(--fw-regular);
  font-variant-numeric:tabular-nums;
}

.case-block{margin-bottom:var(--stack-md)}
.case-pair{margin-bottom:var(--stack-md)}
.case-pair .case-block{margin-bottom:0}
/*
 Было две одинаковые карточки рядом. Стало — ПЕРЕХОД:
   «Было» утоплено (нет карточки, приглушённый текст, волосяная линейка
   слева), «Что сделали» поднято (тёмная панель, акцентная кромка, основной
   кегль). Между ними стрелка на оси. Разница состояний = разница подачи.
*/
.case-block--before{
  padding:var(--sp-5) 0 var(--sp-5) var(--sp-5);
  border-left:2px solid var(--c-line);
  background:none;
}
.case-block--before .case-label{color:var(--c-muted)}
.case-block--before .case-label::before{background:var(--c-muted)}
.case-block--before .case-text{color:var(--c-muted);font-size:var(--fs-sm)}
.case-block--before .em-strong{color:var(--c-ink)}
.case-block--after{
  position:relative;
  padding:var(--sp-6);
  border-radius:var(--r-lg);
  background:var(--c-dark);
  border:1px solid transparent;
  box-shadow:0 22px 48px -34px rgba(10,12,32,.85);
  overflow:hidden;
}
.case-block--after::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--c-accent);
}
.case-block--after .case-label{color:var(--c-accent-text)}
.case-block--after .case-text{color:var(--c-on-dark-mut)}
.case-block--after .case-text strong{color:var(--c-on-dark)}
/* Стрелка перехода: на десктопе смотрит вправо, в столбик — вниз. */
.case-pair__go{
  width:44px;height:44px;
  align-self:center;
  justify-self:center;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:var(--rule);
  color:var(--c-accent);
  background:var(--c-bg);
  transform:rotate(90deg);
}
@media (min-width:900px){.case-pair__go{transform:none}}
.case-block--table{
  border:var(--rule);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  background:var(--c-surface);
}
.case-label{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:var(--sp-4);
}
.case-label::before{content:"";width:24px;height:1px;background:currentColor}
.case-text{color:var(--c-muted);max-width:66ch}
.case-text em{font-style:italic}
.case-table-wrap{overflow-x:auto;overscroll-behavior-x:contain;border-top:var(--rule)}
.case-table{min-width:560px;font-size:var(--fs-sm)}
.case-table th,.case-table td{padding:var(--sp-4) var(--sp-5) var(--sp-4) 0;text-align:left;border-bottom:var(--rule)}
.case-table th{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-muted);
}
.case-table td{color:var(--c-muted);font-variant-numeric:tabular-nums}
.case-table td:first-child{color:var(--c-ink);font-weight:var(--fw-medium)}
.case-table .delta{color:var(--c-accent);font-weight:var(--fw-bold);font-family:var(--font-display)}
.case-table .delta-neutral{color:var(--c-muted)}

/*
 Цитата была тёмным прямоугольником шириной 900px внутри контейнера
   1240 — правый край не доходил до сетки, и плашка «съезжала влево».
   Теперь полоса во ВСЮ ширину контейнера: акцентная линейка сверху, аура
   из-за левого плеча, подпись — на волосяной линии справа. Ширину СТРОКИ
   держит max-width самого текста, а не ширина полосы.
*/
.case-quote{
  position:relative;
  width:100%;
  max-width:none;
  background:var(--c-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,3.5rem);
  overflow:hidden;
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:clamp(1.1rem,.95rem + 1vw,1.6rem);
  line-height:1.38;
  letter-spacing:var(--ls-tight);
  text-wrap:pretty;
}
.case-quote::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--c-accent),color-mix(in srgb,var(--c-accent) 8%,transparent));
}
/* мягкая аура из-за левого плеча — тот же приём, что в героях подстраниц */
.case-quote::after{
  content:"";
  position:absolute;
  left:-6%;top:-46%;
  width:46%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,107,184,.22),transparent 72%);
  pointer-events:none;
}
.case-quote strong{color:var(--c-accent-text);font-weight:var(--fw-bold)}
.case-quote-author{
  display:block;
  position:relative;
  z-index:1;
  margin-top:var(--stack-md);
  padding-top:var(--sp-5);
  border-top:var(--rule-dark);
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:var(--fs-sm);
  color:var(--c-on-dark-mut);
  letter-spacing:0;
}
@media (min-width:900px){
  .case-quote{max-width:none}
  .case-quote-author{text-align:right}
}

.bio-wrap{display:grid;grid-template-columns:1fr;gap:var(--stack-lg);align-items:start}
.bio-photo{position:relative}
.bio-photo__img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-lg);
  background:var(--c-surface-2);
}
.bio-card{padding-top:var(--sp-5);margin-top:var(--sp-5);border-top:var(--rule)}
.bio-card__name{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
}
.bio-card__role{font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:var(--sp-4)}
.bio-card__tag{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--c-accent);
  border:var(--rule);
  border-radius:var(--r-pill);
  padding:.35rem .8rem;
  margin:0 var(--sp-2) var(--sp-2) 0;
}
.bio-content .bio-lead{margin-bottom:var(--stack-md)}
.bio-lead{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--stack-md);max-width:62ch}
.exp .bio-lead{margin-top:0;margin-bottom:var(--stack-md);max-width:none}
.bio-lead strong{color:var(--c-ink)}
.bio-lead .brand{display:inline;color:var(--c-accent);font-weight:var(--fw-bold)}
.bio-content{display:flex;flex-direction:column;gap:var(--stack-md)}
.bio-section{padding-top:var(--sp-6);border-top:var(--rule)}
.bio-section__label{
  font-family:var(--font-display);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:var(--sp-4);
}
.bio-section__text{font-size:var(--fs-body);color:var(--c-muted)}
.bio-section__text strong,.bio-companies strong,.bio-list strong{color:var(--c-ink);font-weight:var(--fw-semibold)}
/*
 🔴 Здесь стоял грид «иконка | текст», а иконки в разметке НЕТ: пункт
   «PwC — большая консалтинговая четвёрка» разваливался на две колонки —
   «PwC» в узкой, остальное в широкой, с провалом посередине. То же било по
   «…фонда с $200 млн под управлением»: сумма улетала в отдельный столбец
   к правому краю. Тот же класс, что «чек-бокс 152-ФЗ рассыпается на
   flex-элементы» (§4.1): раскладочный компонент нельзя вешать на абзац
   с инлайн-разметкой. Здесь это обычный список с маркером-штрихом.
*/
.bio-companies,.bio-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.bio-companies li,.bio-list li{
  position:relative;
  padding-left:var(--sp-5);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--c-muted);
}
.bio-companies li::before,.bio-list li::before{
  content:"";
  position:absolute;
  left:0;top:.65em;
  width:10px;height:1px;
  background:var(--c-accent);
}
.bio-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-6);
  margin-top:var(--sp-5);
  padding-top:var(--sp-5);
  border-top:var(--rule);
}
/*
 30px + opacity .6 + grayscale делали логотипы неразличимыми — читались
   как мусор на полотне. Крупнее и контрастнее, серые для единообразия.
*/
.bio-logo-img{
  height:34px;
  width:auto;
  opacity:.82;
  filter:grayscale(1) contrast(1.15);
  transition:opacity var(--dur) var(--ease-out),filter var(--dur) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bio-logo-img:hover{opacity:1;filter:none}
}

/*
 Была плоская тёмная плашка «иконка + заголовок + абзац» — читалась
   как обычная карточка. Стало — «гарантийный талон»: срезанный угол,
   акцентная линейка по верхней кромке, печать-иконка на пересечении,
   заголовок и текст в двух колонках через волосяную вертикаль.
*/
.guarantee__card{
  background:var(--c-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,3.5rem);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--stack-md);
  align-items:start;
  /* срез правого верхнего угла — форма талона, а не прямоугольника */
  clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.guarantee__card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(55% 70% at 8% 0%,rgba(22,76,135,.3),transparent 60%);
}
/* акцентная линейка по верхней кромке — обрывается ровно у среза */
.guarantee__card::after{
  content:"";
  position:absolute;left:0;top:0;height:2px;
  width:calc(100% - 46px);
  background:linear-gradient(90deg,var(--c-accent),color-mix(in srgb,var(--c-accent) 10%,transparent));
  pointer-events:none;
}
.guarantee__card>*{position:relative;z-index:1}
@media (min-width:900px){
  .guarantee__card{
    grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);
    column-gap:var(--sp-7);
    align-items:center;
  }
  .guarantee__body{
    padding-left:var(--sp-7);
    border-left:var(--rule-dark);
  }
}
.guarantee__icon{
  width:64px;height:64px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--c-accent-2);
  color:var(--c-accent-text);
  background:rgba(46,107,184,.10);
  display:flex;align-items:center;justify-content:center;
  /* «печать»: два кольца вокруг знака */
  box-shadow:0 0 0 8px rgba(46,107,184,.07),0 0 0 16px rgba(46,107,184,.04);
}
.guarantee__icon .ico{width:1.5em;height:1.5em}
.guarantee__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-h2);
  line-height:1.08;
  letter-spacing:var(--ls-tight);
  margin-bottom:0;
}
.guarantee__body{font-size:var(--fs-body);line-height:1.6;color:var(--c-on-dark-mut);max-width:56ch}
.guarantee__body strong{color:var(--c-on-dark)}

/*
 финальный CTA «Практикума» — тем же кеглем, что заголовки финальных
   секций на главной и «Монетизации» (правило D), а не размером героя
*/
/*
 Финальный CTA «Практикума» — две колонки, как у финальных CTA главной и
   «Монетизации»: слева призыв и кнопка, справа P.S. отдельной панелью.
   В один столбик всё жалось в левый край, а правая половина пустовала.
*/
.final-cta__grid{display:grid;grid-template-columns:1fr;gap:var(--stack-lg);align-items:start}
@media (min-width:900px){
  .final-cta__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-8)}
}
.final-cta__h{font-size:var(--fs-h1);max-width:18ch;margin-bottom:var(--stack-md)}
.final-cta__sub{font-size:var(--fs-body);color:var(--c-on-dark-mut);max-width:46ch;margin-bottom:var(--stack-md)}
.final-cta__trust{font-size:var(--fs-sm);color:var(--c-on-dark-mut);margin-top:var(--sp-5)}
.final-cta__a .btn-cta{width:auto}
.ps{
  padding:var(--stack-md);
  border:var(--rule-dark);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.025);
  max-width:none;
}
@media (max-width:899px){.ps{padding:var(--stack-md) 0 0;border:none;border-top:var(--rule-dark);border-radius:0;background:none}}
.ps__label{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  color:var(--c-accent-text);
  margin-bottom:var(--sp-4);
}
.ps__text{font-size:var(--fs-sm);color:var(--c-on-dark-mut)}
.ps__text+.ps__text{margin-top:var(--sp-4)}
.ps__text strong{color:var(--c-on-dark)}

/* ---------- 30. МОДАЛКА ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(10,12,32,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gutter);
  opacity:0;
  visibility:hidden;                /* §4.1 — фокус не остаётся в tab-order */
  transition:opacity var(--dur) var(--ease-out),visibility 0s linear var(--dur);
  overflow-y:auto;
}
.modal-backdrop.open{opacity:1;visibility:visible;transition-delay:0s}
.modal{
  background:var(--c-dark);
  color:var(--c-on-dark);
  border:var(--rule-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-7);
  width:min(520px,100%);
  position:relative;
  box-shadow:var(--sh-lg);
  transform:translateY(14px);
  transition:transform var(--dur) var(--ease-out);
  margin-block:auto;
}
.modal-backdrop.open .modal{transform:none}
.modal__close{
  position:absolute;
  top:var(--sp-4);right:var(--sp-4);
  width:44px;height:44px;
  border-radius:50%;
  color:var(--c-on-dark-mut);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.modal__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-3);
  padding-right:var(--sp-8);
}
.modal__sub{font-size:var(--fs-sm);color:var(--c-on-dark-mut);margin-bottom:var(--stack-md)}
.form-group{margin-bottom:var(--sp-2)}
.form-textarea{min-height:96px;resize:vertical}
.form-consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:start;
  margin:var(--sp-6) 0;
  cursor:pointer;
}
/* §4.1 — чекбокс не попадает под общий appearance:none */
.form-consent input[type="checkbox"]{
  width:22px;height:22px;
  margin-top:.1em;
  padding:0;border:0;min-height:0;
  background:none;
  appearance:auto;
  -webkit-appearance:auto;
  accent-color:var(--c-accent);
}
.form-consent span{font-size:var(--fs-xs);line-height:1.55;color:var(--c-on-dark-mut)}
.form-consent a{color:var(--c-accent-text);text-decoration:underline;text-underline-offset:3px}
.form-submit{width:100%}
.form-success{display:none;text-align:center}
.form-success.show{display:block}
.form-success__icon{
  width:60px;height:60px;
  margin:0 auto var(--sp-5);
  border-radius:50%;
  border:1px solid var(--c-accent-2);
  color:var(--c-accent-text);
  display:flex;align-items:center;justify-content:center;
}
.form-success__icon .ico{width:1.5em;height:1.5em}
.form-success__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  margin-bottom:var(--sp-4);
}
.form-success__text{font-size:var(--fs-sm);color:var(--c-on-dark-mut);margin-bottom:var(--sp-5)}
@media (hover:hover) and (pointer:fine){
  .modal__close:hover{background:rgba(255,255,255,.08);color:var(--c-on-dark)}
}

/*
   31. АДАПТИВ (mobile-first). Точки — 768 / 1024 / 1440 (§2)
*/
@media (min-width:768px){
  .sh--split{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-6)}

  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .stat{padding:var(--sp-5) var(--sp-6) var(--sp-5) 0;border-bottom:none;border-right:var(--rule)}
  .stat:last-child{border-right:none}
  .on-dark .stat{border-right-color:var(--c-dark-line)}

  .row{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-6);align-items:start;padding:var(--sp-3) 0}
  .row:has(.row__k){grid-template-rows:auto auto}
  .row__k{grid-row:1}
  .row:has(.row__k) .row__t{grid-column:1;grid-row:2}
  .row:has(.row__k) .row__d{grid-column:2;grid-row:1 / span 2;align-self:center}
  .row--icon{grid-template-columns:40px minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:var(--sp-5)}

  .cmp{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
  .cases:not(.slider__track){grid-template-columns:repeat(2,minmax(0,1fr))}
  .guar__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-6);row-gap:var(--sp-6)}
  .deliv{grid-template-columns:1fr 1fr;column-gap:var(--sp-7)}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-7)}
  .aud-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
  .case-stats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-7)}
  .case-stat{border-bottom:none;border-right:var(--rule-dark);padding:0 var(--sp-6) 0 0}
  .case-stat:last-child{border-right:none}
  .mprev{grid-template-columns:1fr 1fr}
  .mock__flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock__body{grid-template-columns:230px 1fr}
  .mock__side{border-bottom:none;border-right:var(--rule-dark)}
  .final__grid{grid-template-columns:1.4fr .6fr;gap:var(--sp-8)}
  .contacts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-6)}
  .contact{border-bottom:none;border-right:var(--rule-dark);padding-right:var(--sp-5)}
  .contact:last-child{border-right:none}
  .exp{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--sp-8)}
  /*
 sticky у портрета убран: секция теперь короче экрана, липкость ничего
     не даёт, зато в полностраничном скриншоте портрет уезжает и на его
     месте читается «пустой бокс» — ровно та претензия, что пришла с ревью.
*/
  .feed{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--sp-8)}
  .bio-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-8)}
  /*
 🐛 Шаблон «auto 1fr» на ТРЁХ детях (иконка, заголовок, текст): иконка
     занимала первую колонку, заголовок — вторую, а текст сваливался во
     вторую строку под иконку. Блок читался как три разбросанных куска.
     Иконка — своя колонка на обе строки, заголовок и текст — во второй.
*/
  /*
     Прежняя раскладка (печать слева, заголовок и текст стопкой справа)
     оставляла правую треть пустой.
*/
  .guarantee__card{grid-template-columns:auto minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-5) var(--sp-7);align-items:center}
  .guarantee__icon{grid-row:auto}
  .guarantee__title{grid-column:2}
  .guarantee__body{grid-column:3}
  .foot__top{grid-template-columns:1.3fr 1fr}
  .form .btn{align-self:flex-start;min-width:280px}
  .fmt{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-5)}
  /* четыре формата 2×2: колонка из четырёх строк тянула секцию вдвое */
  .fmts{grid-template-columns:1fr 1fr;column-gap:var(--sp-7)}
  .fmts .fmt:nth-child(-n+2){border-top:none}
  .fmt__tag{margin-top:0;justify-self:end}
  /*
 Материалы канала — ОДНОЙ строкой: метка | заголовок | тип.
     Стопкой в три этажа они давали 110px на строку и раздували секцию.
*/
  .hero__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--sp-7)}
  .hero__media{max-width:100%;justify-self:end}
}

@media (min-width:1024px){
  /*
 🐛 У ряда ЧЕТЫРЕ ячейки (номер, иконка, заголовок, описание), а шаблон
     задавал 1fr на колонку ИКОНКИ и auto на описание: иконка получала
     пол-строки пустоты, заголовки уезжали вправо на разное расстояние,
     описания прижимались к правому краю рваным левым краем.
     Колонка иконки — по содержимому, текстовые — пропорциональные.
*/
  .rows--4 .row--icon{grid-template-columns:40px minmax(0,1fr) minmax(0,1.25fr)}
  .cases:not(.slider__track){grid-template-columns:repeat(3,minmax(0,1fr))}
  .guar__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deliv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aud-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  /*
 седьмая карточка занимает освободившийся ряд целиком: иначе в сетке
     3×3 на месте восьмой и девятой оставалась дырка
*/
  .audience-card--wide{grid-column:span 3}
  .svet{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--sp-7)}
  /*
 На десктопе четыре статьи помещаются целиком — свайп-режим ни к чему,
     а обрезанная четвёртая карточка читалась как поломка вёрстки.
*/
  .arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding-bottom:0}
  /*
 Восемь вопросов в столбик — это отдельный экран пролистывания.
     Две независимые колонки: раскрытие двигает только свою.
*/
  .faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-8);align-content:start}
  /*
     Разделители остались от СТРОЧНОЙ раскладки соцсетей; когда блок
     переделали в плитки, они продолжили рисоваться по правому краю
     плитки — это и были «палки». Удалены, а не перекрыты.
*/
  .socials{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-6)}
  .soc{padding-inline:0 var(--sp-4)}
  .faq-list .faq__i:nth-child(-n+2){border-top:var(--rule)}
  .acard{flex:none}
  .hero__media{max-width:430px}
}

/* Тач-устройства: увеличенные зоны (§8.4) — по возможностям, не по ширине */
@media (pointer:coarse){
  .nav a,.foot__col a,.foot__links a,.footer__legal a,.alink,
  .brand,.contact,.soc{
    /*
 44px ровно давало 43.6 после субпиксельного округления и проваливало
       гейт §8.4 — держим запас в 1px.
*/
    min-height:45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .contact,.soc{display:grid}
  .btn,.btn-cta{padding-block:1.15rem}
  .svet__opt{min-height:44px}
  .form-consent input[type="checkbox"]{width:24px;height:24px}
  /* hover-эффекты недоступны — лента останавливается по тапу (JS) */
}

/*
 iOS не зумит поле с кеглем ≥16px — правило нужно и телефону, и планшету,
   поэтому живёт выше телефонной границы.
*/
@media (max-width:1023px){
  .form input,.form-input,.form-textarea{font-size:16px}
}

/*
 Была граница max-width:768px — ровно на 768 (портрет iPad, одна из
   ширин приёмки) телефонные правила ложились ПОВЕРХ планшетного блока
   adaptive.css §8 (min-width:768px). Отсюда «CTA-ряд в столбик со стрелкой
   под подписью» и кнопки во всю ширину с подписью по центру на планшете.
   Граница телефона везде 767px — как в adaptive.css.
*/
@media (max-width:767px){
  .btn,.btn-cta{width:100%}
  .btn--auto{width:auto}
  .hero__cta-row,.cta-wrap{width:100%}
  .lead,.hero__sub,.hero__subtitle{max-width:42ch}
  .hero__sub-card{grid-template-columns:1fr;gap:var(--sp-5)}
  .row-cta .btn{width:100%}
  /*
 Здесь стояло clamp(320px,44vh,380px) — в режиме прокрутки этого
     хватало, потому что лента ехала. В режиме слайдов слот обязан вмещать
     САМЫЙ ДЛИННЫЙ пост целиком, иначе он обрезается (замер: 538px при 320px
     ширины окна). vh брать нельзя — на невысоком телефоне 44vh даёт 300px и
     текст снова режется. Поэтому фиксированная величина.
*/
  .feed__window{height:580px}

  /*
 🔴 Отступ слева у вариантов ответа равнялся ширине номера вопроса —
     на 390px это загоняло каждую «таблетку» на свою строку и растягивало
     «Светофор» на два экрана. На телефоне выравниваем по левому краю.
*/
  .svet__opts{padding-left:0;gap:var(--sp-2)}
  .svet__opt{padding:.5rem .85rem}

  /* Ряд-механика на телефоне: номер и иконка в одной строке с заголовком */
  .row--icon{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3) var(--sp-4)}
  .row--icon .row__d{grid-column:1 / -1}
  .row__ico{width:28px;height:28px}

  .stat{padding:var(--sp-4) 0}
  .exp__ph{max-height:400px}
  .hero__cred{padding:var(--sp-5) var(--sp-4) var(--sp-3)}
  .hero__creds li{padding-block:var(--sp-2)}
}

/*
   32. ГЕРОИ ПОДСТРАНИЦ — две колонки
   Одноколоночная простыня («шапка → бридж → видео → CTA») давала
   герой в 1670px при пустой правой половине контейнера. Текстовый
   стек уходит влево, видео и CTA — вправо, липко по скроллу.
*/
.hero__cols{display:grid;grid-template-columns:1fr;gap:var(--stack-md)}
@media (min-width:1024px){
  .hero__cols{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--sp-8);align-items:start}
}

/*
   32b. ЕДИНЫЙ КАНОН ГЕРОЯ ПОДСТРАНИЦ
   «Монетизация» и «Практикум» строятся одинаково: слева иерархия
   eyebrow → H1 → подзаголовок → пояснение, справа видео + CTA.
   🔴 Прежде заголовок шёл во всю ширину контейнера: на 1440 он давал
   5 строк дисплейным кеглем, и первый экран не помещался в 900 —
   «вылезал» ровно так, как в ревью. Отдельный, поджатый кегль героя
   подстраницы + две колонки решают это без правки текста.
*/
.hero--page{
  padding-top:calc(var(--sp-7) + 34px);
  padding-bottom:var(--section-y-sm);
}
.hero--page h1,.hero--page .hero__h1{
  font-size:var(--fs-display-sub);
  line-height:1.04;
  letter-spacing:-.036em;
  /*
 ширину строки задаёт колонка, а не ch-ограничитель: с ним заголовок
     «Практикума» вставал в 6 строк при незанятой правой половине колонки
*/
  max-width:none;
  margin-bottom:var(--sp-4);
}
.hero--page .hero__eyebrow{margin-bottom:var(--sp-4);flex-wrap:wrap;row-gap:var(--sp-1)}
.hero--page .hero__sub,.hero--page .hero__subtitle{
  font-size:var(--fs-body);
  max-width:52ch;
  margin-bottom:var(--stack-md);
}
.hero--page .hero__cols-b{display:flex;flex-direction:column;gap:var(--sp-5);align-items:stretch}
.hero--page .hero__cta{width:100%}
.hero--page .vsl,.hero--page .praktikum-vsl{max-width:none;margin-bottom:0}
.hero--page .vsl{padding:var(--sp-5)}
@media (min-width:1024px){
  /*
 Правая колонка стоит вровень с кикером: любой отступ сверху добавлялся
     к высоте ряда (ряд задаёт именно она), и первый экран вылезал за 900.
*/
  .hero--page .hero__cols-b{padding-top:0}
}

/*
   32c. ГЕРОЙ-ДОКУМЕНТ
   «Практикум и Монетизация — это НЕ лендинг, а информационные страницы,
   которые ЛИСТАЮТСЯ.» Две колонки здесь не просто раскладка: они
   ПЕРЕСТАВЛЯЮТ порядок чтения — видео и кнопка оказывались раньше
   абзацев, которые их продают. Поэтому герой этих двух страниц —
   одна колонка с читаемой мерой строки и крупным шагом, как разворот
   материала, а не как «сайтовый» первый экран.
*/
/*
 Контейнер героя-документа был 900px при 1240px у всех
   секций ниже — и, поскольку контейнер центрируется, первый экран
   начинался на 170px правее всей остальной страницы.
   Теперь коробка героя ровно такая же, как у секций, а читаемая мера
   строки держится на СОДЕРЖИМОМ и прижата к левому краю. Ширина
   контента не изменилась — изменилось только то, что он больше
   не висит по центру относительно страницы.
*/
.hero--doc .container{max-width:var(--container)}
/*
 🔴 Первая версия правки капнула ВСЁ содержимое героя на 900px и прижала
   влево — получился перекос: контент у левого края, справа треть пустая.
   Правильно так: БЛОКИ (панель, видео, кнопка) идут во всю ширину
   контейнера — ровно как содержимое любой другой секции; меру строки
   ограничиваем только ТЕКСТУ, ради которого она и вводилась.
*/
.hero--doc>.container>p,
.hero--doc>.container>h1,
.hero--doc>.container>.hero__h1,
.hero--doc>.container>.hero__eyebrow,
.hero--doc>.container>.hero__pre-card{max-width:var(--container-narrow);margin-inline:0}
.hero--doc>.container>*+*{margin-top:var(--stack-md)}
.hero--doc h1,.hero--doc .hero__h1{max-width:22ch;margin-bottom:0}
.hero--doc .hero__eyebrow,
.hero--doc .hero__pre-card{margin-bottom:0}
.hero--doc .hero__sub,.hero--doc .hero__subtitle{max-width:60ch;margin-bottom:0}
.hero--doc .vsl,.hero--doc .praktikum-vsl{max-width:none;margin:0}
.hero--doc .hero__cta,.hero--doc .btn--lg{width:100%;justify-content:center}
.hero--doc .hero__gift{margin-top:var(--sp-4)}
.hero--doc .cta-wrap{display:grid;gap:var(--sp-4);justify-items:stretch}
.hero--doc .bridge{margin:0}
@media (min-width:768px){
  .hero--doc .hero__cta,.hero--doc .btn--lg{width:auto;justify-self:start}
}

/*
 Заголовок был зажат правилом меры строки
   `.hero--doc>.container>.hero__h1{max-width:900px}` внутри контейнера 1240 —
   отсюда пустая треть справа. Мера строки остаётся у ЛИДА и подзаголовка,
   у самого оффера её больше нет.
 Только с десктопной ширины:
   на телефоне центрированный абзац в 4–5 строк читается хуже левого.
*/
.hero--offer>.container>.hero__h1{max-width:none}
@media (min-width:1024px){
  .hero--offer>.container>.hero__pre-card{
    max-width:76ch;
    margin-inline:auto;
    text-align:center;
    font-size:var(--fs-lg);
    line-height:1.5;
  }
}

/*
   33. ЛАЙТБОКС отзывов и видео
   Отзыв или видео открывается мини-экраном поверх страницы, а не
   занимает половину секции. Скролл позади блокируется, фокус заперт
   внутри окна, Esc и клик по фону закрывают.
*/
.lb{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gutter);
  background:rgba(6,8,22,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity var(--dur) var(--ease-out);
}
.lb.is-open{opacity:1}
.lb[hidden]{display:none}     /* [hidden] проигрывает display:flex — гасим явно */

.lb__panel{
  position:relative;
  width:min(620px,100%);
  max-height:min(80vh,720px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--c-dark);
  color:var(--c-on-dark);
  border:var(--rule-dark);
  border-radius:var(--r-xl);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  box-shadow:var(--sh-lg);
  transform:translateY(12px) scale(.98);
  transition:transform var(--dur) var(--ease-out);
}
.lb.is-open .lb__panel{transform:none}

.lb__x{
  position:absolute;
  top:var(--sp-4);right:var(--sp-4);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  color:var(--c-on-dark-mut);
  background:rgba(255,255,255,.06);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.lb__body{display:flex;flex-direction:column;gap:var(--sp-5);padding-right:var(--sp-8)}
.lb__part{margin:0}

/*
 Плеер видеоотзыва в окне. Пропорция 16:9, рамка и скругление как
   у остальных медиа-блоков окна.
*/
.lb__vimeo{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-dark-2);
  border:var(--rule-dark);
}
.lb__vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/*
 ---------- Полный разбор кейса в окне ----------------------------------
   Карточка кейса — витрина; сам кейс расписан подробно, и по клику окно
   показывает его целиком. Текст переносится дословно из материалов
   заказчика, поэтому здесь только оформление:
   читаемая мера строки, подзаголовки абзацев, таблица «было → стало».
*/
/*
 Окно с полным разбором шире обычного: 620px — мера для цитаты отзыва,
   а кейс — это несколько экранов текста и таблица «было → стало».
*/
.lb__panel:has(.ccard__full){width:min(860px,100%)}
/*
 🔴 Раскладку задаём ТОЛЬКО копии в окне. Правило `.ccard__full{display:flex}`
   на самом элементе перебивало атрибут `hidden` (авторское правило сильнее
   UA-правила `[hidden]{display:none}`), и разбор стоял прямо на карточке —
   невидимый лишь потому, что его срезал `overflow:hidden`. Поймали гейты:
   `audit.js` дал CLIP-Y, `mobile-audit` 58 находок вместо 31,
   `check-links` 49 вместо 32.
*/
.lb__part.ccard__full{display:flex;flex-direction:column;gap:var(--sp-4)}
.cf-p{font-size:var(--fs-body);line-height:1.65;color:var(--c-on-dark-mut)}
.cf-k{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
  margin-bottom:var(--sp-2);
}
.cf-p b:not(.cf-k){color:var(--c-on-dark);font-weight:var(--fw-semibold)}
.cf-ul{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0;list-style:none}
/*
 🔴 НЕ grid. Пункт кейса — это «<b>Заголовок.</b> дальше текст», то есть
   ДВА инлайновых куска. В grid-контейнере каждый становится отдельным
   элементом сетки: жирный уезжал во вторую колонку, а текст переносился
   на следующую строку под маркер. Маркер вынесен в абсолют, содержимое
   пункта течёт обычным потоком и не разваливается.
*/
.cf-ul li{
  position:relative;
  padding-left:var(--sp-6);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-on-dark-mut);
}
.cf-ul li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--c-accent-text);
}
.cf-ul li b{color:var(--c-on-dark);font-weight:var(--fw-semibold)}
/*
 Таблица «Метрика · Было · Стало» — единственное место, где у кейса
   есть настоящие табличные данные. На узком экране уезжает своей
   прокруткой, а не ломает окно.
*/
.cf-table{overflow-x:auto;overscroll-behavior-x:contain}
.cf-table table{border-collapse:collapse;width:100%;min-width:22rem}
.cf-table th,.cf-table td{
  text-align:left;
  padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom:var(--rule-dark);
  font-size:var(--fs-sm);
  line-height:1.45;
  color:var(--c-on-dark-mut);
  vertical-align:top;
}
.cf-table th{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark);
}
/*
 🔴 Первая колонка — НАЗВАНИЕ метрики, а не значение: набирается
   основным цветом, а не приглушённым. Приглушённой она читалась слабее
   цифр справа и выглядела «выключенной» (замер: цвет у всех ячеек был
   один, дело не в баге, а в иерархии). Ровно так же устроена светлая
   таблица кейса «Практикума»: `.case-table td:first-child`.
*/
.cf-table td:first-child{color:var(--c-on-dark);font-weight:var(--fw-medium)}
.cf-table td b{color:var(--c-on-dark);font-weight:var(--fw-semibold);white-space:nowrap}
.cf-table tr:last-child td{border-bottom:0}
/* Фрагмент видеоотзыва внутри разбора — речь, а не заголовок. */
.cf-say{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-on-dark);
  border-left:2px solid var(--c-accent-2);
  padding-left:var(--sp-5);
}
/*
 Пост канала в лайтбоксе: тот же текст, но кеглем для чтения, а не для
   пузыря в макете телефона. Без клампа и без «…».
*/
.lb .post__meta{
  order:-1;align-self:flex-start;
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
  margin:0;
}
.lb .post__meta::before{display:none}
.lb .post__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  color:var(--c-on-dark);
}
.lb .post__d{font-size:var(--fs-sm);line-height:1.6;color:var(--c-on-dark-mut)}
.lb .post__q{
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--c-on-dark);
  padding:var(--sp-4) var(--sp-5);
  border-left:2px solid var(--c-accent-2);
  background:rgba(46,107,184,.10);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
/* цитата в лайтбоксе — крупнее, чем в карточке: ей больше не тесно */
.lb .rev__q{font-size:clamp(1.05rem,.95rem + .7vw,1.35rem);line-height:1.45;color:var(--c-on-dark);-webkit-line-clamp:none;line-clamp:none;max-height:none;overflow:visible}
.lb .ph__t,.lb .ccard__t{color:var(--c-on-dark)}
.lb .ph{border:none;padding:0}
.lb .alink{color:var(--c-accent-text)}
/*
 🔴 Заглушка «Раздел пока в разработке» (.lb__video) УДАЛЕНА вместе
   со всеми своими правилами. Теперь в окне
   либо настоящий плеер (.lb__vimeo, ставится по data-video), либо ничего.
   Не прячем правилами и не оставляем на будущее: мёртвый слой под новым
   запрещён.
*/

@media (hover:hover) and (pointer:fine){
  .lb__x:hover{background:var(--c-accent);color:var(--c-accent-ink)}
}

/* карточка-отзыв читается как кликабельная */
[data-lb]{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .rev[data-lb]:hover{border-color:var(--c-accent-2)}
}

/* ---------- 34. «Реальный кейс» — компактная раскладка ---------- */
.case-pair{display:grid;grid-template-columns:1fr;gap:var(--stack-md)}
@media (min-width:900px){
  .case-pair{
    grid-template-columns:minmax(0,.9fr) auto minmax(0,1.15fr);
    column-gap:var(--sp-6);
    align-items:center;
  }
}

/*
 ---------- 35. УТИЛИТЫ РАСКЛАДКИ ----------
   Заменяют инлайн-стили в разметке: пока размеры живут в атрибуте style,
   правка токена до них не доходит, и похожие блоки незаметно расходятся.
*/
.stack-t{margin-top:var(--stack-md)}
.stack-b{margin-bottom:var(--stack-md)}
.lead--wide{max-width:66ch}
.ico--inherit{width:1em;height:1em}

/*
 Панель — единая форма для «блока в блоке»: тёмная заливка или волосяная
   рамка. Раньше обе жили инлайн и разъезжались по паддингу и радиусу.
*/
.panel{border-radius:var(--r-xl);padding:clamp(1.25rem,3vw,2.5rem)}
.panel--dark{padding:clamp(1.5rem,3.4vw,2.75rem)}
.panel--outline{border:var(--rule-dark)}

/*
 ---------- 36. ОБЩАЯ БАЗОВАЯ ЛИНИЯ В КОЛОНКАХ ----------
   🔴 Колонка с двухстрочным заголовком («Запуск + 30–45 дней») опускала свой
   текст ниже соседей — четыре «полки» читались как съехавшие. Раньше это
   лечили бы min-height на глазок; subgrid выравнивает по факту содержимого.
*/
@media (min-width:768px){
  .timeline,.deliv{grid-template-rows:auto auto;align-items:stretch}
  .timeline>*,.deliv>*{
    grid-row:span 2;
    display:grid;
    grid-template-rows:subgrid;
    row-gap:var(--sp-3);
  }
  /* у гарантий три яруса: иконка, заголовок, текст */
  .guar__grid{grid-template-rows:auto auto auto;align-items:stretch}
  .guar__grid>*{grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--sp-3)}
}
@supports not (grid-template-rows: subgrid){
  /* фолбэк для старых движков: выравниваем хотя бы верх колонок */
  @media (min-width:768px){
    .timeline>*,.deliv>*,.guar__grid>*{grid-row:auto;grid-template-rows:none;align-content:start}
  }
}

/*
   Один жест на всём сайте, а не «навёл — что-то появилось». Подпись жеста:
     1. акцентная линия ПРОРАСТАЕТ по нижней кромке слева направо;
     2. поверхность подсвечивается снизу мягким акцентным светом;
     3. поверхность всплывает на 4px;
     4. стрелка/иконка уезжает на +5px, иконка-бейдж заливается акцентом.
   Один тайминг (--hov-dur) и один easing (--hov-ease) на все четыре шага.
   Магнитных кнопок нет нигде. На тач hover не срабатывает вовсе (§1.6) —
   там работает press-эквивалент :active, он же служит фолбэком для клавиатуры.
*/
:root{
  --hov-dur:420ms;
  --hov-ease:cubic-bezier(.22,1,.36,1);
  --hov-line:3px;
}
@media (prefers-reduced-motion:reduce){:root{--hov-dur:0ms}}

/* --- 1. Поверхности (карточки, плитки, ряды-ссылки) --------------------- */
.u-surf,
.ccard,.card,.rev,.acard,.audience-card,.vsl,.vsl-facade,
.fmt,.leak,.soc,.contact,.guar__i,.post,.vcard,.author-badge{
  position:relative;
  transition:
    transform var(--hov-dur) var(--hov-ease),
    border-color var(--hov-dur) var(--hov-ease),
    background-color var(--hov-dur) var(--hov-ease),
    box-shadow var(--hov-dur) var(--hov-ease);
}
/*
 Прорастающая линия. Кладём под контент (z-index:0 при isolation на предке),
   поэтому текст никогда не перекрывается.
*/
.u-surf::after,
.ccard::after,.card::after,.rev::after,.acard::after,
.audience-card::after,.vsl::after,.vsl-facade::after,.fmt::after,.leak::after,
.soc::after::after,.contact::after,.guar__i::after,
.vcard::after,.author-badge::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:var(--hov-line);
  background:var(--c-accent);
  /*
 Свечение обязательно: без него линия сливалась с акцентной кромкой,
     и «подпись жеста» была неразличима на тёмных карточках.
*/
  box-shadow:0 0 16px color-mix(in srgb,var(--c-accent) 55%,transparent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--hov-dur) var(--hov-ease);
  pointer-events:none;
  z-index:2;
}
.on-dark .u-surf::after,
.on-dark .ccard::after,.on-dark .card::after,
.on-dark .rev::after,.on-dark .acard::after,.on-dark .vsl::after,
.on-dark .fmt::after,.on-dark .leak::after,.on-dark .soc::after,
.on-dark .contact::after,
.on-dark .vcard::after,.on-dark .author-badge::after{background:var(--c-accent-2)}

/* Общая реакция: сама линия + подъём + акцентная кромка + свет снизу. */
@media (hover:hover) and (pointer:fine){
  .u-surf:hover::after,
  .ccard:hover::after,.card:hover::after,
  .rev:hover::after,.acard:hover::after,.audience-card:hover::after,
  .vsl:hover::after,.vsl-facade:hover::after,.fmt:hover::after,
  .leak:hover::after,.soc:hover::after::after,
  .contact:hover::after,.guar__i:hover::after,
  .vcard:hover::after,.author-badge:hover::after{transform:scaleX(1)}

  .u-surf:hover,
  .ccard:hover,.card:hover,.rev:hover,.acard:hover,
  .audience-card:hover,.vsl:hover,.vsl-facade:hover,.fmt:hover,.leak:hover,
  .soc:hover,.contact:hover,.guar__i:hover,
  .vcard:hover,.author-badge:hover{
    transform:translateY(var(--hover-lift));
    border-color:var(--c-accent);
  }
  .on-dark .u-surf:hover,
  .on-dark .ccard:hover,.on-dark .card:hover,
  .on-dark .rev:hover,.on-dark .acard:hover,.on-dark .vsl:hover,
  .on-dark .fmt:hover,.on-dark .leak:hover,.on-dark .soc:hover,
  .on-dark .on-dark .contact:hover,
  .on-dark .vcard:hover,.on-dark .author-badge:hover{border-color:color-mix(in srgb,var(--c-accent-2) 42%,transparent)}

  /* Свет снизу — тот же жест, что и линия, только мягкий. */
  .ccard:hover,.rev:hover,.vcard:hover,.card:hover,
  .audience-card:hover,.acard:hover{box-shadow:0 -1px 0 0 transparent,0 18px 44px -28px var(--c-accent)}

  /* Внутренние детали одного жеста. */
  .u-surf:hover .ico,
  .ccard:hover .alink .ico,.card:hover .alink .ico,
  .rev:hover .alink .ico,.acard:hover .alink .ico,
  .fmt:hover .alink .ico,.leak:hover .alink .ico,.vcard:hover .alink .ico{transform:translateX(5px)}
  .ccard:hover .alink::after,.card:hover .alink::after,
  .rev:hover .alink::after{transform:scaleX(1)}
  .contact:hover .contact__go{transform:translateX(5px);color:var(--c-accent-text)}
  .soc:hover .soc__go{transform:translate(5px,-5px);color:var(--c-accent-text)}
  /* иконка-бейдж внутри поверхности заливается акцентом — один приём везде */
  .leak:hover .leak__ico,.soc:hover .soc__ico,
  .fmt:hover .fmt__ico,.guar__i:hover .guar__ico,.audience-card:hover .audience-card__mark{
    background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink);
  }
  .vsl:hover .vsl__play,.vsl-facade:hover .vsl-facade__play,
  .vcard:hover .vcard__play,
  .rev:hover .rev__chipico{transform:scale(1.06);background:var(--c-accent);color:var(--c-accent-ink)}
  .post:hover .post__t{color:var(--c-accent-text)}
  .post:hover{background:#1B2C42}
}

/* --- 2. Текстовые ссылки: та же линия, тот же тайминг ------------------- */
.alink .ico,.nav a .ico{transition:transform var(--hov-dur) var(--hov-ease)}
.alink::after,.nav a:not(.nav__cta)::after{transition:transform var(--hov-dur) var(--hov-ease)}
@media (hover:hover) and (pointer:fine){
  .alink:hover::after,.nav a:not(.nav__cta):hover::after{transform:scaleX(1)}
  .alink:hover .ico{transform:translateX(5px)}
  .faq__q:hover:hover{color:var(--c-accent)}
  .faq__q:hover .faq__mark:hover .faq__mark{border-color:var(--c-accent)}
  .chip:hover{border-color:var(--c-accent);color:var(--c-accent)}
}

/* --- 3. Кнопки и круглые контролы --------------------------------------- */
.btn,.btn-cta,.arw,.lb__x,.modal__close{
  transition:
    transform var(--hov-dur) var(--hov-ease),
    background-color var(--hov-dur) var(--hov-ease),
    border-color var(--hov-dur) var(--hov-ease),
    color var(--hov-dur) var(--hov-ease),
    box-shadow var(--hov-dur) var(--hov-ease);
}
.btn::before,.btn-cta::before{transition:transform var(--hov-dur) var(--hov-ease)}
.btn .btn__ico,.btn-cta .btn__ico{transition:transform var(--hov-dur) var(--hov-ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__ico,.btn-cta:hover .btn__ico{transform:translateX(5px)}
  .arw:not([disabled]):hover,.lb__x:hover,.modal__close:hover{
    background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink);
    transform:scale(1.06);
  }
}

/* --- 4. Тач: press-эквивалент вместо ховера ----------------------------- */
@media (hover:none),(pointer:coarse){
  .u-surf:active,.ccard:active,.card:active,.rev:active,
  .acard:active,.audience-card:active,.vsl:active,.vsl-facade:active,.fmt:active,
  .leak:active,.soc:active,.contact:active,
  .post:active,.vcard:active,.author-badge:active{transform:scale(.985)}
  .u-surf:active::after,.ccard:active::after,
  .card:active::after,.rev:active::after,.acard:active::after,.vcard:active::after,
  .soc:active::after::after,.contact:active::after,
  .author-badge:active::after{transform:scaleX(1)}
  .btn:active,.btn-cta:active,.arw:active{transform:scale(.97)}
}
/* Клавиатура видит тот же жест, что и мышь. */
.ccard:focus-visible::after,.card:focus-visible::after,
.rev:focus-visible::after,.acard:focus-visible::after,.vcard:focus-visible::after,
.soc:focus-visible::after::after,.contact:focus-visible::after,
.author-badge:focus-visible::after{transform:scaleX(1)}

/* --- 5. Лайтбокс: карточка кейса внутри окна ---------------------------- */
/*
 Отдельного правила для метрик в окне больше нет: шапка карточки и так
   собрана чипами с переносом (см. «Шапка карточки кейса»), и жёсткой
   сетки, которую надо было распускать, не осталось.
*/
.lb .ccard__badge{margin-bottom:0}
.lb .ccard__d{font-size:var(--fs-sm);line-height:1.6;color:var(--c-on-dark-mut);
  display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}

/*
   Что чинится:
     · читаемость — кегль/интерлиньяж/трекинг H1 поджаты, подзаголовок
       перестал спорить с заголовком по весу;
     · «чуть-чуть не влезает» — вертикальные отступы и полоса-цоколь
       ужаты так, чтобы герой гарантированно входил в 1440×900 вместе
       с фиксированной шапкой (77px);
     · характер — три приёма вместо «просто аккуратно»: висячая акцентная
       линейка-мерка у левого края копии, ультрамариновая аура из-за плеча
       медиа и полоса-цоколь на волосяной линии, которая держит нижнюю
       кромку первого экрана.
*/
.hero--page{
  /*
 🔴 Не меньше высоты фиксированной шапки (77px) плюс воздух: при 66px
     кикер и лид-абзац уезжали ПОД шапку и обрезались.
*/
  padding-top:calc(var(--sp-7) + 40px);
  padding-bottom:var(--sp-7);
}
/* Аура за медиа-колонкой: глубина без единой лишней рамки. */
.hero--page::before{
  content:"";
  position:absolute;
  right:-8%;top:-24%;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c-accent) 15%,transparent),transparent 72%);
  pointer-events:none;
  z-index:0;
}

/*
 Типографика заголовка: строка короче, интерлиньяж чуть свободнее —
   раньше 1.04 при трекинге −.036em склеивал строки в плотный блок.
*/
.hero--page h1,.hero--page .hero__h1{
  font-size:var(--fs-display-sub);
  line-height:1.08;
  letter-spacing:-.028em;
  max-width:19ch;
  margin-bottom:var(--sp-4);
}
.hero--page .hero__sub,.hero--page .hero__subtitle{
  font-size:var(--fs-body);
  line-height:1.55;
  max-width:44ch;
  margin-bottom:0;
}

/*
 Висячая линейка-мерка слева от копии. Она НЕ сдвигает текст: висит в поле
   контейнера, поэтому левый край заголовка остаётся на общей сетке.
*/
@media (min-width:1024px){
  .hero--page .hero__cols-a{position:relative}
  .hero--page .hero__cols-a::before{
    content:"";
    position:absolute;
    left:calc(-1 * var(--sp-5));
    top:.45rem;bottom:.25rem;
    width:2px;
    border-radius:1px;
    background:linear-gradient(180deg,var(--c-accent) 0%,color-mix(in srgb,var(--c-accent) 22%,transparent) 62%,transparent 100%);
  }
}

/*
 ---- Полоса-цоколь под первым экраном (hero__notes) ---------------------
   Была вторым самостоятельным блоком и вытягивала героя. Теперь это
   подвал героя на волосяной линии: мельче кегль, плотнее ритм. блок «Что внутри разбора»).
   Здесь же лежал его двухколоночный слой на ≥1024 — удалён вместе
   с остальными: он поднимал лид выше вводящего заголовка.
*/
.hero__notes{
  margin-top:var(--stack-md);
  padding-top:var(--stack-md);
  border-top:var(--rule);
}

/*
 Лид-абзац «Практикума» больше не носит собственную линейку: её роль взяла
   сквозная линейка-мерка колонки, две вертикали рядом читались как сбой.
*/
.hero--page .hero__pre-card{
  border-left:0;
  padding-left:0;
  max-width:52ch;
  margin-bottom:var(--sp-6);
}

/*
 Колонка копии тянется на высоту медиа-колонки, а линейка-мерка идёт во всю
   её высоту: пустота под подзаголовком перестаёт читаться как «недоверстали»
   и становится полем композиции.
*/
@media (min-width:1024px){
  .hero--page .hero__cols{align-items:stretch}
  .hero--page .hero__cols-a{display:flex;flex-direction:column}
}

/*
   🔴 Ссылки колонки стояли display:inline-flex и текли в одну строку:
   «Об эксперте Кейсы Контент» читалось как одна фраза, промазать мимо нужной
   было проще, чем попасть. Теперь колонка — сетка: пункт на строку, зона
   клика ≥44px, между пунктами волосяная линия. Ховер — тот же жест, что
   на всём сайте (акцентная линия слева направо), без «намагничивания».
*/
.foot__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--stack-md) var(--sp-6);
}
.foot__col{display:grid;align-content:start}
.foot__col a{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding-block:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--c-on-dark);
  border-top:var(--rule-dark);
  transition:color var(--hov-dur) var(--hov-ease);
}
.foot__col a:first-of-type{border-top:none}
.foot__col a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--c-accent-2);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--hov-dur) var(--hov-ease);
  pointer-events:none;
}
.foot__note{margin-top:var(--sp-4)}
.foot__legal{row-gap:var(--sp-3)}
.foot__legal a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding-inline:2px;
}
/* На пальце правовые ссылки — полноценная зона 44px (§8.4). */
@media (pointer:coarse){
  .foot__legal a{min-height:44px;padding-inline:var(--sp-2)}
}
@media (hover:hover) and (pointer:fine){
  
  .foot__col a:hover{color:var(--c-accent-text);transform:none}
  .foot__col a:hover::after{transform:scaleX(1)}
  .foot__legal a:hover{color:var(--c-accent-text)}
}
.foot__col a:focus-visible::after{transform:scaleX(1)}
@media (hover:none),(pointer:coarse){
  .foot__col a:active::after{transform:scaleX(1)}
}

/* Плашка «статья ещё не написана» в лайтбоксе — компактнее видео-заглушки. */
.lb__soon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(70% 120% at 50% 0%,rgba(46,107,184,.18),transparent 68%),
    #0B1524;
}
.lb__soon::after{
  content:"Раздел пока в разработке";
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-on-dark-mut);
}
.lb .acard__k{color:var(--c-accent-text)}
.lb .acard__t{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  line-height:var(--lh-head);
  color:var(--c-on-dark);
}
.lb .acard__m{display:block;font-size:var(--fs-sm);color:var(--c-on-dark-mut)}

/*
 На узких экранах имя канала в шапке телефона не обрезаем многоточием —
   правило приёмки «обрезанного текста 0». Пускаем в две строки.
*/
@media (max-width:400px){
  .tg__id .feed__name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
}

/*
 Однотипные блоки — БЛОКАМИ/плашками. Если первый
      экран светлый и следующий тоже светлый — разделять боксами.

 Все «линейные» разделители однотипных
   элементов заменены на плитки одного семейства:
     фон --c-surface-2 (на светлом) / rgba(255,255,255,.04) (на тёмном),
     радиус --r-md, внутренний отступ --sp-4/--sp-5.
   Таблицы, аккордеон-раскрытия и рамки цветных панелей не трогаем —
   там линия несёт смысл, а не «разделяет однотипное».
*/

/* ---- общий рецепт плитки ------------------------------------------- */
.t-tile{
  background:var(--c-surface-2);
  border-radius:var(--r-md);
  border:0;
}
.on-dark .t-tile{background:rgba(255,255,255,.04)}

.stats{
  border-top:0;
  gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.stat{
  border-bottom:0;
  padding:var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-lg);
}
.on-dark .stat{background:rgba(255,255,255,.04);border-bottom:0}

.leak{
  border-top:0;
  padding:var(--sp-5);
  background:rgba(255,255,255,.045);
  border-radius:var(--r-lg);
}
@media (min-width:768px){
  /*
 subgrid раскладывал строки карточки по общей сетке — с падингом
     плитки это давало рваные внутренние отступы. Внутри плитки ряды
     свои, выравнивание держит align-content.
*/
  .leaks__list .leak{grid-row:auto;grid-template-rows:none;align-content:start;row-gap:var(--sp-3)}
  .leaks__list,.leaks__list:has(.leak__k){grid-template-rows:none}
}
/*
 Вывод-«домино» под карточками — это ЦИТАТА-вывод, не полоса
   с линейкой сверху. Ставим её на своё поле.
*/
.leaks__out{
  margin-top:var(--sp-6);
  padding:var(--sp-5) var(--sp-6);
  background:rgba(255,255,255,.05);
  border-radius:var(--r-lg);
  border-left:3px solid var(--c-accent-2);
  max-width:none;
}
.leaks__out::before{display:none}

/* ---- 3. РЕГАЛИИ ЭКСПЕРТА (линейки между пунктами) ------------------- */
.exp__reg{border-top:0;display:grid;gap:var(--sp-3)}
.exp__r{
  border-bottom:0;
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
  align-items:center;
}
.on-dark .exp__r{background:rgba(255,255,255,.04)}
.exp__r i{color:var(--c-accent);opacity:.4}

/* ---- 4. СОЦСЕТИ ----------------------------------------------------- */
.socials{border-top:0;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.soc{
  border-bottom:0;
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.on-dark .soc{background:rgba(255,255,255,.04)}

/* ---- 5. КАРТОЧКИ СТАТЕЙ / ССЫЛОК ------------------------------------ */
.links{border-top:0;display:grid;gap:var(--sp-3)}

.fmts--cards{
  border-top:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:640px){.fmts--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.fmts--cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fmts--cards .fmt{
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:var(--sp-3);
  padding:var(--sp-5);
  border:var(--rule);
  border-bottom:var(--rule);
  border-radius:var(--r-lg);
  background:var(--c-surface);
}
.fmts--cards .fmt__ico{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--c-accent-soft);
  color:var(--c-accent);
  margin-bottom:var(--sp-2);
}
.fmts--cards .fmt__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.fmts--cards .fmt__d{font-size:var(--fs-sm);line-height:1.5;color:var(--c-muted)}
.fmts--cards .fmt__tag{
  justify-self:start;
  align-self:end;
  margin-top:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);
  background:var(--c-surface-2);
  color:var(--c-muted);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
}
/*
 Прежняя реакция (подъём + акцентная
   кромка + прорастающая линия) остаётся общей для всех поверхностей —
   добавляется ИНВЕРСИЯ ПОЛОТНА, и вместе с фоном обязаны перевернуться все
   цвета внутри: заголовок, описание и метка иначе теряют контраст на тёмном
   (§3 WEB-СТАНДАРТА: менять фон — значит проверить каждый текст на нём).
   Иконка-плитка заливается акцентом общим правилом .fmt:hover .fmt__ico.
*/
@media (hover:hover) and (pointer:fine){
  .fmts--cards .fmt:hover{
    background:var(--c-dark);
    border-color:var(--c-dark);
  }
  .fmts--cards .fmt:hover .fmt__t{color:var(--c-on-dark)}
  .fmts--cards .fmt:hover .fmt__d{color:var(--c-on-dark-mut)}
  .fmts--cards .fmt:hover .fmt__tag{
    background:rgba(255,255,255,.08);
    color:var(--c-on-dark-mut);
  }
}

.faq-list{border-top:0;gap:var(--sp-3)}
.faq__i,.faq-item{
  border-bottom:0;
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.on-dark .faq__i,.on-dark .faq-item{background:rgba(255,255,255,.04)}
.faq__q,.faq-item>button{padding-inline:var(--sp-5)}
.faq__a{padding-inline:var(--sp-5)}

/* ---- 8. АРТЕФАКТЫ / ЭТАПЫ на «Монетизации» -------------------------- */
.deliv{border-top:0;gap:var(--sp-3)}
.deliv li{border-bottom:0;padding:var(--sp-4) var(--sp-5);background:var(--c-surface-2);border-radius:var(--r-md)}
.timeline{border-top:0;gap:var(--sp-3)}
.timeline>*{border-bottom:0}
.on-dark .deliv li{background:rgba(255,255,255,.04)}

/* ---- 9. РЯДЫ-МЕХАНИКА (.rows) --------------------------------------- */
.rows,.rows--dark{border-top:0;display:grid;gap:var(--sp-3)}
.row{border-bottom:0;padding:var(--sp-5);border-radius:var(--r-md);background:var(--c-surface-2)}
.rows--dark .row{border-bottom:0;background:rgba(255,255,255,.04)}
/* подсветка ряда на hover больше не нужна: плитка и так читается блоком */
.row::before{display:none}

/*
 ---- 10. «БРИДЖ» на «Монетизации» -----------------------------------

   Блок целиком описан один раз в §«Что внутри разбора» (styles.css выше)
   по присланному клиентом эталону.
*/

.final__box--card{
  padding:clamp(1.25rem,.8rem + 1.9vw,2rem);
  border:var(--rule-dark);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.04);
}
/* Чек-лист: линейки между однотипными пунктами сняты */
.getlist{border-top:0;display:grid;gap:var(--sp-2)}
.getlist li{border-bottom:0;padding-block:var(--sp-2)}
/*
 Поля формы — боксы с рамкой, а не подчёркивания:
   именно это делает форму «видной отчётливо» на скрине-07.
*/
.form input,.form-input,.form-textarea{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);
  padding:.7rem var(--sp-4);
}
.form input:focus,.form-input:focus,.form-textarea:focus{
  border-color:var(--c-accent-2);
  border-bottom-color:var(--c-accent-2);
  box-shadow:0 0 0 3px rgba(46,107,184,.22);
}
/* На светлом фоне (модалка «Практикума») поля остаются светлыми */
:not(.on-dark)>.form input,
:not(.on-dark) .form:not(.on-dark .form) input{background:var(--c-surface)}
/* Подарок — карточка с тёплым акцентом (в исходном HTML это золото) */
.bonus{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.bonus__badge{color:var(--c-warm)}
.bonus__badge .ico{color:var(--c-warm)}
.bonus__li{border-top:0;padding-block:var(--sp-3)}

/* ---- ФУТЕР: контакты строкой в реквизитах ---------------- */
.foot__mark{display:grid;gap:var(--sp-4);align-content:start}
.foot__contacts{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.foot__contacts a{color:var(--c-accent-text)}
.foot__docs{white-space:nowrap}

/* ---- ФЛАГМАН: ссылка «Всё о проекте» держится плашкой --------------- */
.flag__more{
  padding:var(--sp-3) var(--sp-4);
  border:var(--rule);
  border-radius:var(--r-pill);
  background:var(--c-surface-2);
}
@media (hover:hover) and (pointer:fine){
  .flag__more:hover{background:var(--c-accent-soft);border-color:var(--c-accent-soft)}
}
/*
 🔴 БАГ ХОВЕРА. `.alink` рисует выезжающее подчёркивание
   псевдоэлементом ::after от НИЖНЕГО КРАЯ ссылки. Пока это строчная
   ссылка, линия ложится прямо под текст. Но `.flag__more` — та же
   `.alink`, превращённая в ПЛАШКУ (padding + рамка + скругление 999px):
   низ элемента уехал от текста на высоту паддинга, и линия оказалась
   у скругления, перечёркивая плашку снизу.
   Плашке подчёркивание не нужно вовсе — у неё свой ховер по фону.
   ПРАВИЛО НА БУДУЩЕЕ: делаешь из .alink плашку (фон / рамка /
   скругление) — гаси ::after.
*/
.alink.flag__more::after{content:none}

/*
 ---- ЦИТАТЫ ---------------------------------------------------
   Было: реплика автора набрана дисплейным шрифтом крупным полужирным
   кеглем — она спорила с заголовком секции и читалась как ещё один
   заголовок. Стало: настоящая цитата — текстовая гарнитура, обычное
   начертание, кавычка-знак, подпись-атрибуция на своей строке
   и собственная плашка вместо голой линейки.
*/
.exp__quote{
  position:relative;
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:var(--fs-lg);
  line-height:1.62;
  letter-spacing:0;
  color:var(--c-muted);
  margin-top:var(--stack-md);
  padding:var(--sp-5) var(--sp-6);
  border-left:3px solid var(--c-accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--c-surface-2);
  max-width:62ch;
  quotes:"«" "»";
}
.exp__quote::before{content:open-quote}
.exp__quote::after{content:close-quote}
.on-dark .exp__quote{background:rgba(255,255,255,.04);color:var(--c-on-dark-mut);border-left-color:var(--c-accent-2)}

/* Вывод-«домино»: тот же приём — не афиша, а вывод-цитата. */
.domino{
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);
  line-height:1.55;
  letter-spacing:0;
  max-width:60ch;
}
.domino .hi{font-weight:var(--fw-semibold)}

/* ---- ДОБОРКА КРУГА 4 -------------------------------------------------- */

/*
 🔴 Поля формы: селектор `:not(.on-dark)>.form input` цеплял форму
   в тёмном CTA — её родитель .final__box--card сам класса .on-dark не
   несёт, тёмная секция выше. Инпуты становились белыми на тёмном.
   Светлый вариант объявляем адресно: только формы в модалке и на
   светлых секциях.
*/
:not(.on-dark)>.form input,
:not(.on-dark) .form:not(.on-dark .form) input{background:rgba(255,255,255,.05)}
.modal .form input,.modal .form-input,.modal .form-textarea,
section:not(.on-dark) .form input{
  background:var(--c-surface);
  border-color:var(--c-line);
  color:var(--c-ink);
}
.modal .form input::placeholder,section:not(.on-dark) .form input::placeholder{color:var(--c-muted)}
.on-dark .form input,.on-dark .form-input,.on-dark .form-textarea{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
  color:var(--c-on-dark);
}
.on-dark .form input::placeholder{color:var(--c-on-dark-mut)}

/*
 «Ещё форматы»: метка «По запросу» прижата к низу карточки, чтобы
   четыре плитки читались одним рядом, а не лесенкой.
*/
.fmts--cards .fmt{
  align-content:stretch;
  grid-template-rows:auto auto 1fr auto;
}

/* Карточки статей: жирная линейка сверху заменена плиткой */
.acard{
  border-top:0;
  padding:var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.on-dark .acard{background:rgba(255,255,255,.04)}
@media (hover:hover) and (pointer:fine){
  .acard:hover{border-color:transparent;background:var(--c-accent-soft)}
}

/* Колонки подвала: линейка между однотипными ссылками снята */
.foot__col a{border-top:0}
.foot__col a:first-of-type{border-top:0}

/*
 Четыре формата выравниваются по общим рядам (subgrid): иначе метка
   «По запросу» съезжает лесенкой из-за разной длины описаний.
*/
@supports (grid-template-rows:subgrid){
  @media (min-width:640px){
    .fmts--cards{grid-template-rows:auto auto 1fr auto}
    .fmts--cards .fmt{grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--sp-3)}
  }
}
/*
 Форма-карточка не должна заканчиваться пустым полем: строка статуса
   резервирует место только когда в ней что-то есть.
*/
.final__box--card .form__status:empty{min-height:0}
.final__box--card .form{margin-bottom:0}

/*
 ---- СВЕТОФОР: вернуть ёмкость ------------------------------
   «Светофор прибыли раздулся с 1 до 1.5 экрана — уместить все вопросы
   в 1 экран, не удлинять».
*/
@media (min-width:1024px) and (pointer:fine){
  .svet__quiz{gap:var(--sp-2)}
  .svet__q{padding:var(--sp-3) var(--sp-4)}
  .svet__q::before{top:var(--sp-3);bottom:var(--sp-3)}
  .svet__ql{margin-bottom:var(--sp-3);gap:var(--sp-3);font-size:var(--fs-sm);line-height:1.35}
  .svet__ql i{width:26px;height:26px}
  .svet__opts{padding-left:0;gap:var(--sp-2)}
  .svet__opt{min-height:36px;padding:.4rem .85rem .4rem .7rem;font-size:var(--fs-sm)}
}
@media (min-width:1024px) and (pointer:fine){
  .svet__q{padding:var(--sp-2) var(--sp-4)}
  .svet__q::before{top:var(--sp-2);bottom:var(--sp-2)}
  /*
 подзаголовок секции шёл в три строки при свободной правой половине —
     это чистая потеря высоты в блоке, который должен уложиться в экран
*/
  #svetofor .sh__lead{max-width:88ch}
  #svetofor .svet{margin-top:calc(-1 * var(--sp-3))}
}

/*
 🔴 Мобильные правила старой раскладки «Форматов» (adaptive.css §3.10)
   раскладывали `.fmt` в две колонки и вешали метку в grid-column 2 /
   row 1.
   Возвращаем карточке её собственную одноколоночную сетку на всех
   ширинах.
*/
.fmts--cards .fmt{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:start}
.fmts--cards .fmt__t{grid-column:1;grid-row:auto;margin-bottom:0}
.fmts--cards .fmt__d{grid-column:1;grid-row:auto;max-width:none;padding-right:0}
.fmts--cards .fmt__tag{
  grid-column:1;
  grid-row:auto;
  justify-self:start;
  align-self:end;
  margin-top:var(--sp-2);
  font-size:var(--fs-cap);
}
.fmts--cards .fmt__ico{border:0}

.foot__contacts a{display:inline-flex;align-items:center;min-height:44px}

/*
 Этапы проекта: линейка-таймлайн заменена плитками.
   Без плитки шаги повисли в воздухе — четыре подписи без границ.
*/
.tl{
  border-bottom:0;
  padding:var(--sp-5);
  background:var(--c-surface-2);
  border-radius:var(--r-lg);
}
.on-dark .tl{background:rgba(255,255,255,.04)}
.tl__d{max-width:none}

/*
 под плашкой видно полотно страницы.
   Это тот же приём «блоки, а не линии», что и в остальных правках:
   у шапки исчезает нижняя линейка-разделитель.

   🔴 Стеклянный фильтр переезжает с .hdr на .hdr__in — но тогда
   именно .hdr__in становится containing block для position:fixed
   потомков, а мобильная панель лежит внутри. Поэтому при открытой
   панели фильтр гасится на ОБОИХ (см. body.nav-open ниже).
*/
.hdr{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
  padding-block:var(--sp-3);
}
.hdr.is-compact{
  background:transparent;
  border-bottom-color:transparent;
  padding-block:var(--sp-2);
}
/*
 Стекло НЕ живёт на внутренней строке — им владеет <header>.
   Здесь остаётся только геометрия. Причина: три захода подряд правили
   стекло, каждый оставлял свой слой, и на прокрутке белое 0.90 у .hdr
   складывалось с белым 0.72 у .hdr__in — суммарно 0.97, то есть глухая
   белая плашка вместо стекла. Слои сняты в корне, а не перекрыты.
*/
.hdr__in{
  border-radius:var(--r-pill);
  padding-inline:var(--sp-3) var(--sp-3);
  padding-block:var(--sp-2);
}
/* бренд отодвинут от скругления */
.hdr__in>.brand{padding-left:var(--sp-4)}

.nav{flex:1 1 auto;justify-content:center}

/* Тёмная тема плашки: та же геометрия, инверсия поверхности */

/*
 Открытая мобильная панель: фильтр гасится и на плашке — иначе она
   становится containing block и панель схлопывается в высоту шапки.
*/
body.nav-open .hdr__in{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--c-dark);
  border-color:var(--c-dark-line);
  box-shadow:none;
}

@media (max-width:600px){
  .hdr__in{border-radius:var(--r-xl);padding-inline:var(--sp-2)}
  .hdr__in>.brand{padding-left:var(--sp-3)}
}

/*
 Плашка меню — три зоны: бренд слева, пункты РОВНО по центру, действие
   справа. На flex пункты центрировались в остатке и уезжали вправо.
*/
@media (min-width:1024px){
  .hdr__in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .hdr__in>.brand{justify-self:start}
  .hdr__in>.hdr__act{justify-self:end}
}

/*
   СЛИВАЕТСЯ СО ВТОРЫМ)».
   Делаем так же: полотно секции становится прозрачным, а весь
   первый экран (текст + портрет + цифры) ложится в одну плашку.
*/
.hero{
  background:transparent;
  padding-top:calc(var(--hdr-h, 72px) + var(--sp-4));
  padding-bottom:var(--section-y-sm);
  overflow:visible;
}
.hero>.container{
  position:relative;
  padding-top:clamp(1.75rem,1rem + 2.6vw,3rem);
  padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(78% 64% at 88% -8%, color-mix(in srgb, var(--c-accent) 12%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, var(--c-surface-2) 100%);
  border:1px solid color-mix(in srgb, var(--c-line) 90%, transparent);
  overflow:hidden;
}
/* цифры внутри плашки — на белом листе, чтобы читались отдельным рядом */
.hero .stats{margin-top:var(--stack-md)}
.hero .stat{background:color-mix(in srgb, var(--c-surface) 78%, transparent)}

/* ---- КОНТАКТЫ — плашки вместо линеек ----------- */
.contacts{
  border-top:0;
  gap:var(--sp-3);
  /*
 🔴 240px давали на 1024 ТРИ карточки со слотом значения 168px —
     адрес почты (195px) в него не влезал и уезжал на вторую строку.
     320px переключают 1024 и 768 на две карточки, а 1240 по-прежнему
     держит три: порога хватает и там, и там.
*/
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:var(--stack-md);
}
.contact{
  border-bottom:0;
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  /*
 🔴 «Съеденные углы» карточки контакта. Настоящая причина — НЕ артефакт
     reveal-анимации, а прорастающая
     линия `.contact::after`: прямая акцентная полоса `left:0;right:0;
     bottom:0` без собственного скругления. У карточек, которые её носят,
     клип есть с самого начала (`.ccard`, `.rev`, `.post`, `.vcard` —
     `overflow:hidden`), и там дефекта нет. У `.contact` был `overflow:visible`,
     и на ховере полоса ложилась поверх дуг: боковая кромка обрывалась,
     нижняя шла прямой, в углах оставались вырезы. Клип возвращает дуги
     и заодно обрезает саму линию по форме карточки.
*/
  overflow:hidden;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .contact:hover{background:rgba(255,255,255,.07);border-color:var(--c-accent-2)}
}
:not(.on-dark)>.contacts .contact{background:var(--c-surface-2);border-color:transparent}

/* ---- Герои подстраниц — та же плашка, что и на главной -------------- */
.hero--doc{padding-top:calc(var(--hdr-h) + var(--sp-4));padding-bottom:var(--section-y-sm)}
.hero--doc>.container{
  padding:clamp(1.5rem,1rem + 2.4vw,2.75rem) clamp(1.25rem,1rem + 2vw,3rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(72% 60% at 92% -10%, color-mix(in srgb, var(--c-accent) 10%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, var(--c-surface-2) 100%);
  border:1px solid color-mix(in srgb, var(--c-line) 90%, transparent);
}

/*
   Корень: реплики людей были набраны ДИСПЛЕЙНЫМ шрифтом полужирным
   крупным кеглем — той же гарнитурой и весом, что заголовки. Такой
   блок читается как ещё один заголовок, а не как чья-то речь.

   Канон цитаты на сайте (один на все страницы):
     · текстовая гарнитура, обычное начертание — речь, а не афиша;
     · крупная кавычка-знак как опознаватель;
     · левая акцентная кромка + собственная плашка (блок, не линейка);
     · подпись-атрибуция отдельной строкой снизу.
*/
.exp__quote,.rev__q,.case-quote{
  position:relative;
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  letter-spacing:0;
  text-wrap:pretty;
}
/* Крупная открывающая кавычка — общий опознаватель цитаты */
.exp__quote::before,.rev__q::before,.case-quote::before{
  content:"«";
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:2.6em;
  line-height:.7;
  height:.5em;
  color:var(--c-accent);
  opacity:.45;
  margin-bottom:var(--sp-3);
}
.on-dark .exp__quote::before,
.rev__q::before,
.case-quote::before{color:var(--c-accent-text);opacity:.55}
/* закрывающая кавычка у эксперта больше не нужна — знак стоит сверху */
.exp__quote::after{content:none}
.exp__quote{quotes:none}

/* Отзывы: речь собственника, а не заголовок карточки */
.rev__q{
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  line-height:1.6;
  letter-spacing:0;
  color:var(--c-on-dark);
}

/*
 Кейс-цитата «Практикума»: та же гарнитура, кавычка вместо акцентной
   полоски-подчёркивания сверху (полоска читалась как декор панели).
*/
.case-quote{
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:clamp(1.02rem,.95rem + .45vw,1.2rem);
  line-height:1.62;
  letter-spacing:0;
}

/*
   1. Автоскрытие при скролле вниз остаётся только на телефоне
      и планшете, где полоса реально съедает экран. На десктопе
      плашка держится всегда.
   2. «Стеклянный» — значит сквозь него видно полотно: прежние
      82–94% заливки давали почти непрозрачную панель. Заливка
      снижена, блюр и насыщенность подняты; на прокрутке плашка
      уплотняется совсем немного, чтобы текст оставался читаемым.
*/
@media (min-width:1024px){
  .hdr.is-hidden{transform:none}
}

/*
 Бренд на узких экранах: две строки в шапке-таблетке распирали её
   по высоте и прижимали кнопку к бургеру. Дескриптор гасится раньше,
   имя держится одной строкой.
*/
@media (max-width:600px){
  .brand__desc{display:none}
  .brand__name{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hdr__in{gap:var(--sp-2)}
  .nav__cta{padding-inline:var(--sp-4)}
}

/*
 ---- КОНТАКТЫ: тёмное стекло, как карточка формы над ними ----------
   🔴 Прежнее правило `:not(.on-dark)>.contacts .contact{...светлый фон}`
   срабатывало внутри тёмной секции: непосредственный родитель —
   .container, класса .on-dark у него нет. Получались белые плашки
   на тёмном полотне. Тема берётся от ПРЕДКА (тот же корень, что
   у бага с полями формы).
*/
:not(.on-dark)>.contacts .contact{background:initial;border-color:initial}
.contact{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-4);
  min-height:76px;
}
.on-dark .contact{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
section:not(.on-dark) .contact{
  background:var(--c-surface-2);
  border:1px solid transparent;
}
.contact>.ico:first-child{
  width:40px;height:40px;
  padding:9px;
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--c-accent-2) 22%, transparent);
  color:var(--c-accent-text);
}
section:not(.on-dark) .contact>.ico:first-child{
  background:var(--c-accent-soft);
  color:var(--c-accent);
}
.contact .k{color:var(--c-on-dark-mut);font-size:var(--fs-cap)}
section:not(.on-dark) .contact .k{color:var(--c-muted)}
/*
 🔴 Значение контакта — ДАННЫЕ, а не дисплейный заголовок.
   Unbounded здесь требовал 241px на `info@maxperforma.ru` при слоте
   229px — адрес рвался посреди слова: «…consult.r» + «u» на второй
   строке, и средняя карточка становилась выше соседних.
   Текстовая гарнитура берёт те же 16px в 195px — влезает с запасом.
   `overflow-wrap` оставляем как страховку на 320, но разрыв посреди
   слова теперь недостижим: строка помещается целиком.
*/
.contact .v{
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-body);
  letter-spacing:0;
  color:var(--c-on-dark);
  /*
 break-word, а не anywhere: рвать разрешено только в объявленной
     точке (<wbr> после @), а не посреди слова.
*/
  overflow-wrap:break-word;
}
section:not(.on-dark) .contact .v{color:var(--c-ink)}
.contact__go{opacity:.55;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .contact:hover .contact__go{opacity:1;transform:translateX(4px)}
}

/*
 Отдельная плашка вместо
   линейки-разделителя — то же правило «блоки, а не линии».
*/
.bio-logos--inline{
  border-top:0;
  margin-top:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  gap:clamp(1.5rem,4vw,2.75rem);
  background:var(--c-surface-2);
  border-radius:var(--r-md);
}
.bio-logos--inline .bio-logo-img{height:30px}
.on-dark .bio-logos--inline{background:rgba(255,255,255,.05)}
.on-dark .bio-logo-img{filter:grayscale(1) brightness(2.6) contrast(.9);opacity:.75}

/*
 🔴 Ховер в лентах обрезался кромкой трека: контейнер с
   `overflow-x:auto` + `overflow-y:hidden` клипает и по вертикали, а
   карточка на ховере поднимается на --hover-lift и упирается в невидимую
   границу — срезался верх карточки, кольцо фокуса и тень. Даём треку
   вертикальный воздух ровно под подъём; сам overflow трогать нельзя,
   он держит горизонтальную прокрутку.
   у мобильной сцены карусели тот же приём — см. .oc-scene.)
*/
.arts{padding-block:10px}

/*
   Что происходило: полоса .hdr стала полностью прозрачной (фон переехал
   на плашку .hdr__in), и КОНТЕНТ СТРАНИЦЫ проезжал в зазорах — над
   плашкой (8px), под ней (9px) и по бокам от неё. Карточки и кнопки
   резались кромкой окна и читались как вторая, прямоугольная шапка.
   Плавающему меню нужна подложка: полоса-растворитель цвета полотна,
   в которой контент гаснет ДО того, как дойдёт до верхнего края.
   Градиент, а не заливка: заливка вернула бы ту же сплошную полосу,
   от которой мы ушли.
*/
.hdr::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--sp-2)) 0 auto 0;
  height:calc(100% + var(--sp-5));
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    var(--c-bg) 0%,
    var(--c-bg) 62%,
    color-mix(in srgb, var(--c-bg) 55%, transparent) 82%,
    transparent 100%);
  transition:background var(--dur) var(--ease-out);
}
/*
 Полоса перестаёт быть контекстом наложения только пока панель закрыта:
   при открытой панели подложка не нужна — там сплошное тёмное полотно.
*/
body.nav-open .hdr::before{opacity:0}

/*
   Что было: 135 отдельных правил :hover, и каждое со своим таймингом —
   --dur-fast (180ms), --dur (280ms), --hov-dur (420ms) — и своим
   easing. Часть свойств (background, box-shadow, opacity) вообще не
   попадала в transition и переключалась мгновенно: это и читается
   как «резко».
   Стандарт: ОДИН тайминг и ОДИН easing на все интерактивные
   поверхности, и переход объявлен на ВСЕ свойства, которые ховер
   реально меняет.
*/
:root{
  --hov-dur:260ms;
  --hov-ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){:root{--hov-dur:0ms}}

a,button,summary,
.card,.ccard,.acard,.vcard,.fmt,.leak,.soc,.contact,.post,
.faq__q,.svet__opt,.btn,.btn-cta,.alink,.nav a,.foot__col a,
.exp__r,.sys__i,.fchip,.stat,.tl,.deliv li,.row,.audience-card,
.bio-logo-img,.rev,.guar__i,.arw,.burger,.author-badge{
  transition-property:color,background-color,background,border-color,
                      box-shadow,opacity,transform,filter;
  transition-duration:var(--hov-dur);
  transition-timing-function:var(--hov-ease);
}
/* Подъём карточек — один и тот же на весь сайт, без «прыжка». */
:root{--hover-lift:-3px}

/*
 Индикатор прокрутки: у линии был обрублен передний край — на светлом
   полотне под плавающей плашкой он читался как случайный прямоугольник.
   Скругляем ведущий торец и добавляем мягкое свечение: это прогресс,
   а не артефакт. Дорожки-подложки нет намеренно — она дала бы ту самую
   волосяную линию во всю ширину, от которой мы ушли.
*/
.progress{
  height:3px;
  border-radius:0 var(--r-pill) var(--r-pill) 0;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2));
  box-shadow:0 0 12px -2px color-mix(in srgb, var(--c-accent-2) 70%, transparent);
}

/*
 🔴 Единый стандарт ховера обязан быть ПОСЛЕДНИМ словом.
   Компоненты объявляли свои `transition:` короткой формой (она сбрасывает
   и property, и duration, и easing), и часть из них стояла ниже общего
   правила — например `.post` держал `transform,opacity,visibility` на
   620ms и вовсе не анимировал фон, из-за чего подсветка поста на ховере
   переключалась мгновенно. Здесь перечисление свойств и тайминг задаются
   ещё раз, уже после всех компонентных объявлений.
   Свойства, которыми компонент живёт по своей логике (появление .rv,
   слайд ленты, clip-path панели), НЕ трогаем — у них отдельные правила
   на transform/opacity/clip-path, и они объявлены на других селекторах.
*/
a,button,summary,
.card,.ccard,.acard,.vcard,.fmt,.leak,.soc,.contact,.post,
.faq__q,.svet__opt,.btn,.btn-cta,.alink,.nav a,.foot__col a,
.exp__r,.sys__i,.fchip,.stat,.tl,.deliv li,.row,.audience-card,
.bio-logo-img,.rev,.guar__i,.arw,.burger,.author-badge,
.contact__go,.soc__go,.btn__ico,.fmt__ico,.leak__ico,.faq__mark{
  transition-property:color,background-color,background,border-color,
                      box-shadow,opacity,transform,filter;
  transition-duration:var(--hov-dur);
  transition-timing-function:var(--hov-ease);
}
/* Лента постов двигается своим слайдом — ей transform/opacity вернуть. */
.feed__track .post{
  transition-property:background-color,background,box-shadow,transform,opacity,visibility;
  transition-duration:var(--hov-dur),var(--hov-dur),var(--hov-dur),620ms,620ms,0s;
}

/*
   Что было: общая реакция поверхностей рисовала «прорастающую линию» —
   псевдоэлемент `::after` во всю ширину карточки, height 3px,
   `left:0;right:0;bottom:0`, с ярким свечением.

   Стандарт ховера теперь один на весь сайт и без линий:
     кромка → акцент · подъём --hover-lift · мягкая тень.
*/
.u-surf::after,
.ccard::after,.card::after,.rev::after,.acard::after,
.audience-card::after,.vsl::after,.vsl-facade::after,.fmt::after,.leak::after,
.soc::after::after,.contact::after,.guar__i::after,
.vcard::after,.author-badge::after{content:none}

@media (hover:hover) and (pointer:fine){
  .u-surf:hover,
  .ccard:hover,.card:hover,.rev:hover,.acard:hover,
  .audience-card:hover,.vsl:hover,.vsl-facade:hover,.fmt:hover,.leak:hover,
  .soc:hover,.contact:hover,.guar__i:hover,
  .vcard:hover,.author-badge:hover,.sys__i:hover,.exp__r:hover,.tl:hover{
    transform:translateY(var(--hover-lift));
    box-shadow:var(--sh-md);
  }
  .on-dark .u-surf:hover,
  .on-dark .ccard:hover,.on-dark .card:hover,
  .on-dark .rev:hover,.on-dark .acard:hover,.on-dark .vsl:hover,
  .on-dark .fmt:hover,.on-dark .leak:hover,.on-dark .soc:hover,
  .on-dark .on-dark .contact:hover,
  .on-dark .vcard:hover,.on-dark .author-badge:hover{
    box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  }
}

/*
   Первая попытка подложки была заливкой цвета полотна. Но под шапкой
   проезжают ПОЛОСЫ РАЗНОГО ЦВЕТА — белые панели, тёмные секции,
   плашка первого экрана. Заливка `--c-bg` совпадала с полотном
   и не совпадала с ними: получался видимый прямоугольник.
   Решение: подложка вообще без цвета — только размытие того, что под
   ней, погашенное маской к нижнему краю. Совпадать не с чем: она
   показывает те же пиксели, просто расфокусированные, и растворяется.
*/
.hdr::before{
  inset:0 0 auto 0;
  height:calc(100% + var(--sp-6));
  background:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
}

/*
   1. ПОДЛОЖКИ НЕТ ВООБЩЕ. Любая полоса под плавающей плашкой —
      хоть заливкой, хоть размытием — даёт прямоугольник, потому что
      её край всегда где-то проходит.
   2. ОДНА ТЕМА. Смена на тёмную над тёмными секциями отменена: плашка
      всегда светлое стекло, меняется только степень прозрачности
      (спокойнее в покое, плотнее на прокрутке — чтобы текст читался).
      🔴 ОТМЕНЕНО ПОЗЖЕ: темы у шапки нет вовсе — переключатель
      `.hdr--dark` удалён из JS и CSS (см. adaptive.css, финальный
      блок шапки). Плашка всегда светлое стекло.
*/
/* Содержимое плашки тоже перестаёт перекрашиваться */
@media (hover:hover) and (pointer:fine){
}

/*
 🔴 Кавычка-знак наследовала геометрию прежнего псевдоэлемента.
   У `.case-quote::before` была акцентная ПОЛОСКА сверху панели:
   `position:absolute; left:0; right:0; top:0; height:2px`.
   Подменив только `content`, мы оставили абсолютное позиционирование —
   кавычка легла на кромку панели поверх первой строки, а текст ушёл
   под верхний край. Геометрию сбрасываем явно.
*/
.exp__quote::before,.rev__q::before,.case-quote::before{
  position:static;
  height:auto;
  width:auto;
  inset:auto;
  background:none;
  box-shadow:none;
}

/*
 Маркер FAQ вылезал за правую кромку карточки: у плитки появились
   внутренние поля, а кнопка тянулась во всю ширину ряда.
*/
.faq__q{gap:var(--sp-4)}
.faq__mark{flex:none}

/*
 Соцсети: три плитки в две колонки давали дыру справа снизу —
   последняя растягивается на оба столбца.
*/
@media (min-width:560px) and (max-width:1023px){
  .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .socials>li:last-child{grid-column:1 / -1}
}
@media (max-width:559px){
  .socials{grid-template-columns:1fr}
}

/*
   Один компонент на все группы одинаковых карточек: цифры первого
   экрана, «Утечки», карточки статей, «Ещё форматы». На телефоне
   группа превращается в ленту со snap-привязкой, стрелками и точками;
   лента листается сама и останавливается от любого касания.
   На планшете и десктопе компонент выключен — там карточки видны все
   сразу, и карусель только мешала бы.
*/
.mcar-ctl{display:none}
@media (max-width:767px){
  [data-mcar]{
    display:flex!important;
    grid-template-columns:none!important;
    gap:var(--sp-3);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-block:8px;
    /*
 🔴 Вылета за поля (отрицательный margin + padding) здесь НЕТ:
       часть групп лежит внутри плашек с `overflow:hidden` (первый экран,
       тёмные панели) — вылет там просто срезался, и первая карточка
       обрезалась слева. Лента живёт в своей колонке, «подглядывание»
       следующей карточки даёт ширина элемента.
*/
  }
  [data-mcar]::-webkit-scrollbar{display:none}
  [data-mcar]>*{
    flex:0 0 calc(100% - var(--sp-7));
    scroll-snap-align:start;
    min-width:0;
  }
  @media (prefers-reduced-motion:reduce){[data-mcar]{scroll-behavior:auto}}

  .mcar-ctl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-4);
    margin-top:var(--sp-4);
  }
  .mcar-dots{display:flex;gap:6px;flex-wrap:wrap}
  .mcar-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:var(--c-line);
    transition:background var(--hov-dur) var(--hov-ease),width var(--hov-dur) var(--hov-ease);
  }
  .on-dark .mcar-dot{background:rgba(255,255,255,.22)}
  .mcar-dot.is-on{width:20px;border-radius:var(--r-pill);background:var(--c-accent)}
  .on-dark .mcar-dot.is-on{background:var(--c-accent-text)}
  .mcar-arrows{display:flex;gap:var(--sp-2)}
  .mcar-arr{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;
    border:var(--rule);
    background:var(--c-surface);
    color:var(--c-ink);
  }
  .mcar-arr .ico{width:18px;height:18px}
  .on-dark .mcar-arr{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
    color:var(--c-on-dark);
  }
  .mcar-arr:active{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
}

/*
 Шапка на телефоне: имя бренда обрезалось кнопкой. Дескриптор уже
   скрыт, кнопка поджата — имени хватает строки без многоточия.
*/
@media (max-width:600px){
  .brand{flex:1 1 auto;min-width:0}
  .brand__name{font-size:var(--fs-xs);letter-spacing:-.02em}
  .hdr__act{flex:none}
}

/*
   В его исходнике это `steps4` — четыре РАВНЫЕ ступени в ряд.
   Круче делает не декор, а смысл: секция называется «четыре ЗВЕНА»,
   значит между карточками должна читаться связь. Даём сквозную
   нумерацию 01→04 и соединитель между ступенями — цепь, в которой
   каждое звено закрывает свою утечку.
*/
.steps4{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  counter-reset:step;
}
@media (min-width:640px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:var(--sp-3);
  align-content:start;
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
/*
 Соединитель звена: короткая акцентная перемычка к следующей ступени.
   Рисуется только там, где следующая ступень стоит в том же ряду.
*/
@media (min-width:1080px){
  .step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:calc(var(--sp-5) + 14px);
    right:calc(-1 * var(--sp-4));
    width:var(--sp-4);
    height:2px;
    background:linear-gradient(90deg,var(--c-accent-2),transparent);
    z-index:1;
  }
}
.step__n{
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  color:var(--c-accent-text);
  opacity:.85;
}
.step__ic{
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--c-accent-2) 22%, transparent);
  color:var(--c-accent-text);
}
.step__ic .ico{width:22px;height:22px}
.step__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:1.18;
  letter-spacing:var(--ls-tight);
  color:var(--c-on-dark);
}
.step__d{font-size:var(--fs-sm);line-height:1.55;color:var(--c-on-dark-mut)}
.step__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.step__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px var(--sp-3);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent-text);
}
.step__tag .ico{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .step:hover{
    transform:translateY(var(--hover-lift));
    border-color:var(--c-accent-2);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  }
  .step:hover .step__ic{background:var(--c-accent);color:var(--c-accent-ink)}
}

/*
 Панель карусели на тёмных полотнах, у которых нет класса .on-dark
   (блок «Утечки» красится собственным фоном).
*/
@media (max-width:767px){
  .leaks .mcar-arr,.panel--dark .mcar-arr,.steps4 ~ .mcar-ctl .mcar-arr{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:var(--c-on-dark);
  }
  .leaks .mcar-dot,.panel--dark .mcar-dot,.steps4 ~ .mcar-ctl .mcar-dot{background:rgba(255,255,255,.22)}
  .leaks .mcar-dot.is-on,.panel--dark .mcar-dot.is-on,.steps4 ~ .mcar-ctl .mcar-dot.is-on{background:var(--c-accent-text)}
}

/*
   ВЕЗДЕ, а не только на десктопе.
   «И меняться в зависимости от фона тоже» — тема плашки возвращена:
   над тёмными полотнами она тёмная, над светлыми светлая. Прежняя
   правка «только прозрачность» этим отменяется.
*/
.hdr.is-hidden{transform:none}
@media (hover:hover) and (pointer:fine){
}

/*
 🔴 Первый экран начинался ПОД шапкой: отступ считался от токена
   --hdr-h, который врал (60px против фактических 89px). Токен теперь
   пишет JS по факту; добавляем гарантированный зазор, чтобы кромка
   плашки никогда не выглядывала из-за таблетки.
*/
.hero{padding-top:calc(var(--hdr-h, 88px) + var(--sp-5))}
.hero--doc{padding-top:calc(var(--hdr-h, 88px) + var(--sp-5))}

/*
 🔴 Бренд в плашке обрезался БЕЗ многоточия и заезжал под кнопку.
   Замер: `.brand` = 248px, а `.brand__name` внутри = 263px — дочерний
   блок не ограничивался родителем, поэтому `text-overflow:ellipsis`
   не срабатывал (многоточию нужна ЗАДАННАЯ ширина, а не «сколько
   влезет»). Ограничиваем явно: сам `.brand` — грид с одной колонкой
   minmax(0,1fr), строки внутри — max-width:100%.
*/
.brand{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;overflow:hidden}
.brand__name,.brand__desc{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/*
 Плитка соцсети без адреса — не «мёртвая ссылка в никуда», а
   неактивный элемент: у неё нет курсора-руки, ховера и фокуса.
   Появится адрес — вернём <a> (аудит ловил href="#" как DEAD-LINK).
*/
.soc--off{opacity:.55;cursor:default}
@media (hover:hover) and (pointer:fine){
  .soc--off:hover{transform:none;box-shadow:none;border-color:inherit}
}

/* Асимметрия полей, найденная аудитом */
.stat{padding:var(--sp-5)}
.leaks__out{padding:var(--sp-5) var(--sp-6)}
.art__ul li,.art__ol li{padding-right:var(--sp-6)}

/*
 🔴 Карточка VSL на 320px: содержимое (кнопка play и заголовок)
   вылезало за нижнюю кромку на 88px — у карточки фиксированное
   соотношение сторон, а контент внутри не сжимался.
*/
@media (max-width:400px){
  .vsl{padding:var(--sp-4);gap:var(--sp-3)}
  .vsl__play{width:52px;height:52px}
  .vsl__t{font-size:1rem;line-height:1.25}
  .vsl__cap{font-size:var(--fs-xs)}
}

/*
 🔴 Расширение тач-зоны для ИНЛАЙНОВЫХ ссылок откачено.
   Псевдоэлемент высотой 44px перекрывал соседние строки абзаца:
   текст переставал выделяться, а тап по строке выше/ниже попадал
   в ссылку. WCAG 2.2 SC 2.5.8 (Target Size Minimum) прямо выводит
   из-под требования ссылки, встроенные в предложение, — так что
   доборная зона здесь не нужна, а вред от неё реальный.
   Проверка тач-целей исключает такие ссылки.
*/

/*
   Разница принципиальная, а не косметическая:
     Было (здесь):  <header> — фиксированная ПОЛОСА во всю ширину
                    (top:0; left:0; right:0), а таблетка — обёртка
                    .hdr__in внутри неё. Полоса прозрачна, но она
                    существует: 89px высотой во всю ширину экрана.
                    Отсюда и читается «таблетка внутри прямоугольника»:
                    у неё есть внешняя коробка с прямыми углами. Полосы нет вовсе.
                    `.snav{position:fixed;top:16px;left:50%;
                     width:calc(100% - 48px);max-width:1020px;
                     border-radius:pill;backdrop-filter:blur(20px)}`

   Центрируем через left/right + margin-inline:auto, а НЕ через
   translateX(-50%): transform на .hdr конфликтовал бы с классом
   автоскрытия и делал бы шапку containing block для fixed-потомков.
*/
.hdr{
  top:var(--sp-3);
  left:0;
  right:0;
  margin-inline:auto;
  width:min(var(--container), calc(100% - 2 * var(--gutter)));
  padding-block:0;
  padding-inline:0;
  border:1px solid color-mix(in srgb, #FFFFFF 60%, transparent);
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--c-surface) 62%, transparent);
  backdrop-filter:blur(22px) saturate(1.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 12px 34px -20px rgba(11,27,58,.32), inset 0 1px 0 rgba(255,255,255,.55);
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             top var(--dur) var(--ease-out);
}
.hdr.is-compact{
  top:var(--sp-2);
  padding-block:0;
  background:color-mix(in srgb, var(--c-surface) 78%, transparent);
  box-shadow:0 16px 40px -22px rgba(11,27,58,.4), inset 0 1px 0 rgba(255,255,255,.6);
  border-bottom-color:color-mix(in srgb, #FFFFFF 60%, transparent);
}

/*
 Внутренняя строка снова становится просто строкой: фон, рамка,
   скругление и стекло переехали на сам <header>.
*/
.hdr__in>.brand{padding-left:0}

/*
 🔴 Индикатор прокрутки убран: он рисовался отдельной полосой
   на top:0 во всю ширину — над плавающей таблеткой она читалась
   как ещё один посторонний прямоугольник.
*/
.progress{display:none}

/*
   ⬛ ШАПКА — ЕДИНСТВЕННЫЙ ИСТОЧНИК ПРАВДЫ
   Выше по файлу лежат четыре итерации шапки: полоса → таблетка
   внутри полосы → подложка заливкой → подложка размытием.
   Все они перекрыты этим блоком; читать нужно ЕГО. Оставлены
   намеренно — в комментариях к ним записано, почему каждый
   предыдущий подход не сработал.

   Никакой полосы во всю ширину не существует.
*/
.hdr{
  position:fixed;
  top:var(--sp-3);
  left:0;
  right:0;
  margin-inline:auto;
  width:min(var(--container), calc(100% - 2 * var(--gutter)));
  z-index:500;
  padding:0;
  border:1px solid rgba(255,255,255,.62);
  border-radius:var(--r-pill);
  /*
 Плотность: сквозь плашку читается силуэт полотна, но НЕ текст
     под ней. На 72–88% сквозь стекло проступали цифры кейсов —
     плашка выглядела дырявой.
*/
  background:color-mix(in srgb, var(--c-surface) 94%, transparent);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 10px 30px -14px rgba(11,27,58,.28);
  transform:none;
}
.hdr.is-compact{
  top:var(--sp-2);
  background:color-mix(in srgb, var(--c-surface) 98%, transparent);
  box-shadow:0 14px 36px -18px rgba(11,27,58,.36);
}
.hdr.is-hidden{transform:none}

.hdr .hdr__in{
  max-width:none;
  width:100%;
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-radius:inherit;
  box-shadow:none;
}
.hdr::before,.hdr::after{content:none}

/*
 У нас уже был .hi (акцентный цвет текста) —
   он остаётся для коротких имён. Плашка —
   отдельная роль .mk: ею отмечают ЦЕЛУЮ мысль на 1–2 строки.
   box-decoration-break:clone — чтобы на переносе плашка не рвалась
   в одну длинную ленту, а обнимала каждую строку.
*/
.mk{
  background:var(--c-mark);
  color:var(--c-ink);
  padding:.08em .3em;
  margin-inline:-.12em;
  border-radius:.28em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  font-weight:var(--fw-medium);
}
/*
 На тёмном полотне тот же приём: подсветка из семьи сапфира, но
   светящаяся, а не набивная — иначе плашка выглядит заплаткой.
*/
.on-dark .mk{
  background:rgba(127,178,232,.18);
  color:#fff;
}
/*
 В дисплейном заголовке (ФЛАГМАН) плашка не должна ломать интерлиньяж:
   поджимаем поля и радиус под крупный кегль.
*/
.flag__h .mk{padding:.02em .22em;border-radius:.2em;font-weight:inherit}

/*
   Общая библиотека сайта — контур в одном весе; марки платформ так
   не рисуются: узнаваемость держится на заливке и на цвете. Поэтому
   у .ico--brand глушим обводку и отдаём заливку символу.
*/
.ico--brand{fill:currentColor;stroke:none;width:22px;height:22px}
.socials--brand .soc__ico{
  background:var(--c-surface);
  border:var(--rule);
}
.soc__ico--yt{color:#FF0000}
.soc__ico--tg{color:#229ED9}
/* Instagram — официальный градиент, цвет живёт в самом символе */
.soc__ico--ig{color:inherit}
.on-dark .socials--brand .soc__ico{background:rgba(255,255,255,.92);border-color:transparent}
/*
 Ховер больше не инвертирует плитку иконки: фирменный цвет марки
   важнее единообразия ховера.
*/
@media (hover:hover) and (pointer:fine){
  .socials--brand .soc:hover .soc__ico,
  .on-dark .socials--brand .soc:hover .soc__ico{
    background:var(--c-surface);
    border-color:var(--c-line);
  }
  .socials--brand .soc:hover .soc__ico--yt{color:#FF0000}
  .socials--brand .soc:hover .soc__ico--tg{color:#229ED9}
}

/*
   Имя платформы обёрнуто в .soc__t: у .soc ровно три колонки
   (иконка / подпись / стрелка), и четвёртый прямой ребёнок ронял
   стрелку на вторую строку. Звёздочка живёт ВНУТРИ подписи.
*/
.soc__t{min-width:0}
.soc__star{
  margin-left:.1em;
  font-size:.7em;
  color:var(--c-muted);
}
.on-dark .soc__star{color:var(--c-on-dark-mut)}
.soc-note{
  margin-top:var(--sp-3);
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--c-muted);
}
.on-dark .soc-note{color:var(--c-on-dark-mut)}

/*
 Карточка получает .on-dark, поэтому текст, ссылки
   и кнопка внутри уже обслужены общими правилами тёмного полотна.
*/
.card--blue{
  background:var(--grad-dark);
  border-color:transparent;
  color:var(--c-on-dark);
}
.card--blue .card__k{color:var(--c-accent-text)}
.card--blue .card__t{color:var(--c-on-dark)}
.card--blue .card__d{color:var(--c-on-dark-mut)}
.card--blue .card__d--note .ico{color:var(--c-warm)}
/*
 Кнопка внутри тёмной карточки: на сапфире по сапфиру она бы пропала —
   ставим светлую, как на финальном CTA.
*/
.card--blue .btn{background:var(--c-surface);color:var(--c-ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .card--blue .btn:hover{background:var(--c-accent-soft);color:var(--c-ink)}
}

.flag--blue{
  background:var(--grad-dark);
  border-color:transparent;
  color:var(--c-on-dark);
}
.flag--blue .flag__h{color:var(--c-on-dark)}
.flag--blue .flag__note{color:var(--c-on-dark-mut);border-left-color:var(--c-accent-2)}
.flag--blue .flag__note b{color:var(--c-on-dark)}
.flag--blue .flag__lead{color:var(--c-on-dark-mut)}
.flag--blue .flag__lead strong{color:var(--c-on-dark)}
/*
 Плитки метрик и системы — инверсия на инверсии: полупрозрачное
   стекло поверх тёмного, тот же приём, что у карточек в .leaks.
*/
.flag--blue .fchip,
.flag--blue .sys__i{background:rgba(255,255,255,.05);border:1px solid var(--c-dark-line)}
.flag--blue .fchip__t,
.flag--blue .sys__t{color:var(--c-on-dark)}
.flag--blue .sys__d{color:var(--c-on-dark-mut)}
.flag--blue .fchip__ico,
.flag--blue .sys__ico{color:var(--c-accent-text)}
.flag--blue .fchip--dn .fchip__ico{color:var(--c-on-dark-mut)}
.flag--blue .flag__more{
  background:rgba(255,255,255,.06);
  border-color:var(--c-dark-line);
  color:var(--c-on-dark);
}
@media (hover:hover) and (pointer:fine){
  .flag--blue .flag__more:hover{background:rgba(255,255,255,.12);border-color:transparent}
}
/* Кнопка-призрак на тёмном: контур белым, иначе тонет */
.flag--blue .btn--ghost{border-color:rgba(255,255,255,.28);color:var(--c-on-dark)}
@media (hover:hover) and (pointer:fine){
  .flag--blue .btn--ghost:hover{background:var(--c-surface);color:var(--c-ink);border-color:transparent}
}

/*
   ШИРЕ 1024px — настоящее 3D-кольцо: сцена задаёт перспективу, орбита
   вращается целиком, карточки расставлены по кругу инлайновым
   transform из JS (rotateY + translateZ). Поэтому у .oc-card НЕТ
   собственного transition: переход живёт на .oc-orbit, иначе карточки
   поехали бы вразнобой и кольцо рассыпалось.

   1024px И УЖЕ — 3D выключается ЦЕЛИКОМ (perspective:none,
   transform-style:flat) и сцена становится обычной лентой со
   scroll-snap: на телефоне родной свайп с инерцией лучше любого

   НЕ переносим — палитра performa сапфировая. ═══════════════════════
*/
/*
 🔴 minmax(0,1fr), а не колонка по умолчанию. Авто-трек грида меряется
   по max-content, и ряд навигации с ВОСЕМЬЮ точками по 44px требовал 464px
   внутри контейнера 350 — дети вылезали за экран на всех телефонных
   ширинах (qa.js: over oc-hud/oc-scene/oc-nav/oc-dots). У кейсов точек
   три, поэтому там та же ошибка не проявлялась.
*/
.oc-root{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);user-select:none}

.oc-scene{
  width:100%;
  /*
 🔴 Высота сцены СЛЕДУЕТ за высотой карточки. Была константа 520px:
     когда слот вырос до 600px, карточка вылезла из сцены вниз и накрыла
     ряд навигации — точки перестали нажиматься (`check-links.js`:
     «button.oc-dot перекрыта: div.ccard__body» ×9 на обеих каруселях).
     Запас 60px — под перспективный подъём соседних карточек.
*/
  height:calc(var(--oc-card-h) + 20px);
  perspective:1200px;
  perspective-origin:50% 44%;
  position:relative;
  overflow:visible;
}
.oc-orbit{
  position:absolute;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .82s cubic-bezier(.77,0,.175,1);
}
/*
 Размер слота — переменные, потому что каруселей две и карточки в них
   разные: кейс (плотный, с метриками) и отзыв (цитата плюс подпись).
   Высоту держим ОБЩЕЙ внутри одной карусели: у карточек разной длины
   кольцо иначе «дышало» бы на каждом повороте.
*/
/*
 Высота слота — по САМОЙ ДЛИННОЙ карточке карусели. Замер после того,
   как шапка карточки стала рядом чипов.
   🔴 Замер при `height:auto` даёт 445/456px, но это НЕ ответ: со слотом
   раскладка внутри карточки другая (`.ccard__body{flex:1}` распределяет
   остаток), и на 460px `audit.js` всё ещё давал CLIP-Y на 26px. Значение
   подобрано по гейту, а не по замеру «на глаз».
*/
.oc-root{--oc-card-w:440px;--oc-card-h:488px}
.oc-card{
  position:absolute;
  top:0;left:50%;
  width:var(--oc-card-w);
  margin-left:calc(var(--oc-card-w) / -2);   /* центрирование по оси сцены */
  transform-style:preserve-3d;
  cursor:pointer;
}
.oc-card>*{height:var(--oc-card-h)}
.oc-card>*,.oc-card>* *{backface-visibility:hidden}
/* Неактивные карточки приглушены — взгляд ведётся к активной. */
.oc-card>*{transition:opacity var(--dur) var(--ease-out)}
.oc-card:not(.is-active)>*{opacity:.55}

.oc-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-5);
}
/* Стрелки — тот же .arw, что и во всём сайте, только на тёмном полотне. */
.oc-btn{flex:none}

.oc-hud{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.oc-counter{
  display:inline-flex;
  align-items:baseline;
  gap:.15em;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-caps);
  color:var(--c-on-dark);
  font-variant-numeric:tabular-nums;
}
.oc-sep,.oc-tot{color:var(--c-on-dark-mut)}
.oc-track{
  position:relative;
  flex:1;
  height:2px;
  border-radius:var(--r-pill);
  background:var(--c-dark-line);
  overflow:hidden;
}
.oc-fill{
  position:absolute;
  inset:0 auto 0 0;
  display:block;
  width:33%;
  border-radius:inherit;
  background:var(--c-accent-text);
  transition:width var(--dur) var(--ease-out);
}
/*
 🔴 Точки — КНОПКИ, а не <span>. Раньше они были чистым индикатором
   именно потому, что видимые 6×6 не проходят гейт тач-целей 44px. Тап-зоны не накладываются — поле
   ровно 44px без внешних отступов.
*/
/*
 Ряд точек переносится: восемь тап-зон по 44px не помещаются между
   стрелками на 320–414px. Перенос — единственный вариант, при котором
   и тач-цель остаётся 44px, и ничего не вылезает за экран.
*/
.oc-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0;min-width:0}
.oc-dot{
  width:44px;height:44px;
  padding:0;border:none;background:none;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.oc-dot::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--c-dark-line);
  transition:background var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.oc-dot.is-on::before{width:20px;border-radius:var(--r-pill);background:var(--c-accent-text)}
@media (hover:hover) and (pointer:fine){
  .oc-dot:hover::before{background:var(--c-accent-text)}
}

/*
 ── ≤1024px: 3D нет, сцена — лента с нативным снапом ──────────────────
   Ширину карточки в пикселях выставляет JS (ровно ширина сцены).
   padding-block — тот же приём, что у .arts: без него подъём карточки
   на ховере срезался бы кромкой скролл-контейнера.
*/
@media (max-width:1024px){
  .oc-scene{
    height:auto;
    perspective:none;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-block:10px;
  }
  .oc-scene::-webkit-scrollbar{display:none}
  .oc-orbit{
    position:relative;
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
    height:auto;
    transform:none!important;
    transform-style:flat;
    transition:none;
  }
  .oc-card{
    position:relative;
    left:auto;top:auto;
    flex:0 0 auto;
    margin-left:0;
    /*
 поле внутри карточки, а не gap между ними: ширина слота обязана
       ровно равняться ширине сцены, иначе снап промахивается мимо края
*/
    box-sizing:border-box;
    padding-inline:var(--sp-2);
    transform:none!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  /*
 Высоту ряда задаёт самая длинная карточка (лента — flex-строка).
     Без flex:1 короткая карточка оставалась своего роста, и под ней
     зияла пустота до самой навигации — замер на 390px: 175px дыры.
*/
  .oc-card{display:flex}
  .oc-card>*{height:auto;flex:1}
  .oc-card:not(.is-active)>*{opacity:1}
  /*
 🔴 Тап-зону точки НЕ сужаем. Восемь зон по 44px со стрелками в одну
     строку телефона не помещаются (8×44 + 2×44 + зазоры = 456 при
     контейнере 350) — и первым решением была зона 30px. Поэтому 44×44 и ПЕРЕНОС ряда: два
     центрированных ряда точек честнее, чем зона, в которую не попадает
     палец. На 768–1024px ряд и так один.
*/
  .oc-nav{gap:var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  .oc-scene{scroll-behavior:auto}
  .oc-orbit{transition:none}
}

.tg__av{
  border-radius:50%;
  object-fit:cover;
  background:var(--c-accent);
}

/*
   Видео — самый тяжёлый объект страницы; вокруг него шаг увеличен.
   Селектор с > — иначе не перебивает `.hero--doc>.container>*+*`.
*/
.hero--doc>.container>.praktikum-vsl,
.hero--doc>.container>.vsl,
.hero--doc>.container>.vsl-facade{margin-top:calc(var(--stack-lg) * 1.35)}
/*
 Тот же случай, что с видео: абзац
   на голом полотне стоял вплотную к ЗАЛИВНОЙ панели, и панель читалась
   как продолжение абзаца. Панели в герое-документе получают тот же
   увеличенный шаг, что и видео.
*/
/*
 🔴 Первая правка дала всего +6px и жалобу не сняла: на телефоне
   --stack-lg поджат до 24px против 18px у --stack-md. Шаг вокруг
   ЗАЛИВНОЙ панели должен быть таким же заметным, как вокруг видео,
   иначе панель по-прежнему читается продолжением абзаца.
*/
.hero--doc>.container>.bridge,
.hero--doc>.container>.hero__sub-card{margin-top:calc(var(--stack-lg) * 1.6)}
.hero--doc>.container>.praktikum-vsl + *,
.hero--doc>.container>.vsl + *,
.hero--doc>.container>.vsl-facade + *{margin-top:var(--stack-lg)}

/*
   ГОРИЗОНТАЛЬНО.» Четыре одинаковые плитки в ряд показывали СОСТАВ
   этапов и молчали про их ПОРЯДОК — от перестановки местами ничего
   не менялось. Цепочка порядок и держит: узлы нанизаны на общий рельс,
   между ними отрезок, номер растёт слева направо.
   Номера — счётчик CSS, а не текст: иначе они попали бы в сверку слов
   с исходником как добавленные (тот же приём, что у подписей VSL).
*/
.timeline.timeline--chain{
  list-style:none;
  counter-reset:chain;
  border-top:0;
  /*
 Промежуток объявлен ОДНОЙ переменной: он же входит в длину рельса
     между узлами. Разъедутся — линия не дотянется до соседа.
*/
  --chain-gap:var(--sp-5);
  gap:var(--chain-gap);
  column-gap:var(--chain-gap);
  margin-bottom:var(--stack-lg);
}
.timeline--chain .tl{
  counter-increment:chain;
  position:relative;
  background:none;
  border-bottom:0;
  border-radius:0;
  padding:0;
  padding-top:calc(var(--chain-node) + var(--sp-5));
  gap:var(--sp-2);
  --chain-node:44px;
}
/* Узел: кружок с номером на рельсе */
.timeline--chain .tl::before{
  content:counter(chain,decimal-leading-zero);
  position:absolute;
  top:0;left:0;
  z-index:1;
  width:var(--chain-node);
  height:var(--chain-node);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-sm);
  letter-spacing:0;
  color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}
/*
 Рельс: отрезок от узла до следующего. У последнего звена его нет —
   цепочка должна ЗАКАНЧИВАТЬСЯ, а не уходить в пустоту.
*/
.timeline--chain .tl::after{
  content:"";
  position:absolute;
  top:calc(var(--chain-node) / 2);
  left:var(--chain-node);
  height:1px;
  background:var(--c-line);
  /* до узла соседа: остаток своей колонки + промежуток сетки */
  width:calc(100% - var(--chain-node) + var(--chain-gap));
}
.timeline--chain .tl:last-child::after{content:none}
.on-dark .timeline--chain .tl::before{
  background:var(--c-dark-2);
  border-color:var(--c-dark-line);
  color:var(--c-accent-text);
}
.on-dark .timeline--chain .tl::after{background:var(--c-dark-line)}

/*
 Рельс уходит из горизонтали в вертикаль,
   контент отступает вправо от узла.
*/
@media (max-width:767px){
  .timeline.timeline--chain{--chain-gap:var(--sp-6)}
  .timeline--chain .tl{
    --chain-node:36px;
    padding-top:0;
    padding-left:calc(var(--chain-node) + var(--sp-4));
    min-height:var(--chain-node);
  }
  .timeline--chain .tl::after{
    top:var(--chain-node);
    left:calc(var(--chain-node) / 2);
    width:1px;
    height:calc(100% - var(--chain-node) + var(--chain-gap));
  }
}

/*
   🔴 Доказанная причина: reveal двигает блок через `transform:
   translateY(...)`. Пойман живой замер — `.contacts.rv` в момент показа
   стоит на `translateY(18.4563px)` при opacity 0.34. Дробное смещение
   кладёт блок на композитный слой, и антиалиасинг ДУГИ (пиксели с
   частичным покрытием) пропадает, тогда как осевые кромки в 1px
   переживают растеризацию целиком. Отсюда ровно тот силуэт, который
   видно на скринах.

   Лечим причину, а не симптом: группам карточек со скруглённой рамкой
   reveal делаем ТОЛЬКО по прозрачности. Транформа им ничего не даёт —
   блок и так появляется, — а слой на дробном смещении создаёт.
*/
.contacts.rv,
.socials.rv,
.fmts.rv{transform:none}