/* Hallmark · genre: modern-minimal · macrostructure: Split Studio — home: worded H1 lockup (name 700 + role 400, same size) + square portrait, lede and CTA left, spec table right; the ECG strip on chart grid doubles as the tap-to-count pulse; four grouped reasons; inner pages: facts on hairlines · nav: N1b sticky rule (phones: one scrollable row), CTA scrolls to the booking block · footer: Ft1 mast on the ink band — on the home page fused with the booking band into one dark close
 * theme: custom, grown from design/v1-tech.html (the user's pick, 24.09.2026), refreshed 29.09 on the user's call ("looks dated") · vibe: "clinical precision on warm paper, one cardiac signal" · paper: oklch(98.4% 0.006 80) · accent: oklch(56% 0.19 24)
 * surfaces: tinted rounded panels (20px) and tiles instead of hairline tables; pill buttons; portrait 28px with one soft shadow; the booking block is a dark 28px card, the footer stays light
 * display + body: Golos Text 400–800 · ka: Noto Sans Georgian · labels: Golos 500 caps, tracked (no mono on purpose — nothing to download)
 * axes: light / grotesk-sans / warm (80° paper, 24° accent) · enrichment: Tier B hand-built SVG — the trace draws itself once on load; a tap only moves the readout; tiles lift 2px on hover · studied: no
 * restraint: the accent lives in four places — hero button, the trace, the measured number, tile numerals; no gradients, no glass cards, no icons
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4
 */
