/* base.css — системная база. Значения только из tokens.css.
   Единственное исключение — px в @media: CSS не подставляет var()
   в медиазапросы. Набор брейкпоинтов фиксирован и нигде не расширяется:
   560 (спека в две колонки), 640 (сетки ×2), 720 (крупная типографика),
   960 (сетки ×3). */

body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: var(--fs-base);
}

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 720px) { .container { padding-inline: var(--space-6); } }
/* Пропорция 1 : 4 (design-code р.6): внутри блока space-2…4, между
   блоками space-7…8. Воздух даётся отбивкой, а не паддингами. */
.section { padding-block: var(--space-7); }
@media (min-width: 720px) { .section { padding-block: var(--space-8); } }
/* Основной текст: ширина 68ch и интерлиньяж 1.7 — главный рычаг
   читаемости на текстовом сайте (design-code р.5). */
.prose { max-width: var(--prose-measure); line-height: var(--lh-relaxed); }

/* --- Типографика -------------------------------------------------- */
h1 {
  font-size: var(--fs-2xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}
h2 {
  font-size: var(--fs-xl); line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-6); margin-bottom: var(--space-3);
}
h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-3); }

@media (min-width: 720px) {
  h1 { font-size: var(--fs-3xl); }
  body { font-size: var(--fs-base-lg); }
}

/* Хабы держат более крупный первый экран — это единственное отличие
   их типографики. Регистр везде обычный: капс отдан служебным
   элементам, роль «сигнала» на хабе играет эйтбрау .hero__code
   (design-code р.5). */
@media (min-width: 960px) {
  .pt-home h1,
  .pt-vertical h1,
  .pt-industry h1 { font-size: var(--fs-4xl); line-height: var(--lh-none); }
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.lead {
  font-size: var(--fs-md); color: var(--color-fg-muted);
  line-height: var(--lh-relaxed); max-width: var(--prose-measure);
}
.muted { color: var(--color-fg-muted); }
.small { font-size: var(--fs-sm); }
/* Класс `.todo` убран вместе с прочерком в спеке: строка без значения
   больше не выводится (D-007), и правило осталось бы стилем без
   разметки. Перечень незаполненных полей — agents/state/DATA-GAPS.md. */

/* Технический код / выноска: SF-01, СП 71.13330 (канон р.2). */
.code {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-fg-muted);
}

.skip-link {
  position: absolute; inset-inline-start: -100%;
  display: inline-flex; align-items: center; min-block-size: var(--c-tap-min);
  padding-inline: var(--space-4);
}
.skip-link:focus {
  inset-inline-start: var(--space-4); top: var(--space-2);
  background: var(--color-accent); color: var(--color-accent-fg); z-index: 100;
}

/* --- Шапка --------------------------------------------------------- */
/* Mobile-first: до 720px в полосе только логотип и гамбургер, всё
   остальное — в раскрывающейся панели (канон р.9). Три пункта меню,
   телефон и кнопка в одной строке давали на 375px три ряда и 180px
   липкой полосы — 22% экрана 812px, отъедаемых постоянно.

   `position: relative` — якорь для панели: она позиционируется
   абсолютно и не растит полосу при раскрытии. С 720px панели нет,
   и шапка становится липкой. */
.site-header {
  position: relative;
  border-bottom: var(--border-hairline) solid var(--color-border);
  background: var(--color-bg);
}
@media (min-width: 720px) {
  .site-header { position: sticky; top: 0; z-index: 20; }
}
/* Все три элемента шапки — inline-flex с min-block-size: инлайновому
   <a> padding-block бокс не растит, пункт навигации выходил 19px
   (аудит GT-DESIGN-03, находка 1). */
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; padding-block: var(--space-2);
}
/* Фирменный блок. Инлайн-SVG, цвет задаётся классом, а не запечён в
   файле: выворотка — смена модификатора, а не второй файл
   (GT-LOGO-01, `templates/partials/_logo.html`).
   Высота 24px даёт ширину 127px при пропорции 340:64 — выше минимума
   компоновки в 120px, ниже которого надпись не читается.
   Цвет берётся из шкалы, а не из ролей `--color-fg` / `-on-dark`:
   логотип — объект бренда, а не текст, и обязан совпадать с файлами в
   assets/brand/ до значения. Роль текста ниже по контрасту и увела бы
   сайт от печати. */
.logo { display: block; block-size: 24px; inline-size: auto; }
.logo__layer { fill: none; stroke: var(--c-accent-500); stroke-width: 8; }
.logo__struct { fill: var(--c-neutral-900); }
.logo--on-dark .logo__struct { fill: var(--c-neutral-0); }

