/* components.css - компоненты Persavel. Мобайл-first. Зависит от tokens.css + base.css.
   Ревизия хиро 2026-07-27 (hero-vs-3). Предыдущая (hero-vs-2, 2026-07-26): вертикальная
   параметризация --vs, расширяющаяся мера заголовка, ступени интерлиньяжа, режим низкого
   окна. В hero-vs-3 закрыты четыре дефекта, найденные на прогоне по ШИРИНЕ при коротком
   окне: (1) волосяная темная линия по низу шапки - background-origin: border-box;
   (2) обрыв типографики хиро на 680px - порог сдвинут на 701px, к границе art-direction
   у <picture>; (3) срез головы на фото при 500-700px - object-position 50% 14%;
   (4) затемнение под текстом на .hero__overlay ниже 701px - контраст по WCAG на 336
   замерах поднят с минимума 1.23 до 4.80, ячеек ниже 4.5 было 110, стало ноль.
   Высота окна ≥800px и ширина ≥1024px не затронуты - утвержденный десктоп совпадает
   с прежним до пикселя (проверено ident.cjs на 1280/1440/1600/1920). *//* ════ КНОПКИ / CTA ════ */

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--cta-h);
  padding: 0 var(--space-5);
  background: var(--cta); color: var(--cta-ink);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  border: 0; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; text-align: center; letter-spacing: .01em;
  transition: background calc(140ms * var(--motion)) ease, transform calc(120ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
.cta:active { transform: translateY(1px); }
.cta--primary { box-shadow: var(--shadow-card); }
.cta[disabled], .cta[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; opacity: .7; pointer-events: none; }/* hover только на устройствах с мышью (P0-4: против залипшего hover на тач-экранах) */

@media (hover: hover) and (pointer: fine) {
  /* Анимация наведения (эталон - подай-жалобу.рф): кнопка чуть приподнимается,
     обводится контуром и темнеет заливка. Контур и тень - одним box-shadow:
     border добавил бы 2px к габаритам и сдвинул бы верстку. */
  .cta:hover {
    background: var(--cta-press);
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px rgba(44,39,35,.16), 0 8px 18px rgba(44,39,35,.16);
  }/* Нажатие «возвращает» кнопку на поверхность - тактильная отдача поверх подъема. */

  .cta:hover:active { transform: translateY(0); box-shadow: 0 0 0 2px rgba(44,39,35,.16); }
}/* reduced-motion: --motion=0 убирает длительности, но сам сдвиг остается -
   гасим подъем явно, оставляя контур и заливку как некинетическую подсветку. */

@media (prefers-reduced-motion: reduce) {
  .cta:hover, .cta:hover:active, .cta:active { transform: none; }
}/* ════ ХЕДЕР ════ */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  /* Контент шапки - по --container-wide (1120px), вровень с секциями и футером;
     фон/бордер тянутся на всю ширину, поля центрируют содержимое (Б2.1). */
  /* --zhelob-shapki обычно 0. Под замком прокрутки, когда шапка стоит вне потока,
     в нее кладется ширина исчезнувшей полосы прокрутки - см. base.css. Слева желоб
     вычитается из процента, справа он же добавляется отдельным слагаемым: полоса
     прокрутки жила у правой кромки, и именно ее ширину надо вернуть содержимому
     шапки, чтобы оно осталось вровень с содержимым страницы. */
  --pole-shapki: max(var(--gutter), calc((100% - var(--zhelob-shapki, 0px) - var(--container-wide)) / 2 + var(--gutter)));
  padding-block: var(--space-3);
  padding-left: var(--pole-shapki);
  padding-right: calc(var(--pole-shapki) + var(--zhelob-shapki, 0px));
  background: rgba(251, 246, 238, 0.92);                         /* fallback (Б11) */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);             /* префикс (Б11) */
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}/* Поверх hero (Б2): absolute, чтобы лежать НА фото, а не толкать hero вниз.
   sticky оставлял хедер в потоке - логотип оказывался на кремовом, hero+хедер >1 экрана. */

.site-header[data-variant="on-hero"] {
  position: absolute; inset: 0 0 auto; width: 100%;
  /* верхний скрим: гарантирует читаемость светлого логотипа/меню/бургера на любом фото и crop
     (без него на светлых участках фото - окно, небо - они пропадали, меню казалось «отсутствующим») */
  background: linear-gradient(180deg, rgba(20,17,14,.46) 0%, rgba(20,17,14,.18) 58%, rgba(20,17,14,0) 100%);
  border-bottom-color: transparent;
  /* ОБЯЗАТЕЛЬНО. По умолчанию background-origin: padding-box, а background-clip: border-box
     и background-repeat: repeat. Градиент раскладывается по padding-box (72px), а
     закрашивается по border-box (73px) - и в строку бордера уходит ПОВТОР градиента,
     то есть его САМЫЙ ТЕМНЫЙ стоп. Прозрачный border-bottom-color при этом ни при чем:
     мы видим не бордер, а плитку фона. Замер: яркость строк по y на /men-me/ 700x598 -
     y71 = 82.2, y72 = 52.4, y73 = 80.9, то есть провал 30 единиц шириной ровно 1px
     через все фото. background-origin: border-box заставляет градиент занять все 73px и
     дойти до нуля на настоящем нижнем крае. Высота шапки НЕ меняется (73px),
     поэтому утвержденный десктоп не затронут. Вариант border-bottom: 0 отклонен -
     он уменьшил бы шапку до 72px, а это правка десктопа. */
  background-origin: border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}/* При прокрутке (класс ставит site.js в подшаге 4) - закрепляем с подложкой */

.site-header[data-scrolled="true"] {
  position: fixed;
  background: rgba(251, 246, 238, 0.94);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px);
}/* scrolled перекрывает on-hero: комбинированным селектором (Б10: выше специфичность,
   иначе .site-header[data-variant=on-hero] .logo ниже по каскаду побеждал и логотип оставался светлым) */

.site-header[data-variant="on-hero"][data-scrolled="true"] .logo { color: var(--ink); }
.site-header[data-variant="on-hero"][data-scrolled="true"] .burger span { background: var(--ink); }
.site-header[data-scrolled="true"] .logo { color: var(--ink); }
.site-header[data-scrolled="true"] .burger span { background: var(--ink); }
.site-header[data-scrolled="true"] :where(a, button):focus-visible { outline-color: var(--focus-ring); }
.logo { font-family: var(--serif); font-weight: var(--fw-semibold); font-size: 2rem; line-height: 1; letter-spacing: -.025em; text-decoration: none; color: var(--ink); }
.site-header[data-variant="on-hero"] .logo { color: var(--ink-on-dark); }

