/**
 * HealthOS Cardio public site.
 * Оформление — семейство сайтов HealthOS (светлая тема, шапка-сетка, полноширинный
 * первый экран, тёмный подвал) с кардиологической палитрой питч-дека:
 * тёмный бордовый 1A0D12, акцент 9F1239, светлый акцент F5A3B0.
 * Тёмный фон дека на сайт не переносится — длинные тексты читаются на светлом
 * (план §2.5; вкусовое решение владельца — открытый вопрос №5).
 *
 * Система интерфейса — эскиз `docs/research/cardio-landing-ux/ux.sketch.md` §2 и §4
 * (accepted 2026-09-06), очередь О-1 исследования `cardio-landing-ux.research.md` §7:
 * ТР-9 (единое правило карточек), ТР-10 (токены и шкала кеглей), ТР-11 (подвал
 * колонками), ТР-13 (таблицы не прокручивают страницу), ТР-27 (доступность).
 *
 * Дисциплина смещений: отрицательных долей в процентах в файле нет — образец
 * гейта неизмеренных чисел ловит знак минуса перед числом с процентом, включая
 * центрирование сдвигом внутри `transform`. Смещения задаются в `rem` через
 * `top/right/bottom/left` и флексбокс, как в принятых макетах.
 */

:root {
  color-scheme: light;
  --bg: #f7f5f6;
  --surface: #fff;
  --surface-soft: #f6e9ed;
  --ink: #1a1420;
  --muted: #6b5560;
  --line: #e2d4d9;
  --accent: #9f1239;
  --accent-dark: #7a0d2c;
  --accent-soft: rgba(159, 18, 57, .08);
  --accent-light: #f5a3b0;
  --deep: #1a0d12;
  --body-ink: #3a2e35;
  --warn: #a66a16;
  --good: #20744e;
  --shadow: 0 18px 50px rgba(40, 15, 25, .12);

  /* Токены формы и движения (эскиз §2.10, ТР-10). Радиус карточек — один на все
     карточки сайта: до этого их было четыре (12 / 10 / 8 / 8 px, аудит §4). */
  --radius-card: 12px;
  --radius-control: 7px;
  --motion: .18s;

  /* Шкала кеглей (ТР-10): восемь ступеней вместо двадцати одного значения.
     Ступени `--fs-h1` и `--fs-lead` переопределяются в области `.hero` и в
     запросе ≤ 560 px — переопределяется ЗНАЧЕНИЕ токена, а не заводится новая
     ступень: иначе шкала растёт обратно (в макетах так набралось двенадцать). */
  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-md: 1rem;
  --fs-lg: 1.08rem;
  --fs-xl: 1.32rem;
  --fs-lead: clamp(1.08rem, 2vw, 1.3rem);
  --fs-h2: clamp(1.65rem, 3vw, 2.4rem);
  --fs-h1: clamp(2rem, 4vw, 3.2rem);
}

* { box-sizing: border-box; }
/* Шапка липкая, поэтому цель якоря без отступа встаёт ПОД неё: замер по
   собранной странице — заголовок «Словарь кардиологического диалекта» после
   перехода из оглавления оказывался на 0 px от верха при шапке 61 px. Отступ
   взят по худшему из замеренных: шапка 59 px при ≥ 1180 px, 103 px при
   901–1100 px (пункты в две строки) и 61 px при ≤ 900 px; 7rem = 112 px
   покрывает все три. Правило одно и общее — оглавления ТР-19, ссылка «пропустить
   к содержанию» и любой будущий якорь ведут себя одинаково. */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62;
  letter-spacing: 0;
}
a { color: var(--accent-dark); }

/* Доступность (ТР-27): видимый фокус у всего, что берёт фокус с клавиатуры;
   в тёмном подвале обводка светлая, иначе бордовая на бордовом не видна. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--accent-light); }

.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: white; padding: .65rem .9rem; border-radius: var(--radius-control); z-index: 30; }
.skip-link:focus { top: 1rem; }

/* ── Header ───────────────────────────────────── */