.site-header__logo {
  display: inline-flex; align-items: center; min-block-size: var(--c-tap-min);
  color: var(--color-fg);
}
.site-header__logo:hover { color: var(--color-fg); text-decoration: none; }
.site-header__phone {
  display: none; align-items: center; min-block-size: var(--c-tap-min);
  color: var(--color-fg); font-size: var(--fs-sm); white-space: nowrap;
}
.site-header__phone:hover { color: var(--color-accent-strong); }
/* Действие в шапке. Единственная акцентная заливка на первом экране до
   скролла — бюджет акцента (design-code р.3) она не ломает: телефон
   рядом набран текстом, а не вторым контролом. `white-space` держит
   подпись в строку, иначе кнопка ломается пополам и полоса шапки
   прыгает на две высоты. */
/* Селектор с родителем — не украшение: `.btn` объявлен ниже по файлу и
   при равной специфичности перебивал бы `display: none`, оставляя кнопку
   в мобильной полосе (она уже есть в панели гамбургера). */
.site-header__inner > .site-header__cta { display: none; white-space: nowrap; }
.site-nav { display: none; }
@media (min-width: 720px) {
  .site-header__phone { display: inline-flex; }
  .site-header__inner > .site-header__cta { display: inline-flex; }
  .site-nav {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--fs-sm); flex: 1 1 auto;
  }
}
.site-nav a {
  display: inline-flex; align-items: center; min-block-size: var(--c-tap-min);
  color: var(--color-fg-muted);
  border-bottom: var(--border-regular) solid transparent;
}
.site-nav a:hover { color: var(--color-fg); text-decoration: none; }
/* Активный пункт — подчёркивание 2px, а не только цвет: приём вкладок
   из референса 02, читается без опоры на цвет (design-code р.7). */
.site-nav a[aria-current] {
  color: var(--color-fg); font-weight: var(--fw-medium);
  border-bottom-color: var(--color-accent);
}

/* --- Гамбургер (до 720px) ------------------------------------------ */
/* Раскрытие на <details>, без JS и без hover: на тач-экране hover не
   срабатывает, меню обязано открываться тапом (PAGE-CANON р.10).
   С 720px элемент выключается целиком — там меню стоит строкой. */
.site-menu { margin-inline-start: auto; }
@media (min-width: 720px) { .site-menu { display: none; } }
/* `list-style` снимает треугольник-маркер в Firefox, ::-webkit- — в
   Safari и старом Chrome. Без обоих рядом с иконкой висит стрелка. */
.site-menu__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--c-tap-min); min-inline-size: var(--c-tap-min);
  color: var(--color-fg); cursor: pointer; list-style: none;
}
.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__icon {
  inline-size: var(--c-icon-lg); block-size: var(--c-icon-lg);
  stroke-width: var(--c-icon-stroke);
}
/* Иконка меняется на крест: состояние контрола читается без опоры на
   то, видит ли пользователь панель под шапкой (design-code р.7). */
.site-menu__icon--close { display: none; }
.site-menu[open] .site-menu__icon--bars { display: none; }
.site-menu[open] .site-menu__icon--close { display: block; }
/* Закрытое состояние гасится явно. Полагаться на UA-стили <details>
   нельзя: браузеры прячут содержимое по-разному — где-то `display` на
   слоте, где-то `content-visibility` на `::details-content`, — и на
   абсолютно позиционированной панели это расходится. Своё правило
   работает одинаково везде. */
.site-menu:not([open]) .site-menu__panel { display: none; }
/* Закрытие тапом мимо меню. `<details>` сам этого не умеет: закрыть его
   можно только повторным тапом по кнопке, и открытая панель висит,
   пока в неё не ткнут второй раз. Пользователь так не делает — он
   тапает мимо и ждёт, что меню уберётся (находка Кирилла).

   Подложка — псевдоэлемент самой кнопки, растянутый на вьюпорт. Тап по
   любому месту страницы попадает в `<summary>` и переключает `open`,
   без единой строки JS. Панель лежит выше подложки по z-index, поэтому
   её ссылки остаются нажимаемыми — проверено попаданием в браузере.

   Работает только до 720px: с 720px `.site-menu` выключен целиком,
   вместе с ним и подложка. */
.site-menu[open] .site-menu__toggle::before {
  content: ""; position: fixed; inset: 0; z-index: 25;
}
/* Панель абсолютная — раскрытие не растит полосу и не сдвигает контент
   под ней (CLS). Глубина линией, не тенью (design-code р.6). */
.site-menu__panel {
  position: absolute; top: 100%; inset-inline: 0; z-index: 30;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg);
  border-block-end: var(--border-hairline) solid var(--color-border-strong);
}
.site-menu__nav { display: flex; flex-direction: column; }
.site-menu__nav a,
.site-menu__phone {
  display: inline-flex; align-items: center; min-block-size: var(--c-tap-min);
  color: var(--color-fg);
}
.site-menu__nav a[aria-current] {
  font-weight: var(--fw-medium);
  border-inline-start: var(--border-thick) solid var(--color-accent);
  padding-inline-start: var(--space-3);
}