.burger {
  width: var(--tap-min); height: var(--tap-min);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform calc(160ms * var(--motion)) ease, opacity calc(160ms * var(--motion)) ease; }
.site-header[data-variant="on-hero"] .burger span { background: var(--ink-on-dark); }/* Без JS: меню - компактная строка ссылок (НЕ развернутый вертикальный оверлей,
   чтобы не наезжать на hero). Прячем только при наличии JS, где работает бургер. */

.site-menu ul {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  padding: 0;
}
.site-menu a {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 2px 0;
  text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-small);
}
.site-header[data-variant="on-hero"] .site-menu a { color: var(--ink-on-dark); }/* С JS: меню сворачивается в бургер; раскрытие - выпадающей панелью */

html.menu-ready .site-menu { display: none; }
html.menu-ready .site-menu[data-open="true"] {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card); padding: var(--space-2) 0;
}
html.menu-ready .site-menu[data-open="true"] ul { flex-direction: column; justify-content: flex-start; gap: 0; }
html.menu-ready .site-menu[data-open="true"] a { padding: var(--space-3) var(--gutter); min-height: var(--tap-min); width: 100%; font-size: var(--fs-body); color: var(--ink); }/* ── Ревизия (сдвиг макета, CLS). Дофиксовое состояние шапки ──
   menu.js ставит .menu-ready только после регистрации обработчиков - это верно и
   остается. Но до этого момента (замер: 90-220 мс) действовали правила base.css:113-115:
   .site-header{flex-wrap:wrap} и .site-menu{flex:1 0 100%}, то есть меню занимало
   ОТДЕЛЬНУЮ СТРОКУ и шапка была на 8-103px выше финальной. Когда класс появлялся,
   шапка схлопывалась до --header-h и вся страница прыгала вверх. Замер до правки,
   42 ячейки (6 страниц x 7 вьюпортов, чистый прогон без перехвата запросов):
   средний CLS 0.1604, в «плохой» зоне (>0.25) 10 ячеек, выше «хорошей» (>0.10) - 20.
   Худшие: /pricing/ 1024 = 0.5181, /how/ 1024 = 0.4589, /about/ 1024 = 0.4625.
   Изоляция причины: отключение шрифтов CLS не меняет (0.4226), отключение SVG не
   меняет (0.4731), отключение ВСЕГО JS убирает сдвиг шапки целиком (0.0465).
   Лечим не отключением fallback, а тем, что делаем дофиксовую геометрию равной финальной:
   на десктопе меню и без JS стоит строкой справа (оно там помещается: 632px контента
   при 984px доступных), на мобильном - уходит из потока полосой под шапкой.
   Итоговая отрисовка НЕ меняется ни на одном размере: правила действуют только
   в состоянии html:not(.menu-ready), которого после загрузки JS не существует. */

@media (min-width: 1024px) {
  html:not(.menu-ready) .site-header { flex-wrap: nowrap; height: var(--header-h); }
  html:not(.menu-ready) .site-menu { flex: 0 1 auto; }
  html:not(.menu-ready) .site-menu ul { flex-wrap: nowrap; justify-content: flex-end; }/* те же размеры пункта, что и в финальном состоянии (см. блок v55 ниже),
     иначе сама строка меню прыгает с 27px на 40px в момент появления класса */

  html:not(.menu-ready) .site-menu a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-inline: 4px; margin-inline: -4px;
  }
}
@media (max-width: 1023px) {
  html:not(.menu-ready) .site-header { flex-wrap: nowrap; height: var(--header-h); }/* Компактная строка ссылок, как и было задумано (НЕ вертикальный оверлей),
     но position:absolute - она больше не влияет на высоту шапки и на поток. */

  html:not(.menu-ready) .site-menu {
    position: absolute; top: 100%; left: 0; right: 0; flex: 0 0 auto;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--gutter);
  }
  html:not(.menu-ready) .site-menu ul { justify-content: flex-start; }
}/* ════ HERO ════ */

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { /* затемняющий градиент к низу */
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim);
}/* padding-top резервирует шапку: на лендингах она position:absolute и лежит НА хиро,
   поэтому без резерва align-items:flex-end на низком окне выталкивал верх заголовка
   ПОД шапку (замер до правки: /men-me/ 1015x627 - первая строка на 45px под шапкой).
   На высоких окнах отступ невидим - он съедает пустоту над нижним блоком.

   --vs («vertical shrink») - насколько окно ниже опорных 800px. При высоте окна
   ≥800px --vs = 0, и все величины ниже совпадают с прежними ДО ПИКСЕЛЯ: утвержденный
   десктоп не меняется. Ниже 800px --vs растет линейно, и каждая величина убывает со
   СВОИМ коэффициентом. Прежняя форма min(base, k·svh) такой свободы не давала: она
   жестко задавала наклон k = base/8, и его не хватало - на высотах 360-600px заголовок,
   кнопка и бейдж не помещались в первый экран (замер до правки: 133 битых размера
   из 384 на двух лендингах, худший перелив 122px). max(пол, …) держит нижнюю границу
   читаемости, поэтому текст не может ужаться до нечитаемого. */

.hero { --vs: max(0px, calc(800px - 100svh)); }
.hero__overlay { position: relative; z-index: 2; padding: var(--gutter); padding-top: calc(var(--header-h) + max(2px, calc(var(--space-3) - var(--vs) * 0.014))); padding-bottom: max(12px, calc(var(--space-7) - var(--vs) * 0.08)); width: 100%; max-width: var(--container); margin-inline: auto; }
.hero__overlay h1 { color: var(--ink-on-dark); font-size: min(9.6vw, max(19px, calc(var(--fs-h1) - var(--vs) * 0.055))); margin-bottom: max(4px, calc(var(--space-3) - var(--vs) * 0.012)); }
.hero__sub { color: var(--ink-on-dark-2); font-size: max(13px, calc(var(--fs-body) - var(--vs) * 0.010)); margin-bottom: max(8px, calc(var(--space-5) - var(--vs) * 0.032)); }
.hero .cta { margin-bottom: max(4px, calc(var(--space-3) - var(--vs) * 0.012)); min-height: max(44px, calc(var(--cta-h) - var(--vs) * 0.030)); }
.hero .trust-badge { font-size: max(12px, calc(var(--fs-small) - var(--vs) * 0.006)); }
.hero .trust-badge__icon { width: max(20px, calc(32px - var(--vs) * 0.020)); height: max(20px, calc(32px - var(--vs) * 0.020)); }/* Только мобилка: усиливаем нижнее затемнение, чтобы белый текст читался */