.site-header { position: sticky; top: 0; z-index: 5; background: rgba(247, 245, 246, .93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1493px; margin: 0 auto; padding: .75rem clamp(.55rem, 2vw, 1rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-weight: 800; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; background: white; padding: 2px; }
.site-nav { display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; font-size: var(--fs-sm); }
.site-nav a { color: var(--muted); text-decoration: none; padding: .35rem .1rem; transition: color var(--motion); }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: .6rem; justify-self: end; position: relative; }
/* Ярлык статуса (ТР-6, Р-1). Имя класса идёт за текстом: прежнее имя, названное
   по снятому слову, врало бы разметке. Капитель — как в макете
   `mockups/index-ru.html`; при ≤ 560 px ярлык ужимается отступом и межбуквенным
   просветом, чтобы строка шапки осталась одной (эскиз §4). */
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding: .32rem .62rem; border-radius: 999px; background: var(--accent); color: white; font-size: var(--fs-xs); font-weight: 800; line-height: 1; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.lang-switcher { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; background: white; }
.lang-switcher a { padding: .32rem .55rem; text-decoration: none; font-size: var(--fs-xs); color: var(--muted); transition: background var(--motion); }
.lang-switcher a.active { background: var(--ink); color: white; }
/* ТР-21 (Р-6) СНЯТО 2026-09-07. Правило `html[lang="ru"] .lang-switcher
   a[hreflang="en"] { display: none }` прятало ссылку EN на русских страницах,
   пока английские пятнадцать страниц были заглушками: переход на заглушку из
   шапки обещал язык, которого нет. Заглушек больше нет — перевод выполнен
   этапом Э-4 по слову владельца 2026-09-07, — и правило снято целиком, а не
   ослаблено: переключатель работает в обе стороны. Маршруты `/en/`, `hreflang`
   и `sitemap.xml` правило не трогало и раньше. */

/* Кнопка мобильного меню (ТР-1). Скрыта по умолчанию и показывается ровно тем
   же запросом ≤ 900 px, который прячет список пунктов: одно правило не может
   сработать без другого. Три полоски — псевдоэлементы одного `<i>` через
   `box-shadow`, чтобы значок не тянул за собой ни шрифта, ни файла. */
.nav-toggle { display: none; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color var(--motion); }
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle i { display: inline-block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* ── Layout ───────────────────────────────────── */

.container { max-width: 1417px; margin: 0 auto; padding: clamp(1.2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem); }

main { font-size: var(--fs-md); }
main h1, main h2 { margin-top: 2.4rem; line-height: 1.15; font-weight: 800; }
/* Длинные слова предметной области («электрокардиограмму») шире экрана телефона:
   при 375 px заголовок «Врачу в клинике» вылезал на 25 px и прокручивал страницу
   вбок (замер до правки: scrollWidth 400 при clientWidth 375). Перенос по слогам,
   а если словарь переносов недоступен — разрыв слова; молчаливая обрезка
   `overflow: hidden` первого экрана здесь не годится: она прячет дефект, а не
   правит его. */
/* `hyphenate-limit-chars` держит перенос там, где он нужен: без него правило
   рвало и короткие слова («за ко-торое» в H1 главной). 12 6 4 — переносится
   слово не короче двенадцати букв, не ближе шести от начала и четырёх от конца;
   браузер, который свойства не знает, просто переносит чаще. */
h1, h2, h3, .hero h1 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 4; }
main h1 { font-size: var(--fs-h1); }
main h2 { font-size: var(--fs-h2); }
main h3 { line-height: 1.2; }
main p, main li { color: var(--body-ink); }

/* Дорожка пациента: крупнее шрифт и шире межстрочный интервал.
   §5.5 плана — родственник пожилого пациента отдельная аудитория, требование
   доступности записано в UX-исследовании контура; на Э-1 это выражается вёрсткой.
   Кегль дорожки поднимается ПЕРЕОПРЕДЕЛЕНИЕМ ступени `--fs-md`, а не отдельным
   значением: эскиз §2.10 держит 1.06rem, шкала при этом остаётся восьмиступенчатой. */
[data-track="patient"] { --fs-md: 1.06rem; }
[data-track="patient"] main { line-height: 1.72; }

/* Секции с надзаголовками (эскиз §2.6, ТР-8) — разметку заводит следующий этап;
   правило добавлено здесь, чтобы надзаголовок и H2 не расходились по вертикали. */
.section { position: relative; padding-top: clamp(1.5rem, 3.2vw, 2.4rem); }
.section > h2:first-child, .section > .eyebrow + h2 { margin-top: 0; }
.eyebrow + h2 { margin-top: .1rem; }

/* ── Hero (full-bleed band, no photo) ─────────── */

.hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin: calc(-1 * clamp(1.2rem, 5vw, 3.5rem)) calc(50% - 50vw) 0;
  padding: clamp(2.6rem, 7vw, 4.6rem) max(clamp(1rem, 4vw, 2rem), calc((100vw - 1417px) / 2 + 2rem)) clamp(1.6rem, 4vw, 2.6rem);
  background:
    radial-gradient(1100px 420px at 85% -42px, rgba(159, 18, 57, .16), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, var(--surface-soft) 100%);
  border-bottom: 1px solid var(--line);
  /* Первый экран поднимает ступень H1 на свою (эскиз §2.2): токен переопределён,
     новой ступени в шкале не появилось. */
  --fs-h1: clamp(2rem, 5.2vw, 4rem);
}
/* Страницы, кроме главной, держат прежний кегль H1 первого экрана. */
.hero--page { --fs-h1: clamp(2rem, 4vw, 3.2rem); }