/* --- Крошки -------------------------------------------------------- */
.breadcrumbs { padding-block: var(--space-3); font-size: var(--fs-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.breadcrumbs li {
  display: flex; align-items: center; min-block-size: var(--c-tap-min);
  min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere;
}
.breadcrumbs a { color: var(--color-fg-muted); }
.breadcrumbs li + li::before { content: "/"; flex: none; color: var(--color-fg-subtle); margin-right: var(--space-2); }
.breadcrumbs [aria-current] { color: var(--color-fg-muted); }

/* --- Сетки --------------------------------------------------------- */
.link-grid {
  display: grid; gap: var(--space-2); list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
/* Тап-зона. Инлайновому <a> padding-block бокс не растит: ссылка в
   перелинковке выходила 19–22px на всех страницах-содержаниях. */
.link-grid li a,
.breadcrumbs a,
.spec dd a { display: inline-flex; align-items: center; min-block-size: var(--c-tap-min); }
@media (min-width: 640px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .link-grid { grid-template-columns: repeat(3, 1fr); } }

.card-list {
  display: grid; gap: var(--space-3); list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-list { grid-template-columns: repeat(2, 1fr); } }

/* 1px-границы вместо теней (канон р.2), радиус поверхности 4px. */
.card {
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4); background: var(--color-bg);
}
.card:hover { border-color: var(--color-border-strong); }
/* Тап-зона. `display:block` растил ширину, но не высоту: заголовок
   карточки выходил 24px при минимуме 44 (канон р.10). Замерено в
   браузере на 375px, по коду выглядело правильно — ровно тот случай,
   ради которого §14.1 требует измерения, а не чтения. flex с
   min-block-size растит бокс и на двухстрочном заголовке. */
.card__title {
  display: flex; align-items: center;
  min-block-size: var(--c-tap-min);
  font-weight: var(--fw-medium); margin-bottom: var(--space-1);
}

.group { margin-bottom: var(--space-6); }

/* --- Блоки --------------------------------------------------------- */
/* Соседние секции не удваивают вертикальный ритм. Исключение — секции
   с собственным фоном: полосе нужна симметричная внутренняя отбивка,
   иначе она садится на верхнюю границу. */
.section + .section:not(.band):not(.cta) { padding-block-start: 0; }
.section .container > h2:first-child { margin-top: 0; }

/* Шапка секции: эйтбрау капсом → h2 обычным регистром → 2–3 строки
   пояснения (реф. 06, design-code р.5). */
.section-head { margin-bottom: var(--space-5); }
.section-head h2 { margin-top: 0; }
.section-head p {
  margin-top: var(--space-3); margin-bottom: 0;
  color: var(--color-fg-muted); font-size: var(--fs-sm);
  max-width: var(--prose-measure);
}
@media (min-width: 720px) { .section-head h2 { font-size: var(--fs-2xl); } }

/* Секция-полоса на поднятом фоне. Чередование полос вместо рамок:
   глубина строится границами и фоном, не тенями (design-code р.2). */
.band {
  background: var(--color-bg-elev);
  border-block: var(--border-hairline) solid var(--color-border);
}

/* Цифры набираются моноширинным везде, где сравниваются между строками
   (design-code р.4): номера, ИНН, ОГРН, телефоны, счётчики. */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Правило-маркер акцентом под эйтбрау. Нет эйтбрау — нет правила
   (design-code р.8.2). */
.rule {
  inline-size: var(--c-rule-width);
  block-size: var(--border-thick);
  background: var(--color-accent);
  margin-block: var(--space-4);
}

/* Иллюстрация. `height: auto` здесь не украшение и не дубль ресета:
   в reset.css стоит `img { max-width: 100% }`, а у кадра проставлены
   атрибуты width/height — они обязательны, иначе страница дёргается
   при загрузке (CLS). Вдвоём без `height: auto` они дают сплющенную
   картинку на любом экране уже 960px: ширина ужимается по контейнеру,
   высота остаётся из атрибута. До GT-PHOTO-03 растровых картинок на
   сайте не было ни одной, поэтому пробел в ресете не всплывал. */
.photo { margin-block: var(--space-5); }
.photo img {
  height: auto;
  inline-size: 100%;
  border-radius: var(--radius-md);
  background: var(--color-bg-elev);
}
/* В hero кадр — правая колонка, свой отступ ему не нужен: расстояние
   до текста задаёт gap сетки. */
.hero__aside .photo { margin-block: 0; }

/* Сетка кадров на хабах и указателях. auto-fit по 260px, а не
   фиксированные три колонки: наборы разного размера (3 кадра на
   главной, 6 у технологий, 8 у отраслей) должны раскладываться одним
   правилом, иначе на каждый набор заводится своя раскладка.
   260px — ширина, ниже которой кадр 16:9 перестаёт читаться. */
.photo-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.photo-grid .photo { margin-block: 0; }

.hero { padding-block: var(--space-6) var(--space-7); }
@media (min-width: 720px) { .hero { padding-block: var(--space-7) var(--space-8); } }
/* Раскладка реф. 06: слева подпись → заголовок → правило → лид →
   действие, справа объект с выносками. Правая колонка появляется
   только с 960px и только если она передана: без неё сетка
   схлопывается в одну колонку и hero выглядит как на остальных
   страницах. */
.hero__grid { display: grid; gap: var(--space-6); }
/* Правой колонке отдано больше: чертёж масштабируется по своей ширине,
   и на самом брейкпоинте 960 при делении поровну подписи выносок
   проваливаются ниже --fs-xs. Текстовой колонке лишние 40px не нужны —
   абзац всё равно ограничен --prose-measure. */
@media (min-width: 960px) {
  .hero__grid:not(.hero__grid--single) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-7); align-items: start;
  }
}
.hero__code { margin-bottom: var(--space-2); }
/* На мобильном лид набирается базовым кеглем: --fs-md на 375px даёт
   39 знаков в строке вместо 45–55 канона р.9. */