@media (max-width: 700px) {
  .hero::after { background: linear-gradient(180deg, rgba(20,17,14,0) 30%, rgba(20,17,14,.34) 55%, rgba(20,17,14,.76) 82%, rgba(20,17,14,.9) 100%); }/* Кадрирование вертикального фото. До 701px <picture> отдает портрет 941x1672
     (пропорция 0.563), object-fit: cover обрезает его по высоте, а object-position
     по умолчанию 50% - окно берется ИЗ ЦЕНТРА. Чем шире окно при той же высоте,
     тем уже вертикальная выборка: при 500x598 видно 16.3%..83.7% исходника,
     при 700x598 - уже 25.9%..74.0%. Голова на обоих фото лежит на 11%..36%
     (замер по линейке на исходниках), поэтому к 700px верх головы срезается:
     на /decision/ женщина обрезана по губам, на /men-me/ мужчина по лбу.
     14% вместо 50% прижимает выборку кверху: при 700x598 окно становится
     7.3%..55.4%, при 700x340 - 10.2%..37.5%, голова целиком в кадре на всем
     диапазоне. Снизу уходит стол и кружка - они и так лежат под затемнением
     и текстом. Правило живет только до 700px, широкое фото 1916x821 на
     утвержденном десктопе не затронуто. */

  .hero__media img { object-position: 50% 14%; }/* Затемнение ПОД ТЕКСТОМ, а не под окном.
     Причина первая: плата за кадрирование выше. Подняв выборку к 14%, мы
     подставили под буквы светлые куски фото - на /men-me/ это окно с дневным
     светом, на /decision/ засвеченная стена.
     Причина вторая, более важная: замер показал, что мобильное хиро НИКОГДА
     не держало контраст. Линейка - WCAG по 99-му перцентилю яркости фона под
     ядрами глифов. Без этого градиента на 336 замерах (2 страницы x ширины
     320/360/420/500/600/640/680/700 x высоты 320/340/400/500/598/700/880,
     1 544 001 пиксель глифов): минимум 1.31, медиана 4.55, ниже 4.5 -
     167 ячеек из 336. Худшее: /decision/ 320x400 h1 = 1.31, /men-me/ 360x320
     h1 = 1.43. Это было и до наших правок.
     Ориентир взят не с потолка: утвержденный десктоп по той же линейке дает
     h1 5.9..11.7, .hero__sub 3.76..8.6. Отсюда цель ниже 701px: h1 >= 4.6,
     подзаголовок и бейдж >= 4.2 - не хуже того, что уже принято на десктопе.

     Почему градиент на оверлее, а не на .hero::after. .hero - это flex с
     align-items: flex-end, поэтому низ .hero__overlay совпадает с низом хиро,
     а верх плавает вместе с высотой текстового блока: замер - верх оверлея
     гуляет от 0.06 до 0.50 высоты окна, а h1 внутри оверлея стоит стабильно
     на 0.13..0.54 его высоты. Градиент, привязанный к оверлею, ездит вместе
     с текстом сам; привязанный к окну - не ездит. Вариант «просто усилить
     .hero::after» просчитан и отклонен: чтобы вытянуть все ячейки, ему нужна
     кривая, кладущая ту же плотность на зону лица. Здесь лицо выше верхней
     кромки оверлея и не трогается на окнах от 500px по высоте.

     Кривая: 0.56 * smoothstep(u / 0.26), дальше полка 0.56 (u - доля высоты
     оверлея). Smoothstep выбран из-за нулевой производной на обоих концах:
     у верхней кромки оверлея нет излома, поэтому нет и полосы Маха. Полка
     вместо роста до низа - чтобы не давить фото в черное там, где текст уже
     кончился. Композит с .hero::after считается как 1-(1-a1)(1-a2).
     Параметры подобраны минимизацией средней альфы при выполнении цели:
     стало минимум 4.74, медиана 9.50, ниже 4.5 - ноль, средняя альфа 0.487.
     Правило живет только до 700px. Утвержденный десктоп не затронут. *//* Размер заголовка ниже 701px берем такой же, как на главной: там h1 держится в
     трех строках и текстовый блок остается под лицом, а здесь при 9.6vw заголовок
     разъезжался на пять строк, поднимал весь блок и ложился человеку на лицо.
     Правило живет только до 700px - утвержденный десктоп не затронут. */

  .hero__overlay h1 { font-size: max(20px, calc(clamp(1.55rem, 6vw, 2rem) - var(--vs) * 0.040)); line-height: 1.16; }
  .hero__sub { font-size: max(13px, calc(var(--fs-body) - var(--vs) * 0.010)); }

  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(20,17,14,0)     0%,
      rgba(20,17,14,.037)  4%,
      rgba(20,17,14,.126)  8%,
      rgba(20,17,14,.247) 12%,
      rgba(20,17,14,.375) 16%,
      rgba(20,17,14,.484) 20%,
      rgba(20,17,14,.540) 23%,
      rgba(20,17,14,.56)  26%,
      rgba(20,17,14,.56) 100%);
  }
}/* Десктоп/планшет: широкое фото - текст блоком слева, затемнение слева (лицо справа остается чистым) */