:root {
  --color-paper:        oklch(98.4% 0.006 80);
  --color-paper-2:      oklch(95.6% 0.012 80);
  --color-paper-3:      oklch(92.5% 0.016 80);
  --color-rule:         oklch(90%   0.012 80);
  --color-rule-2:       oklch(80%   0.016 80);
  --color-muted:        oklch(50%   0.016 252);
  --color-ink:          oklch(22%   0.026 256);
  --color-ink-2:        oklch(38%   0.022 256);
  --color-accent:       oklch(56%   0.190 24);
  --color-accent-hover: oklch(50%   0.180 24);
  --color-accent-text:  oklch(48%   0.180 24);
  --color-accent-ink:   oklch(98.4% 0.006 80);
  --color-focus:        oklch(50%   0.210 24);
  --color-accent-soft:  oklch(80%   0.120 24);
  --shadow-soft:        0 30px 60px -40px oklch(22% 0.026 256 / 0.45);
  /* на чернильной полосе: запись и подвал */
  --color-on-ink:       oklch(96.5% 0.007 245);
  --color-on-ink-soft:  oklch(78%   0.014 250);
  --color-on-ink-mute:  oklch(62%   0.016 250);
  --color-rule-ink:     oklch(34%   0.030 256);

  --font-display: "Golos Text", "Noto Sans Georgian", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Golos Text", "Noto Sans Georgian", ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.2rem;
  --text-lg: 1.4rem;
  --text-h2: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  --text-page: clamp(2rem, 2.6vw + 0.9rem, 3.2rem);
  --text-display: clamp(2.4rem, 3.4vw + 1rem, 4.2rem);
  --text-num: clamp(1.9rem, 2.4vw + 0.8rem, 2.8rem);
  --text-phone: clamp(1.5rem, 2.4vw + 0.8rem, 2.6rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem;   --space-xl: 2.5rem; --space-2xl: 4rem;   --space-3xl: 6rem;
  --radius: 6px; --radius-panel: 20px; --radius-card: 28px; --radius-pill: 999px;
  --shell: 76rem;
  --measure: 38rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-draw: 2.4s;
  --z-nav: 300;
}
/* грузинский: свой шрифт, слова длиннее — кегль заголовков на ступень ниже */
html[lang="ka"] {
  --font-display: "Noto Sans Georgian", "Golos Text", sans-serif;
  --font-body:    "Noto Sans Georgian", "Golos Text", sans-serif;
  --text-display: clamp(2rem, 2.8vw + 0.9rem, 3.5rem);
  --text-page: clamp(1.8rem, 2.2vw + 0.9rem, 2.8rem);
  --text-h2: clamp(1.4rem, 1.1vw + 1rem, 1.85rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink-2);
  font: 400 var(--text-base)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
/* ссылка «к содержанию»: видна только при переходе клавиатурой */
.skip { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: calc(var(--z-nav) + 1); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-ink); color: var(--color-paper); text-decoration: none; font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }
/* длинные абзацы на телефоне — с переносами (русский, английский; для грузинского словарей нет);
   на широком экране строки длинные, и переносы только рвут слова в лиде */
@media (max-width: 60rem) {
  :is(.lede, .page-lede, .section__intro, .cond p, .faq__a p, .plain li, .note, .urgent, .ecg__hint, .book__text p) { hyphens: auto; -webkit-hyphens: auto; }
}
img { max-width: 100%; }
/* номер телефона не рвётся на две строки, где бы ни стоял */
a[href^="tel:"] { white-space: nowrap; }

/* подписи-ярлыки: мелкие капители с разрядкой — технический голос сайта */
:is(.spec dt, .rows dt, .lang a, .ecg__label, .ecg__unit, .group__n, .book__label, .tl__years, .todo__tag, .crumbs) {
  font: 500 var(--text-xs)/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
}
/* грузинский: без text-transform — иначе браузер переведёт строчные в заглавные мтаврули */
html[lang="ka"] :is(.spec dt, .rows dt, .lang a, .ecg__label, .ecg__unit, .group__n, .book__label, .tl__years, .todo__tag, .crumbs) { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }

/* ── nav · N1b: липкая полупрозрачная полоса; линейка появляется только после прокрутки ── */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklab, var(--color-paper) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.nav.is-floating { border-bottom-color: var(--color-rule); }
.nav__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-lg); max-width: var(--shell); min-height: 4rem; margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; white-space: nowrap; font: 600 1rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand:hover { color: var(--color-ink-2); }
/* знак — один удар сердца; в шапке красный, в подвале чернильный */
.mark { flex: none; width: 1.625rem; height: 0.875rem; color: var(--color-accent); }
.foot__name .mark { margin-right: var(--space-xs); vertical-align: -0.05em; color: var(--color-ink); }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 auto; padding: 0; }
.nav__links a { display: inline-block; padding-block: var(--space-sm); font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lang { display: flex; gap: var(--space-sm); }
.lang a { text-decoration: none; white-space: nowrap; }
/* три буквы чужого алфавита — из крошечного шрифта, а не из целого */
.lang a[lang="ka"] { font-family: "Georgian UI", var(--font-body); }
.lang a[lang="ru"] { font-family: "Cyrillic UI", var(--font-body); }
.lang a[aria-current], .lang a:hover { color: var(--color-ink); }
.nav__links a:active, .lang a:active, .brand:active { color: var(--color-accent-text); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.75rem;
  border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; white-space: nowrap;
  font: 600 var(--text-sm)/1 var(--font-body);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--color-ink); }
.btn--ink:hover { background: var(--color-ink-2); }
.btn--big { min-height: 3.5rem; padding: 0 2.25rem; font-size: var(--text-base); }
.textlink { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 4px; }
.textlink:hover { text-decoration-color: var(--color-ink); }
.textlink:active { color: var(--color-accent-text); }