.hero__lead { font-size: var(--fs-base); }
@media (min-width: 720px) { .hero__lead { font-size: var(--fs-md); } }
.hero__action { margin-top: var(--space-5); margin-bottom: 0; }
.hero__contacts {
  margin-top: var(--space-5); margin-bottom: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* Чертёж-разрез вместо фотостока: фотобазы нет, AI-фото в роли
   доказательства запрещено (PRODUCT.md, открытое решение 1).

   Чертёж рендерится на ВСЕХ ширинах. Прежнее `display: none` до 720px
   было следствием того, что подписи жили внутри viewBox и на 314px
   выходили ≈5.6 CSS px. Подписи вынесены в HTML (GT-HOME-03, B-004),
   кегль больше не зависит от ширины рисунка, и снимать блок незачем:
   главная иллюстрация первого экрана была невидима для 90 % трафика.

   Раскладка: до 720px чертёж и список идут одной колонкой, выше —
   чертёж слева, подписи справа. Пропорция 1.35/1 подобрана так, чтобы
   выноски заканчивались примерно на уровне своих подписей; жёсткой
   привязки нет и быть не может — связь несёт порядок, не координата. */
.draft {
  display: block;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elev);
  padding: var(--space-4);
}
.draft__sheet { min-inline-size: 0; }
.draft__svg { display: block; inline-size: 100%; block-size: auto; }
@media (min-width: 720px) {
  .draft {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  /* Подпись под всей фигурой, а не под одной колонкой. */
  .draft figcaption { grid-column: 1 / -1; }
}
/* Подписи конструкций. Обычный текст в потоке — кегль задан шкалой и
   от ширины чертежа не зависит (канон р.7). Счётчик в HTML, а не в
   viewBox: цифра внутри рисунка масштабировалась бы вместе с ним. */
.draft__parts {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: draft;
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 720px) { .draft__parts { margin-top: 0; gap: var(--space-3); } }
/* На мобильном имя и уточнение стоят в одну строку. По две строки на
   пункт легенда занимала 294px и уносила первый экран целиком вместе
   с кнопкой. Порядок при этом остаётся строго вертикальным: он и есть
   связь с выносками, и разложить его в две колонки нельзя. */
.draft__part {
  counter-increment: draft;
  display: grid;
  grid-template-columns: 1.5em auto minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: baseline;
}
.draft__part::before {
  content: counter(draft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
}
.draft__name {
  grid-column: 2;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.draft__note {
  grid-column: 3;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: var(--lh-normal);
}
/* С 720px колонка подписей узкая, и строка в одну линию переносится
   некрасиво: уточнение уходит под имя само. Возвращаем два уровня. */
@media (min-width: 720px) {
  .draft__part { grid-template-columns: 1.5em minmax(0, 1fr); }
  .draft__name, .draft__note { grid-column: 2; }
}
.draft figcaption {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: var(--lh-normal);
}

/* Схемы способов нанесения. В отличие от `.draft` не снимаются на
   мобильном: подписи здесь — обычный текст в потоке, а не <text> внутри
   viewBox, и кегль не уезжает вместе с шириной рисунка. Сетка идёт по
   общему правилу карточных рядов (design-code р.6): одна колонка,
   2 с 640px, 3 с 960px. */
.mdraft { margin-top: var(--space-6); }
.mdraft__grid {
  display: grid; gap: var(--space-5); list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mdraft__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mdraft__grid { grid-template-columns: repeat(3, 1fr); } }
/* Верх ровный, низ рваный: карточки не растягиваются до общей высоты
   (design-code р.6). */
.mdraft__item { align-self: start; }
.mdraft__svg {
  display: block; inline-size: 100%; block-size: auto;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elev);
}
.mdraft__name {
  margin-top: var(--space-3); margin-bottom: var(--space-1);
  font-weight: var(--fw-semibold);
}
.mdraft__note {
  margin-bottom: 0;
  font-size: var(--fs-sm); color: var(--color-fg-muted);
  max-width: var(--prose-measure);
}
.mdraft figcaption {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: var(--lh-normal);
}

/* Единственное место акцентной заливки на странице (канон р.3).
   Состояния прописаны полностью: контрол без pressed/disabled/focus
   считается несделанным (design-code р.7). */
.btn {
  display: inline-flex; align-items: center;
  min-block-size: var(--c-tap-min);
  background: var(--color-accent); color: var(--color-accent-fg);
  border: var(--border-regular) solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.btn:hover {
  background: var(--color-bg); color: var(--color-accent-strong);
  border-color: var(--color-accent-strong); text-decoration: none;
}
.btn:active {
  background: var(--c-accent-pressed); border-color: var(--c-accent-pressed);
  color: var(--color-accent-fg); translate: 0 var(--c-press-offset);
}
.btn[aria-disabled="true"] {
  background: var(--color-bg-sunken); color: var(--color-fg-subtle);
  border-color: var(--color-border); cursor: not-allowed; pointer-events: none;
}
/* Кнопка в липкой полосе. Полный набор `--space-3/-5` растит шапку выше
   тап-минимума и полоса начинает съедать первый экран; компактный набор
   взят из той же шкалы отступов, промежуточных значений нет
   (design-code р.6). */
.btn--compact { padding: var(--space-2) var(--space-4); }
/* Второй телефон — тот же контрол в выворотке: бюджет акцента 5%
   не тратится дважды на одно действие (design-code р.3). */
.btn--ghost {
  background: var(--color-bg); color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { color: var(--color-accent-strong); border-color: var(--color-accent-strong); }
/* «ТЕЛ» / «МОБ» — служебная подпись при значении, форма каталога
   чисел из реф. 03: подпись мелко капсом, значение моноширинным. */
.btn__label {
  margin-right: var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide); color: inherit;
}
.btn .num { text-transform: none; letter-spacing: 0; }

.cta {
  background: var(--color-bg-sunken);
  border-block: var(--border-hairline) solid var(--color-border);
}
.cta__title { margin-top: 0; }
.cta__text { margin-bottom: 0; }
.cta__contacts {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-5); margin-bottom: 0;
}
.cta__email { display: inline-flex; align-items: center; min-block-size: var(--c-tap-min); }

/* --- Направления --------------------------------------------------- */
/* Выравнивание по верхней линии: верх ровный, низ рваный. Карточки не
   растягиваются до общей высоты искусственно (design-code р.6). */
.dir-grid {
  display: grid; gap: var(--space-5); list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .dir-grid { grid-template-columns: repeat(4, 1fr); } }
.dir {
  align-self: start;
  padding-top: var(--space-3);
  border-top: var(--border-regular) solid var(--color-fg);
}
/* Направление без страниц не ссылается никуда: ни ссылки в 404, ни
   выдуманного статуса «в разработке». Разница читается линией сверху
   и отсутствием стрелки, а не только цветом. */
.dir--planned { border-top-color: var(--color-border-strong); }
.dir__name {
  display: block;
  min-block-size: var(--c-tap-min);
  margin-bottom: var(--space-2);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--color-fg);
}
.dir--planned .dir__name { color: var(--color-fg-muted); }
a.dir__name:hover { color: var(--color-accent-strong); text-decoration: underline; }
.dir__note {
  margin-bottom: 0;
  font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

/* --- Направления карточками с кадром (GT-HOME-03) ------------------ */
/* Отличие от `.dir-grid`: там направление — строка оглавления, здесь
   товар первого экрана. Три колонки, а не четыре: пятое направление
   иначе висит одно в ряду, а кадр 16:9 на четверти полосы 1200px даёт
   270px — ниже, чем нужно, чтобы узнать сцену.
   Верх ровный, низ рваный (design-code р.6). */
.dircards {
  display: grid; gap: var(--space-5); list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dircards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .dircards { grid-template-columns: repeat(3, 1fr); } }
/* Компактный режим — тот же перечень без кадров, для варианта, где
   направления стоят не на входе. */
@media (min-width: 960px) {
  .dircards--compact { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
}
.dircard {
  align-self: start;
  padding-top: var(--space-3);
  border-top: var(--border-regular) solid var(--color-fg);
}
.dircard--planned { border-top-color: var(--color-border-strong); }
.dircard__img {
  display: block; inline-size: 100%; block-size: auto;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elev);
}
.dircard__name {
  display: block;
  min-block-size: var(--c-tap-min);
  margin-bottom: var(--space-2);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--color-fg);
}
.dircard--planned .dircard__name { color: var(--color-fg-muted); }
a.dircard__name:hover { color: var(--color-accent-strong); text-decoration: underline; }
.dircard__note {
  margin-bottom: 0;
  font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
/* Статус допуска. Отделён линией, а не только цветом: это утверждение
   о правовом основании, и оно не должно читаться как продолжение
   описания направления. */
.dircard__flag {
  margin-top: var(--space-3); margin-bottom: 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--fs-xs); line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

/* --- Задачи: «задача -> куда идти» (GT-HOME-03) -------------------- */
/* Список строками, а не карточками: сравниваются формулировки, и
   двенадцать карточек дали бы свалку. Вся строка — тап-зона; на
   мобильном она заведомо выше 44px, потому что в ней две строки текста. */
.tasks { list-style: none; padding: 0; margin: 0; }
.task { border-bottom: var(--border-hairline) solid var(--color-border); }
.task:first-child { border-top: var(--border-regular) solid var(--color-fg); }
.task__link {
  display: grid; gap: var(--space-1);
  grid-template-columns: 1fr;
  padding-block: var(--space-4);
  min-block-size: var(--c-tap-min);
  color: var(--color-fg);
}
@media (min-width: 720px) {
  .task__link {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-5); align-items: baseline;
  }
}
a.task__link:hover { text-decoration: none; }
a.task__link:hover .task__q { text-decoration: underline; }
a.task__link:hover .task__a { color: var(--color-accent-strong); }
.task__q { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.task__a { font-size: var(--fs-sm); color: var(--color-fg-muted); }
/* Строка без ссылки: направления, под которые страниц нет. Отличается
   не цветом, а отсутствием стрелки — цвет здесь второй признак. */
.task__link--flat .task__a { color: var(--color-fg-muted); }
.tasks__note {
  margin-top: var(--space-5); margin-bottom: 0;
  font-size: var(--fs-sm); color: var(--color-fg-muted);
  max-width: var(--prose-measure);
}

/* --- Страница сравнения мокапов (только /preview/home/) ------------ */
.variants { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .variants { grid-template-columns: repeat(3, 1fr); } }
.variant {
  align-self: start;
  padding-top: var(--space-3);
  border-top: var(--border-regular) solid var(--color-fg);
}
.variant__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.variant__key {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-accent-strong); text-transform: uppercase;
}
.variant__name { margin: 0; font-size: var(--fs-md); }
.variant__name a { min-block-size: var(--c-tap-min); display: inline-flex; align-items: center; }
.variant__lines { margin: 0; display: grid; gap: var(--space-3); }
.variant__line { display: grid; gap: var(--space-1); }
.variant__line dt {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-fg-muted);
}
.variant__line dd {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.variants--links { gap: var(--space-5); }
/* Таблица прокручивается внутри своей рамки: горизонтального скролла
   у страницы нет ни на одной ширине (канон р.10). */
.cmp-wrap { overflow-x: auto; }
.cmp { border-collapse: collapse; inline-size: 100%; min-inline-size: 32rem; }
.cmp th, .cmp td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border);
  text-align: left; vertical-align: top;
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.cmp thead th {
  border-bottom: var(--border-regular) solid var(--color-fg);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.cmp tbody th { font-weight: var(--fw-semibold); }
.samelist { margin: 0; padding-left: var(--space-5); }
.samelist li { font-size: var(--fs-sm); line-height: var(--lh-normal); margin-bottom: var(--space-2); }

/* --- Полоса допуска ------------------------------------------------ */
/* Тёмная лента спецификаций (реф. 03): 4–6 пар «подпись капсом +
   значение моноширинным». Рендерится только при парах ≥ 3. */
.spec-strip {
  background: var(--color-surface-dark); color: var(--color-fg-on-dark);
  padding-block: var(--space-7);
}
/* Две колонки уже на 375px, а не с 560px. Замер GT-HOME-03: в одну
   колонку шесть пар давали полосу 644px, и на мобильном между героем и
   первым содержательным блоком вставал целый экран реквизитов — какой
   бы блок туда ни поставили. В двух колонках полоса 350px, и вход
   страницы попадает в поле зрения второго свайпа, а не третьего.
   Значения короткие: самое длинное — реестровая запись, 22 знака, и у
   `dd` уже стоит `overflow-wrap: anywhere`. */
.spec-strip__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) {
  .spec-strip__grid { grid-template-columns: repeat(6, auto); justify-content: space-between; }
}
.spec-strip dt {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-fg-on-dark-muted);
  margin-bottom: var(--space-2);
}
.spec-strip dd {
  margin: 0; font-size: var(--fs-sm);
  color: var(--color-fg-on-dark); line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.spec-strip__note {
  margin-top: var(--space-5); margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border-on-dark);
  font-size: var(--fs-sm); color: var(--color-fg-on-dark-muted);
  max-width: var(--prose-measure);
}
.spec-strip__note strong { color: var(--color-fg-on-dark); font-weight: var(--fw-semibold); }