@media (min-width: 701px) {
  .hero__overlay { max-width: var(--container-wide); }
  .hero::after { background: linear-gradient(97deg, rgba(20,17,14,.82) 0%, rgba(20,17,14,.56) 30%, rgba(20,17,14,.16) 58%, rgba(20,17,14,0) 78%); }/* Типографика хиро «планшет/десктоп» ПРИВЯЗАНА К 701px, а не к 680px, как было.
     Причина: на 701px меняется само фото (портрет -> широкое) и направление
     затемнения (вертикальное -> под 97deg). Мера в 64vw и кегль 2.5rem осмысленны
     ТОЛЬКО там, где фото широкое и лицо стоит справа: они уводят текст в левую
     колонку, чтобы он не лег на лицо. Ниже 701px фото вертикальное, лицо по центру,
     затемнение идет снизу - там текст обязан занимать всю ширину.
     Пока эти правила стояли на 680px, ровно один пиксель ширины ломал верстку.
     Замер до правки, окно 598px по высоте:
       /decision/ 679px - кегль 21.9, 2 строки, 569px (84% окна), кнопка во всю ширину;
       /decision/ 680px - кегль 25.9, 4 строки, 365px (54% окна), кнопка 280px;
       /men-me/   679px - 2 строки, 588px (87%);  680px - 4 строки, 348px (51%).
     Заголовок вдвое прибавлял в строках и вдвое терял в ширине на одном пикселе.
     Переносом порога на 701px диапазон 680..700 получает базовые (мобильные)
     правила и становится продолжением 679px без скачка. Значения на 701px и выше
     не изменились ни на единицу - утвержденный десктоп не тронут.

     Про саму меру: 18ch вместо прежних 14ch - на 14ch заголовок лендинга (91-95
     знаков) ломался на 6 узких строк, тире открывало строку, предлоги висели в
     конце. Мера НЕ фиксированная: на низком окне она РАСШИРЯЕТСЯ (+0.9px на каждый
     недостающий по высоте пиксель, потолок 64vw). Это главный рычаг: высота
     заголовка = число строк x кегль x интерлиньяж, а max-width задан в ch, которые
     масштабируются вместе с кеглем, - поэтому уменьшение шрифта НЕ убирает строки,
     оно только пропорционально сжимает блок. Расширение меры убирает строки:
     замер 1280x600 - было 5 строк по 33px (198px), стало 3 строки (119px).
     При высоте окна >=800px --vs = 0 и мера равна прежним 18ch до пикселя. */

  .hero__overlay h1 { max-width: max(18ch, min(calc(28rem + var(--vs) * 0.9), 64vw)); font-size: max(24px, calc(2.5rem - var(--vs) * 0.070)); }
  .hero__sub { max-width: max(42ch, min(calc(34rem + var(--vs) * 0.9), 64vw)); }
  .hero .cta { width: auto; min-width: 280px; }
}/* Низкое окно на планшете/десктопе: мера заголовка расширяется (см. блок ≥701 ниже),
   текст уходит правее - поэтому затемнение делаем плотнее и тянем дальше вправо,
   иначе белые буквы ложатся на светлые участки фото. Окна ≥761px не затрагиваются. */

@media (min-width: 701px) and (max-height: 760px) {
  .hero::after { background: linear-gradient(97deg, rgba(20,17,14,.86) 0%, rgba(20,17,14,.70) 30%, rgba(20,17,14,.44) 52%, rgba(20,17,14,.14) 70%, rgba(20,17,14,0) 86%); }
}/* Интерлиньяж - вторая по величине статья вертикального бюджета после числа строк:
   на 4-5 строках снижение с 1.2 до 1.06 дает 12-16px, то есть больше, чем весь
   нижний отступ. Через --vs это не выразить (line-height безразмерный, а --vs -
   длина, и «1.5 - длина» невалидно), поэтому тремя ступенями по высоте окна.
   Порог 700px: утвержденный десктоп (высота ≥800px) не затрагивается. */

@media (max-height: 700px) {
  .hero__overlay h1 { line-height: 1.14; }
  .hero__sub { line-height: 1.42; }
  .hero .trust-badge { line-height: 1.35; }
}
@media (max-height: 560px) {
  .hero__overlay h1 { line-height: 1.08; }
  .hero__sub { line-height: 1.32; }
  .hero .trust-badge { line-height: 1.25; }
}
@media (max-height: 440px) {
  .hero__overlay h1 { line-height: 1.04; }
  .hero__sub { line-height: 1.26; }
  .hero .trust-badge { line-height: 1.2; }
}/* Совсем низкое окно (телефон в альбоме, окно в треть экрана): ужимаем шапку.
   Ее высота фиксированная, и на 360-520px она съедает до пятой части экрана. */

@media (max-height: 520px) {
  :root { --header-h: 58px; }
  .site-header { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 1024px) and (max-height: 520px) {
  :root { --header-h: 52px; }
}

.trust-badge { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-on-dark-2); font-size: var(--fs-small); }
.trust-badge__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-bg); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.trust-badge__icon::after { content: ""; width: 16px; height: 16px; background: var(--sage); -webkit-mask: url("/assets/icons/shield.fb44654a.svg") center / contain no-repeat; mask: url("/assets/icons/shield.fb44654a.svg") center / contain no-repeat; }/* ════ СЕКЦИИ - заголовки ════ *//* ════ КАРТОЧКИ ════ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink-2); font-size: var(--fs-small); }/* ════ ДЕМО-КАРТОЧКА «Пример отчета» ════ *//* ════ СПИСКИ ════ *//* ════ СРАВНЕНИЕ (сколько потратили) ════ *//* ════ FAQ-аккордеон на нативном <details>/<summary> (Б3: работает без JS) ════ */

.faq-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--fon-tihiy); overflow: hidden; }
.faq-item__q {
  list-style: none; cursor: pointer;
  padding: var(--space-4); min-height: var(--tap-min);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq-item__q::-webkit-details-marker { display: none; }/* убрать дефолтный треугольник */
.faq-item__q::after { content: "+"; font-size: 1.4em; font-weight: 400; color: var(--ink-2); transition: transform calc(160ms * var(--motion)) ease; }
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__q:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.faq-item__a { padding: 0 var(--space-4) var(--space-4); color: var(--ink-2); font-size: var(--fs-small); }
.faq-item__a p { font-size: inherit; }/* ════ ФИНАЛЬНЫЙ CTA ════ *//* ════ ФУТЕР ════ *//* ══ ФУТЕР (единый для всех страниц; 3 колонки, каркас по --container-wide,
   вровень с шапкой). Левая колонка - оператор: 18+, ИП, ОГРНИП/ИНН и строка РКН
   рядом. Средняя - разделы, правая - юрдокументы. Ниже: кнопка cookie (по ширине
   текста), разделитель, дисклеймер. ══ */

.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-7) 0; margin-top: 0; color: var(--ink-2); }
.site-footer__inner { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; }
.site-footer__top { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 680px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1.25fr; gap: var(--space-6) var(--space-5); }
}