/* Фон первого экрана — репрезентативная ритм-полоска (отведения I–V6, 10 циклов)
   из синопсиса рабочего места (слово владельца 2026-09-06, эскиз §2.2 п. 7).
   Слой декоративный, не `<img>`: подписи `alt` не требует, текст лежит выше него.
   Имя файла подставляет сборщик с хешем — ветка копирования изображений
   (`build-site.mts`, раздел Assets); хардкода хеша здесь нет. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("/assets/img/ecg-hero-strip.4c51e13c.webp") no-repeat center bottom;
  background-size: 100% auto;
  opacity: .19;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .72) 34%, rgba(0, 0, 0, 0) 72%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .72) 34%, rgba(0, 0, 0, 0) 72%);
}
.hero__copy, .hero > * { max-width: 945px; position: relative; z-index: 1; }
/* Две колонки первого экрана (эскиз §2.2) — разметку заводит следующий этап. */
.hero__inner { position: relative; z-index: 1; max-width: 1417px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.hero-visual { position: relative; }
.hero-visual__title { margin: 0 0 .6rem; font-size: var(--fs-xl); line-height: 1.2; }
/* Ссылка под визуалом первого экрана (эскиз §2.4): у главной это «Как это
   работает» под цепочкой звеньев. */
.hero-visual .text-link { display: inline-block; margin-top: .8rem; }

/* Отступ перед разделом: +5 px словом владельца 2026-09-07. Задан padding, а не
   margin-top: соседний абзац несёт margin-bottom 16 px, и меньший margin схлопнулся бы
   с ним без всякого эффекта (проверено замером). */
.eyebrow { padding-top: 5px; margin: 0 0 .8rem; text-transform: uppercase; font-size: var(--fs-xs); color: var(--accent-dark); font-weight: 800; letter-spacing: .06em; }
/* Капсула аудитории или раздела (эскиз §2.2 п. 1) — тот же надзаголовок в форме капсулы. */
.pill { display: inline-block; margin: 0 0 .7rem; padding: .28rem .7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--line); color: var(--accent-dark); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.01em; font-weight: 800; }
.lead { max-width: 820px; font-size: var(--fs-lead); color: var(--body-ink); }
.hero-ctas { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-tags { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-tags a { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; transition: border-color var(--motion); }
.hero-tags a:hover { border-color: var(--accent); }
.hero-microcopy { margin-top: 1rem; max-width: 820px; color: var(--muted); font-size: var(--fs-sm); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .65rem .95rem; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; max-width: 100%; transition: border-color var(--motion), background var(--motion); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn:hover { border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); }
.text-link { font-weight: 700; color: var(--accent-dark); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ── Единое правило карточек (эскиз §2.5, ТР-9) ── */
/* Одно базовое правило вместо четырёх независимых компонентов: один радиус
   (`--radius-card`), один фон, одна рамка, действие всегда внизу слева.
   Селектор перечисляет и класс `.card`, и уже существующие в разметке имена —
   пока страницы не переведены на `.card`, правило действует на них напрямую. */

.card, .door, .door--secondary, .panel-card, .package-card, .two-col > div {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--motion), box-shadow var(--motion);
}
a.card:hover, .door:hover, .door--secondary:hover, a.panel-card:hover { border-color: var(--accent); }
.card h2, .card h3,
.door h2, .door h3,
.door--secondary h3,
.panel-card h3,
.package-card h3,
.two-col h3 { margin: 0 0 .35rem; font-size: var(--fs-xl); line-height: 1.2; color: var(--ink); }
.card p, .door p, .door--secondary p, .panel-card p, .package-card p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.card ul, .panel-card ul, .package-card ul { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: var(--fs-sm); }

/* Действие карточки — внизу слева, одно правило на все карточки со ссылкой
   (сквозное решение семейства 2026-09-04). */
.door-go { margin-top: auto; align-self: flex-start; padding-top: .7rem; font-weight: 700; color: var(--accent-dark); }

/* Двери первого ряда отличаются от вторых только кеглем заголовка и тенью
   при наведении — не собственными правилами (эскиз §2.5). */
.door { border-width: 1.5px; }
.door:hover { box-shadow: var(--shadow); }
.door--secondary { border-width: 1.5px; padding: 1rem 1.1rem; }
.door--secondary h3 { font-size: var(--fs-lg); }
.door--secondary p { font-size: var(--fs-sm); }
.door--secondary .door-go { padding-top: .55rem; font-size: var(--fs-sm); }

.door-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 1.4rem 0 .6rem; }
.door-grid--secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.4rem 0 .6rem; }
.door-grid--four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: .6rem 0 .6rem; }

.panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 1rem 0 1.4rem; }
.panel-card h3 { font-size: var(--fs-lg); }
.panel-card p { font-size: var(--fs-sm); }
.panel-card .panel-who, .panel-who { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dark); display: block; margin-bottom: .45rem; }

.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .85rem; margin: 1rem 0 1.2rem; }
.package-card h3 { margin-bottom: .2rem; font-size: var(--fs-lg); }
.package-card .package-for, .package-for { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 .55rem; }
.package-card ul { flex: 1; }
.package-card .package-billing, .package-billing { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-dark); border-top: 1px dashed var(--line); padding-top: .55rem; margin: auto 0 0; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; margin: 1rem 0 1.3rem; }
.two-col h3 { margin-top: 0; }
.two-col > div p, .two-col .card p { color: var(--body-ink); }

/* Сетки, которыми пользуются композиции эскиза §3 (карточки — те же правила). */
.proof-grid, .disagree { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .85rem; margin-top: .6rem; }
/* Строка о патенте под карточками блока «Чем это обеспечено» (ТР-17, Р-5):
   не карточка — одна ссылающаяся строка, поэтому и кегль мелкий. */
.proof-note { margin: .85rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.big-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; margin-top: .6rem; }
.big-grid .card { font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; color: var(--ink); }
.gain-list { display: grid; gap: .6rem; }
.gain-list .card { font-size: var(--fs-lg); color: var(--ink); }

/* Плашка границ (эскиз §2.7) и родственные ей плашки — форма цитаты, не карточки. */
.limits-note, .plaque, blockquote { margin: 1rem 0; padding: .9rem 1.1rem; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-card) var(--radius-card) 0; color: var(--muted); }
.limits-note p, .plaque p, blockquote p { margin: 0; color: var(--muted); }