/* --- Каталожные группы --------------------------------------------- */
.groups { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .groups { grid-template-columns: repeat(3, 1fr); } }
.group { align-self: start; margin-bottom: 0; }
.group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-border-strong);
}
.group__head h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: 0; }
.group__count { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.group ul { list-style: none; padding: 0; }
.group li { border-bottom: var(--border-hairline) solid var(--color-border); }
.group li a {
  display: flex; align-items: center;
  min-block-size: var(--c-tap-min);
  padding-block: var(--space-2);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--color-fg);
}
.group li a:hover { color: var(--color-accent-strong); text-decoration: underline; }

/* Отрасли — плотная лента, не карточки: восемь однострочных пунктов
   в карточках дают восемь пустых рамок. */
.industries {
  display: flex; flex-wrap: wrap;
  border-top: var(--border-hairline) solid var(--color-border);
}
.industries a {
  flex: 1 1 240px;
  min-block-size: var(--c-tap-min);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-hairline) solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-fg);
}
/* Подчёркивается подпись, а не строка целиком: иконка внутри ссылки
   не должна ловить нижнюю линию. */
.industries a:hover { color: var(--color-accent-strong); text-decoration: none; }
.industries a:hover span { text-decoration: underline; }

/* Контурная иконка: размер и обводка из токенов, цвет — currentColor,
   поэтому она гаснет и загорается вместе с текстом строки и не тратит
   бюджет акцента (design-code р.3, р.6). Обводка задаётся свойством
   CSS, а не атрибутом: var() в презентационном атрибуте SVG работает
   не везде, в свойстве — везде. */