.site-footer__brand { display: grid; gap: var(--space-2); align-content: start; }
.site-footer__ip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); }
.age-badge { display: inline-block; border: 1px solid var(--field-border); border-radius: 6px; padding: 1px 7px; font-weight: 600; color: var(--ink-2); font-size: 0.8125rem; }
.site-footer__ids { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.site-footer__mail { margin: 0; font-size: var(--fs-small); }
.site-footer__mail a { color: var(--teal); text-decoration: none; }
.site-footer__mail a:hover { text-decoration: underline; }
.site-footer__rkn { margin: var(--space-1) 0 0; font-size: var(--fs-kicker); line-height: 1.55; color: var(--ink-2); }
.site-footer__rkn a { color: var(--teal); }

.site-footer__col-h { margin: 0 0 var(--space-3); font-family: var(--sans); font-size: var(--fs-kicker); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }/* Плотность ссылок - как на подай-жалобу.рф: 14px, компактный шаг строк. */

.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }/* li - flex-контейнер: иначе inline-flex-ссылка сидит на базовой линии и под ней
   остается ~3.5px «хвоста» строки, из-за которого шаг не сходится с эталоном. */

.site-footer__col li { display: flex; }/* Ревизия 4 (техдолг), 2026-08-05. Было три конкурирующих min-height на одной и той же
   ссылке: 24px здесь, 22px в @media (min-width:680px) и 36px в @media (max-width:1023px)
   ниже по файлу. Специфичность у всех одинаковая, поэтому решал порядок в файле, и
   фактически 24px не применялись НИКОГДА: до 1024px побеждал блок max-width:1023 (36px),
   от 1024px - блок min-width:680 (22px). Комментарий рядом при этом утверждал обратное.
   Свели к двум значениям без изменения пикселей: 36px до 1024px, 22px от 1024px. */

.site-footer__col a { position: relative; display: inline-flex; align-items: center; min-height: 36px; font-size: 0.875rem; line-height: 1.4; color: var(--teal); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }/* Зона нажатия шире видимой ссылки - прием из футера подай-жалобу.рф: невидимый ::after
   расширяет область клика, не меняя ни отрисовку, ни высоту футера (десктоп не трогаем).
   По вертикали ровно 1px с каждой стороны. На десктопе шаг строк 25px (22px + gap 3px),
   значит зона выходит 24px - порог WCAG 2.5.8 AA - и между соседними зонами остается 1px,
   они не смыкаются. В оригинале подай-жалобу inset -3px при gap 5px давал ~1px перекрытия
   соседних зон и ломал то самое исключение по расстоянию; здесь перекрытия нет. */

.site-footer__col a::after { content: ""; position: absolute; inset: -1px -6px; }
@media (min-width: 680px) {/* Шаг списка уплотняется уже с 680px. */

  .site-footer__col ul { gap: 3px; }
}
@media (min-width: 1024px) {/* Только на согласованном десктопе ссылка ужимается до 22px: с зоной ::after
     (+1px сверху и снизу) выходит ровно 24px - порог WCAG 2.5.8 AA, и при шаге
     строк 25px между соседними зонами остается 1px, они не смыкаются.
     Ниже 1024px остается крупный тап-таргет 36px. */

  .site-footer__col a { min-height: 22px; }
}