/* Нумерованный контрольный список (эскиз §3.2, `/physicians/`). */
.checklist { counter-reset: step; list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.checklist li { position: relative; padding: .7rem .9rem .7rem 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.checklist li::before { counter-increment: step; content: counter(step); position: absolute; left: .8rem; top: .7rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; }

/* ── Снимок содержания (`gates-delta.md` §5, решение §10 п. 7) ──── */

figure.screenshot { margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius-card); padding: .6rem; background: var(--surface); }
figure.screenshot img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 6px; }
figure.screenshot figcaption { margin-top: .6rem; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ── Цепочка звеньев ──────────────────────────── */
/* Стрелка центрируется флексбоксом, а не сдвигом на долю ширины: такой сдвиг
   пишется числом со знаком минуса и процентом — образец гейта неизмеренных
   чисел (см. шапку файла). */

.chain-visual { display: flex; align-items: stretch; margin: 1.2rem 0 1.5rem; flex-wrap: wrap; row-gap: 1.35rem; }
.chain-link { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: .7rem .5rem; text-align: center; font-size: var(--fs-sm); font-weight: 700; position: relative; margin-right: 1.15rem; box-shadow: 0 1px 2px rgba(40, 15, 25, .05); }
.chain-link:last-child { margin-right: 0; border: 1.5px solid var(--accent); }
.chain-link small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.chain-link:not(:last-child)::after { content: "\203A"; position: absolute; right: -1.15rem; top: 0; bottom: 0; width: 1.15rem; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 800; font-size: var(--fs-lg); line-height: 1; }

/* Цепочка в правой колонке первого экрана главной (ТР-5, часть «место»; решение
   владельца Р-2 от 2026-09-07): при двух колонках звенья стоят столбиком, а
   стрелка поворачивается вниз. Отдельного блока цепочки на странице больше нет.
   Правило заперто в `min-width: 901px` намеренно: ровно на этом пороге первый
   экран становится одной колонкой, и ниже цепочка обязана вернуться к общим
   правилам — столбику при ≤ 680 px и змейке при ≤ 560 px. Без замка селектор из
   двух классов перебил бы змейку по силе, и правка первого экрана молча сломала
   бы мобильную сетку, принятую в О-1. */
@media (min-width: 901px) {
  .hero-visual .chain-visual { flex-direction: column; flex-wrap: nowrap; margin: 0; row-gap: 1.35rem; }
  .hero-visual .chain-link { flex: 0 0 auto; margin-right: 0; }
  .hero-visual .chain-link:not(:last-child)::after { content: "\2193"; left: 0; right: 0; top: auto; bottom: -1.15rem; width: auto; height: 1.15rem; }
}

.cta-band { margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--deep); color: white; border-radius: var(--radius-card); display: flex; align-items: center; justify-content: flex-end; gap: 1rem 15px; flex-wrap: wrap; }
/* Текст ленты прижат влево автоотступом, обе кнопки уходят вправо и стоят рядом
   с зазором 15 px (слово владельца 2026-09-07). */
.cta-band p { margin: 0 auto 0 0; font-weight: 700; color: white; font-size: var(--fs-lg); }
.cta-band .btn:not(.primary) { background: rgba(255, 255, 255, .92); }

/* ── Таблицы (эскиз §2.10, ТР-13) ─────────────── */
/* Контейнер `.table-wrap` и подписи `data-label` ставит сборщик
   (`build-site.mts`, `decorateTables`) — разметка страниц остаётся markdown.
   Ниже 560 px строка становится блоком: шапка скрывается, подпись столбца
   печатается перед каждой ячейкой (у ICU подписей нет — читаемость падает). */

.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; font-size: var(--fs-sm); }
.table-wrap > table { margin: 0; }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: .65rem .8rem; }
th { background: var(--surface-soft); color: var(--ink); }
td { color: var(--body-ink); }