.ico {
  flex: none;
  inline-size: var(--c-icon-lg); block-size: var(--c-icon-lg);
  stroke-width: var(--c-icon-stroke);
  color: var(--color-fg-muted);
}
.industries a:hover .ico { color: inherit; }

.trust { border-bottom: var(--border-hairline) solid var(--color-border); padding-block: var(--space-5); }
.trust__list { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .trust__list { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; flex-direction: column; gap: var(--space-1); }
.trust__value {
  font-family: var(--font-mono); font-size: var(--fs-xl);
  font-weight: var(--fw-semibold); line-height: var(--lh-none);
}

.norms__list { display: grid; gap: 0; }
.norms__item {
  display: grid; gap: var(--space-1);
  padding-block: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
}
@media (min-width: 640px) {
  .norms__item {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-4); align-items: baseline;
  }
}

/* Номера 01→05 рисует счётчик: в разметке их нет (канон р.2). */
.stages__list { display: grid; gap: 0; counter-reset: stage; }
.stages__item {
  counter-increment: stage; display: grid; gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}
.stages__item::before {
  content: counter(stage, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider); color: var(--color-fg-muted);
}
.stages__title { margin-bottom: 0; }
/* Абзац этапа шёл во всю ширину контейнера: 90 знаков в строке при
   норме канона §9 в 45–75 и при жёстком правиле §5 «абзац не шире
   --prose-measure». Ширину задаёт мера набора, а не сетка. */