.site-footer .footer-cookie-btn { align-self: flex-start; margin: var(--space-6) 0 0; }
.site-footer__rule { width: 100%; border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.site-footer__disclaimer { width: 100%; max-width: none; margin: 0; font-size: var(--fs-kicker); line-height: 1.6; color: var(--ink-2); }
.site-footer__lang { margin: var(--space-2) 0 0; font-size: var(--fs-kicker); color: var(--ink-2); }/* COOKIE-баннер - в base.css (компактная карточка) *//* ═══════════════════════════════════════════════════════════
   АДАПТИВ (подшаг 3). Мобайл-first: базовые стили выше - для телефона,
   ниже - расширения для планшета (≥680) и десктопа (≥1024).
   ═══════════════════════════════════════════════════════════ *//* ──────── ПЛАНШЕТ ≥680px ──────── */

@media (min-width: 680px) {
  /* Текстовые секции остаются читаемой колонкой; крупнее вертикальный ритм */
/* H1/H2 крупнее */

  h1 { font-size: 2.5rem; }/* 40px */
  h2 { font-size: 1.75rem; }/* 28px *//* «Что вы получите» - 4 карточки в 2 колонки *//* Сравнение - 2 колонки рядом *//* Правила хиро (мера, кегль, ширина кнопки) отсюда ПЕРЕНЕСЕНЫ в блок ≥701px -
     см. развернутое обоснование там. Здесь их быть не должно: на 680..700px фото
     еще вертикальное, и «планшетная» типографика ломала заголовок на 4 строки. *//* CTA-секции: кнопка не на всю ширину */
}/* ──────── ДЕСКТОП ≥1024px ──────── */

@media (min-width: 1024px) {
  /* Грид-блоки выходят в широкий контейнер; текстовые остаются узкими.
     Делаем это на конкретных секциях через внутренний прием ниже. */
  h1 { font-size: 3rem; }/* 48px *//* 2.1: лендинг-секции - широкий каркас (--container-wide = 1120), вровень с шапкой/футером.
     Сетки, карточки и блок сравнения (эзо vs Антиэзо) занимают его на всю ширину. *//* 2.1: сплошной текст держим узкой мерой (--measure = 800). Сравнение и карточки НЕ капим -
     они идут на всю ширину каркаса (спец. случай «широкий каркас, узкая мера текста»). *//* Hero-текст еще крупнее, блок ограничен */

  .hero__overlay { padding-bottom: max(16px, calc(var(--space-8) - var(--vs) * 0.08)); }
  .hero__overlay h1 { font-size: max(26px, calc(3.25rem - var(--vs) * 0.095)); }/* 52px при высоте окна ≥800px *//* Меню на десктопе показываем строкой даже с JS (бургер прячем) */

  html.menu-ready .site-header .burger { display: none; }
  html.menu-ready .site-menu { display: block; position: static; background: transparent; border: 0; box-shadow: none; padding: 0; }
  html.menu-ready .site-menu ul { flex-direction: row; justify-content: flex-end; gap: var(--space-5); }
  html.menu-ready .site-menu a { padding: 0; min-height: auto; width: auto; font-size: var(--fs-small); color: var(--ink); }
  .site-header[data-variant="on-hero"] .site-menu a { color: var(--ink-on-dark); }
  .site-header[data-scrolled="true"] .site-menu a { color: var(--ink); }
}/* ──────── ХИРО: ПОСЛЕДНЯЯ СТУПЕНЬ, ОКНО НИЖЕ 400px ────────
   Блоки стоят ПОСЛЕ ≥680px и ≥1024px намеренно: приоритет решает порядок в файле,
   и без этого правила выше перебивали бы их. Сюда попадает телефон в альбоме
   с крупной панелью браузера. Фиксированные расходы - шапка 61px и кнопка 44px -
   съедают треть экрана, остальные величины уже на своих полах. *//* Шапка: 61px → 55px. Ниже 1023px, потому что на ≥1024px эта полоса и так чистая. */

@media (max-width: 1023px) and (max-height: 400px) {
  :root { --header-h: 55px; }
  .site-header { padding-top: 3px; padding-bottom: 3px; }
}/* Пол кегля заголовка 19px → 18px. Ниже 18px текст нечитаем, это конец шкалы.
   Замер до правки: /men-me/ 320x320 - хиро 330px при окне 320px. */

@media (max-height: 400px) {
  .hero__overlay h1 { font-size: min(9.6vw, max(18px, calc(var(--fs-h1) - var(--vs) * 0.055))); }
}/* Широкое и очень низкое окно - главный реальный случай (айфон в альбоме ≈700x300).
   В блоке ≥680px пол кегля 24px и потолок меры 64vw давали 4 строки и перелив;
   отпускаем оба, заголовок ложится в 2 строки. Затемнение на такой высоте уже
   плотное (блок ≤760px) и тянется до 86% ширины, поэтому мера до 82vw безопасна.
   Замер до правки: /men-me/ 700x300 - хиро 310px при окне 300px, заголовок 4 строки.
   Порог поднят с 680px до 701px вместе с основным блоком планшетной типографики:
   этот блок только правит потолки, заданные там, и без него терял бы смысл. */

@media (min-width: 701px) and (max-height: 400px) {
  .hero__overlay h1 { max-width: min(calc(28rem + var(--vs) * 0.9), 82vw); font-size: max(20px, calc(2.5rem - var(--vs) * 0.070)); }
  .hero__sub { max-width: min(calc(34rem + var(--vs) * 0.9), 82vw); }
}/* Раз мера доходит до 82vw, затемнение обязано доходить до 100%: замер показал,
   что иначе последние строки ложатся на светлое (/decision/ 834x340 - 3.89:1
   при норме 4.5:1). Порог min-width 701px - тот же, что у двух градиентов выше:
   ниже 701px затемнение вертикальное, его трогать нельзя. */

@media (min-width: 701px) and (max-height: 400px) {
  .hero::after { background: linear-gradient(97deg, rgba(20,17,14,.88) 0%, rgba(20,17,14,.78) 32%, rgba(20,17,14,.60) 58%, rgba(20,17,14,.40) 78%, rgba(20,17,14,.22) 92%, rgba(20,17,14,.10) 100%); }
}/* Окно ниже 340px - режим выживания. Кегли уже на полах, поэтому забираем то,
   что осталось: воздух между блоками и интерлиньяж. Лид на men-me при ширине
   320-360px переносится в 5 строк, и это самая большая статья бюджета.
   Замер до правки: /men-me/ 320x300 - хиро 322px при окне 300px. */

@media (max-height: 340px) {
  .hero__overlay { padding-top: calc(var(--header-h) + 2px); padding-bottom: 8px; }
  .hero__overlay h1 { margin-bottom: 4px; line-height: 1.0; }
  .hero__sub { margin-bottom: 6px; line-height: 1.18; }
  .hero .cta { margin-bottom: 4px; }
  .hero .trust-badge { line-height: 1.15; }
  .hero .trust-badge__icon { width: 20px; height: 20px; }
}/* ──────── COOKIE-БАННЕР: 2 колонки с 960px ──────── */

@media (min-width: 960px) {
  /* cookie - в base.css */
}/* ── STABILITY PASS v55: predictable hit areas and SVG payment sizing ── */

@media (min-width: 1024px) {
  html.menu-ready .site-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 4px;
    margin-inline: -4px;
  }
}/* The payment SVGs only contain viewBox and have no intrinsic width/height.
   Explicit dimensions prevent zero-width rendering in Chromium/WebView. */

.paylogo img[src*="pay-sbp"]        { width:65px; height:30px; }
.paylogo img[src*="pay-mir"]        { width:60px; height:17px; }
.paylogo img[src*="pay-visa"]       { width:52px; height:17px; }
.paylogo img[src*="pay-mastercard"] { width:35px; height:27px; }/* Ревизия 4 (техдолг), 2026-08-05: блок @media (max-width:1023px) с min-height:36px и
   align-items:center удален - оба значения теперь стоят в базовом правиле выше. *//* ═══════════════════════════════════════════════════════════
   CONSISTENCY PASS v58 - единые шапка, меню, футер и интерактив
   ═══════════════════════════════════════════════════════════ *//* Одинаковый форм-фактор шапки на всех страницах при одном viewport. */

.site-header {
  min-height: var(--header-h);
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color calc(160ms * var(--motion)) ease,
              border-color calc(160ms * var(--motion)) ease,
              box-shadow calc(160ms * var(--motion)) ease;
}
html.menu-ready .site-header { height: var(--header-h); }