/* ── главная · Split Studio: слева имя, лид и кнопка — по центру высоты правой колонки; справа портрет,
   под ним таблица фактов. Так на широком экране над именем не висит пустой экран ── */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); row-gap: var(--space-lg);
  max-width: var(--shell); margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-2xl);
}
.hero__text { grid-column: 1 / span 8; grid-row: 1 / span 2; align-self: center; min-width: 0; }
h1 { margin: 0; min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.name { display: block; font: 800 var(--text-display)/1.02 var(--font-display); letter-spacing: -0.045em; }
/* имя и роль — одна плашка: тот же кегль, разный вес */
.role { display: block; color: var(--color-muted); font: 400 var(--text-display)/1.02 var(--font-display); letter-spacing: -0.03em; }
.hero .portrait { grid-column: 9 / span 4; grid-row: 1; aspect-ratio: 1; }
.intro { margin-top: var(--space-xl); }
.spec { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
/* портрет: большое скругление и одна мягкая тень — единственная тень на странице */
.portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-soft); }
/* настоящий снимок (коридор клиники): без наложений, кадр от верхнего края — голова и плечи в квадрате главной */
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* список публикаций: год — ярлык строки */
.pubs li + li { margin-top: var(--space-sm); }
.pubs b { color: var(--color-ink); font-weight: 600; }
.pubs i { font-style: italic; }
.lede { max-width: 34rem; margin: 0; font-size: var(--text-md); line-height: 1.55; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.phone { color: var(--color-ink); text-decoration: none; white-space: nowrap; font: 600 var(--text-md)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.phone:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.phone:active { color: var(--color-accent-text); }
/* таблица фактов — тонированная панель, строки разделены тонкими линейками */
.spec { margin: 0; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.spec > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.spec > div:last-child { border-bottom: 0; }
.spec dd { margin: 0; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }

/* ── ЭКГ: ритм-полоска в скруглённой ленте — единственный рисунок на сайте, и он же считает пульс ── */
.ecg { margin: 0; }
.ecg__strip {
  position: relative; width: min(100% - 2 * var(--gutter), var(--shell) - 2 * var(--gutter)); height: 8.5rem; margin-inline: auto;
  overflow: hidden; border-radius: var(--radius-panel); background: var(--color-paper-2);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.ecg__trace { display: block; width: 100%; height: 100%; }
.ecg__trace path { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* при наведении лента чуть темнеет, подпись — чёрная: полоса живая */
.ecg__strip:hover { background-color: var(--color-paper-3); }
.ecg__tap:hover .ecg__label { color: var(--color-ink); }
/* вся полоса — кнопка; показания сидят у правого края на «бумажной» подложке */
.ecg__tap { position: absolute; inset: 0; display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: right; cursor: pointer; }
.ecg__tap:focus-visible { outline-offset: -3px; }
.ecg__read { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.1rem; height: 100%; padding: 0 var(--space-xl) 0 var(--space-3xl); background: linear-gradient(90deg, transparent, var(--color-paper-2) 45%); transition: background var(--dur-micro) var(--ease-out); }
.ecg__strip:hover .ecg__read { background: linear-gradient(90deg, transparent, var(--color-paper-3) 45%); }
.ecg__label { color: var(--color-ink-2); }
.ecg__num { color: var(--color-ink); font: 700 var(--text-num)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transition: transform var(--dur-micro) var(--ease-out); }
/* пока замера нет — тонкое тире вместо цифры; готовый замер — единственная красная цифра на сайте */
.ecg__tap[data-state="idle"] .ecg__num, .ecg__tap[data-state="count"] .ecg__num { color: var(--color-rule-2); font-weight: 400; }
.ecg__tap[data-state="done"] .ecg__num { color: var(--color-accent-text); }
.ecg__tap.is-beat .ecg__num { transform: scale(1.08); }
.st { display: none; }
.ecg__tap[data-state="idle"] .st--idle, .ecg__tap[data-state="count"] .st--count, .ecg__tap[data-state="done"] .st--done { display: inline; }
.ecg__hint { max-width: var(--shell); margin: var(--space-md) auto 0; padding-inline: var(--gutter); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.ecg__hint span { display: block; max-width: 40rem; }

/* ── разделы: без линеек, только воздух ── */
.section { padding-block: var(--space-2xl) var(--space-3xl); }
/* тонированный раздел — скруглённая панель в ширину содержимого */
.section--tint { width: min(100% - 2 * var(--gutter), var(--shell) - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
/* блок записи — тёмная карточка перед светлым подвалом */
.section--dark { width: min(100% - 2 * var(--gutter), var(--shell) - 2 * var(--gutter)); margin: var(--space-2xl) auto 0; padding-block: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-ink-soft); --color-focus: var(--color-accent-soft); }
.section--dark h2, .section--dark .book__phone { color: var(--color-on-ink); }
.section--dark .book__label { color: var(--color-on-ink-mute); }
.section--dark .book__phone:hover { color: var(--color-accent-soft); }
.section__head { max-width: 46rem; margin-bottom: var(--space-xl); }
h2 { margin: 0; min-width: 0; color: var(--color-ink); font: 700 var(--text-h2)/1.12 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
h3 { margin: 0; color: var(--color-ink); font: 600 var(--text-md)/1.25 var(--font-display); letter-spacing: -0.015em; }
.section__intro { max-width: var(--measure); margin: var(--space-md) 0 0; font-size: var(--text-md); line-height: 1.5; }
.more { margin: var(--space-xl) 0 0; }

/* с чем приходят: слева заголовок и «когда звонить 112», справа четыре блока по смыслу — в тех же 12 колонках, что и первый экран */
.help { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); row-gap: var(--space-xl); align-items: start; }
.help__side { grid-column: 1 / span 4; }
.help__side .more { margin-top: var(--space-lg); }
.groups { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
/* плитка: тонированная, при наведении чуть приподнимается */
.group { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.group:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.group__n { color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.group h3 { font-size: var(--text-lg); }
.group h3 a { color: inherit; text-decoration: none; }
.group h3 a::after { content: " →"; color: var(--color-muted); font-weight: 400; }
.group h3 a:hover, .group h3 a:hover::after { color: var(--color-accent-text); }
.group h3 a:active { color: var(--color-accent-hover); }
.group p { margin: 0; max-width: 24rem; color: var(--color-ink-2); line-height: 1.5; }
/* когда не ждать приёма: одна строка, без рамки */
.note { max-width: var(--measure); margin: var(--space-lg) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.note b { color: var(--color-ink); font-weight: 600; }

/* запись: слова слева, номер справа — в тех же колонках, что и таблица фактов */
.book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.book__text { grid-column: 1 / span 6; }
.book__text p { max-width: 30rem; margin: var(--space-md) 0 0; }
.book__call { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding-top: var(--space-xs); }
.book__phone { color: var(--color-ink); text-decoration: none; white-space: nowrap; font: 700 var(--text-phone)/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.book__phone:hover { color: var(--color-accent-text); }
.book__phone:active { color: var(--color-accent-hover); }
/* второй способ — онлайн через портал клиники */
.book__label--2 { margin-top: var(--space-lg); }
.book__online { color: var(--color-ink); font: 600 var(--text-md)/1.3 var(--font-body); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 4px; overflow-wrap: anywhere; }
.book__online:hover { text-decoration-color: currentColor; }
.book__note { font-size: var(--text-sm); color: var(--color-muted); }
.section--dark .book__online { color: var(--color-on-ink); text-decoration-color: var(--color-rule-ink); }
.section--dark .book__online:hover { color: var(--color-accent-soft); }
.section--dark .book__note { color: var(--color-on-ink-mute); }
.rows { margin: 0; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.rows > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.rows > div:last-child { border-bottom: 0; }
.rows dd { margin: 0; color: var(--color-ink); }

/* черновые места: видны только пока сайт не открыт; сборка не выпустит их в чистовик */
.todo {
  display: block; margin: var(--space-lg) 0 0; padding: var(--space-md) var(--space-lg); max-width: 46rem;
  border: 2px dashed var(--color-accent-text); border-radius: var(--radius); background: var(--color-paper-2);
  color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5;
}
span.todo { display: inline; margin: 0; padding: 0 var(--space-2xs); border-width: 1px; border-radius: 4px; }
.todo__tag { display: block; margin-bottom: var(--space-2xs); color: var(--color-accent-text); }
.todo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.todo-list li { min-height: 7rem; padding: var(--space-md); border: 1px dashed var(--color-rule-2); border-radius: var(--radius); color: var(--color-muted); font-size: var(--text-sm); }
/* общий текст на согласование с Торнике: метка видна, только когда сборка ставит body.marks (SHOW_MARKS в build.py) */
body.marks [data-approve]::before {
  content: attr(data-approve); grid-column: 1 / -1; display: block; width: fit-content; margin-bottom: var(--space-md);
  padding: var(--space-2xs) var(--space-sm); border: 1px dashed var(--color-accent-text); border-radius: 4px;
  color: var(--color-accent-text); font: 600 var(--text-xs)/1.3 var(--font-body);
}

/* ── внутренние страницы ── */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-lg); }
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs a:active { color: var(--color-accent-text); }
.page-head { padding-block: var(--space-xl) var(--space-2xl); }
.page-title { font: 700 var(--text-page)/1.04 var(--font-display); letter-spacing: -0.03em; }
.page-lede { max-width: var(--measure); margin: var(--space-lg) 0 0; font-size: var(--text-md); line-height: 1.5; }
.page-head--portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--space-2xl); align-items: end; }
/* когда не ждать приёма — на странице «С чем помогаю»: тонированная заметка с красной кромкой слева */
.urgent { max-width: var(--measure); margin: var(--space-lg) 0 0; padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-accent); border-radius: 0 12px 12px 0; background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.urgent b { color: var(--color-ink); font-weight: 600; }
/* подробно о каждом состоянии — плитки */
.conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.cond { padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.cond h3 { margin-bottom: var(--space-sm); }
.cond p { margin: 0; max-width: var(--measure); }
.cond p + p { margin-top: var(--space-sm); }
.cond:target h3 { color: var(--color-accent-text); }
.tests > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.tests dt { font-size: var(--text-sm); text-transform: none; letter-spacing: 0; color: var(--color-ink); font-weight: 600; }
.tests + .section__intro { margin-top: var(--space-lg); }
/* как проходит приём: четыре шага на линейках, номер — главная цифра шага */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.step { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.section--tint .step { background: var(--color-paper); }
.step__n { color: var(--color-accent-text); font: 700 var(--text-h2)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.step p { margin: 0; }
.bring { font-size: var(--text-md); }
/* списки — с тире, а не с браузерными точками */
.plain { max-width: var(--measure); margin: 0; padding: 0; list-style: none; }
.plain li { position: relative; padding-left: 1.4em; }
.plain li::before { content: "—"; position: absolute; left: 0; color: var(--color-muted); }
.plain li + li { margin-top: var(--space-xs); }

/* опыт: панель, годы — ярлык строки, место — чёрным */
.timeline { margin: 0; padding: var(--space-xs) var(--space-lg); list-style: none; border-radius: var(--radius-panel); background: var(--color-paper-2); }
.tl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.tl:last-child { border-bottom: 0; }
.tl__years { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl--now .tl__years { color: var(--color-accent-text); }
.tl__place { display: block; color: var(--color-ink); font-weight: 600; }
.tl__role { display: block; color: var(--color-muted); }

/* вопросы и ответы — панель */
.faq { max-width: 46rem; padding: 0 var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0;
  list-style: none; cursor: pointer; color: var(--color-ink); font: 600 var(--text-md)/1.3 var(--font-display); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* плюс и минус нарисованы, а не набраны: знак «−» есть не во всех шрифтах */
.faq summary::after {
  content: ""; flex: none; width: 0.8rem; height: 0.8rem; align-self: center;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) center / 1.5px 100% no-repeat;
}
.faq details[open] > summary::after { background: linear-gradient(var(--color-ink), var(--color-ink)) center / 100% 1.5px no-repeat; }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:active { color: var(--color-accent-text); }
.faq__a { max-width: var(--measure); padding: 0 var(--space-2xl) var(--space-md) 0; }
.faq__a p { margin: 0; }

/* приглашение в конце внутренних страниц — та же тёмная карточка, что и запись на главной */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-xl) var(--space-2xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-ink); --color-focus: var(--color-accent-soft); }
.cta-band p { max-width: 32rem; margin: 0; color: var(--color-on-ink); font: 600 var(--text-md)/1.35 var(--font-display); letter-spacing: -0.01em; }

/* ── footer · Ft1: светлая мачта после тёмной карточки ── */
.foot { margin-top: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.foot__mast { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.foot__name { margin: 0; color: var(--color-ink); font: 700 clamp(1.3rem, 1vw + 1rem, 1.7rem)/1.1 var(--font-display); letter-spacing: -0.025em; }
.foot__role { margin: var(--space-2xs) 0 0; color: var(--color-muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--color-ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot a:active { color: var(--color-accent-text); }
.foot__links a { white-space: nowrap; font-weight: 500; font-size: var(--text-sm); }
.foot__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-2xl); padding-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.foot__meta p { margin: 0; }
.foot__phone { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 404 ── */
.lost { padding-block: var(--space-3xl); }
.lost__block + .lost__block { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }

/* ── движение: полоска рисует себя один раз при загрузке; больше на сайте ничего не шевелится ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ecg__trace path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ecg-draw var(--dur-draw) var(--ease-out) 0.3s forwards; }
  @keyframes ecg-draw { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color var(--dur-micro) var(--ease-out); }
  .btn:active, .ecg__tap.is-beat .ecg__num, .group:hover { transform: none; }
  .ecg__num, .group { transition: none; }
}

/* ── планшет ── */
@media (max-width: 60rem) {
  .nav__inner { padding-top: var(--space-xs); }
  .nav__links { order: 3; width: 100%; margin: 0; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding-top: var(--space-lg); }
  /* на узком экране порядок как в чтении: имя → портрет → лид и кнопка → факты */
  .hero__text { display: contents; }
  h1, .hero .portrait, .intro, .spec { grid-column: 1; grid-row: auto; }
  h1 { order: 1; } .hero .portrait { order: 2; } .intro { order: 3; margin-top: 0; } .spec { order: 4; }
  .hero .portrait { width: min(100%, 20rem); }
  .conditions, .book, .help { grid-template-columns: minmax(0, 1fr); }
  .book__text, .book__call, .groups { grid-column: 1; }
  /* на узком экране порядок: заголовок → блоки → «112» → ссылка */
  .help__side { display: contents; }
  .help__side h2 { order: 1; }
  .groups { order: 2; }
  .help__side .note { order: 3; margin-top: 0; }
  .help__side .more { order: 4; margin-top: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo-list { grid-template-columns: minmax(0, 1fr); }
  .todo-list li { min-height: 0; }
  .page-head--portrait { grid-template-columns: minmax(0, 1fr); }
  .page-head--portrait .portrait { max-width: 15rem; order: -1; }
  .foot__meta { grid-template-columns: minmax(0, 1fr); }
}
/* ── телефон ── */
@media (max-width: 30rem) {
  /* шапка липкая — держим её низкой: меню в одну строку с прокруткой вбок, тесные поля */
  .nav__inner { padding: var(--space-xs) var(--space-sm) 0; column-gap: var(--space-md); }
  .nav .btn { min-height: 2.75rem; padding: 0 var(--space-sm); }
  .nav__links { flex-wrap: nowrap; column-gap: var(--space-md); margin-inline: calc(-1 * var(--space-2xs)); padding: var(--space-2xs); overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { flex: none; padding-block: var(--space-xs) var(--space-sm); }
  /* на телефоне от бренда остаётся только знак — ссылка на главную */
  .brand > span { display: none; }
  .lang { margin-right: auto; }
  .hero { row-gap: var(--space-lg); }
  /* на узком экране роль тем же кеглем не влезает в строку — снова подпись */
  .role { margin-top: var(--space-xs); font-size: calc(var(--text-display) * 0.72); line-height: 1.15; letter-spacing: -0.015em; }
  .hero .portrait { width: min(100%, 15rem); }
  .lede { font-size: var(--text-base); }
  .cta { margin-top: var(--space-lg); }
  .spec > div, .rows > div, .tl { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .spec, .rows, .timeline, .faq { padding-inline: var(--space-md); }
  .group, .cond, .step { padding: var(--space-md); }
  .groups { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .ecg__strip { height: 6rem; }
  .ecg__read { padding: 0 var(--space-md) 0 var(--space-xl); }
  .section--tint, .section--dark { padding-block: var(--space-xl); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .faq__a { padding-right: 0; }
  .cta-band { padding: var(--space-lg); }
}