.stages__item p { max-width: var(--prose-measure); margin-bottom: 0; }

.industry-note__list {
  list-style: disc; padding-inline-start: var(--space-5);
  display: grid; gap: var(--space-2); max-width: var(--prose-measure);
}

/* --- Спека --------------------------------------------------------- */
.spec-block {
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.spec-block__head {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-dark); color: var(--color-fg-on-dark);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.spec-block .spec { border: 0; border-radius: 0; margin: 0; }

/* Атрибуция значений таблицы (канон текста р.4). Служебная строка:
   тише основного текста, но не серая до неразличимости — источник
   числа читают ровно тогда, когда числу не поверили. */
.spec-block__note {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--fs-sm); color: var(--color-fg-muted);
  max-width: var(--prose-measure);
}

/* Мобильный: dt над dd одной полосой. От 560px — две колонки.
   Зебра через nth-of-type: dt#N и dd#N попадают в одну полосу
   в обоих режимах (канон р.7 — 15 строк на 360px без скролла). */
.spec {
  display: grid; grid-template-columns: 1fr;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-block: var(--space-5);
}
.spec dt {
  font-size: var(--fs-sm); color: var(--color-fg-muted);
  padding: var(--space-2) var(--space-4) 0;
}
.spec dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  padding: 0 var(--space-4) var(--space-2);
}
.spec dt:nth-of-type(odd),
.spec dd:nth-of-type(odd) { background: var(--color-bg-elev); }

@media (min-width: 560px) {
  .spec { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .spec dt { padding: var(--space-2) var(--space-4); }
  .spec dd { padding: var(--space-2) var(--space-4); }
}

/* --- Оглавление ---------------------------------------------------- */
/* Плотный список якорей под прямым ответом. Не карточки и не сетка:
   оглавление обязано занимать меньше экрана, чем раздел, к которому
   ведёт, иначе оно вытесняет содержание с первого экрана.
   Тап-зона 44px держится min-block-size на ссылке (канон р.10). */
.toc { padding-block: var(--space-5); }
/* Заголовок несёт класс .code — та же эйтбрау, что над остальными
   блоками. Своей типографики у него нет: вторая копия одних значений
   разошлась бы с первой при первой же правке шкалы. */
.toc__title { margin-bottom: var(--space-2); }
.toc__list {
  list-style: none; padding: 0; margin: 0;
  border-top: var(--border-hairline) solid var(--color-border);
}
.toc__list li { border-bottom: var(--border-hairline) solid var(--color-border); }
.toc__list a {
  display: flex; align-items: center;
  min-block-size: var(--c-tap-min);
  font-size: var(--fs-sm); color: var(--color-fg);
}
.toc__list a:hover { color: var(--color-accent-strong); text-decoration: underline; }
@media (min-width: 640px) {
  .toc__list { display: grid; grid-template-columns: repeat(2, 1fr);
               column-gap: var(--space-6); }
}

/* --- Прямой ответ -------------------------------------------------- */
/* Нейтраль, не акцент: плашка — не действие (канон р.3). */
.ai-citable {
  border-inline-start: var(--border-thick) solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-bg-elev);
  padding: var(--space-4);
  margin-block: var(--space-5);
  max-width: var(--prose-measure);
}
.ai-citable p:last-child { margin-bottom: 0; }