pre { overflow: auto; border-radius: var(--radius-card); border: 1px solid var(--line); padding: 1rem; background: #f3ecee; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); background: var(--surface-soft); border-radius: 4px; padding: .08em .32em; }
pre code { background: none; padding: 0; }

figure { margin: 1.2rem 0; text-align: center; }
figure img { max-width: 100%; height: auto; border-radius: var(--radius-card); }

/* Инлайн-схемы: векторная графика в языке питч-дека, без внешних ресурсов и скриптов.
   Цвета смысловых элементов схем заданы переменными выше (план §5.10, вопрос №13):
   схема следует за палитрой сайта, а не спорит с ней. Каждая схема несёт
   `role="img"`, `aria-labelledby`, `<title>` и `<desc>` (ТР-27) — это проверяется
   при приёмке страницы, а не стилем. */
figure.diagram { margin: 1.3rem 0 1.7rem; text-align: center; }
figure.diagram svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
figure.diagram figcaption { margin-top: .55rem; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.hero-visual figure.diagram { margin: 0; }
.hero-visual figure.diagram svg { max-width: 560px; }
.hero-visual .table-wrap { margin-top: 0; }

/* ── Полоса-оговорка + подвал ─────────────────── */

.disclaimer-band { max-width: 1417px; margin: 0 auto; padding: .9rem clamp(1rem, 4vw, 2rem); font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); }
/* Дорожка пациента держит собственную границу — и видно, что она другая. */
.disclaimer-band--patient { font-size: var(--fs-sm); color: var(--ink); background: var(--surface-soft); border-top: 2px solid var(--accent); }

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.6rem clamp(1rem, 4vw, 2rem) 1.2rem;
  background: linear-gradient(90deg, rgba(26, 13, 18, .98) 0%, rgba(60, 12, 30, .98) 52%, rgba(159, 18, 57, .95) 100%);
  color: rgba(245, 236, 239, .84);
  font-size: var(--fs-sm);
}
.site-footer__inner { max-width: 1417px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; flex-wrap: wrap; }
/* Подвал в колонки (эскиз §2.8, ТР-11): бренд и три группы ссылок вместо двух
   плоских строк. Четыре колонки при ≥ 900 px, две при ≤ 900 px, одна при ≤ 680 px. */
.site-footer__cols { max-width: 1417px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 1.4rem; }
.site-footer__group { display: flex; flex-direction: column; gap: .35rem; }
.site-footer__title { margin: 0 0 .4rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-light); }
.site-footer__meta { position: relative; }
.site-footer a { color: rgba(255, 255, 255, .92); }
.site-footer a:hover { color: var(--accent-light); }