.logo,
.site-menu a,
.burger,
.site-footer a,
.footer-cookie-btn {
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-menu a { border-radius: 9px; }/* Бургер всегда одинакового размера и превращается в крест без смены геометрии. */

.burger { border-radius: 10px; transition: background-color calc(140ms * var(--motion)) ease, transform calc(120ms * var(--motion)) ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  html.menu-ready .site-header .site-menu a {
    min-height: 40px;
    padding: 0 .55rem;
  }
}

@media (hover:hover) and (pointer:fine) {
  .logo:hover { color: var(--teal); transform: translateY(-1px); }
  .site-menu a:hover {
    color: var(--teal);
    background: color-mix(in srgb, var(--sage-bg) 78%, transparent);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .site-header[data-variant="on-hero"] .site-menu a:hover {
    color: var(--ink-on-dark);
    background: rgba(251,246,238,.14);
  }
  .site-header[data-scrolled="true"] .site-menu a:hover {
    color: var(--teal);
    background: var(--sage-bg);
  }
  .burger:hover {
    background: color-mix(in srgb, var(--sage-bg) 78%, transparent);
    transform: translateY(-1px);
  }
  .site-header[data-variant="on-hero"] .burger:hover { background: rgba(251,246,238,.14); }
}/* Единая интерактивность вторичных кнопок и табов. Основные CTA уже определены выше. */

:where(
  .lp-btn-secondary,
  .product-btn-secondary,
  .copy-btn,
  .faq-mini-btn,
  .footer-cookie-btn,
  .cookie-modal__link,
  .cookie-modal__close,
  .faq-category,
  .process-tab,
  .depth-tab,
  .issue-tab,
  .cookie-banner__actions button
) {
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              border-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}

@media (hover:hover) and (pointer:fine) {
  :where(
    .lp-btn-secondary,
    .product-btn-secondary,
    .copy-btn,
    .faq-mini-btn,
    .footer-cookie-btn,
    .cookie-modal__link,
    .faq-category,
    .process-tab,
    .depth-tab,
    .issue-tab,
    .cookie-banner__actions button
  ):not(:disabled):hover {
    color: var(--ink);
    border-color: var(--teal);
    /* Была жестко --surface: на песочной полосе и на баннере cookie кнопка при
       наведении становилась ровно цветом подложки и пропадала. Теперь заливка
       наведения берется из контекста и переворачивается вместе с полосой. */
    background-color: var(--fon-navedeniya);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44,39,35,.10);
    text-decoration: none;
  }
  .cookie-modal__close:hover {
    color: var(--ink);
    background: var(--surface);
    transform: translateY(-1px);
  }
}

:where(
  .lp-btn-secondary,
  .product-btn-secondary,
  .copy-btn,
  .faq-mini-btn,
  .footer-cookie-btn,
  .cookie-modal__link,
  .faq-category,
  .process-tab,
  .depth-tab,
  .issue-tab,
  .cookie-banner__actions button
):active { transform: translateY(0); }/* Один и тот же футер: одинаковая реакция ссылок и кнопки cookie. */

.site-footer__mail a,
.site-footer__rkn a,
.site-footer__col a {
  border-radius: 6px;
  text-decoration: none;
}
.site-footer__mail a,
.site-footer__rkn a { padding: 1px 4px; margin: -1px -4px; }/* Почта - самостоятельная ссылка в отдельной строке, исключение «ссылка внутри предложения»
   из WCAG 2.5.8 на нее не распространяется: добираем зону до 27px. Соседние абзацы отстоят
   на 8px (--space-2), зона в них не заходит.
   «Запись в реестре» стоит внутри предложения - исключение inline действует, расширять ее
   по вертикали нельзя: зона наедет на соседние строки того же абзаца. */

.site-footer__mail a { position: relative; }
.site-footer__mail a::after { content: ""; position: absolute; inset: -2px -6px; }
.site-footer .footer-cookie-btn {
  min-height: var(--tap-min);
  background: transparent;
}
@media (hover:hover) and (pointer:fine) {
  .site-footer__mail a:hover,
  .site-footer__rkn a:hover,
  .site-footer__col a:hover {
    color: var(--ink);
    background: var(--sage-bg);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .site-footer .footer-cookie-btn:hover {
    color: var(--ink);
    background: var(--sage-bg);
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44,39,35,.10);
  }
}/* Контраст текста на темных сквозных секциях. */

.lp-band--dark :where(h1,h2,h3,h4,strong,b),
.product-cta-band :where(h1,h2,h3,h4,strong,b) { color: var(--ink-on-dark); }
.lp-band--dark :where(p,li,.lp-lead),
.product-cta-band :where(p,li,.lp-lead) { color: var(--ink-on-dark-2); }

@media (prefers-reduced-motion: reduce) {
  :where(.logo,.site-menu a,.burger,.site-footer a,.footer-cookie-btn,
         .lp-btn-secondary,.product-btn-secondary,.copy-btn,.faq-mini-btn,.cookie-modal__link,.cookie-modal__close,
         .faq-category,.process-tab,.depth-tab,.issue-tab,
         .cookie-banner__actions button):hover { transform: none !important; }
}/* Точечные корректировки cookie CTA. *//* В модальном окне настроек «Принять все» остается текстовой ссылкой:
   без подъема, подложки и тени. Основная кнопка cookie-баннера сохраняет
   общую интерактивность CTA. */

@media (hover:hover) and (pointer:fine) {
  .cookie-modal [data-cookie-modal="accept-all"]:not(:disabled):hover {
    background-color: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
  }
}
.cookie-modal [data-cookie-modal="accept-all"]:active {
  transform: none;
}/* единый стиль текстовых гиперссылок по образцу футера. */

.text-link.text-link {
  color: var(--teal);
  font-weight: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 1px 4px;
  margin: -1px -4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              box-shadow calc(140ms * var(--motion)) ease;
}
.text-link.text-link--on-dark { color: var(--ink-on-dark); }
.text-link.text-link:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@media (hover:hover) and (pointer:fine) {
  .text-link.text-link:hover {
    color: var(--ink);
    /* Была жестко --sage-bg. На шалфейных полосах (.lp-band--sage, тарифная полоса
       лендингов) это ровно цвет полосы - замер ΔE = 0, наведение не читалось.
       Полосы переопределяют переменную у себя. */
    background: var(--podsvetka-ssylki);
    text-decoration: none;
  }
  .text-link.text-link--on-dark:hover {
    color: var(--ink-on-dark);
    background: rgba(251,246,238,.14);
  }
}/* парные CTA имеют одинаковую геометрию по всему сайту. */

:where(.lp-actions, .product-actions, .copy-row):has(> :is(a, button):nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--paired-cta-width)));
  gap: .75rem;
  width: fit-content;
  max-width: 100%;
  align-items: stretch;
}
:where(.lp-actions, .product-actions, .copy-row):has(> :is(a, button):nth-child(2)) > :is(a, button) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--cta-h);
  justify-content: center;
  text-align: center;
}/* Текстовые ссылки на темном фоне повторяют логику ссылок футера,
   но используют светлую контрастную палитру. */

:where(.product-cta-band, .lp-band--dark, .guarantee-content-card--dark) p > a:not(.cta):not(.lp-btn-secondary):not(.product-btn-secondary) {
  color: var(--ink-on-dark);
  font-weight: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 1px 4px;
  margin: -1px -4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease;
}
@media (hover:hover) and (pointer:fine) {
  :where(.product-cta-band, .lp-band--dark, .guarantee-content-card--dark) p > a:not(.cta):not(.lp-btn-secondary):not(.product-btn-secondary):hover {
    color: var(--ink-on-dark);
    background: rgba(251,246,238,.14);
    text-decoration: none;
    transform: translateY(-1px);
  }
}