/* --- Подвал -------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-dark); color: var(--color-fg-on-dark-muted);
  padding-block: var(--space-7); font-size: var(--fs-sm);
}
.site-footer .muted { color: var(--color-fg-on-dark-muted); }
.site-footer a { color: var(--color-fg-on-dark); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer p { margin-bottom: 0; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-block-size: var(--c-tap-min); }
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-7); } }
/* В подвале блок крупнее: он закрывает страницу, а не подписывает шапку. */
.site-footer__name .logo { block-size: 28px; }
.site-footer__tagline { margin-top: var(--space-3); }
.site-footer__region { margin-top: var(--space-2); }
/* Название колонки — служебная подпись, а не заголовок: в аутлайн
   документа она не входит (design-code р.8.1). */
.site-footer__col {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-fg-on-dark);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-3);
}
.site-footer__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-border-on-dark);
  font-size: var(--fs-xs); line-height: var(--lh-normal);
}
.site-footer__legal .num { color: var(--color-fg-on-dark); }

/* ── FAQ: аккордеон вопросов ─────────────────────────────────────────
   Раскрытие на <details>, как гамбургер (D-026, канон р.10): тап, без
   hover и без JS. Своего `name` у details нет намеренно — нативная
   группа закрывала бы соседа, и человек, открывший второй вопрос,
   терял бы первый ответ.
   Маркер рисуется псевдоэлементом: UA-треугольник не поддаётся
   стилизации одинаково между браузерами. */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.faq__item[open] {
  border-color: var(--color-border-strong);
  background: var(--color-bg-elev);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Тап-зона: 44px по канону р.10 держится паддингом, а не высотой —
     высота зависит от длины вопроса и в две строки уезжает. */
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}
.faq__q:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
/* Плюс и минус — два глифа, переключаются `display`, как иконка
   гамбургера выше. Это не первая попытка, и остальные не работают.

   Вращать псевдоэлемент (`.faq__item[open] .faq__sign::after`) нельзя:
   переход на псевдоэлементе не перезапускается, когда состояние меняет
   атрибут предка, и вычисленный `transform` не менялся вовсе. Вращать
   сам `.faq__sign` тоже не вышло: правило совпадало, но `transform`
   оставался единичной матрицей даже с `!important`.

   Переключение `display` в этом проекте уже проверено на боевом сайте —
   именно так работает смена бургера на крестик. Правило, которое
   работает, лучше правила, которое красивее. Анимации здесь нет, и она
   не нужна: канон р.10 требует, чтобы эффект отвечал на вопрос «что он
   даёт пользователю с телефона», а мгновенная смена знака отвечает.

   Оба глифа — часть тап-зоны `<summary>`, отдельными целями не являются
   и в дерево доступности не попадают (`aria-hidden`). */
.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 16px;
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.faq__sign--plus::after { transform: translateY(-50%) rotate(90deg); }
.faq__sign--minus { display: none; }
.faq__item[open] .faq__sign--plus { display: none; }
.faq__item[open] .faq__sign--minus { display: block; }

/* Закрытое состояние гасится явно — по той же причине, что у меню
   выше: браузеры прячут содержимое <details> по-разному, где-то
   `display` на слоте, где-то `content-visibility` на
   `::details-content`. Без своего правила ответ остаётся в потоке и
   виден при закрытом вопросе — поймано измерением на боевой странице,
   а не чтением кода (D-025). Условие `:not([open])` обязательно:
   без него правило гасит ответ и в раскрытом виде. */
.faq__item:not([open]) .faq__a { display: none; }
.faq__a {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-fg-muted);
}
.faq__a p {
  margin: 0;
  max-width: 68ch;
  line-height: var(--lh-relaxed);
}

/* --- Цена -------------------------------------------------------- */
/* Вилка по замеру рынка (standards/price-canon.md). Подложка та же,
   что у выносок: цена — не декоративный блок, а ответ на вопрос, с
   которым человек пришёл, и он обязан находиться пролистыванием. */
.price {
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elev);
  padding: var(--space-5);
  max-width: var(--prose-measure);
}
.price__title { margin-top: 0; margin-bottom: var(--space-3); }
.price__range {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
/* Число — единственное место на странице, где кегль работает как
   сигнал: его ищут глазами, не читая. */
.price__num {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: var(--lh-none); letter-spacing: var(--tracking-tight);
}
.price__unit { font-size: var(--fs-md); color: var(--color-fg-muted); }
.price__lead { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.price__note { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.price__exact { margin-bottom: var(--space-4); }
@media (min-width: 720px) {
  .price__num { font-size: var(--fs-3xl); }
}