/* ── Responsive ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  /* Шапка в одну строку: логотип слева, действия справа, пункты — в панели за
     кнопкой «Меню» (ТР-1). До этой правки те же шесть пунктов переносились в
     строку шапки и занимали при 375 px 242 px — почти треть экрана (аудит §2). */
  .site-header__inner { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .header-actions { flex-wrap: nowrap; justify-self: end; }
  /* Панель раскрытого меню лежит под шапкой во всю её ширину. Точка отсчёта —
     сама шапка: она `position: sticky`, то есть позиционированный предок. */
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: .1rem; padding: .5rem clamp(.55rem, 2vw, 1rem) 1rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); z-index: 9; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .6rem .1rem; font-size: var(--fs-md); border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
  .hero__inner { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .door-grid, .door-grid--secondary, .door-grid--four { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .chain-visual { flex-direction: column; }
  .chain-link { margin-right: 0; margin-bottom: 1.35rem; }
  .chain-link:not(:last-child)::after { content: "\2193"; left: 0; right: 0; top: auto; bottom: -1.2rem; width: auto; height: 1.2rem; }
  .chain-link:last-child { margin-bottom: 0; }
}

@media (max-width: 560px) {
  /* Ступени H1 и лида переопределяются значением токена — новых значений
     `font-size` в файле не появляется (ТР-10). */
  .hero { --fs-h1: clamp(1.7rem, 9vw, 2.6rem); }
  .hero--page { --fs-h1: clamp(1.6rem, 8vw, 2.2rem); }
  :root { --fs-lead: 1rem; }
  .lead { line-height: 1.5; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .cta-band .btn { width: 100%; }
  .panel-grid { grid-template-columns: 1fr; }
  .hero-tags a { min-height: 28px; padding: .1rem .55rem; font-size: var(--fs-xs); }

  /* Шапка при 375 px: строка держит логотип, кнопку «Меню», ярлык и
     переключатель. Слово бренда снимается — оно повторено в заголовке вкладки
     и в подвале, а его место в строке нужно кнопке (эскиз §4). */
  .brand span { display: none; }
  .status-badge { padding: .28rem .45rem; letter-spacing: .02em; }
  .header-actions { gap: .35rem; }
  .nav-toggle { padding: .3rem .55rem; }
  .lang-switcher a { padding: .32rem .45rem; }

  /* Цепочка звеньев читается змейкой (ТР-5, часть «сетка»; слово владельца
     2026-09-06): `1 → 2`, `↓`, `4 ← 3`, `↓`, `5 → 6`. До правки при ≤ 680 px
     звенья вставали столбиком в шесть строк, и на телефоне цепочка занимала
     936 px (аудит §2). Стрелка стоит между КАЖДОЙ парой соседних звеньев —
     иначе порядок чтения теряется на повороте змейки (замечание владельца по
     макету). Место цепочки на странице не меняется: перенос её в первый экран
     — ТР-5 «место», очередь О-2, стоп-гейт Р-2.
     Стрелки живут в междурядьях сетки: горизонтальная занимает столбец шириной
     ровно в зазор (1.25rem), вертикальная — строку в 1.2rem. Смещение задано
     в `rem` через `left/right/top/bottom`, не долей ширины со знаком минуса:
     такая доля — образец гейта неизмеренных чисел (см. шапку файла). */
  /* Междурядье — 1rem, не 1.2rem: замер при 375 px дал высоту цепочки 263 px
     при критерии ТР-5 «не выше 260». Вертикальная стрелка ужимается тем же
     числом, иначе она заходит на следующий ряд. */
  .chain-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 1rem 0 1.4rem; }
  .chain-link { flex: none; margin-right: 0; margin-bottom: 0; padding: .5rem .4rem; }
  .chain-link:nth-child(1) { grid-area: 1 / 1; }
  .chain-link:nth-child(2) { grid-area: 1 / 2; }
  .chain-link:nth-child(3) { grid-area: 2 / 2; }
  .chain-link:nth-child(4) { grid-area: 2 / 1; }
  .chain-link:nth-child(5) { grid-area: 3 / 1; }
  .chain-link:nth-child(6) { grid-area: 3 / 2; }
  .chain-link:not(:last-child)::after { content: "\2192"; left: auto; right: -1.25rem; top: 0; bottom: 0; width: 1.25rem; height: auto; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; }
  /* Третье звено смотрит влево — на повороте змейки. */
  .chain-link:nth-child(3)::after { content: "\2190"; right: auto; left: -1.25rem; }
  /* Второе и четвёртое передают ход следующей строке. */
  .chain-link:nth-child(2)::after,
  .chain-link:nth-child(4)::after { content: "\2193"; left: 0; right: 0; top: auto; bottom: -1rem; width: auto; height: 1rem; }

  /* Строки таблицы становятся блоками с подписью столбца (ТР-13). Класс
     `stack` и `data-label` проставляет сборщик по шапке таблицы. */
  table.stack { font-size: var(--fs-md); }
  table.stack thead { display: none; }
  table.stack tr { display: block; border-bottom: 2px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { display: block; border-bottom: 1px dashed var(--line); }
  table.stack td:last-child { border-bottom: 0; }
  table.stack td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-dark); margin-bottom: .15rem; }
  /* Ячейка без подписи — столбец с пустым заголовком (таблица ответственности
     на `/oem/`): она сама и есть имя строки, и в блоке читается заголовком. */
  table.stack td:not([data-label]) { font-weight: 700; color: var(--ink); background: var(--surface-soft); }
}