@media (max-width: 679px) {
  :where(.lp-actions, .product-actions, .copy-row):has(> :is(a, button):nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}/* парные служебные действия также имеют одинаковую кликабельную область. */

.cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 132px));
  gap: var(--space-2);
}
.cookie-banner__actions > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.cookie-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: var(--space-4);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.cookie-modal__actions > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--cta-h);
  justify-content: center;
  text-align: center;
}
@media (max-width: 520px) {
  .cookie-banner__actions,
  .cookie-modal__actions {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}/* повторные траты: общий блок для главной, продуктовых страниц и лендингов. */

.repeat-cost { display: grid; gap: 1.25rem; }
.repeat-cost__head { max-width: 820px; }
.repeat-cost__kicker { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .8rem; color: var(--terra-text); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.repeat-cost__kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--cta); }
.repeat-cost__head h2 { max-width: 16ch; font-family: var(--serif); font-size: clamp(2rem,4vw,3rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.repeat-cost__head p { margin-top: .8rem; max-width: 690px; color: var(--ink-2); line-height: 1.6; }
.repeat-cost__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: stretch; }
.repeat-cost__card { display: flex; flex-direction: column; min-height: 250px; padding: clamp(1.35rem,2.7vw,2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--karta); }
/* Была color-mix(--surface 82%, --bg) на теплой полосе color-mix(--cta 7%, --bg):
   замер ΔE 1.93 - карточка почти сливалась с полосой. Приглушать ее отдельным
   оттенком незачем: смысловой контраст держит соседняя карточка на угольном фоне,
   а два пункта разницы в цвете глаз все равно не читает. Ставим общую светлую
   карточку сайта: ΔE к полосе 6.39. */
.repeat-cost__card--loop { background: var(--karta); }
.repeat-cost__card--persavel { border-color: var(--ink); background: var(--ink); color: var(--ink-on-dark); }
.repeat-cost__label { width: fit-content; padding: .28rem .62rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--terra-text); font-size: .72rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.repeat-cost__card--persavel .repeat-cost__label { background: color-mix(in srgb, var(--sage-bg) 16%, transparent); color: var(--ink-on-dark); }
.repeat-cost__card h3 { margin-top: 1rem; font-family: var(--serif); font-size: clamp(1.35rem,2.4vw,1.8rem); font-weight: 600; line-height: 1.25; }
.repeat-cost__card--persavel h3 { color: var(--ink-on-dark); }
.repeat-cost__card p { margin-top: auto; padding-top: 1.1rem; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.repeat-cost__card--persavel p { color: var(--ink-on-dark-2); }
.repeat-cost__result { padding: 1rem 1.2rem; border-left: 3px solid var(--cta); background: var(--sage-bg); font-family: var(--serif); font-size: clamp(1.15rem,2vw,1.45rem); font-weight: 600; }
@media (max-width: 679px) { .repeat-cost__grid { grid-template-columns: 1fr; } .repeat-cost__card { min-height: 0; } }/* hover логотипа должен побеждать цветовые состояния обычной, hero- и scrolled-шапки. */

@media (hover: hover) and (pointer: fine) {
  .site-header .logo:hover,
  .site-header[data-variant="on-hero"] .logo:hover,
  .site-header[data-scrolled="true"] .logo:hover,
  .site-header[data-variant="on-hero"][data-scrolled="true"] .logo:hover {
    color: var(--teal);
    transform: translateY(-1px);
  }
}/* «Цена повторений»: единая геометрия с блоком «Разница подходов».
   Не растягиваем контент до краев viewport: все элементы остаются в стандартном
   каркасе 1120 px. На desktop обе секции используют одну высоту и одинаковые
   вертикальные поля; на планшетах и мобильных высота снова определяется контентом. */

@media (min-width: 900px) {
  :root { --comparison-section-height: 600px; }

  .home-compare-section,
  .repeat-cost-section.product-section,
  .repeat-cost-section.lp-band {
    box-sizing: border-box;
    height: var(--comparison-section-height);
    min-height: var(--comparison-section-height);
    overflow: visible;
  }

  .home-compare-section,
  .repeat-cost-section.product-section {
    padding-block: 0;
  }

  .home-compare-section > .lp-shell,
  .repeat-cost-section > .lp-shell.lp-section,
  .repeat-cost-section.product-section > .product-shell {
    box-sizing: border-box;
    width: min(100%, var(--container-wide));
    max-width: var(--container-wide);
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: clamp(3rem, 6vw, 5.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .repeat-cost-section > .lp-shell.lp-section {
    /* Побеждает прежнее width:100% и нулевые вертикальные отступы. */
    width: min(100%, var(--container-wide));
  }

  .repeat-cost {
    width: 100%;
    display: grid;
    gap: clamp(1rem, 1.6vw, 1.35rem);
  }

  .repeat-cost__head {
    display: block;
    max-width: 900px;
  }

  .repeat-cost__kicker {
    margin-bottom: .85rem;
  }

  .repeat-cost__head h2 {
    max-width: 900px;
    font-size: clamp(2rem, 3.5vw, 2.65rem);
    line-height: 1.08;
  }

  .repeat-cost__head p {
    max-width: 760px;
    margin-top: .8rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1.55;
  }

  .repeat-cost__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .repeat-cost__card {
    min-height: 205px;
    padding: clamp(1.35rem, 2.5vw, 2rem);
  }

  .repeat-cost__card h3 {
    margin-top: .85rem;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    line-height: 1.25;
  }

  .repeat-cost__card p {
    margin-top: auto;
    padding-top: .9rem;
    font-size: .9rem;
    line-height: 1.5;
  }

  .repeat-cost__result {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: .8rem 1.05rem;
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    line-height: 1.3;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  :root { --comparison-section-height: 580px; }
  .repeat-cost__card { min-height: 195px; }
}

@media (max-width: 899px) {
  .repeat-cost-section.product-section,
  .repeat-cost-section.lp-band,
  .home-compare-section {
    height: auto;
    min-height: 0;
  }

  .repeat-cost-section.product-section > .product-shell,
  .repeat-cost-section > .lp-shell.lp-section {
    width: min(100%, var(--container-wide));
    max-width: var(--container-wide);
    height: auto;
    padding-block: clamp(2.75rem, 8vw, 4.5rem);
  }

  .repeat-cost__head { display: block; }
}/* v113: раскрытая burger-панель всегда использует светлую схему меню.
   Вариант шапки над hero не должен перекрашивать ссылки панели в белый. */

html.menu-ready .site-menu[data-open="true"] a {
  color: var(--ink);
  background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  html.menu-ready .site-menu[data-open="true"] a:hover {
    color: var(--teal);
    background-color: color-mix(in srgb, var(--sage-bg) 78%, transparent);
    text-decoration: none;
  }
}