/* Смайл Клиник, общие стили.
   Порядок подключения обязателен: tokens.css, затем styles.css.
   Цвета задаются ТОЛЬКО через var(--color-*): от этого зависит версия для слабовидящих.
   Классы с префиксом sc-, зависимостей от обёрток Tilda нет.

   Собирается поблочно. Готово: site-header, hero. */

/* ============================================================
   1. База
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--body-size) * var(--a11y-scale));
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, figure, dl, dd, figcaption { margin: 0; }
h1, h2, h3, h4, h5, h6, .type-display { overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.sc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sc-skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; padding: 12px 20px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 600; text-decoration: none; transition: transform 160ms;
}
.sc-skip:focus-visible { transform: translate(-50%, 0); }
.sc-skip { width: max-content; max-width: calc(100vw - 24px); text-align: center; }

/* ============================================================
   2. Версия для слабовидящих: масштаб текста
   ============================================================ */

:root { --a11y-scale: 1; --a11y-scale-display: 1; --a11y-floor: 0px; --a11y-ls: 0; }
/* Межбуквенный интервал версии в долях кегля: нужен там, где ширину строки считают
   заранее (номер телефона в подвале подгоняется под ширину карточки). */
html[data-a11y-spacing="lg"] { --a11y-ls: 0.05; }
html[data-a11y-spacing="xl"] { --a11y-ls: 0.12; }
/* В версии для слабовидящих мельче этого текста нет нигде: подписи, метки и сноски
   поднимаются до основного кегля (16 px на обычном размере, 19,5 и 23 px на крупных).
   Мелкие кегли в стилях записаны как max(…, var(--a11y-floor)), вне версии порог 0. */
html[data-a11y="on"] { --a11y-floor: calc(16px * var(--a11y-scale)); }
html[data-a11y-size="lg"] { --a11y-scale: 1.22; --a11y-scale-display: 1.1; }
html[data-a11y-size="xl"] { --a11y-scale: 1.45; --a11y-scale-display: 1.2; }

/* Дисплейный кегль растёт меньше остального текста: при полном множителе длинные
   русские слова перестают помещаться в колонку и разрываются посередине. */
.type-display { font-size: calc(var(--display-size) * var(--a11y-scale-display)); }
h1, .type-h1 { font-size: calc(var(--h1-size) * var(--a11y-scale-display)); }
h2, .type-h2 { font-size: calc(var(--h2-size) * var(--a11y-scale)); }
h3, .type-h3 { font-size: calc(var(--h3-size) * var(--a11y-scale)); }
h4, .type-h4 { font-size: calc(var(--h4-size) * var(--a11y-scale)); }
h5, .type-h5 { font-size: max(calc(var(--h5-size) * var(--a11y-scale)), var(--a11y-floor)); }
h6, .type-h6 { font-size: max(calc(var(--h6-size) * var(--a11y-scale)), var(--a11y-floor)); }
.type-body  { font-size: calc(var(--body-size) * var(--a11y-scale)); }
.type-small { font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor)); }
.type-label { font-size: max(calc(var(--label-size) * var(--a11y-scale)), var(--a11y-floor)); text-transform: uppercase; }
.type-price { font-size: calc(var(--price-size) * var(--a11y-scale)); }
.button--primary, .button--secondary { font-size: max(calc(var(--button-size) * var(--a11y-scale)), var(--a11y-floor)); }

/* ============================================================
   3. Версия для слабовидящих: темы, интервалы, изображения
   ============================================================ */

html[data-a11y-theme="bw"] {
  --color-background: #ffffff; --color-surface: #ffffff; --color-surface-alt: #ffffff;
  --color-text: #000000; --color-muted: #000000;
  --color-brand: #000000; --color-brand-deep: #000000; --color-brand-soft: #ffffff;
  --color-accent: #000000; --color-accent-hover: #000000; --color-accent-ink: #ffffff;
  --color-border: #000000; --color-border-strong: #000000; --color-focus: #000000;
  --color-disabled-bg: #ffffff; --color-disabled-text: #000000;
  --color-error: #000000; --color-success: #000000;
}
html[data-a11y-theme="wb"] {
  --color-background: #000000; --color-surface: #000000; --color-surface-alt: #000000;
  --color-text: #ffffff; --color-muted: #ffffff;
  --color-brand: #ffffff; --color-brand-deep: #000000; --color-brand-soft: #000000;
  --color-accent: #ffffff; --color-accent-hover: #ffffff; --color-accent-ink: #000000;
  --color-border: #ffffff; --color-border-strong: #ffffff; --color-focus: #ffd400;
  --color-disabled-bg: #000000; --color-disabled-text: #ffffff;
  --color-error: #ffffff; --color-success: #ffffff;
}
html[data-a11y-theme="bb"] {
  --color-background: #9dd1ff; --color-surface: #9dd1ff; --color-surface-alt: #9dd1ff;
  --color-text: #063462; --color-muted: #063462;
  --color-brand: #063462; --color-brand-deep: #063462; --color-brand-soft: #9dd1ff;
  --color-accent: #063462; --color-accent-hover: #063462; --color-accent-ink: #9dd1ff;
  --color-border: #063462; --color-border-strong: #063462; --color-focus: #063462;
  --color-disabled-bg: #9dd1ff; --color-disabled-text: #063462;
  --color-error: #063462; --color-success: #063462;
}
html[data-a11y-theme="gb"] {
  --color-background: #3b2716; --color-surface: #3b2716; --color-surface-alt: #3b2716;
  --color-text: #a9e44d; --color-muted: #a9e44d;
  --color-brand: #a9e44d; --color-brand-deep: #3b2716; --color-brand-soft: #3b2716;
  --color-accent: #a9e44d; --color-accent-hover: #a9e44d; --color-accent-ink: #3b2716;
  --color-border: #a9e44d; --color-border-strong: #a9e44d; --color-focus: #ffd400;
  --color-disabled-bg: #3b2716; --color-disabled-text: #a9e44d;
  --color-error: #a9e44d; --color-success: #a9e44d;
}

/* Тени, градиенты, фильтры и движение в версии для слабовидящих не нужны.
   Прозрачность не трогаем: ею спрятаны настоящие поля формы под нарисованными
   галочками и незакреплённые галочки, а появление блоков в версии и так выключено. */
html[data-a11y="on"] *,
html[data-a11y="on"] *::before,
html[data-a11y="on"] *::after {
  box-shadow: none !important; text-shadow: none !important;
  background-image: none !important; filter: none !important;
  animation: none !important; transition: none !important;
  backdrop-filter: none !important;
}
html[data-a11y="on"] .sc-decor { display: none !important; }
/* Без плавной прокрутки: переход по ссылке на раздел сразу, без движения страницы. */
html[data-a11y="on"] { scroll-behavior: auto; }
/* Без надписей прописными: строчные буквы читаются по очертанию слова, а прописные
   при крупном шрифте ещё и не помещаются в узкие места (подписи цифр, метки). */
html[data-a11y="on"] .sc-page * { text-transform: none !important; }
/* Слово длиннее строки (при крупном шрифте и большом интервале так бывает с
   «радиовизиографический» на телефоне) переносится, а не вылезает за край. */
html[data-a11y="on"] .sc-page,
html[data-a11y="on"] .sc-page :is(h1, h2, h3, h4, h5, h6, .type-display) { overflow-wrap: anywhere; }
html[data-a11y="on"] .sc-header { position: static !important; }

/* Интервал: буквы, слова и строки вместе. «Большой» равен проверочным значениям
   WCAG 1.4.12 (0,12 em между буквами, 0,16 em между словами, строки в 1,5 раза и больше). */
html[data-a11y-spacing="lg"] .sc-page * { letter-spacing: 0.05em !important; word-spacing: 0.1em !important; }
html[data-a11y-spacing="xl"] .sc-page * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html[data-a11y-spacing="lg"] .sc-page :is(p, li, dd, dt, figcaption, blockquote, summary, label, .type-body, .type-small):not([class*="title"]):not([class*="__name"]) { line-height: 1.85 !important; }
html[data-a11y-spacing="xl"] .sc-page :is(p, li, dd, dt, figcaption, blockquote, summary, label, .type-body, .type-small):not([class*="title"]):not([class*="__name"]) { line-height: 2.1 !important; }
html[data-a11y-spacing="lg"] .sc-page :is(h1, h2, h3, h4, h5, h6, .type-display, [class*="title"], [class*="__name"]) { line-height: 1.3 !important; }
html[data-a11y-spacing="xl"] .sc-page :is(h1, h2, h3, h4, h5, h6, .type-display, [class*="title"], [class*="__name"]) { line-height: 1.45 !important; }

html[data-a11y-images="gray"] .sc-figure img { filter: grayscale(1) contrast(1.08) !important; }
html[data-a11y-images="off"] .sc-figure img,
html[data-a11y-images="off"] .sc-figure picture,
html[data-a11y-images="off"] .sc-figure svg { display: none !important; }
html[data-a11y-images="off"] .sc-figure {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: 16px; border: 2px dashed var(--color-border);
}
html[data-a11y-images="off"] .sc-figure::after {
  content: "Изображение: " attr(data-alt);
  font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); text-align: center;
}

html[data-a11y="on"] .sc-header { background: var(--color-surface); color: var(--color-text); border-bottom: 2px solid var(--color-border); }
html[data-a11y="on"] .sc-logo,
html[data-a11y="on"] .sc-logo__sub,
html[data-a11y="on"] .sc-nav a,
html[data-a11y="on"] .sc-menu a,
html[data-a11y="on"] .sc-tel,
html[data-a11y="on"] .sc-tel__note,
html[data-a11y="on"] .sc-icon { color: var(--color-text); }
html[data-a11y="on"] .sc-icon { background: var(--color-surface); border: 2px solid var(--color-border); }
html[data-a11y="on"] .sc-icon[aria-expanded="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
html[data-a11y="on"] .sc-header__split { background: var(--color-border); }
/* Кнопка версии: в обычном виде значок глаза, в версии для слабовидящих та же кнопка
   с подписью «Обычная версия» (на узком экране подпись только для экранного диктора,
   выход есть и в панели). Подписи переключает атрибут html, без скрипта. */
.sc-eye__on { display: none; }
html[data-a11y="on"] .sc-eye__off { display: none; }
html[data-a11y="on"] .sc-eye { width: auto; min-width: 44px; gap: 8px; padding-inline: 12px; border-width: 2px; }
html[data-a11y="on"] .sc-eye__on { display: inline; font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2; white-space: nowrap; }
@media (max-width: 699px) {
  html[data-a11y="on"] .sc-eye { width: 44px; padding: 0; }
  html[data-a11y="on"] .sc-eye { position: relative; }
  html[data-a11y="on"] .sc-eye__on { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Меню в версии для слабовидящих отдельной строкой под логотипом и кнопками:
   крупные пункты не сжимаются в одну строку с телефоном и переносятся целиком. */
html[data-a11y="on"] .sc-header__bar { flex-wrap: wrap; row-gap: 4px; }
/* Логотип в версии для слабовидящих: подпись строчными и с переносом, чтобы на узком
   экране при крупном шрифте кнопки оставались в той же строке, что и логотип. */
html[data-a11y="on"] .sc-logo { flex: 1 1 auto; min-width: 0; }
html[data-a11y="on"] .sc-logo__text { min-width: 0; }
html[data-a11y="on"] .sc-logo__sub { text-transform: none; letter-spacing: 0; line-height: 1.2; margin-top: 4px; }
html[data-a11y="on"] .sc-header__side { flex-shrink: 0; }
@media (min-width: 1120px) {
  html[data-a11y="on"] .sc-nav { order: 5; flex: 1 0 100%; flex-wrap: wrap; margin: 0; gap: 2px 28px; padding-top: 6px; border-top: 1px solid var(--color-border); }
  html[data-a11y="on"] .sc-nav a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  html[data-a11y="on"] .sc-nav a::after { display: none; }
}

/* ============================================================
   4. Раскладка
   ============================================================ */

/* Высота шапки нужна первому экрану, чтобы он занимал ровно первый экран. */
:root { --header-h: 66px; }
@media (min-width: 960px) { :root { --header-h: 80px; } }

.sc-shell {
  width: 100%; max-width: calc(var(--content-max) + var(--page-gutter) * 2);
  margin-inline: auto; padding-inline: var(--page-gutter);
}
/* Одна ширина у всех блоков. На больших экранах контейнер шире, чтобы первому
   экрану хватало места на текстовую колонку и зубную формулу рядом. */
@media (min-width: 1300px) {
  .sc-shell { max-width: calc(1420px + var(--page-gutter) * 2); }
}
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   5. Шапка и тёмное поле страницы
   ============================================================ */

/* Шапка, первый экран и «Направления» стоят в одном луче: свет падает сверху
   справа, ровно как на предметных снимках в плитках направлений. Тона заданы
   здесь один раз на все три блока, иначе синий у каждого получается свой.
   В версии для слабовидящих ничего этого нет: там цвета выбирает пользователь. */
html:not([data-a11y="on"]) .sc-header,
html:not([data-a11y="on"]) .sc-hero,
html:not([data-a11y="on"]) .sc-care {
  --ink-hi: #6f96ff;
  --field-deep: #040a2c;
  --field-mid: #0a1860;
  --field-lit: #0d2280;
}

.sc-header { position: sticky; top: 0; z-index: 90; overflow: hidden; background: var(--color-brand); transition: box-shadow 220ms ease; }
html:not([data-a11y="on"]) .sc-header {
  color: #fff; --color-focus: #ffd400;
  /* База ровно та же, что у первого экрана, без собственного градиента: весь
     перелив даёт общий световой слой, поэтому на стыке нечему различаться.
     Линия и тень появляются, только когда шапка всплывает над светлыми блоками. */
  background: var(--field-deep);
  box-shadow: none;
}

/* Одно световое поле на шапку и первый экран. Слой одинаковый в обоих местах и
   привязан к верхней кромке страницы: в шапке он начинается от её верха, в первом
   экране поднят ровно на высоту шапки. Это один и тот же градиент, показанный
   двумя кусками, поэтому шва между ними нет ни на компьютере, ни на телефоне. */
.sc-lightfield {
  position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0; height: max(100svh, 720px);
  background:
    radial-gradient(44% 40% at 78% 32%, rgba(90, 150, 255, 0.55), rgba(90, 150, 255, 0) 64%),
    radial-gradient(56% 46% at 8% 8%, rgba(22, 56, 186, 0.62), rgba(22, 56, 186, 0) 70%);
}
.sc-lightfield--hero { top: calc(var(--header-h) * -1); }
/* Узкий луч, тот же приём, что в плитках направлений, только постоянный.
   Он живёт внутри того же слоя, иначе его пришлось бы совмещать вручную. */
.sc-lightfield::after {
  content: ""; position: absolute; top: -4%; right: 8%; width: 38%; height: 116%;
  transform: rotate(9deg); filter: blur(16px);
  background: linear-gradient(94deg,
    rgba(150, 186, 255, 0) 0%, rgba(150, 186, 255, 0.2) 45%, rgba(150, 186, 255, 0) 82%);
}
/* Свет чуть дышит. Обе копии слоя запускаются вместе и идут синхронно. */
@media (prefers-reduced-motion: no-preference) {
  .sc-lightfield { animation: sc-drift 26s ease-in-out infinite alternate; }
  .sc-lightfield::after { animation: sc-beam 21s ease-in-out infinite alternate; }
}
html:not([data-a11y="on"]) .sc-header.is-stuck { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.13), 0 14px 32px rgba(4, 10, 44, 0.42); }

.sc-header__bar { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 20px); min-height: 66px; padding-block: 10px; }
@media (min-width: 960px) { .sc-header__bar { min-height: 80px; } }

.sc-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; }
/* Знак клиники: зуб с ростком (логотип клиники, перерисован в вектор, tools/build_icon.py).
   Путь один на весь сайт, в переменной ниже; элемент красится цветом текста через маску,
   поэтому знак можно ставить куда угодно пустым span и менять ему цвет через color.
   Пропорции знака 39,69 : 48. */
.sc-mark {
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--sc-mark) center / contain no-repeat;
  mask: var(--sc-mark) center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* @icon:start, строку пишет tools/build_icon.py */
:root { --sc-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.69 48.00'%3E%3Cpath fill-rule='evenodd' d='M20.53 25.72c.14-.01 .27 0 .41 0 .27 .01 .58 0 .85-.01 1.6-.06 3.19-.38 4.67-1 .64-.26 1.25-.59 1.83-.97 3.07-1.98 4.92-5.19 5.81-8.67 .1-.41 .2-.81 .28-1.22 .02-.09 .03-.18 .04-.26 .04-.17 .08-.35 .1-.52-.48-.01-.97-.01-1.45 .01-.28 .01-.55 .01-.83 .03-.37 .02-.73 .05-1.1 .09-.69 .07-1.38 .19-2.06 .34-2.55 .57-4.82 1.71-6.52 3.74-.55 .66-1.01 1.4-1.38 2.17-.57 1.17-.95 2.47-1.16 3.75-.07 .43-.11 .85-.17 1.28-.07-.43-.11-.85-.18-1.28-.24-1.44-.69-2.93-1.39-4.21-.49-.89-1.09-1.7-1.8-2.43-.47-.47-.99-.87-1.54-1.24-.13-.08-.25-.17-.38-.25-2.12-1.29-4.65-1.81-7.09-1.96-.29-.02-.57-.02-.85-.03-.48-.02-.97-.02-1.45-.01 .03 .17 .07 .35 .1 .52 .01 .08 .02 .17 .04 .26 .08 .4 .18 .81 .28 1.21 .9 3.5 2.71 6.69 5.81 8.68 .58 .38 1.2 .71 1.84 .98 1.24 .5 2.55 .82 3.88 .94 .26 .02 .52 .04 .79 .05 .09 0 .19 0 .28 0 .07 0 .14 .01 .21 .01 .26 .01 .51-.01 .76 0 .02 .21 .02 .44 .01 .66 0 .07-.01 .14-.01 .22 0 .32 0 .64 0 .96 0 .08-.01 .17-.01 .25-.01 .34 0 .67 0 1.01-.01 .06-.01 .12-.02 .19 0 .33 .01 .67 0 1.01 0 .07-.01 .14-.01 .21-.01 .33 0 .67 0 1.01 0 .08-.01 .16-.01 .23-.01 .34 0 .67 0 1 0 .08-.01 .15-.01 .23-.01 .34 0 .68 0 1.02-.01 .07-.02 .14-.02 .21 0 .33 .01 .67 0 1 0 .15-.01 .29-.01 .44 0 .26 .01 .53 0 .8 0 .07-.01 .14-.01 .22 0 .34 0 .67 0 1.01 0 .08-.01 .15-.01 .22-.01 .81-.01 1.62-.03 2.42-.01 .34 .01 .69 0 1.03 0 .07-.01 .14-.01 .21 0 .12 0 .24 0 .36-.03 .67-.26 1.49-.51 2.12-.74 1.8-2.2 3.66-4.19 4.13-.29 .07-.59 .11-.89 .11-.26 0-.52-.04-.77-.09-.4-.08-.8-.23-1.17-.43-.72-.39-1.32-.95-1.86-1.56-1.14-1.3-2.05-3.2-2.65-4.82-1.06-2.81-1.76-5.98-2.33-8.93-.9-4.6-1.66-9.23-2.66-13.82-.27-1.21-.56-2.41-.89-3.61-.35-1.24-.75-2.47-.95-3.74-.09-.56-.15-1.14-.14-1.72 .06-2.45 1.24-4.98 3.02-6.66 .25-.24 .51-.45 .79-.65 1.71-1.3 3.85-1.91 5.98-1.97 .28-.01 .56 .01 .84 .02 .95 .06 1.74 .16 2.67 .39 .62 .16 1.24 .34 1.83 .59 1.07 .44 2.1 .99 3.08 1.61 .52 .32 1.14 .82 1.79 .74 .39-.05 .72-.27 1.05-.47 .2-.13 .41-.26 .61-.38 .73-.47 1.57-.92 2.36-1.27 2.76-1.24 6.06-1.64 8.98-.73 .67 .21 1.33 .48 1.93 .83 .62 .37 1.22 .79 1.74 1.29 1.78 1.67 2.99 4.24 3.02 6.69 .03 1.84-.6 3.69-1.09 5.44-.51 1.82-.9 3.67-1.29 5.51-.65 3.07-1.18 6.17-1.75 9.25-.42 2.28-.85 4.55-1.4 6.8-.07 .3-.15 .59-.22 .88-.64 2.49-1.51 5.17-2.88 7.36-.29 .48-.62 .94-.99 1.37-.54 .61-1.14 1.17-1.86 1.56-.37 .2-.76 .35-1.17 .43-.25 .05-.51 .09-.77 .09-.3 0-.6-.04-.89-.11-1.99-.47-3.45-2.33-4.18-4.13-.27-.65-.47-1.41-.51-2.11-.01-.12 0-.25-.01-.37 0-.07-.01-.14-.01-.21 0-.34 .01-.69 0-1.03-.02-.8-.02-1.61-.02-2.42-.01-.07-.02-.15-.02-.22 0-.34 .01-.67 0-1.01 0-.07-.01-.14-.01-.21-.01-.25 0-.5 0-.75 0-.17-.01-.33-.01-.5-.01-.33 0-.67 0-1 0-.07-.01-.14-.01-.21-.01-.34 0-.68 0-1.02-.01-.08-.02-.15-.02-.23 0-.33 .01-.66 0-1 0-.07-.01-.15-.01-.23 0-.34 .01-.68 0-1.01 0-.07-.01-.14-.01-.21-.01-.34 .01-.68 0-1.02 0-.06-.01-.12-.01-.18-.01-.34 0-.68 0-1.01 0-.08-.01-.16-.02-.24 0-.32 0-.65 0-.97 0-.3-.02-.57 0-.88zM18.69 23.93c-.34-.22-.75-.58-1.07-.84-.29-.23-.58-.45-.86-.69-.16-.13-.71-.53-.8-.64-.06-.07-.54-1.24-.61-1.42-.13-.32-.27-.63-.4-.94-.19-.44-.37-.88-.56-1.32-.04-.09-.08-.18-.12-.26-.06-.17-.15-.42-.38-.34-.09 .03-.15 .11-.16 .2-.01 .11 .12 .49 .17 .61 .13 .37 .23 .74 .35 1.12 .08 .23 .14 .46 .22 .68 .07 .21 .14 .42 .19 .62-.16-.1-.3-.23-.45-.35-.22-.18-.45-.36-.67-.54-.45-.37-.9-.73-1.35-1.09-.9-.74-1.8-1.46-2.7-2.2-.06-.04-.11-.1-.17-.15-.34-.28-.69-.55-1.04-.82-.59-.48-1.19-.95-1.8-1.4 0 0 .02-.01 .03-.01 .04-.01 .65 .02 .74 .03 .61 .03 1.22 .08 1.82 .17 .5 .07 1 .16 1.49 .27 2.02 .47 4.01 1.43 5.43 2.98 1.34 1.47 2.14 3.35 2.53 5.29 .06 .35 .13 .69 .17 1.04zM33.21 14.16c-.28 .22-.57 .43-.85 .65-.39 .29-.76 .59-1.14 .89-.34 .27-.68 .55-1.02 .83-.7 .58-1.4 1.14-2.11 1.72-.64 .52-1.28 1.03-1.92 1.56-.23 .18-.46 .36-.69 .55-.15 .12-.29 .24-.45 .35 .05-.2 .12-.41 .19-.61 .08-.23 .15-.47 .22-.7 .11-.35 .22-.74 .35-1.09 .04-.12 .18-.51 .17-.62 0-.09-.06-.16-.13-.19-.24-.12-.34 .15-.41 .31-.03 .09-.07 .17-.11 .25-.19 .45-.38 .9-.57 1.35-.13 .31-.27 .61-.39 .92-.07 .18-.56 1.35-.62 1.43-.08 .1-.64 .51-.79 .64-.28 .23-.58 .45-.86 .69-.36 .28-.7 .58-1.07 .84 .03-.35 .1-.69 .17-1.03 .4-2.02 1.24-4 2.7-5.48 1.25-1.27 2.76-2.07 4.46-2.58 .26-.08 .53-.16 .8-.22 .49-.11 .98-.2 1.48-.27 .6-.09 1.21-.14 1.82-.17 .1-.01 .69-.04 .74-.03 .01 0 .03 .01 .03 .01zM6.5 14.22c.21 .25 .41 .52 .63 .77 .39 .48 .81 .94 1.25 1.38 .55 .56 1.12 1.11 1.69 1.65 .32 .29 .65 .57 .96 .86-.49-.07-.98-.2-1.46-.29-.07-.01-.13-.03-.2-.03-.14-.01-.27 .09-.29 .23-.04 .25 .2 .32 .38 .37 .12 .04 .24 .07 .36 .11 .57 .18 1.13 .35 1.7 .52 .16 .04 .75 .21 .86 .27 .11 .06 .59 .49 .73 .6 .48 .41 .97 .8 1.46 1.21 .71 .59 1.44 1.18 2.17 1.76 .24 .19 .48 .39 .72 .58 .18 .14 .36 .27 .52 .42-.85-.03-1.7-.14-2.53-.33-.14-.03-.28-.06-.42-.1-.59-.17-1.18-.38-1.74-.64-2.86-1.33-4.79-3.72-5.95-6.6-.27-.65-.48-1.32-.67-2-.06-.24-.14-.49-.17-.74zM33.19 14.22c-.03 .25-.1 .5-.17 .74-.23 .84-.5 1.66-.86 2.46-.62 1.38-1.41 2.67-2.46 3.78-1.37 1.44-3.14 2.48-5.06 3.01-.41 .11-.83 .19-1.25 .26-.5 .08-1.01 .13-1.51 .16-.05 0-.09 .01-.14 .01-.01-.01-.02-.01-.03-.01 .41-.35 .84-.68 1.26-1.02 .85-.68 1.7-1.38 2.55-2.06 .17-.14 .34-.29 .51-.43 .19-.16 .38-.31 .56-.46 .13-.11 .61-.54 .72-.6 .11-.06 .7-.23 .87-.28 .57-.16 1.13-.33 1.7-.51 .12-.04 .24-.07 .36-.11 .18-.06 .42-.13 .37-.38-.05-.27-.3-.23-.49-.19-.32 .06-.63 .13-.95 .19-.16 .04-.34 .08-.5 .1 1.27-1.16 2.49-2.28 3.63-3.57 .31-.35 .6-.72 .89-1.09z'/%3E%3C/svg%3E"); }
/* @icon:end */
@media (forced-colors: active) { .sc-mark { forced-color-adjust: none; background-color: CanvasText; } }
.sc-logo__mark { width: 32px; height: 39px; }
.sc-logo__text { display: flex; flex-direction: column; line-height: 1; }
.sc-logo__name { font-family: var(--font-display); font-weight: 600; font-size: calc(19px * var(--a11y-scale)); letter-spacing: -0.3px; }
.sc-logo__sub { font-weight: 600; font-size: max(calc(9px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.4px; text-transform: uppercase; margin-top: 6px; }
html:not([data-a11y="on"]) .sc-logo__sub { color: #93a7e2; }

.sc-nav { display: none; gap: clamp(13px, 1.25vw, 24px); margin-inline: auto; }
.sc-nav a {
  color: #cbd6f5; text-decoration: none; font-weight: 500;
  font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); padding: 10px 0; position: relative; white-space: nowrap;
}
.sc-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.sc-nav a:hover { color: #fff; }
.sc-nav a:hover::after, .sc-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sc-nav a[aria-current="page"] { color: #fff; }

.sc-header__side { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.sc-header__split { display: none; width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; }
@media (min-width: 700px) { .sc-header__split { display: block; } }

.sc-tel { display: none; flex-direction: column; text-decoration: none; color: inherit; line-height: 1.1; }
.sc-tel__num { font-family: var(--font-display); font-weight: 600; font-size: calc(17px * var(--a11y-scale)); white-space: nowrap; letter-spacing: -0.1px; }
.sc-tel__note { font-weight: 600; font-size: max(calc(9px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 6px; }
html:not([data-a11y="on"]) .sc-tel__note { color: #93a7e2; }
@media (min-width: 700px) { .sc-tel { display: flex; } }

.sc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; color: inherit;
  transition: background-color 180ms, border-color 180ms;
}
.sc-icon:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.sc-icon[aria-expanded="true"] { background: #fff; color: var(--color-brand); border-color: #fff; }
.sc-icon svg { width: 21px; height: 21px; }

.sc-header .button--primary { display: none; min-height: 44px; padding-inline: 20px; }
@media (min-width: 1120px) {
  .sc-nav { display: flex; }
  .sc-burger { display: none; }
  .sc-header .button--primary { display: inline-flex; }
}

.sc-menu { display: none; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 16px; }
.sc-menu.is-open { display: block; }
.sc-menu ul { display: grid; gap: 2px; margin-bottom: 16px; }
.sc-menu a { display: block; padding: 11px 0; color: #cbd6f5; text-decoration: none; font-weight: 500; font-size: calc(17px * var(--a11y-scale)); }
.sc-menu a:hover { color: #fff; }
.sc-menu__tel { display: grid; gap: 8px; margin-bottom: 16px; }
.sc-menu__tel a { padding: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(19px * var(--a11y-scale)); color: #fff; }
@media (min-width: 1120px) { .sc-menu { display: none !important; } }

/* ============================================================
   6. Панель версии для слабовидящих
   ============================================================ */

/* Панель видна всё время, пока включена версия для слабовидящих, и стоит под шапкой.
   На широком экране группы в одну строку, кнопка возврата справа; на узком группы
   переносятся, подпись и кнопки группы идут одной строкой, пока помещаются.
   Выбранный вариант залит цветом темы, образцы цветов показывают саму схему. */
.sc-a11y { display: none; background: var(--color-surface); color: var(--color-text); border-bottom: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-a11y { display: block; }
html[data-a11y="on"][data-a11y-panel="closed"] .sc-a11y { display: none; }
.sc-a11y__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 30px; padding-block: 16px 18px; }
.sc-a11y__group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sc-a11y__legend { font-weight: 700; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.25; color: var(--color-text); }
.sc-a11y__row { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-a11y__opt {
  min-height: 46px; min-width: 46px; padding: 8px 14px; cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 2px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2;
}
.sc-a11y__opt:hover { border-color: var(--color-accent); }
.sc-a11y__opt[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
/* Размер шрифта: три буквы разного кегля, как на кнопках настроек в любой такой версии. */
.sc-a11y__opt--size { width: 50px; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); }
.sc-a11y__opt--size[data-value="lg"] { font-size: calc(21px * var(--a11y-scale)); }
.sc-a11y__opt--size[data-value="xl"] { font-size: calc(26px * var(--a11y-scale)); }
/* Цвета: кнопка это образец схемы («Аа» её цветом на её фоне), выбранная обведена заливкой. */
.sc-a11y__opt--theme { padding: 4px; min-width: 0; }
.sc-a11y__sample {
  display: grid; place-items: center; width: 50px; height: 34px; border-radius: 3px;
  font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--a11y-scale));
}
html[data-a11y="on"] .sc-page .sc-a11y__sample { letter-spacing: 0 !important; word-spacing: 0 !important; }
html[data-a11y-size] .sc-a11y__sample { width: calc(50px * var(--a11y-scale)); height: calc(34px * var(--a11y-scale)); }
.sc-a11y__foot { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.sc-a11y__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-a11y__exit, .sc-a11y__hide {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; cursor: pointer; border-radius: 6px;
  border: 2px solid var(--color-accent); background: var(--color-surface); color: var(--color-accent);
  font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2;
}
.sc-a11y__exit:hover, .sc-a11y__hide:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.sc-a11y__note { flex: 1 1 22em; margin: 0; color: var(--color-text); font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; }
@media (max-width: 699px) {
  .sc-a11y__inner { gap: 12px 18px; }
  .sc-a11y__group { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .sc-a11y__legend { flex: 0 0 auto; min-width: 7.2em; }
  .sc-a11y__actions { order: -1; flex: 1 1 100%; }
  .sc-a11y__exit, .sc-a11y__hide { flex: 1 1 12em; }
}

/* ============================================================
   7. Первый экран
   ============================================================ */

.sc-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--color-background); }

/* Первый экран продолжает луч шапки. Все тона внутри блока переопределены через
   токены, поэтому зубная формула, легенда, карточка выбора и кнопки перекрашиваются
   сами: ни один из этих элементов не знает, что стоит на тёмном.
   --color-brand здесь это контур зуба, на фон он не влияет. */
html:not([data-a11y="on"]) .sc-hero {
  background-color: var(--field-deep);
  color: #fff;
  --color-text: #ffffff;
  --color-muted: #9db0e6;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-alt: rgba(255, 255, 255, 0.07);
  --color-border: rgba(255, 255, 255, 0.19);
  --color-border-strong: rgba(255, 255, 255, 0.34);
  --color-brand: #aabdf7;
  --color-brand-soft: rgba(79, 134, 255, 0.3);
  --color-accent: #3d7bff;
  --color-accent-hover: #5c91ff;
  --color-focus: #ffd400;
}

/* Низ первого экрана гаснет в чёрный перед светлым блоком. Затемнение привязано
   к нижней кромке блока, а не к высоте окна: на телефоне блок выше экрана. */
.sc-hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 42%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 10, 44, 0) 0%, rgba(2, 5, 22, 0.92) 100%);
}
html[data-a11y="on"] .sc-hero::after { display: none; }

@keyframes sc-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, 2%, 0) scale(1.09); }
}
@keyframes sc-beam {
  from { opacity: 0.7; transform: rotate(9deg) translateX(0); }
  to { opacity: 1; transform: rotate(6.5deg) translateX(-5%); }
}

/* Строка адреса и оценок */
.sc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  justify-content: space-between; padding-block: 14px;
  border-bottom: 1px solid var(--color-border);
}
.sc-place {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  color: var(--color-muted); font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor));
}
.sc-place svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-accent); }
.sc-place b { color: var(--color-text); font-weight: 600; }
.sc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); flex-shrink: 0; }

.sc-scores { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sc-score { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.sc-score svg { width: 14px; height: 14px; flex-shrink: 0; color: #f5a524; }
.sc-score b { font-family: var(--font-display); font-weight: 600; font-size: calc(16px * var(--a11y-scale)); letter-spacing: -0.2px; }
.sc-score span { font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.sc-score:hover b { color: var(--color-accent); }
.sc-score:hover span { color: var(--color-text); }

/* Предложение слева, зубная формула справа. На телефоне, одной колонкой. */
.sc-hero__body {
  display: grid; gap: clamp(22px, 2.6vw, 30px);
  padding-block: clamp(20px, 2.6vw, 32px);
}
@media (min-width: 900px) {
  /* Блок занимает ровно первый экран: и потому, что кнопка выбора зубов должна
     быть видна без прокрутки, и потому, что тёмное поле, оборванное на середине
     экрана, выглядит незаконченным. */
  .sc-hero { display: grid; align-items: stretch; min-height: calc(100svh - var(--header-h)); }
  .sc-hero__inner { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .sc-hero__body {
    grid-template-columns: minmax(270px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 3.4vw, 52px);
    align-items: center; align-content: center;
  }
}
@media (min-width: 900px) and (max-height: 820px) { .sc-hero__body { padding-block: 20px; } .sc-meta { padding-block: 11px; } }

/* Колонкам сетки нужен явный min-width: 0. Схема зубов не ужимается меньше 560 px,
   и без этого она растягивает всю колонку, а вместе с ней заголовок, текст и карточку
   выбора за пределы экрана. Со сбросом колонка ужимается, а схема прокручивается вбок
   внутри своей рамки, как и задумано. */
.sc-hero__body > * { min-width: 0; }

.sc-hero__offer { display: grid; gap: 18px; justify-items: start; align-content: center; }
.sc-hero__title { margin: 0; }
.sc-hero__title em { font-style: normal; color: var(--color-accent); }
html:not([data-a11y="on"]) .sc-hero__title em { color: var(--ink-hi); }
.sc-hero__lead { color: var(--color-muted); }
.sc-hero__lead b { color: var(--color-text); font-weight: 600; }

/* ---------- Зубная формула ---------- */

.sc-chart { border-top: 1px solid var(--color-border); padding-top: 12px; padding-bottom: clamp(14px, 1.8vw, 24px); }
@media (min-width: 900px) {
  /* В две колонки разделителем служит вертикальная линейка, как в бланке приёма.
     На тёмном поле она не рубленая, а гаснет к краям, иначе выглядит как шов. */
  .sc-chart { position: relative; border-top: 0; border-left: 1px solid var(--color-border); padding-top: 0; padding-bottom: 0; padding-left: clamp(24px, 2.6vw, 44px); }
  html:not([data-a11y="on"]) .sc-chart { border-left-color: transparent; }
  html:not([data-a11y="on"]) .sc-chart::before {
    content: ""; position: absolute; left: -1px; top: 4%; bottom: 4%; width: 1px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%,
      rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 0) 100%);
  }
}
.sc-chart__head { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; justify-content: space-between; }
.sc-chart__hint { color: var(--color-muted); }

.sc-chart__frame { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); overflow-x: auto; scrollbar-width: none; }
.sc-chart__frame::-webkit-scrollbar { display: none; }
.sc-chart__frame .tc { width: 100%; min-width: 560px; max-width: 920px; margin-inline: auto; height: auto; }
/* На телефоне вся улыбка помещается по ширине: схема идёт почти от края до края,
   а номера зубов набраны крупнее в единицах схемы, иначе при таком масштабе
   они становятся нечитаемыми. Боковая прокрутка остаётся только в версии
   для слабовидящих на крупном шрифте, где схема вектором и ей нужно место. */
@media (max-width: 699px) {
  html:not([data-a11y="on"]) .sc-chart__frame { margin-inline: calc(var(--page-gutter) * -1 + 4px); padding-inline: 0; overflow: visible; }
  html:not([data-a11y="on"]) .sc-chart__frame .tc { min-width: 0; }
  html:not([data-a11y="on"]) .tc-num { font-size: 14px; font-weight: 600; }
}
/* На низком экране первый экран ужимается целиком: схема, отступы и карточка выбора.
   Задача, чтобы после клика по зубу кнопка «Записаться» оставалась видна без прокрутки. */
@media (min-width: 900px) and (max-height: 700px) {
  .sc-chart__frame .tc { max-width: 620px; }
  .sc-pick { min-height: calc(76px * var(--a11y-scale)); padding-top: 11px; }
}

/* Зубы. В обычной версии они нарисованы рендером (.tc-photo, его считает
   tools/render_teeth.py): объём, эмаль и корень, свет сверху справа, как на
   предметных снимках сайта. Векторные контуры лежат поверх рендера точно по его
   границам и работают как слой взаимодействия: ловят курсор, подсвечивают
   выбранное, приглушают остальное. В версии для слабовидящих рендера нет,
   зубы рисуются вектором в цветах выбранной темы. */
.tc-photo { pointer-events: none; }
.tc-tooth { cursor: pointer; }

/* Векторный рисунок (версия для слабовидящих) */
.tc-body { fill: var(--color-surface-alt); }
.tc-enamel { fill: var(--color-surface); }
.tc-pulp { fill: none; stroke: var(--color-border); stroke-width: 0.8; }
.tc-ghost { fill: none; stroke: var(--color-border); stroke-width: 0.8; stroke-dasharray: 2 3; }
.tc-shine, .tc-scan { display: none; pointer-events: none; }
.tc-line, .tc-ridge { fill: none; stroke: var(--color-border-strong); stroke-width: 0.9; stroke-linecap: round; }
.tc-cej { fill: none; stroke: var(--color-border-strong); stroke-width: 0.9; }
.tc-outline { fill: none; stroke: var(--color-brand); stroke-width: 1.2; stroke-linejoin: round; }
.tc-gap { fill: none; stroke: var(--color-border-strong); stroke-width: 1.1; stroke-dasharray: 3 3.5; }
.tc-rule, .tc-midline { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tc-num {
  fill: var(--color-muted); font-family: var(--font-body); font-weight: 500;
  font-size: 9.5px; letter-spacing: 0.2px; text-anchor: middle; transition: fill 220ms ease;
}
html[data-a11y="on"] .tc-photo { display: none; }
.tc .tc-tooth.is-kin .tc-outline,
.tc .tc-tooth.is-hover .tc-outline,
.tc .tc-tooth.is-on .tc-outline { stroke: var(--color-accent); }
.tc .tc-tooth.is-on .tc-enamel { fill: var(--color-accent); }
.tc .tc-tooth--missing.is-on .tc-gap { fill: var(--color-brand-soft); stroke: var(--color-accent); }
.tc.is-active .tc-num:not(.is-on):not(.is-kin) { fill: var(--color-border-strong); }
.tc .tc-num.is-kin { fill: var(--color-accent); }
.tc .tc-num.is-on { fill: var(--color-accent); font-weight: 700; }

/* Обычная версия: вектор поверх рендера */
html:not([data-a11y="on"]) .tc-ghost,
html:not([data-a11y="on"]) .tc-pulp,
html:not([data-a11y="on"]) .tc-enamel,
html:not([data-a11y="on"]) .tc-line,
html:not([data-a11y="on"]) .tc-ridge,
html:not([data-a11y="on"]) .tc-cej { display: none; }
html:not([data-a11y="on"]) .tc-body { display: none; }
.tc-hit { fill: transparent; }
html:not([data-a11y="on"]) .tc-hit { fill: #040a2c; fill-opacity: 0; transition: fill-opacity 260ms ease; }
html:not([data-a11y="on"]) .tc-outline {
  stroke: #d6e2ff; stroke-opacity: 0; stroke-width: 1.1;
  transition: stroke-opacity 220ms ease, stroke 220ms ease;
}
html:not([data-a11y="on"]) .tc-gap { fill: #9fb5ff; fill-opacity: 0.05; stroke: #aec3ff; stroke-opacity: 0.55; }
html:not([data-a11y="on"]) .tc-glow-color { flood-color: #4f86ff; flood-opacity: 0.85; }
html:not([data-a11y="on"]) .tc-s-clear { stop-color: #ffffff; stop-opacity: 0; }
html:not([data-a11y="on"]) .tc-s-scan { stop-color: #9dbbff; stop-opacity: 0.16; }
html:not([data-a11y="on"]) .tc-s-scan-core { stop-color: #eef3ff; stop-opacity: 0.75; }
/* Когда что-то выбрано, остальные зубы уходят в тень. */
html:not([data-a11y="on"]) .tc.is-active .tc-tooth:not(.is-on):not(.is-kin):not(.is-hover) .tc-hit { fill-opacity: 0.64; }
/* Однотипные: тонкий синий контур. */
html:not([data-a11y="on"]) .tc .tc-tooth.is-kin .tc-outline { stroke: #7fa4ff; stroke-opacity: 0.85; }
/* Под курсором: светлый контур со свечением. Фильтр описан в самой схеме:
   CSS-функции фильтров на SVG-элементах поддерживаются не везде. */
html:not([data-a11y="on"]) .tc .tc-tooth.is-hover .tc-outline { stroke: #e8efff; stroke-opacity: 1; filter: url(#tc-glow); }
/* Выбранный: рендер окрашивается в фирменный синий, объём и блики остаются.
   Режим color берёт у слоя только оттенок, яркость остаётся от снимка. */
html:not([data-a11y="on"]) .tc .tc-tooth.is-on .tc-hit { fill: #3d7bff; fill-opacity: 0.92; mix-blend-mode: color; }
html:not([data-a11y="on"]) .tc .tc-tooth.is-on .tc-outline { stroke: #b9cdff; stroke-opacity: 1; filter: url(#tc-glow); }
html:not([data-a11y="on"]) .tc .tc-tooth--missing.is-on .tc-gap { fill: #3d7bff; fill-opacity: 0.18; stroke: #9dbbff; stroke-opacity: 1; }
html:not([data-a11y="on"]) .tc .tc-num.is-on { fill: #9dbbff; }

/* Появление как на панорамном снимке: полоса света проходит по челюсти
   слева направо и проявляет рендер мягким краем маски. Номера и лунка
   проявляются вслед за полосой, задержки записал генератор. Без JS класса
   is-armed нет, маска не включается, и всё видно сразу. */
.tc-wipe { transform: translateX(var(--tc-sweep, 700px)); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y="on"]) .tc.is-armed .tc-photo { mask: url(#tc-m-wipe); }
  html:not([data-a11y="on"]) .tc.is-armed .tc-wipe { transform: none; }
  html:not([data-a11y="on"]) .tc.is-armed.is-drawn .tc-wipe {
    animation: tc-reveal 1700ms cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
  }
  html:not([data-a11y="on"]) .tc.is-armed .tc-num,
  html:not([data-a11y="on"]) .tc.is-armed .tc-gap { opacity: 0; }
  html:not([data-a11y="on"]) .tc.is-armed.is-drawn .tc-num,
  html:not([data-a11y="on"]) .tc.is-armed.is-drawn .tc-gap {
    opacity: 1; transition: opacity 620ms cubic-bezier(0.3, 0.7, 0.3, 1) var(--tc-delay, 0ms);
  }
  html:not([data-a11y="on"]) .tc.is-armed .tc-scan { display: block; opacity: 0; }
  html:not([data-a11y="on"]) .tc.is-armed.is-drawn .tc-scan {
    animation: tc-scan 1700ms cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
  }
}
@keyframes tc-reveal {
  from { transform: translateX(0); }
  to { transform: translateX(var(--tc-sweep, 700px)); }
}
@keyframes tc-scan {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--tc-sweep, 700px)); }
}

/* Подсказка о боковой прокрутке появляется только когда формула действительно не помещается. */
.sc-chart__scroll { display: none; margin-top: 4px; color: var(--color-muted); }
.sc-chart.is-scrollable .sc-chart__scroll { display: block; }

.sc-legend { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 6px; }
.sc-legend__item {
  display: inline-flex; align-items: center; cursor: pointer; border-radius: 4px;
  padding: 8px 12px; min-height: 40px; border: 1px solid transparent; background: transparent;
  color: var(--color-text); font-weight: 500; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor));
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
.sc-legend__item:hover { border-color: var(--color-border-strong); }
.sc-legend__item[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

/* Карточка выбора: ради неё и существует схема.
   Высота карточки закреплена и не зависит от числа выбранных зубов 
   иначе при выборе растёт правая колонка и весь первый экран прыгает. */
.sc-pick {
  border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 14px;
  display: grid; gap: 12px 24px; align-items: start;
  /* minmax(0, 1fr) обязателен: колонка auto растягивается под неразрывную строку
     номеров и выталкивает страницу вбок. */
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(120px * var(--a11y-scale));
}
@media (min-width: 1100px) { .sc-pick { grid-template-columns: minmax(0, 1fr) auto; } }

.sc-pick__num { color: var(--color-accent); }
.sc-pick__name {
  font-family: var(--font-display); font-weight: 600; margin-top: 5px;
  font-size: calc(var(--h4-size) * var(--a11y-scale)); line-height: 1.25;
  /* Номера выбранных зубов не переносятся на вторую строку: длинный список
     обрезается многоточием, а сам выбор виден на схеме. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-pick__list {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 6px; color: var(--color-muted);
  font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5;
  /* Место под две строки занято всегда: иначе карточка меняет высоту
     между «ничего не выбрано» и выбором. */
  min-height: 3em;
}
.sc-pick__list li { display: inline; }
.sc-pick__list li + li::before { content: "·"; margin: 0 9px; color: var(--color-border-strong); }
.sc-pick__list--idle li + li::before { content: none; }

/* Кнопка и сброс, в столбик: так текстовой части остаётся больше ширины.
   Кнопка видна всегда, меняется только подпись; сброс скрывается через visibility,
   чтобы его место оставалось занятым и карточка не меняла высоту. */
.sc-pick__act { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sc-pick__reset {
  border: 0; background: none; cursor: pointer; padding: 8px 2px;
  color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px;
  font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor));
}
.sc-pick__reset:hover { color: var(--color-text); }
.sc-pick__reset.is-off { visibility: hidden; pointer-events: none; }

/* В версии для слабовидящих текст не обрезается: читаемость важнее ровной высоты. */
html:not([data-a11y="on"]) .sc-pick {
  border: 1px solid var(--color-border); border-top-color: var(--color-border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  padding: 14px 16px; margin-top: 12px;
}

html[data-a11y="on"] .sc-pick__name { white-space: normal; overflow: visible; }
html[data-a11y="on"] .sc-pick__list { display: block; overflow: visible; }

/* Версия для слабовидящих: блок по высоте содержимого, без пустого поля сверху и снизу;
   звёзды оценок цветом текста; типы зубов выглядят кнопками (рамка); номера зубов
   на схеме крупнее и цветом текста. */
html[data-a11y="on"] .sc-hero { min-height: 0; }
html[data-a11y="on"] .sc-hero__body { align-content: start; }
html[data-a11y="on"] .sc-score svg { color: currentColor; }
html[data-a11y="on"] .sc-dot { background: var(--color-text); }
html[data-a11y="on"] .sc-legend { gap: 6px; }
html[data-a11y="on"] .sc-legend__item { border: 2px solid var(--color-border-strong); font-weight: 600; }
html[data-a11y="on"] .tc-num { font-size: 13px; font-weight: 600; fill: var(--color-text); }


/* ============================================================
   7a. Декор светлых блоков
   ============================================================

   Светлые блоки остаются светлыми, глубину дают слои: мягкие свечения
   фирменного синего, стеклянные зубы из той же анатомии, что формула первого
   экрана (со светлой кромкой со стороны света и бликом, который изредка
   проходит по стеклу), боке как на макросъёмке, редкие мягкие искры.
   В «Своей лаборатории» ещё чертёж коронки, он прорисовывается при появлении.
   Всё медленно и тихо. В версии для слабовидящих декора нет (sc-decor),
   при отключённых анимациях он неподвижен.
   ============================================================ */

.sc-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sc-deco__glow { position: absolute; width: min(60vw, 820px); aspect-ratio: 1; border-radius: 50%; }
.sc-deco__glow--a { left: -16%; top: -26%; background: radial-gradient(closest-side, rgba(27, 90, 240, 0.13), rgba(27, 90, 240, 0)); }
.sc-deco__glow--b { right: -18%; bottom: -30%; background: radial-gradient(closest-side, rgba(84, 190, 255, 0.18), rgba(84, 190, 255, 0)); }
.sc-deco__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 29, 107, 0.13) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(56% 50% at 78% 22%, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 80%);
  mask-image: radial-gradient(56% 50% at 78% 22%, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 80%);
}

/* Стеклянные зубы */
.sc-glass {
  position: absolute; width: auto; overflow: visible;
  filter: drop-shadow(0 26px 34px rgba(27, 90, 240, 0.16)) drop-shadow(0 3px 5px rgba(27, 90, 240, 0.08));
}
.sc-glass__sweep { transform-box: fill-box; transform-origin: 50% 50%; transform: translateX(-120%) rotate(16deg); }
.sc-deco--why .sc-glass--a { right: 2%; top: 3%; height: clamp(260px, 30vw, 440px); rotate: 12deg; }
.sc-deco--why .sc-glass--b { left: -1.5%; bottom: 2%; height: clamp(220px, 22vw, 340px); rotate: -14deg; }
.sc-deco--lab .sc-glass--a { right: 5%; bottom: -3%; height: clamp(240px, 24vw, 380px); rotate: 16deg; }
.sc-deco--lab .sc-glass--b { left: -2%; top: 18%; height: clamp(200px, 20vw, 320px); rotate: -11deg; }

/* Боке: круг со светлым ободком, как у размытого блика на макроснимке. */
.sc-bokeh {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; filter: blur(var(--b));
  background: radial-gradient(circle closest-side,
    rgba(61, 123, 255, var(--a)) 0%, rgba(61, 123, 255, calc(var(--a) * 1.35)) 78%,
    rgba(255, 255, 255, 0.85) 88%, rgba(160, 190, 255, calc(var(--a) * 2)) 93%, rgba(61, 123, 255, 0) 100%);
}

/* Искра: мягкая четырёхлучевая вспышка. Лучи это вытянутые радиальные
   градиенты, поэтому они гаснут к концам, а не обрываются. */
.sc-glint {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%;
  opacity: 0; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 1.5px, rgba(111, 150, 255, 0.85) 2.6px, rgba(61, 123, 255, 0.22) 14%, rgba(61, 123, 255, 0) 34%);
}
.sc-glint::before, .sc-glint::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(61, 123, 255, 0.95), rgba(61, 123, 255, 0.25) 55%, rgba(61, 123, 255, 0));
}
.sc-glint::before { width: 100%; height: 2px; }
.sc-glint::after { width: 2px; height: 70%; }

/* Чертёж коронки 36 в «Своей лаборатории»: лист как у зуботехнической
   лаборатории (tools/build_blueprint.py). Толщины как в черчении: видимый
   контур толще, размерные и выносные линии тонкие, осевые штрихпунктиром. */
.sc-blueprint {
  position: absolute; right: max(2%, calc((100% - 1420px) / 2)); top: calc(var(--section-space) - 34px);
  width: clamp(380px, 39vw, 600px); height: auto; overflow: visible;
}
/* Уже 1100 px заголовок блока занимает всю ширину и чертёж лёг бы под текст:
   там его нет, остаются стеклянные зубы и боке. */
@media (max-width: 1099px) { .sc-blueprint { display: none; } }
@media (min-width: 1100px) and (max-width: 1279px) { .sc-blueprint { width: 33vw; top: calc(var(--section-space) - 20px); } }
.bp-draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-line { stroke: rgba(11, 29, 107, 0.62); stroke-width: 1.25; }
.bp-line--crown { stroke: rgba(27, 79, 224, 0.9); stroke-width: 1.6; }
.bp-line--frame { stroke: rgba(11, 29, 107, 0.45); stroke-width: 1.1; }
.bp-thin { stroke: rgba(11, 29, 107, 0.42); stroke-width: 0.8; }
.bp-thin--soft { stroke: rgba(11, 29, 107, 0.28); }
.bp-fissure { stroke: rgba(11, 29, 107, 0.58); stroke-width: 1.05; }
.bp-dim, .bp-dimline { fill: none; stroke: rgba(11, 29, 107, 0.45); stroke-width: 0.75; }
.bp-arrow { fill: rgba(11, 29, 107, 0.6); }
.bp-axis { fill: none; stroke: rgba(11, 29, 107, 0.35); stroke-width: 0.75; stroke-dasharray: 14 3 2 3; }
.bp-cut { fill: none; stroke: rgba(11, 29, 107, 0.45); stroke-width: 0.8; stroke-dasharray: 12 3 2 3; }
.bp-cut-end { fill: none; stroke: rgba(11, 29, 107, 0.75); stroke-width: 2.4; stroke-linecap: butt; }
.bp-hatch { stroke: rgba(11, 29, 107, 0.2); stroke-width: 0.7; }
.bp-hatch--crown { stroke: rgba(27, 90, 240, 0.42); }
.bp-tint { fill: rgba(27, 90, 240, 0.06); }
.bp-dot { fill: rgba(11, 29, 107, 0.32); }
.bp-fill--canal { fill: rgba(11, 29, 107, 0.5); }
/* Надписи с подложкой цвета фона: читаются поверх штриховки и линий. */
.bp-text {
  fill: rgba(11, 29, 107, 0.62); font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.3px;
  paint-order: stroke; stroke: #f3f6fd; stroke-width: 3px; stroke-linejoin: round;
}
.bp-text--dim { font-size: 11.5px; font-weight: 700; fill: rgba(11, 29, 107, 0.78); font-variant-numeric: tabular-nums; }
.bp-text--title { font-size: 10px; font-weight: 700; letter-spacing: 2px; fill: rgba(11, 29, 107, 0.52); }
.bp-text--label { font-size: 12px; font-weight: 700; fill: rgba(11, 29, 107, 0.8); }
.bp-text--small { font-size: 10.5px; font-weight: 500; fill: rgba(11, 29, 107, 0.52); }
.bp-text--letter { font-size: 14px; font-weight: 700; fill: rgba(11, 29, 107, 0.78); }
.bp-text--tiny { font-size: 7px; font-weight: 700; letter-spacing: 1.3px; fill: rgba(11, 29, 107, 0.42); }
.bp-text--stamp { font-size: 11px; font-weight: 700; fill: rgba(11, 29, 107, 0.75); }
.bp-text--in { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; fill: rgba(11, 29, 107, 0.6); }

@media (prefers-reduced-motion: no-preference) {
  .sc-deco__glow { animation: sc-deco-drift 26s ease-in-out infinite alternate; }
  .sc-deco__glow--b { animation-duration: 31s; animation-direction: alternate-reverse; }
  .sc-glass { animation: sc-deco-float 12s ease-in-out infinite alternate; }
  .sc-glass--b { animation-duration: 14s; animation-delay: -5s; }
  .sc-glass__sweep { animation: sc-glass-sweep 9s cubic-bezier(0.55, 0.05, 0.45, 0.95) infinite; }
  .sc-glass--b .sc-glass__sweep { animation-duration: 11s; animation-delay: -4s; }
  .sc-bokeh { animation: sc-bokeh var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
  .sc-glint { animation: sc-glint 12.5s ease-in-out infinite; animation-delay: var(--d); }
  /* Чертёж прорисовывается, когда блок появляется в окне (класс ставит JS):
     линии по очереди, затем штриховки, стрелки и надписи. */
  .sc-deco[data-deco]:not(.is-settled) .bp-draw { stroke-dasharray: 1; }
  .sc-deco[data-deco] .bp-draw { stroke-dashoffset: 1; }
  .sc-deco[data-deco] .bp-text, .sc-deco[data-deco] .bp-fill, .sc-deco[data-deco] .bp-arrow,
  .sc-deco[data-deco] .bp-axis, .sc-deco[data-deco] .bp-cut, .sc-deco[data-deco] .bp-cut-end,
  .sc-deco[data-deco] .bp-dimline { opacity: 0; }
  .sc-deco.is-drawn .bp-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i, 0) * 0.07s); }
  .sc-deco.is-drawn .bp-fill { opacity: 1; transition: opacity 1.4s ease 1.6s; }
  .sc-deco.is-drawn .bp-axis, .sc-deco.is-drawn .bp-cut, .sc-deco.is-drawn .bp-cut-end,
  .sc-deco.is-drawn .bp-dimline, .sc-deco.is-drawn .bp-arrow { opacity: 1; transition: opacity 900ms ease 2s; }
  .sc-deco.is-drawn .bp-text { opacity: 1; transition: opacity 900ms ease 2.4s; }
}
html.no-js .sc-deco[data-deco] .bp-draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .sc-glint { opacity: 0.6; }
}
@media (max-width: 700px) {
  .sc-glass { opacity: 0.65; }
  .sc-deco--why .sc-glass--a { height: 240px; right: -16%; top: 1%; }
  .sc-deco--lab .sc-glass--a { height: 200px; right: -10%; }
  .sc-deco__grid { background-size: 22px 22px; }
}
@keyframes sc-deco-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.14); } }
@keyframes sc-deco-float { from { translate: 0 0; } to { translate: 0 -16px; } }
@keyframes sc-glass-sweep {
  0%, 55% { transform: translateX(-120%) rotate(16deg); }
  85%, 100% { transform: translateX(420%) rotate(16deg); }
}
@keyframes sc-bokeh { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes sc-glint {
  0%, 84%, 100% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  89% { opacity: 1; transform: scale(1) rotate(8deg); }
  94% { opacity: 0.3; transform: scale(0.7) rotate(20deg); }
}

/* ============================================================
   8. Почему к нам идут: лестница из четырёх карточек
   ============================================================

   Четыре тёмные карточки на светлом листе, высота растёт вместе с ценой,
   низ общий. В карточке снимок коронки во весь размер, цена, название,
   материал; подробности выдвигаются стеклянной панелью по наведению или
   фокусу. Карточки встают лестницей при появлении блока в окне.
   ============================================================ */

.sc-section { padding-block: var(--section-space); }
.sc-why {
  position: relative; isolation: isolate; overflow-x: clip;
  background: linear-gradient(180deg, #f7f9ff 0%, var(--color-surface-alt) 55%, #eef3fd 100%);
}
html[data-a11y="on"] .sc-why { background: var(--color-background); }

/* --- шапка блока --- */

.sc-why__head { display: grid; gap: clamp(20px, 2.6vw, 32px); margin-bottom: clamp(30px, 3.6vw, 52px); }
@media (min-width: 980px) {
  .sc-why__head {
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    align-items: end; gap: clamp(36px, 5vw, 86px);
  }
}
.sc-why__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; margin-top: 15px; text-wrap: balance;
}
.sc-why__title em { font-style: normal; color: var(--color-accent); }
.sc-why__lead { color: var(--color-text); }
.sc-why__note { margin-top: 12px; color: var(--color-muted); }

/* --- лестница карточек --- */

/* Высота карточки растёт с ценой (генератор отдаёт --h, доля от самой дорогой),
   низ общий: лестница цены видна одним взглядом. Карточка это снимок во весь
   размер, внизу цена, название и материал. Наведение или фокус выдвигает
   стеклянную панель с подробностями. Без наведения (телефон, планшет) панель
   открыта всегда. */
.sc-case { --card-min: 430px; --card-grow: 190px; }
.sc-case__row {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px); align-items: end; margin: 0; padding: 0; list-style: none;
}
.sc-card { min-width: 0; }
.sc-card__in {
  position: relative; isolation: isolate; overflow: hidden; outline: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(var(--card-min) + var(--h) * var(--card-grow));
  border-radius: 12px; color: #fff; background: #02050f;
  box-shadow: 0 34px 60px -26px rgba(5, 13, 58, 0.6), 0 12px 26px -14px rgba(27, 90, 240, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 520ms ease, filter 420ms ease;
}
.sc-card__in:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.sc-card__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.sc-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 63% 28%; display: block;
  transform: scale(1.04); transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.25, 1), filter 600ms ease;
}
/* Затемнение снизу держит текст, кромка сверху ловит свет, как стекло витрины. */
.sc-card__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 5, 15, 0) 34%, rgba(2, 5, 15, 0.7) 60%, rgba(2, 5, 15, 0.96) 100%);
  transition: opacity 520ms ease;
}
.sc-card__in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(157, 187, 255, 0.1);
}
.sc-card__rank {
  position: absolute; top: 16px; left: 18px; font-weight: 600; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.sc-card__body { position: relative; display: grid; gap: 3px; padding: 22px 20px 20px; }
.sc-card__price {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -1.4px;
  font-size: calc(clamp(30px, 2.6vw, 40px) * var(--a11y-scale-display)); font-variant-numeric: tabular-nums;
}
.sc-card__from { font-family: var(--font-body); font-weight: 600; font-size: 0.38em; letter-spacing: 0; color: #9db0e6; }
.sc-card__rub { font-size: 0.58em; letter-spacing: 0; color: #9dbbff; }
.sc-card__name {
  margin-top: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.3px;
  font-size: calc(19px * var(--a11y-scale)); line-height: 1.2; color: #fff;
}
.sc-card__struct { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #7fa4ff; }
.sc-card__more { display: grid; grid-template-rows: 1fr; }
.sc-card__more > div { overflow: hidden; display: grid; gap: 9px; align-content: start; }
/* Отступ внутри скрываемой части, иначе свёрнутая панель оставляет пустую полосу. */
.sc-card__more > div > :first-child { margin-top: 14px; }
.sc-card__what, .sc-card__when { font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: #c3d0f2; }
.sc-card__when b { color: #fff; font-weight: 600; }
.sc-card__know {
  padding: 10px 12px; border-radius: 6px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: #fff;
  background: rgba(61, 123, 255, 0.16); box-shadow: inset 2px 0 0 #3d7bff;
}
.sc-card__know b { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: #9dbbff; }
.sc-card__hint { display: none; }
.sc-case__source { margin-top: clamp(26px, 3vw, 40px); max-width: 78ch; color: var(--color-muted); }

/* Широкий экран с мышью: панель спрятана и выдвигается по наведению или фокусу. */
@media (hover: hover) and (min-width: 900px) {
  .sc-card__in { height: calc(var(--card-min) + var(--h) * var(--card-grow)); }
  .sc-card__more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 560ms cubic-bezier(0.2, 0.7, 0.25, 1), opacity 420ms ease; }
  .sc-card__in:hover .sc-card__more, .sc-card__in:focus-within .sc-card__more { grid-template-rows: 1fr; opacity: 1; }
  .sc-card__in:hover, .sc-card__in:focus-within {
    transform: translateY(-10px);
    box-shadow: 0 46px 70px -26px rgba(5, 13, 58, 0.7), 0 18px 40px -12px rgba(27, 90, 240, 0.45), inset 0 0 0 1px rgba(157, 187, 255, 0.28);
  }
  .sc-card__in:hover .sc-card__media img, .sc-card__in:focus-within .sc-card__media img { transform: scale(1.1); filter: brightness(0.62); }
  .sc-card__hint {
    display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 12px; right: 14px;
    font-weight: 600; font-size: 12px; color: rgba(255, 255, 255, 0.72); transition: opacity 300ms ease;
  }
  .sc-card__hint::after {
    content: "+"; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 17px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  }
  .sc-card__in:hover .sc-card__hint, .sc-card__in:focus-within .sc-card__hint { opacity: 0; }
  .sc-case__row:has(.sc-card__in:hover) .sc-card__in:not(:hover) { filter: saturate(0.55) brightness(0.82); }
}
/* Карточки встают лестницей по очереди, когда блок появляется в окне. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .sc-case:not(.is-in) .sc-card { opacity: 0; transform: translateY(34px); }
  html:not(.no-js):not([data-a11y="on"]) .sc-case.is-in .sc-card {
    opacity: 1; transform: none;
    transition: opacity 700ms ease calc(var(--i) * 110ms), transform 900ms cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--i) * 110ms);
  }
}

/* Узкий экран: карточки листаются вбок, снимок сверху, текст под ним. */
@media (max-width: 899px) {
  .sc-case__row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1); padding: 12px var(--page-gutter) 18px; scroll-padding-inline: var(--page-gutter);
  }
  .sc-case__row::-webkit-scrollbar { display: none; }
  .sc-card { scroll-snap-align: start; }
  .sc-card__in { min-height: 100%; justify-content: flex-start; }
  .sc-card__media { position: relative; inset: auto; z-index: 0; height: 220px; }
  .sc-card__in::before { background: linear-gradient(180deg, rgba(2, 5, 15, 0) 120px, rgba(2, 5, 15, 0.9) 220px, #02050f 260px); }
  .sc-card__body { margin-top: -54px; }
}

/* Версия для слабовидящих: карточки обычные, на теме пользователя, без листания вбок.
   Колонок четыре только на широком экране и обычном размере шрифта, иначе две или одна:
   четыре карточки не оставляют сироту в последнем ряду. */
html[data-a11y="on"] .sc-case__row {
  grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; align-items: stretch;
  overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0;
}
@media (min-width: 700px) { html[data-a11y="on"] .sc-case__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { html[data-a11y-size="md"] .sc-case__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-a11y="on"] .sc-card__body { margin-top: 0; }
html[data-a11y="on"] .sc-card__rank, html[data-a11y="on"] .sc-card__know b, html[data-a11y="on"] .sc-card__from { font-size: var(--a11y-floor); letter-spacing: 0.5px; }
html[data-a11y="on"] .sc-card__rub { font-size: max(0.58em, var(--a11y-floor)); }
html[data-a11y="on"] .sc-card__in { min-height: 0; height: auto; background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong); justify-content: flex-start; }
html[data-a11y="on"] .sc-card__media { position: relative; height: 200px; z-index: 0; }
html[data-a11y="on"] .sc-card__in::before, html[data-a11y="on"] .sc-card__in::after { display: none; }
html[data-a11y="on"] .sc-card__rank { position: static; padding: 12px 16px 0; color: var(--color-text); }
html[data-a11y="on"] .sc-card__price, html[data-a11y="on"] .sc-card__name,
html[data-a11y="on"] .sc-card__struct, html[data-a11y="on"] .sc-card__what,
html[data-a11y="on"] .sc-card__when, html[data-a11y="on"] .sc-card__when b,
html[data-a11y="on"] .sc-card__know, html[data-a11y="on"] .sc-card__know b,
html[data-a11y="on"] .sc-card__from, html[data-a11y="on"] .sc-card__rub { color: var(--color-text); }
html[data-a11y="on"] .sc-card__know { background: none; border-left: 3px solid var(--color-border-strong); box-shadow: none; }
html[data-a11y="on"] .sc-card__price { font-size: calc(26px * var(--a11y-scale-display)); }
/* Подробности в версии для слабовидящих открыты всегда: наведение тут не годится. */
html[data-a11y="on"] .sc-card__more { grid-template-rows: 1fr; opacity: 1; }
html[data-a11y="on"] .sc-card__hint { display: none; }
html[data-a11y="on"] .sc-card__body { padding: 12px 16px 16px; }


/* ============================================================
   9. Направления: пять предметов в одной тёмной студии
   ============================================================

   Блок во всю ширину на фирменном тёмно-синем. Снимки сняты на тёмном поле,
   фон кадра совпадает с фоном плитки, поэтому инструменты выглядят лежащими
   внутри одной общей студии, а не вклеенными фотографиями. Через весь блок
   идёт один луч света, тот же, что и на снимках.

   В версии для слабовидящих фотография не несёт смысла, поэтому плитки
   становятся обычными карточками на теме пользователя: рамка, текст, цена.
   ============================================================ */

.sc-care {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--section-space);
  background: var(--field-deep, var(--color-brand-deep));
}
/* Инверсная раскраска текста живёт только в обычной версии: в версии для
   слабовидящих цвета задаёт выбранная тема, и переопределять их нельзя.
   --color-brand не трогаем: на нём держатся кнопки и шапка. */
html:not([data-a11y="on"]) .sc-care {
  --color-text: #ffffff;
  --color-muted: #9db0e6;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-focus: #ffd400;
  --care-tile: #0a1860;
  color: #fff;
}

.sc-care__beam {
  position: absolute; z-index: -1; inset: -14% -12% auto -12%; height: 86%;
  pointer-events: none;
  background:
    radial-gradient(52% 56% at 80% -12%, rgba(90, 150, 255, 0.34), rgba(90, 150, 255, 0) 66%),
    radial-gradient(48% 50% at 10% -10%, rgba(22, 56, 186, 0.5), rgba(22, 56, 186, 0) 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-care__beam { animation: sc-drift 30s ease-in-out infinite alternate; }
}

/* --- шапка блока --- */

.sc-care__head { display: grid; gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 940px) {
  .sc-care__head {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(30px, 4vw, 68px); align-items: end;
  }
}
.sc-care__eyebrow { display: block; color: #7d95dd; }
.sc-care__title {
  margin-top: 13px;
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--h2-size) * var(--a11y-scale-display));
  line-height: 1.1; letter-spacing: -0.5px; text-wrap: balance;
}
.sc-care__title em { font-style: normal; color: var(--ink-hi, var(--color-accent)); }
html[data-a11y="on"] .sc-care__title em { color: var(--color-accent); }
.sc-care__intro p { color: var(--color-muted); }
.sc-care__link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  font-weight: 600; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor));
  color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong); padding-bottom: 5px;
  transition: color 180ms, border-color 180ms, gap 180ms;
}
.sc-care__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sc-care__link:hover { color: #9dbaff; border-color: #9dbaff; gap: 15px; }
html[data-a11y="on"] .sc-care__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* --- сетка --- */

.sc-dirs {
  display: grid; gap: 10px;
  margin-top: clamp(26px, 3.4vw, 46px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .sc-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-dir--wide, .sc-dir--pano { grid-column: span 2; }
  /* На планшете текста столько же, сколько на компьютере, а плитка вдвое уже:
     без запаса по высоте снимок превращается в полоску над заголовком. */
  .sc-dir { min-height: 366px; }
}
@media (min-width: 1080px) {
  .sc-dirs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows:
      minmax(clamp(272px, 24vw, 340px), auto)
      minmax(clamp(272px, 24vw, 340px), auto)
      minmax(clamp(200px, 16vw, 248px), auto);
  }
  .sc-dir--wide { grid-column: span 4; }
  .sc-dir--tall { grid-column: span 2; grid-row: span 2; }
  .sc-dir--sq { grid-column: span 2; }
  .sc-dir--pano { grid-column: span 6; }
}

/* --- плитка --- */

.sc-dir {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(238px, 52vw, 300px);
  padding: clamp(17px, 1.7vw, 27px);
  background: var(--care-tile, var(--color-surface));
  border: 1px solid var(--color-border);
  transition: border-color 260ms ease;
}
.sc-dir:hover, .sc-dir:focus-within { border-color: rgba(140, 176, 255, 0.55); }

.sc-dir__media { position: absolute; z-index: -2; inset: 0; display: block; }
.sc-dir__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  display: block; transform: scale(1.03); filter: contrast(1.05) saturate(1.04);
  transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.25, 1);
}
.sc-dir:hover .sc-dir__img, .sc-dir:focus-within .sc-dir__img { transform: scale(1.08); }

/* Кадрирование под форму плитки: предмет в каждом снимке стоит по-своему,
   а плитки разного пропорционала, поэтому точка кадра задана поимённо. */
[data-dir="therapy"] .sc-dir__img { object-position: 43% 52%; }
/* Коронка единственный тёплый предмет в наборе и самый светлый: без сдержки
   она выжигает правую колонку и ломает общий холодный тон блока. */
[data-dir="prosthetics"] .sc-dir__img { object-position: 50% 40%; filter: contrast(1.05) saturate(0.92) brightness(0.87); }
[data-dir="surgery"] .sc-dir__img { object-position: 63% 44%; }
[data-dir="hygiene"] .sc-dir__img { object-position: 56% 46%; }
[data-dir="implants"] .sc-dir__img { object-position: 50% 28%; }

/* Градиент гасит низ кадра до цвета плитки, чтобы текст читался, а предмет
   оставался висеть в общем тёмном поле блока. */
.sc-dir__shade {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(5, 13, 58, 0.97) 0%, rgba(5, 13, 58, 0.93) 26%,
      rgba(5, 13, 58, 0.6) 51%, rgba(5, 13, 58, 0.1) 84%, rgba(5, 13, 58, 0) 100%),
    linear-gradient(to right, rgba(5, 13, 58, 0.55) 0%, rgba(5, 13, 58, 0) 48%);
}

/* Тот же луч, что на снимках, проходит по плитке при наведении. */
.sc-dir__sweep { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.sc-dir__sweep::before {
  content: ''; position: absolute; top: -60%; bottom: -60%; left: 0; width: 34%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%, rgba(168, 199, 255, 0.24) 46%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-160%, 0, 0) rotate(11deg);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-dir__sweep::before { transition: transform 1000ms cubic-bezier(0.22, 0.7, 0.28, 1); }
  .sc-dir:hover .sc-dir__sweep::before,
  .sc-dir:focus-within .sc-dir__sweep::before { transform: translate3d(420%, 0, 0) rotate(11deg); }
}

/* --- содержимое плитки --- */

.sc-dir__body { display: grid; gap: 9px; }
/* Сетка, а не flex: цена не должна переноситься под заголовок и вставать слева,
   вместо этого переносится сам заголовок, а цена остаётся прижата вправо. */
.sc-dir__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: 6px 16px; padding-top: 13px; border-top: 1px solid var(--color-border-strong);
}
.sc-dir__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--h3-size) * var(--a11y-scale));
  line-height: 1.12; letter-spacing: -0.3px; color: var(--color-text);
}
.sc-dir__price { flex: none; text-align: right; line-height: 1.16; }
.sc-dir__price b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: calc(17px * var(--a11y-scale)); letter-spacing: -0.3px; color: var(--color-text);
}
.sc-dir__price span {
  display: block; margin-top: 3px; max-width: 16ch;
  font-size: max(calc(11.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.3; color: var(--color-muted);
}
.sc-dir__lead {
  font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5;
  color: var(--color-muted); max-width: 48ch;
}
.sc-dir__items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-dir__items li {
  position: relative; padding-left: 16px;
  font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: var(--color-text);
}
.sc-dir__items li::before {
  content: ''; position: absolute; left: 0; top: 0.66em; width: 7px; height: 1px;
  background: var(--ink-hi, var(--color-accent));
}

@media (max-width: 699px) {
  .sc-dir { min-height: 0; padding-top: clamp(124px, 34vw, 176px); }
  .sc-dir__shade {
    background:
      linear-gradient(to top,
        rgba(5, 13, 58, 0.97) 0%, rgba(5, 13, 58, 0.95) 54%,
        rgba(5, 13, 58, 0.62) 74%, rgba(5, 13, 58, 0.04) 100%);
  }
  .sc-dir__price span { max-width: 13ch; }
}

/* Имплантация лежит панорамной полосой: текст слева, перечень справа в две
   колонки, иначе полоса пустует. */
@media (min-width: 1080px) {
  .sc-dir--pano .sc-dir__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(26px, 3.4vw, 60px); align-items: start;
  }
  .sc-dir--pano .sc-dir__top { grid-column: 1 / -1; }
  .sc-dir--pano .sc-dir__lead { grid-column: 1; }
  .sc-dir--pano .sc-dir__more { grid-column: 2; grid-row: 2; }
  .sc-dir--pano .sc-dir__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; }
  .sc-dir--pano .sc-dir__price span { max-width: none; }
}

/* --- версия для слабовидящих --- */

html[data-a11y="on"] .sc-care { background: var(--color-background); border-top: 2px solid var(--color-border); }
/* В версии для слабовидящих композиция сетки не нужна и мешает: плитки
   выстраиваются в одну колонку, каждая ровно по своему содержимому. */
html[data-a11y="on"] .sc-care__head { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .sc-dirs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
html[data-a11y="on"] .sc-dir { grid-column: auto; grid-row: auto; }
html[data-a11y="on"] .sc-dir--pano .sc-dir__body { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .sc-dir--pano .sc-dir__top,
html[data-a11y="on"] .sc-dir--pano .sc-dir__lead,
html[data-a11y="on"] .sc-dir--pano .sc-dir__more { grid-column: auto; grid-row: auto; }
html[data-a11y="on"] .sc-dir--pano .sc-dir__items { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .sc-dir {
  background: var(--color-surface); border: 2px solid var(--color-border-strong);
  min-height: 0; justify-content: flex-start;
}
html[data-a11y="on"] .sc-dir__media,
html[data-a11y="on"] .sc-dir__shade { display: none; }
html[data-a11y-images="off"] .sc-dir__media { display: none; }
html[data-a11y="on"] .sc-dir__lead,
html[data-a11y="on"] .sc-dir__price span { color: var(--color-muted); }
/* Без снимка плитке не нужен ни верхний отступ под кадр (на телефоне), ни линия над
   заголовком (рамка карточки уже есть). Цена под заголовком, а не столбиком справа:
   крупный заголовок не рвётся посередине слова. На широком экране две колонки,
   панорамная «Имплантация» во всю ширину, чтобы в последнем ряду не было сироты. */
html[data-a11y="on"] .sc-care__eyebrow { color: var(--color-muted); }
/* Черта пункта списка по середине первой строки при любом межстрочном интервале. */
html[data-a11y="on"] .sc-dir__items li::before { top: calc(0.5lh - 1px); height: 2px; background: var(--color-text); }
html[data-a11y="on"] .sc-dir { padding: clamp(18px, 2vw, 28px); }
html[data-a11y="on"] .sc-dir__top { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; gap: 6px; }
html[data-a11y="on"] .sc-dir__price { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html[data-a11y="on"] .sc-dir__price span { max-width: none; margin-top: 0; }
@media (min-width: 900px) {
  html[data-a11y="on"] .sc-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-a11y="on"] .sc-dir--pano { grid-column: 1 / -1; }
}

.sc-care__foot { margin-top: clamp(16px, 2vw, 24px); max-width: 78ch; color: var(--color-muted); }

/* --- свет за курсором и пылинки в луче --- */

/* Когда курсор идёт над сеткой, по рамкам и поверхностям ближних плиток
   скользит мягкий луч: тот же свет, что на снимках, только отданный руке.
   Координаты пишет JS (initDirs) в --gx и --gy каждой плитки. */
.sc-dir::before, .sc-dir::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  transition: opacity 380ms ease;
}
.sc-dir::after {
  z-index: 1; mix-blend-mode: screen;
  background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, -40%), rgba(120, 160, 255, 0.34), rgba(120, 160, 255, 0.08) 38%, rgba(120, 160, 255, 0) 60%);
}
.sc-dir::before {
  z-index: 3; padding: 1.5px;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, -40%), #ffffff, rgba(170, 198, 255, 0.6) 30%, rgba(170, 198, 255, 0) 64%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sc-dirs.is-lit .sc-dir::before, .sc-dirs.is-lit .sc-dir::after { opacity: 1; }
html[data-a11y="on"] .sc-dir::before, html[data-a11y="on"] .sc-dir::after { display: none; }

/* Плитка крупнее и спокойнее: заголовок дисплейным кеглем, цена в стеклянной плашке. */
html:not([data-a11y="on"]) .sc-dir__title { font-size: calc(clamp(21px, 1.85vw, 27px) * var(--a11y-scale-display)); letter-spacing: -0.5px; }
html:not([data-a11y="on"]) .sc-dir__price {
  padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html:not([data-a11y="on"]) .sc-dir__price b { font-size: calc(19px * var(--a11y-scale)); }
html:not([data-a11y="on"]) .sc-dir__top { border-top: 0; padding-top: 0; align-items: end; }
html:not([data-a11y="on"]) .sc-dir__lead { color: #b8c6ee; }

/* Пылинки в луче: светлые точки медленно всплывают и мерцают, как дымка
   на предметных снимках. Только в обычной версии и без запрета анимаций. */
.sc-dust { position: absolute; z-index: -1; inset: 0 0 35% 0; pointer-events: none; overflow: hidden; }
.sc-dust span {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #dbe6ff; box-shadow: 0 0 8px rgba(157, 187, 255, 0.9); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sc-dust span { animation: sc-dust var(--t) ease-in-out infinite; animation-delay: var(--d); }
}
@keyframes sc-dust {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  18% { opacity: 0.85; }
  50% { opacity: 0.3; }
  78% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(var(--dx), -60px, 0); }
}

/* ============================================================
   10. Своя лаборатория: путь коронки в кадре
   ============================================================

   Главный аргумент сайта. Блок это тёмная карточка-кадр на светлом фоне.
   Два состояния: «Лаборатория за стеной» (стол техника) и «Лаборатория на
   стороне» (курьерский пакет, коробка, футляр). По пути бежит точка; когда она
   подъезжает к шагу, номер поднимается над линией, а описание появляется
   строкой внизу кадра, рядом счётчики поездок курьера и кругов.

   Путь, точку, луч и строку ведёт JS (initScene): один цикл
   requestAnimationFrame, только пока кадр виден. Без JS, в версии для
   слабовидящих и при отключённых анимациях кадр стоит обычной картинкой,
   а шаги обоих маршрутов идут списком под ним.
   ============================================================ */

.sc-lab { position: relative; isolation: isolate; overflow-x: clip; background: var(--color-surface-alt); }

/* Шапка в одну колонку слева: справа от неё стоит чертёж коронки из декора. */
.sc-lab__head { display: grid; gap: clamp(16px, 2vw, 22px); max-width: 700px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.sc-lab__lead { max-width: 58ch; }
.sc-lab__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; margin-top: 15px; text-wrap: balance;
}
.sc-lab__title em { font-style: normal; color: var(--color-accent); }
.sc-lab__lead { color: var(--color-muted); }

/* --- Карточка --- */

@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 44%; }

.sc-scene {
  position: relative; isolation: isolate; color: #fff; background: #02050f;
  box-shadow: 0 40px 90px rgba(11, 29, 107, 0.28), 0 0 0 1px rgba(11, 29, 107, 0.06);
}
.sc-scene__view { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #02050f; }

/* Два кадра лежат друг на друге и сменяются растворением. Уходящий кадр
   чуть уменьшается, приходящий чуть наезжает: переход читается как смена
   места, а не как слайд. */
.sc-scene__stage {
  --mx: 50%; --my: 44%; --r: clamp(110px, 14vw, 230px);
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04);
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.2, 0.7, 0.25, 1), visibility 0s linear 700ms;
}
.sc-scene__stage.is-current {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.2, 0.7, 0.25, 1), visibility 0s;
}
.sc-scene__stage.is-leaving { visibility: visible; transform: scale(0.965); }
.sc-scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-scene__img--dim { filter: brightness(0.34) saturate(0.5) contrast(1.06); }
.sc-scene__img--lit {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
    #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 68%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
    #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 68%, transparent 100%);
}
.sc-scene__beam {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle calc(var(--r) * 1.25) at var(--mx) var(--my),
    rgba(122, 170, 255, 0.2), rgba(122, 170, 255, 0) 72%);
}

/* Шаги пути: кольцо на линии и номер. Когда точка у шага, номер
   поднимается над линией, чтобы точка его не закрывала. */
.sc-scene__stations { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sc-scene__station { position: absolute; left: var(--x); top: var(--route-y); }
.sc-scene__ring {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  background: #050c2c; border: 1px solid rgba(157, 187, 255, 0.55); box-shadow: 0 0 0 4px rgba(2, 5, 15, 0.5);
  transition: background-color 280ms ease, border-color 280ms ease, box-shadow 360ms ease;
}
.sc-scene__node {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; line-height: 1; color: #cfdcff;
  transition: transform 460ms cubic-bezier(0.2, 0.9, 0.25, 1.15), background-color 280ms ease, color 280ms ease, box-shadow 360ms ease;
}
.sc-scene__station.is-lit .sc-scene__ring {
  background: rgba(61, 123, 255, 0.35); border-color: #b9cdff;
  box-shadow: 0 0 0 6px rgba(61, 123, 255, 0.22), 0 0 28px rgba(61, 123, 255, 0.75);
}
.sc-scene__station.is-lit .sc-scene__node {
  transform: translateY(-40px) scale(1.25); color: #fff; background: #3d7bff;
  box-shadow: 0 8px 22px rgba(61, 123, 255, 0.55);
}
/* От поднятого номера к кольцу идёт тонкая черта. */
.sc-scene__station::after {
  content: ""; position: absolute; left: 0; top: -27px; width: 1px; height: 14px;
  background: linear-gradient(180deg, rgba(185, 205, 255, 0), #b9cdff);
  opacity: 0; transition: opacity 300ms ease 120ms;
}
.sc-scene__station.is-lit::after { opacity: 1; }

.sc-scene__route { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; transition: opacity 400ms ease; }
.sc-scene__route.is-swapping { opacity: 0; transition-duration: 180ms; }
.sc-scene__work {
  fill: none; stroke: #9dbbff; stroke-width: 2; stroke-opacity: 0.85; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sc-scene__road, .sc-scene__loop {
  fill: none; stroke: #9dbbff; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 2 11; vector-effect: non-scaling-stroke;
}
.sc-scene__loop { stroke-width: 1.6; stroke-opacity: 0.6; stroke-dasharray: 2 9; }
@media (prefers-reduced-motion: no-preference) {
  .sc-scene__road, .sc-scene__loop { animation: sc-road 1.3s linear infinite; }
}
@keyframes sc-road { to { stroke-dashoffset: -26; } }

/* Кресло врача: начало и конец пути, квадратный знак. */
.sc-scene__chair {
  position: absolute; z-index: 3; left: var(--x); top: var(--route-y, 72%);
  transition: top 700ms cubic-bezier(0.2, 0.7, 0.25, 1);
}
.sc-scene__chair::before {
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12), 0 0 20px rgba(157, 187, 255, 0.7);
}
.sc-scene__chair b {
  position: absolute; bottom: 14px; left: -6px; white-space: nowrap;
  font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px;
  text-transform: uppercase; color: #aabdf7;
}
.sc-scene__chair--out b { left: auto; right: -6px; }
.sc-scene__chair.is-lit::before { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2), 0 0 26px rgba(157, 187, 255, 0.95); }

.sc-scene__dot {
  position: absolute; z-index: 4; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(157, 187, 255, 0.28), 0 0 26px 6px rgba(111, 150, 255, 0.8);
  transition: opacity 300ms ease;
}
.sc-scene.is-running .sc-scene__dot { opacity: 1; }

.sc-scene__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 5, 15, 0.82) 0%, rgba(2, 5, 15, 0.4) 17%, rgba(2, 5, 15, 0) 31%),
    linear-gradient(0deg, rgba(2, 5, 15, 0.88) 0%, rgba(2, 5, 15, 0.55) 13%, rgba(2, 5, 15, 0) 26%);
}
.sc-scene__hint {
  position: absolute; z-index: 4; right: clamp(16px, 2.4%, 36px); top: calc(clamp(18px, 3.2%, 36px) + 56px);
  margin: 0; color: rgba(255, 255, 255, 0.45); transition: opacity 400ms ease;
}
.sc-scene.is-live .sc-scene__hint { opacity: 0; }
.sc-scene.is-live .sc-scene__view { cursor: crosshair; }

/* --- Строка шага и счётчики --- */

.sc-scene__band { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.sc-scene__now { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sc-scene__mark {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff;
  background: #3d7bff; box-shadow: 0 10px 26px rgba(61, 123, 255, 0.45);
}
.sc-scene__mark.is-chair { background: transparent; box-shadow: none; }
.sc-scene__mark.is-chair::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #fff; box-shadow: 0 0 18px rgba(157, 187, 255, 0.8); }
.sc-scene__mark.is-road { background: transparent; box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.5); }
.sc-scene__mark.is-road::before { content: ""; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, #9dbbff 0 3px, transparent 3px 7px); }
.sc-scene__say { display: grid; gap: 4px; min-width: 0; }
.sc-scene__say b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.3px;
  font-size: calc(clamp(18px, 1.7vw, 24px) * var(--a11y-scale)); line-height: 1.15; color: #fff;
}
.sc-scene__say span { font-size: calc(clamp(13.5px, 1.05vw, 15px) * var(--a11y-scale)); line-height: 1.5; color: #c3d0f2; }
.sc-scene__now.is-changing .sc-scene__say, .sc-scene__now.is-changing .sc-scene__mark { animation: sc-say 520ms cubic-bezier(0.2, 0.7, 0.25, 1) both; }
@keyframes sc-say { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sc-scene__meter { display: flex; gap: 10px; margin: 0; flex-shrink: 0; }
.sc-scene__meter div {
  display: grid; gap: 4px; min-width: 118px; padding: 10px 14px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sc-scene__meter dt { font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; color: #9db0e6; }
.sc-scene__meter dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums;
}
.sc-scene__meter dd.is-bump { animation: sc-bump 520ms cubic-bezier(0.2, 0.9, 0.25, 1.2); color: #9dbbff; }
@keyframes sc-bump { 0% { transform: translateY(6px) scale(0.8); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.sc-scene[data-state="near"] [data-meter-round-box] { display: none; }

/* --- Переключатель и подпись --- */

.sc-scene__switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(4, 10, 44, 0.74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc-scene__opt {
  border: 0; cursor: pointer; border-radius: 999px; min-height: 42px; padding: 10px 18px;
  font-family: var(--font-body); font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2;
  color: #cbd6f5; background: transparent; transition: background-color 200ms ease, color 200ms ease;
}
.sc-scene__opt:hover { color: #fff; }
.sc-scene__opt[aria-pressed="true"] { background: #fff; color: #06102e; }
.sc-scene__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.6px; color: #fff;
  font-size: calc(clamp(24px, 2.4vw, 34px) * var(--a11y-scale-display)); line-height: 1.08;
}
.sc-scene__text { margin-top: 10px; max-width: 48ch; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: #c3d0f2; }

html:not(.no-js):not([data-a11y="on"]) .sc-scene[data-state="near"] [data-caption="far"],
html:not(.no-js):not([data-a11y="on"]) .sc-scene[data-state="far"] [data-caption="near"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__caption { animation: sc-say 520ms cubic-bezier(0.2, 0.7, 0.25, 1) both; }
}

/* Перечень шагов обоих маршрутов: для скринридера и запасного режима. */
.sc-scene__steps { display: grid; gap: 22px; }
.sc-scene__steps ol { margin: 10px 0 0; padding: 0 0 0 1.3em; list-style: decimal; display: grid; gap: 6px; }
.sc-scene__steps li { font-size: max(calc(var(--small-size) * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.sc-scene__steps b { color: var(--color-text); font-weight: 600; }
html:not(.no-js):not([data-a11y="on"]) .sc-scene__steps {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Большой экран: подпись и переключатель сверху в кадре, строка шага снизу. */
@media (min-width: 1024px) {
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__ui {
    position: absolute; z-index: 5; top: clamp(18px, 3.2%, 36px); left: clamp(18px, 2.6%, 40px);
    right: clamp(18px, 2.6%, 40px);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; pointer-events: none;
  }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__captions { max-width: 540px; pointer-events: auto; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__switch { order: 2; flex-shrink: 0; pointer-events: auto; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__band {
    position: absolute; z-index: 5; left: clamp(18px, 2.6%, 40px); right: clamp(18px, 2.6%, 40px);
    bottom: clamp(16px, 3.2%, 32px); pointer-events: none;
  }
}

/* До 1024 px всё остаётся внутри тёмной карточки: переключатель сверху,
   кадр, строка шага во всю ширину, счётчики и подпись состояния. */
@media (max-width: 1023px) {
  html:not(.no-js):not([data-a11y="on"]) .sc-scene { display: flex; flex-direction: column; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__ui { display: contents; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__switch {
    order: 1; margin: 14px 14px 12px; align-self: stretch; justify-content: space-between;
  }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__opt { flex: 1 1 50%; padding-inline: 10px; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__opt-pre { display: none; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__opt-main { display: inline-block; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__opt-main::first-letter { text-transform: uppercase; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__view { order: 2; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__band {
    order: 3; flex-direction: column; align-items: stretch; padding: 16px 16px 4px;
  }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__now { align-items: flex-start; min-height: 96px; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__meter div { flex: 1 1 50%; min-width: 0; }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__captions {
    order: 4; padding: 18px 16px 20px; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__title { font-size: calc(22px * var(--a11y-scale)); }
  html:not(.no-js):not([data-a11y="on"]) .sc-scene__text { font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); }
  .sc-scene__chair b, .sc-scene__hint { display: none; }
  .sc-scene__ring, .sc-scene__node { width: 20px; height: 20px; left: -10px; top: -10px; font-size: 10px; }
  .sc-scene__station.is-lit .sc-scene__node { transform: translateY(-28px) scale(1.2); }
  .sc-scene__station::after { top: -19px; height: 9px; }
  .sc-scene__mark { width: 38px; height: 38px; font-size: 16px; }
}

/* Без JS, в версии для слабовидящих и при отключённых анимациях кадр это
   обычная картинка: без затемнения, пути и точки. Подписи обоих состояний
   и шаги обоих маршрутов идут текстом. */
html.no-js .sc-scene, html[data-a11y="on"] .sc-scene { background: none; box-shadow: none; color: var(--color-text); }
html.no-js .sc-scene__stage[data-stage="far"], html[data-a11y="on"] .sc-scene__stage[data-stage="far"] { display: none; }
html.no-js .sc-scene__stage, html[data-a11y="on"] .sc-scene__stage { opacity: 1; visibility: visible; transform: none; }
html.no-js .sc-scene__img--dim, html[data-a11y="on"] .sc-scene__img--dim,
html.no-js .sc-scene__route, html.no-js .sc-scene__chair, html.no-js .sc-scene__dot,
html.no-js .sc-scene__shade, html.no-js .sc-scene__hint, html.no-js .sc-scene__stations,
html.no-js .sc-scene__band, html.no-js .sc-scene__switch,
html[data-a11y="on"] .sc-scene__chair, html[data-a11y="on"] .sc-scene__hint,
html[data-a11y="on"] .sc-scene__stations, html[data-a11y="on"] .sc-scene__switch { display: none; }
html.no-js .sc-scene__img--lit, html[data-a11y="on"] .sc-scene__img--lit { -webkit-mask-image: none; mask-image: none; }
html.no-js .sc-scene__ui, html[data-a11y="on"] .sc-scene__ui { display: block; }
html.no-js .sc-scene__captions, html[data-a11y="on"] .sc-scene__captions {
  display: grid; gap: 22px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
html.no-js .sc-scene__title, html[data-a11y="on"] .sc-scene__title,
html.no-js .sc-scene__text, html[data-a11y="on"] .sc-scene__text { color: var(--color-text); }
html.no-js .sc-scene__steps, html[data-a11y="on"] .sc-scene__steps {
  margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
html[data-a11y="on"] .sc-scene__view { border: 2px solid var(--color-border-strong); background: var(--color-surface); }
/* Изображения выключены: вместо тёмного кадра рамка с подписью, как у остальных снимков. */
html[data-a11y-images="off"] .sc-scene__view { aspect-ratio: auto; }
html[data-a11y-images="off"] .sc-scene__stage { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-scene__img--dim, .sc-scene__beam { display: none; }
  .sc-scene__img--lit { -webkit-mask-image: none; mask-image: none; }
  .sc-scene__hint { display: none; }
  .sc-scene__stage { transition: none; transform: none; }
}


/* ============================================================
   11. Этапы лечения: один зуб, пять шагов
   ============================================================

   Тёмный блок. Сцена прилипает к шапке, прокрутка ведёт историю одного зуба
   (36, тот же номер, что в формуле первого экрана): зуб болит, сканер
   проявляет снимок, на снимке появляется план, каналы заполняются белым,
   старая коронка уступает место культе и новая коронка садится на место.
   Скроллджекинга нет, страница прокручивается обычно.

   Состояние сцены задают переменные, которые пишет initSteps: --pain, --scan,
   --scanline, --xray, --callouts, --fill, --caries, --prep, --seat, --shine.
   Слева список шагов: активный раскрыт, пройденные отмечены, линия прогресса
   заполняется вместе с прокруткой. Щелчок по шагу доводит страницу до него.

   Без JS, в версии для слабовидящих и при отключённых анимациях сцены нет,
   все пять шагов раскрыты обычным списком.
   ============================================================ */

.sc-steps { position: relative; isolation: isolate; overflow-x: clip; padding-top: var(--section-space); background: var(--color-background); }
html:not([data-a11y="on"]) .sc-steps {
  --ink-hi: #6f96ff; --field-deep: #040a2c;
  --color-text: #ffffff; --color-muted: #9db0e6;
  --color-border: rgba(255, 255, 255, 0.16); --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-focus: #ffd400;
  color: #fff; background: var(--field-deep);
}
.sc-steps__beam {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 76% 12%, rgba(90, 150, 255, 0.26), rgba(90, 150, 255, 0) 70%),
    radial-gradient(46% 34% at 6% 0%, rgba(22, 56, 186, 0.5), rgba(22, 56, 186, 0) 72%);
}

.sc-steps__headrow { display: grid; gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 940px) {
  .sc-steps__headrow { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(30px, 4vw, 68px); align-items: end; }
}
.sc-steps__eyebrow { display: block; }
html:not([data-a11y="on"]) .sc-steps__eyebrow { color: #7d95dd; }
.sc-steps__h {
  margin-top: 13px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; text-wrap: balance;
}
.sc-steps__h em { font-style: normal; color: var(--color-accent); }
html:not([data-a11y="on"]) .sc-steps__h em { color: var(--ink-hi); }
.sc-steps__lead { color: var(--color-muted); }

/* --- дорожка и прилипающая сцена --- */

.sc-steps__track { position: relative; }
.sc-steps__pin { display: grid; gap: 28px; padding-block: clamp(26px, 3.4vw, 44px) var(--section-space); }
.sc-steps.is-live .sc-steps__track { height: calc(100svh + var(--count) * 66svh); }
.sc-steps.is-live .sc-steps__pin {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding-block: 18px;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(24px, 4vw, 70px);
}

/* --- список шагов --- */

.sc-steps__list { position: relative; margin: 0; padding: 0; list-style: none; }
.sc-steps__item { position: relative; }
/* Линия между номерами: от центра номера до центра следующего номера. У последнего
   шага линии нет, поэтому после «05» ничего не тянется вниз. Заливка идёт от шага
   к шагу вместе с прокруткой (--fill у каждого шага пишет JS). */
.sc-steps.is-live .sc-steps__item:not(:last-child)::before,
.sc-steps.is-live .sc-steps__item:not(:last-child)::after {
  content: ""; position: absolute; left: 21.5px; top: 30px; bottom: -30px; width: 1px; pointer-events: none;
}
.sc-steps.is-live .sc-steps__item:not(:last-child)::before { background: rgba(255, 255, 255, 0.14); }
.sc-steps.is-live .sc-steps__item:not(:last-child)::after {
  background: linear-gradient(180deg, #9dbbff, #3d7bff); box-shadow: 0 0 12px rgba(61, 123, 255, 0.85);
  transform-origin: 50% 0; transform: scaleY(var(--fill, 0));
}
.sc-steps__head {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 8px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.sc-steps__num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
  color: var(--color-muted); background: var(--color-surface, #07103a);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition: background-color 320ms ease, color 320ms ease, box-shadow 420ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
html:not([data-a11y="on"]) .sc-steps__num { background: #07103a; box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.35); }
.sc-steps__title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.3px;
  font-size: calc(clamp(18px, 1.55vw, 22px) * var(--a11y-scale)); line-height: 1.2;
  transition: color 320ms ease;
}
.sc-steps__body { display: grid; grid-template-rows: 1fr; padding-left: 62px; }
.sc-steps__body > div { overflow: hidden; }
.sc-steps__body p {
  padding: 2px 0 14px; max-width: 44ch; color: var(--color-muted);
  font-size: max(calc(15.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.6;
}
html:not([data-a11y="on"]) .sc-steps__body p { color: #c3d0f2; }
.sc-steps__tel { color: var(--color-text); font-weight: 600; white-space: nowrap; text-decoration-color: rgba(255, 255, 255, 0.4); }
.sc-steps__cta { margin-top: 18px; }

.sc-steps.is-live .sc-steps__title { color: rgba(255, 255, 255, 0.48); }
.sc-steps.is-live .sc-steps__head:hover .sc-steps__title { color: rgba(255, 255, 255, 0.8); }
.sc-steps.is-live .sc-steps__item.is-active .sc-steps__title { color: #fff; }
.sc-steps.is-live .sc-steps__item.is-done .sc-steps__num { color: #fff; background: #0d2280; box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.6); }
.sc-steps.is-live .sc-steps__item.is-active .sc-steps__num {
  color: #fff; background: var(--color-accent); transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(61, 123, 255, 0.18), 0 0 28px rgba(61, 123, 255, 0.75);
}
.sc-steps.is-live .sc-steps__body { grid-template-rows: 0fr; transition: grid-template-rows 560ms cubic-bezier(0.2, 0.7, 0.25, 1); }
.sc-steps.is-live .sc-steps__item.is-active .sc-steps__body { grid-template-rows: 1fr; }
.sc-steps.is-live .sc-steps__cta { margin-left: 62px; }

/* --- сцена --- */

/* Сцена квадратная. Зуб стоит по центру; когда нужен снимок, зуб уходит влево
   и в тень, справа выезжает плёнка. Состояние задают переменные, которые пишет
   initSteps: --pain, --film, --scan, --scanline, --plan, --treated,
   --prep, --seat, --gleam, --final. */
.sc-steps__scene { display: none; }
.sc-steps.is-live .sc-steps__scene {
  --pain: 1; --film: 0; --scan: 0; --scanline: 0; --plan: 0; --treated: 0;
  --prep: 0; --seat: 0; --gleam: 0; --final: 0;
  display: block; position: relative; isolation: isolate; aspect-ratio: 1;
  width: min(100%, calc(100svh - var(--header-h) - 40px)); justify-self: center;
}
.sc-steps__aura { position: absolute; inset: -6%; z-index: -1; border-radius: 50%; pointer-events: none; }
.sc-steps__aura--warm { background: radial-gradient(38% 36% at 50% 30%, rgba(255, 110, 70, 0.36), rgba(255, 110, 70, 0) 100%); opacity: var(--pain); }
.sc-steps__aura--cool { background: radial-gradient(44% 48% at 66% 44%, rgba(70, 130, 255, 0.4), rgba(70, 130, 255, 0) 100%); opacity: var(--film); }
.sc-steps__aura--clean { background: radial-gradient(40% 44% at 50% 40%, rgba(200, 220, 255, 0.34), rgba(200, 220, 255, 0) 100%); opacity: var(--final); }

/* Зуб. Кадры лежат друг на друге и растворяются. */
.sc-steps__tooth {
  position: absolute; top: 3%; left: 50%; height: 94%; aspect-ratio: 2 / 3;
  translate: calc(-50% - var(--film) * 36%) calc(var(--final) * -7%);
  scale: calc(1 - var(--film) * 0.12 - var(--final) * 0.1);
  /* Пока на экране снимок, зуб уходит в тень, но остаётся плотным:
     полупрозрачный зуб выглядел бы призраком. */
  filter: drop-shadow(0 28px 38px rgba(0, 0, 0, 0.45))
    brightness(calc(1 - var(--film) * 0.62)) saturate(calc(1 - var(--film) * 0.5));
}
.sc-steps__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Корни общие для всех состояний и видны всегда. Культя лежит под коронкой
   с кариесом и проявляется первой, пока её не видно; потом коронка с кариесом
   гаснет и открывает культю. Так ни один участок зуба не становится
   полупрозрачным и сквозь зуб не проступает фон. */
.sc-steps__img--core { opacity: min(1, calc(var(--prep) * 2)); }
.sc-steps__img--caries { opacity: calc(1 - max(0, calc(var(--prep) * 2 - 1))); }
/* Корень под краем новой коронки проявляется, когда коронка почти села:
   поверх непрозрачной культи, поэтому без просвета. */
.sc-steps__img--base { opacity: clamp(0, calc((var(--seat) - 0.88) * 8.4), 1); }
/* Новая коронка опускается и садится. Тень под ней тает к посадке, чтобы
   в момент касания ничего не менялось скачком. */
.sc-steps__img--crown {
  opacity: min(1, calc(var(--seat) * 6));
  translate: 0 calc((1 - var(--seat)) * -24%);
  filter: drop-shadow(0 calc((1 - var(--seat)) * 34px) calc(4px + (1 - var(--seat)) * 18px) rgba(0, 0, 0, calc((1 - var(--seat)) * 0.55)));
  will-change: translate, filter;
}
/* Блик проходит по новой коронке. Маска повторяет её силуэт. */
.sc-steps__gleam {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(225, 235, 255, 0.75) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%; background-position: calc(135% - var(--gleam) * 170%) 0;
  -webkit-mask-image: url(img/steps-crown.webp); mask-image: url(img/steps-crown.webp);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: calc(var(--gleam) * (1 - var(--gleam)) * 4);
}
/* Боль: тёплое свечение пульсирует у кариеса. */
.sc-steps__pain {
  position: absolute; left: var(--px); top: var(--py); width: 70%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  background: radial-gradient(closest-side, rgba(255, 140, 96, 0.55), rgba(255, 92, 60, 0.18) 45%, rgba(255, 92, 60, 0) 72%);
  opacity: var(--pain);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-steps__pain { animation: sc-pain 1.8s ease-in-out infinite; }
}
@keyframes sc-pain { 0%, 100% { scale: 0.78; } 45% { scale: 1.04; } }
.sc-steps__painlabel {
  position: absolute; z-index: 3; left: 50%; top: 3%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); white-space: nowrap; color: #fff;
  background: rgba(40, 12, 8, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 140, 96, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: var(--pain);
}
.sc-steps__painlabel::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff8c60; box-shadow: 0 0 10px #ff8c60;
}

/* Плёнка снимка выезжает справа, как снимок на негатоскопе. */
.sc-steps__film {
  position: absolute; right: 3%; top: 8%; width: 44%; aspect-ratio: 2 / 3; border-radius: 6px;
  background: #000;
  /* Рамка плёнки нарисована тенью, чтобы координаты снимка и выносок совпадали. */
  box-shadow: 0 0 0 7px rgba(14, 24, 66, 0.96), 0 0 0 8px rgba(157, 187, 255, 0.3),
    0 34px 60px rgba(0, 0, 0, 0.55), 0 0 70px rgba(61, 123, 255, 0.25);
  opacity: var(--film);
  translate: calc((1 - var(--film)) * 34%) 0;
  rotate: calc(2deg - var(--film) * 5deg);
}
.sc-steps__filmlabel { position: absolute; left: 0; top: -30px; color: #9db0e6; white-space: nowrap; }
.sc-steps__filmimg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #000; }
.sc-steps__xray { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-steps__xray--before { clip-path: inset(0 0 calc((1 - var(--scan)) * 100%) 0); }
.sc-steps__xray--after { clip-path: inset(calc((1 - var(--treated)) * 100%) 0 0 0); }
.sc-steps__scan {
  position: absolute; left: -2%; right: -2%; top: calc(var(--scan) * 100%); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(207, 224, 255, 0), #eef4ff 50%, rgba(207, 224, 255, 0));
  box-shadow: 0 0 18px 5px rgba(111, 150, 255, 0.8); opacity: var(--scanline);
}
/* Та же полоса снизу вверх, когда проявляется снимок после лечения. */
.sc-steps__filmimg::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: calc((1 - var(--treated)) * 100%); height: 2px;
  background: linear-gradient(90deg, rgba(207, 224, 255, 0), #fff 50%, rgba(207, 224, 255, 0));
  box-shadow: 0 0 18px 5px rgba(160, 196, 255, 0.85);
  opacity: calc(var(--treated) * (1 - var(--treated)) * 4);
}

/* Пункты плана на снимке: точка, линия, плашка. Появляются по очереди (--k).
   Когда пункт выполнен, номер сменяется галочкой (класс is-done ставит JS). */
.sc-steps__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.sc-steps__lines path {
  fill: none; stroke: rgba(190, 210, 255, 0.85); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--plan) * 3 - var(--k), 1));
}
.sc-steps__dot {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 9px; height: 9px; translate: -50% -50%;
  border-radius: 50%; background: #e3ecff; box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.35), 0 0 12px rgba(157, 187, 255, 0.95);
  opacity: clamp(0, calc(var(--plan) * 3 - var(--k)), 1);
}
.sc-steps__callout {
  position: absolute; left: var(--lx); top: var(--ly); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 13px 5px 5px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #fff;
  background: rgba(4, 10, 44, 0.92); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4);
  translate: 0 -50%;
  opacity: clamp(0, calc((var(--plan) * 3 - var(--k) - 0.3) / 0.7), 1);
  transition: box-shadow 300ms ease;
}
.sc-steps__callout--left { translate: -100% -50%; }
.sc-steps__callout b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #3d7bff; font-family: var(--font-display); font-size: 11px; color: #fff;
  transition: background-color 300ms ease;
}
.sc-steps__callout.is-done { box-shadow: inset 0 0 0 1px rgba(80, 210, 150, 0.6), 0 10px 24px rgba(0, 0, 0, 0.4); }
.sc-steps__callout.is-done b { font-size: 0; background: #17a86d; }
.sc-steps__callout.is-done b::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg;
}

/* Итог: зуб снова целый, все пункты плана выполнены. */
.sc-steps__done {
  position: absolute; left: 50%; bottom: 1%; translate: -50% calc((1 - var(--final)) * 12px); z-index: 3;
  display: grid; justify-items: center; gap: 4px; text-align: center; width: min(92%, 420px);
  opacity: var(--final); pointer-events: none;
}
.sc-steps__done b { font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(22px, 2vw, 28px) * var(--a11y-scale)); letter-spacing: -0.5px; color: #fff; }
.sc-steps__done span { font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: #c3d0f2; }

/* --- телефон и планшет: сцена сверху, шаги под ней --- */

@media (max-width: 899px) {
  .sc-steps.is-live .sc-steps__track { height: calc(100svh + var(--count) * 62svh); }
  .sc-steps.is-live .sc-steps__pin {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    align-content: start; gap: 8px; padding-block: 10px 12px;
  }
  .sc-steps.is-live .sc-steps__scene { order: -1; width: min(100%, 42svh); }
  .sc-steps__head { gap: 14px; padding: 5px 0; }
  .sc-steps__num { width: 36px; height: 36px; font-size: 12px; }
  .sc-steps.is-live .sc-steps__item:not(:last-child)::before,
  .sc-steps.is-live .sc-steps__item:not(:last-child)::after { left: 17.5px; top: 23px; bottom: -23px; }
  .sc-steps__title { font-size: calc(16.5px * var(--a11y-scale)); }
  .sc-steps__body { padding-left: 50px; }
  .sc-steps__body p { font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); padding-bottom: 8px; }
  .sc-steps.is-live .sc-steps__cta { display: none; }
  .sc-steps__callout { font-size: 11px; padding: 3px 9px 3px 3px; gap: 5px; }
  .sc-steps__callout b { width: 17px; height: 17px; font-size: 9.5px; }
  .sc-steps__filmlabel { font-size: 9px; top: -17px; left: 6px; }
  .sc-steps__film { padding: 5px; }
  .sc-steps__painlabel { font-size: 11.5px; padding: 5px 11px 5px 8px; }
  .sc-steps__done b { font-size: 19px; }
  .sc-steps__done span { font-size: 12.5px; }
}

/* Без живой сцены заголовок шага не кнопка (initSteps заменяет её на div). */
div.sc-steps__head { cursor: auto; }

/* Версия для слабовидящих: обычный список на теме пользователя. Номер в круглой рамке
   растёт вместе со шрифтом; на широком экране шаги в две колонки (01–03 и 04–05),
   иначе узкий столбец текста оставляет пустой половину блока. */
html[data-a11y="on"] .sc-steps { border-top: 2px solid var(--color-border); }
html[data-a11y="on"] .sc-steps__num {
  width: calc(44px * var(--a11y-scale)); height: calc(44px * var(--a11y-scale)); font-size: var(--a11y-floor);
  background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong);
}
html[data-a11y="on"] .sc-steps__title { font-size: calc(20px * var(--a11y-scale)); }
html[data-a11y="on"] .sc-steps__body { padding-left: calc(44px * var(--a11y-scale) + 18px); }
html[data-a11y="on"] .sc-steps__body p { max-width: 62ch; color: var(--color-text); }
html[data-a11y="on"] .sc-steps__tel { text-decoration-color: currentColor; }
@media (max-width: 479px) { html[data-a11y="on"] .sc-steps__body { padding-left: 0; } }
@media (min-width: 1100px) {
  html[data-a11y="on"] .sc-steps__list { column-count: 2; column-gap: clamp(32px, 4vw, 64px); }
  html[data-a11y="on"] .sc-steps__item { break-inside: avoid; }
}


/* ============================================================
   12. Врачи: карточка на человека
   ============================================================

   Светлый блок, четыре тёмные карточки. Вся информация о человеке внутри
   карточки: портрет, должность, имя, «о себе», стаж и год прихода
   в клинику, образование и документы лентой с годами, направления,
   кнопка записи. Тёмный фон портрета перетекает в фон карточки, имя стоит
   на нижней части портрета.

   Движение: при появлении портреты «включаются», как свет в студии,
   и стаж отсчитывается от нуля. Под мышью карточка чуть наклоняется
   (не больше 3–4 градусов), по ней скользит блик, портрет смещается
   навстречу. JS пишет --tx, --ty (от -1 до 1) и --mx, --my. На сенсорных
   экранах наклона, блика и смещения нет: наводить там нечем, а лишние
   слои только нагружают телефон.
   ============================================================ */

.sc-doctors {
  position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--section-space);
  background: linear-gradient(180deg, #f5f8ff 0%, var(--color-surface-alt) 60%, #eef3fd 100%);
}
html[data-a11y="on"] .sc-doctors { background: var(--color-background); }

.sc-doctors__head { display: grid; gap: clamp(16px, 2.2vw, 24px); margin-bottom: clamp(34px, 4vw, 56px); }
@media (min-width: 980px) {
  .sc-doctors__head { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); align-items: end; gap: clamp(34px, 5vw, 82px); }
}
.sc-doctors__title {
  margin-top: 15px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; text-wrap: balance;
}
.sc-doctors__title em { font-style: normal; color: var(--color-accent); }
.sc-doctors__lead { color: var(--color-muted); max-width: 54ch; }

/* --- лучи на фоне --- */
.sc-beams { position: absolute; inset: 0; overflow: hidden; }
.sc-beams span {
  position: absolute; top: -30%; left: var(--x); width: var(--w); height: 160%; rotate: 24deg;
  background: linear-gradient(90deg, rgba(61, 123, 255, 0), rgba(61, 123, 255, var(--a)) 50%, rgba(61, 123, 255, 0));
  filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-beams span { animation: sc-beam-sway var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
}
@keyframes sc-beam-sway { from { translate: -40px 0; opacity: 0.55; } to { translate: 40px 0; opacity: 1; } }

/* --- ряд карточек --- */
/* Четыре человека. Широкий экран: четыре в ряд. Ноутбук: по два, карточка
   горизонтальная. Планшет: по два, карточки вертикальные. Телефон: лентой.
   Карточка это сетка из шести строк: портрет, имя, цифры, образование,
   направления, кнопка. В рядах по несколько вертикальных карточек строки
   общие (subgrid): цифры, списки и кнопки стоят на одной высоте у всех. */
.sc-docs__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 26px); row-gap: 0;
  grid-template-rows: auto auto auto auto 1fr auto;
  margin: 0; padding: 0; list-style: none;
}
.sc-dc { display: grid; grid-row: span 6; grid-template-rows: subgrid; min-width: 0; }

.sc-dc__in {
  --tx: 0; --ty: 0; --mx: 50%; --my: 30%;
  position: relative; isolation: isolate; display: grid; grid-row: span 6; grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
  overflow: hidden; border-radius: 22px; color: #fff; background: #050c30;
  box-shadow: 0 46px 70px -36px rgba(5, 13, 58, 0.62), 0 18px 36px -22px rgba(27, 90, 240, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.sc-dc__in::before {
  content: ""; position: absolute; z-index: 5; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(157, 187, 255, 0), rgba(190, 212, 255, 0.9), rgba(157, 187, 255, 0));
  opacity: 0.45; transition: opacity 500ms ease;
}
.sc-dc__in::after {
  content: ""; position: absolute; z-index: -1; inset: auto -20% -30% -20%; height: 60%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 90, 230, 0.22), rgba(40, 90, 230, 0));
}

.sc-dc__photo { position: relative; margin: 0; aspect-ratio: 1 / 1.04; overflow: hidden; background: #06102e; flex-shrink: 0; }
.sc-dc__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; display: block;
  transform: scale(1.06); transition: filter 1600ms ease;
}
.sc-dc__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 45% at 78% 4%, rgba(160, 196, 255, 0.22), rgba(160, 196, 255, 0) 70%),
    linear-gradient(180deg, rgba(5, 12, 48, 0) 46%, rgba(5, 12, 48, 0.62) 70%, #050c30 98%);
}
.sc-dc__photo::before {
  content: ""; position: absolute; z-index: 1; inset: -10% -70%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(200, 220, 255, 0) 42%, rgba(210, 226, 255, 0.34) 50%, rgba(200, 220, 255, 0) 58%);
}

/* Имя стоит на нижней части портрета. */
.sc-dc__head { position: relative; z-index: 2; margin-top: -96px; padding: 0 22px; min-width: 0; }

/* Плашка с должностью над специальностью, на затемнённой части портрета
   (на уровне груди). Лицо она не закрывает ни на одном экране; в угол снимка
   её не ставить: там она ложилась на голову директора (26.09.2026). Стоит
   вне потока, поэтому имена у всех карточек на одной высоте. */
.sc-dc__tag {
  position: absolute; left: 22px; bottom: calc(100% + 12px); max-width: calc(100% - 44px);
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0; padding: 6px 13px 6px 10px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.3; letter-spacing: 1.1px; text-transform: uppercase; color: #fff;
  background: rgba(10, 24, 78, 0.78); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.32), 0 10px 22px -10px rgba(0, 0, 0, 0.6);
}
.sc-dc__tag::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #7fa4ff; box-shadow: 0 0 10px #6f96ff; }
.sc-dc__eyebrow { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #8fb0ff; }
/* Фамилия крупно, имя и отчество строкой ниже. */
.sc-dc__name {
  margin-top: 6px; font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: calc(clamp(25px, 2vw, 31px) * var(--a11y-scale-display)); line-height: 1.04; letter-spacing: -0.8px;
}
.sc-dc__name span {
  display: block; margin-top: 5px; font-family: var(--font-body); font-weight: 500; letter-spacing: 0;
  font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.3; color: #c9d5f5;
}
.sc-dc__about { margin-top: 12px; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: #b3c3ec; }

.sc-dc__stats {
  position: relative; z-index: 2; align-self: start;
  display: grid; grid-template-columns: 1fr 1fr; margin: 20px 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sc-dc__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 15px 0 14px; min-width: 0; }
.sc-dc__stats > div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.sc-dc__stats dt { font-weight: 600; font-size: max(calc(10px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; color: #8ea2d8; }
.sc-dc__stats dd { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.sc-dc__stats b {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(32px, 2.6vw, 40px) * var(--a11y-scale-display)); line-height: 0.95;
  letter-spacing: -1.4px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #b9cdff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sc-dc__pre, .sc-dc__unit { font-family: var(--font-display); font-weight: 600; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #9dbbff; }

.sc-dc__block { position: relative; z-index: 2; margin: 18px 22px 0; min-width: 0; }
.sc-dc__label { font-weight: 600; font-size: max(calc(10px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #8ea2d8; }
.sc-dc__timeline { margin: 6px 0 0; padding: 0; list-style: none; }
.sc-dc__timeline li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center;
  padding: 7px 0; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.4; color: #dce5ff;
}
.sc-dc__timeline li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sc-dc__mark { font-family: var(--font-display); font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #9dbbff; font-variant-numeric: tabular-nums; }
.sc-dc__mark--icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(61, 123, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.28); }
.sc-dc__mark--icon svg { width: 17px; height: 17px; fill: none; stroke: #b9cdff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sc-dc__areas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.sc-dc__areas li {
  padding: 5px 11px; border-radius: 999px; font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #dce5ff;
  background: rgba(61, 123, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.26);
}

.sc-dc__foot { position: relative; z-index: 2; padding: 22px; }
.sc-dc__schedule { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #9db0e6; }
.sc-dc__schedule svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: #8fb0ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-dc__schedule b { font-weight: 600; color: #ffffff; }
html[data-a11y="on"] .sc-dc__schedule, html[data-a11y="on"] .sc-dc__schedule b { color: var(--color-text); }
html[data-a11y="on"] .sc-dc__schedule svg { stroke: var(--color-text); }
.sc-dc__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 50px; padding: 12px 14px 12px 18px; border-radius: 14px; text-decoration: none;
  font-weight: 600; font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); color: #06102e; background: #fff;
  transition: background-color 220ms ease, color 220ms ease;
}
.sc-dc__cta svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 260ms ease; }
.sc-dc__cta:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; }

/* Наклон, блик и смещение портрета только под мышью. На сенсорных экранах
   блика в разметке как будто нет (display: none), карточка без 3D-слоя. */
.sc-dc__shine { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sc-dc__in {
    transform: perspective(1200px) rotateX(calc(var(--ty) * -3deg)) rotateY(calc(var(--tx) * 4deg));
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 500ms ease;
  }
  .sc-dc__in.is-tilt { transition: transform 140ms linear, box-shadow 500ms ease; }
  .sc-dc__in:hover { box-shadow: 0 56px 80px -36px rgba(5, 13, 58, 0.7), 0 22px 44px -20px rgba(27, 90, 240, 0.5), inset 0 0 0 1px rgba(157, 187, 255, 0.2); }
  .sc-dc__in.is-tilt::before { opacity: 1; }
  .sc-dc__photo img {
    transform: translate3d(calc(var(--tx) * -9px), calc(var(--ty) * -7px), 0) scale(1.06);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.25, 1), filter 1600ms ease;
  }
  .sc-dc__in.is-tilt .sc-dc__photo img { transition: transform 160ms linear, filter 1600ms ease; }
  .sc-dc__shine {
    display: block; position: absolute; z-index: 4; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(460px circle at var(--mx) var(--my), rgba(190, 212, 255, 0.16), rgba(190, 212, 255, 0) 46%);
    transition: opacity 500ms ease;
  }
  .sc-dc__in.is-tilt .sc-dc__shine { opacity: 1; }
  .sc-dc__cta:hover { background: #e3ebff; }
  .sc-dc__cta:hover svg { translate: 4px 0; }
}

/* Ноутбук: по две карточки в ряд, карточка горизонтальная. Портрет слева
   во всю высоту, его край растворяется в фоне карточки. */
@media (min-width: 1100px) and (max-width: 1279px) {
  /* Две пары по пять строк (имя, цифры, образование, направления, кнопка)
     с зазором между парами; портрет занимает всю высоту слева. */
  .sc-docs__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr auto 26px auto auto auto 1fr auto;
  }
  .sc-dc { grid-row: span 5; }
  .sc-dc:nth-child(n + 3) { grid-row: 7 / span 5; }
  .sc-dc__in { grid-row: span 5; grid-template-columns: 40% minmax(0, 1fr); }
  .sc-dc__photo { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; }
  .sc-dc__photo img { object-position: 50% 12%; }
  .sc-dc__photo::after {
    background:
      radial-gradient(80% 40% at 70% 4%, rgba(160, 196, 255, 0.2), rgba(160, 196, 255, 0) 70%),
      linear-gradient(90deg, rgba(5, 12, 48, 0) 36%, rgba(5, 12, 48, 0.55) 66%, rgba(5, 12, 48, 0.92) 88%, #050c30 100%);
  }
  .sc-dc__head, .sc-dc__stats, .sc-dc__block, .sc-dc__foot { grid-column: 2; }
  .sc-dc__head { margin-top: 0; padding: 26px 26px 0 10px; }
  .sc-dc__tag { position: static; max-width: 100%; margin-bottom: 12px; }
  .sc-dc__stats, .sc-dc__block { margin-left: 10px; margin-right: 26px; }
  .sc-dc__foot { padding: 20px 26px 24px 10px; }
}
/* Планшет: по две вертикальные карточки, строки общие в каждой паре. */
@media (min-width: 700px) and (max-width: 1099px) {
  .sc-docs__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr auto 28px auto auto auto auto 1fr auto;
  }
  .sc-dc:nth-child(n + 3) { grid-row: 8 / span 6; }
}

/* Появление: карточки поднимаются по очереди, портреты «включаются». */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .sc-docs:not(.is-in) .sc-dc { opacity: 0; transform: translateY(40px); }
  html:not(.no-js):not([data-a11y="on"]) .sc-docs:not(.is-in) .sc-dc__photo img { filter: brightness(0.16) saturate(0.4); }
  html:not(.no-js):not([data-a11y="on"]) .sc-docs.is-in .sc-dc {
    opacity: 1; transform: none;
    transition: opacity 800ms ease calc(var(--i) * 130ms), transform 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--i) * 130ms);
  }
  html:not(.no-js):not([data-a11y="on"]) .sc-docs.is-in .sc-dc__photo img { transition-delay: 0ms, calc(350ms + var(--i) * 130ms); }
  html:not(.no-js):not([data-a11y="on"]) .sc-docs.is-in .sc-dc__photo::before {
    animation: sc-dc-sweep 1600ms cubic-bezier(0.45, 0, 0.3, 1) calc(400ms + var(--i) * 130ms) both;
  }
}
@keyframes sc-dc-sweep {
  0% { opacity: 0; transform: translateX(-45%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}

/* Телефон: карточки листаются вбок, следующая выглядывает из-за края.
   Строки общие и здесь: лента это одна строка сетки из четырёх колонок. */
@media (max-width: 699px) {
  .sc-docs__row {
    grid-template-columns: repeat(4, min(84%, 340px));
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1); padding: 12px var(--page-gutter) 28px; scroll-padding-inline: var(--page-gutter);
  }
  .sc-docs__row::-webkit-scrollbar { display: none; }
  .sc-dc { scroll-snap-align: start; }
}

/* Версия для слабовидящих: обычные карточки на теме пользователя. */
/* Четыре карточки: четыре колонки только на широком экране и обычном шрифте, иначе две
   или одна, чтобы крупный текст не сжимался в узкие столбики и не было сироты. */
html[data-a11y="on"] .sc-docs__row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; overflow: visible; }
@media (min-width: 700px) { html[data-a11y="on"] .sc-docs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { html[data-a11y-size="md"] .sc-docs__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-a11y="on"] .sc-dc__tag::before { background: currentColor; }
/* Очень узкий экран: значок или год над строкой, текст на всю ширину карточки. */
@media (max-width: 479px) {
  html[data-a11y="on"] .sc-dc .sc-dc__timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 699px) {
  html[data-a11y="on"] .sc-dc__stats { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y="on"] .sc-dc__stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border-strong); }
}
/* Колонка значка или года по ширине года «2018» при текущем шрифте и интервале, год не делится. */
html[data-a11y="on"] .sc-dc__timeline li { grid-template-columns: max(calc(30px * var(--a11y-scale)), calc(3.1em + 4em * var(--a11y-ls))) minmax(0, 1fr); }
html[data-a11y="on"] .sc-dc__mark { white-space: nowrap; overflow-wrap: normal; }
html[data-a11y="on"] .sc-dc__mark--icon { width: calc(30px * var(--a11y-scale)); height: calc(30px * var(--a11y-scale)); }
html[data-a11y="on"] .sc-dc__mark--icon svg { width: calc(17px * var(--a11y-scale)); height: calc(17px * var(--a11y-scale)); }
html[data-a11y="on"] .sc-dc { display: block; grid-row: auto; }
html[data-a11y="on"] .sc-dc__in { height: 100%; grid-template-rows: auto auto auto auto 1fr auto; }
html[data-a11y="on"] .sc-dc__in { transform: none; background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong); border-radius: 12px; }
html[data-a11y="on"] .sc-dc__in::before, html[data-a11y="on"] .sc-dc__in::after { display: none; }
html[data-a11y="on"]:not([data-a11y-images="off"]) .sc-dc__photo::after { display: none; }
/* Без картинок на месте портрета описание снимка, а не тёмный квадрат. */
html[data-a11y="on"] .sc-dc__photo { background: var(--color-surface); }
html[data-a11y-images="off"] .sc-dc__photo { aspect-ratio: auto; }
html[data-a11y-images="off"] .sc-dc__photo::after { position: static; inset: auto; }
html[data-a11y="on"] .sc-dc__head { margin-top: 0; padding-top: 16px; }
html[data-a11y="on"] .sc-dc__name, html[data-a11y="on"] .sc-dc__name span, html[data-a11y="on"] .sc-dc__about,
html[data-a11y="on"] .sc-dc__timeline li, html[data-a11y="on"] .sc-dc__areas li, html[data-a11y="on"] .sc-dc__eyebrow,
html[data-a11y="on"] .sc-dc__label, html[data-a11y="on"] .sc-dc__stats dt, html[data-a11y="on"] .sc-dc__mark,
html[data-a11y="on"] .sc-dc__pre, html[data-a11y="on"] .sc-dc__unit { color: var(--color-text); }
html[data-a11y="on"] .sc-dc__stats b { background: none; color: var(--color-text); -webkit-background-clip: border-box; background-clip: border-box; }
html[data-a11y="on"] .sc-dc__stats, html[data-a11y="on"] .sc-dc__stats > div + div, html[data-a11y="on"] .sc-dc__timeline li + li { border-color: var(--color-border-strong); }
html[data-a11y="on"] .sc-dc__tag { position: static; max-width: 100%; margin-bottom: 10px; background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong); box-shadow: none; }
html[data-a11y="on"] .sc-dc__areas li { background: none; box-shadow: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-dc__mark--icon { background: none; box-shadow: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-dc__mark--icon svg { stroke: var(--color-text); }
html[data-a11y="on"] .sc-dc__cta { background: var(--color-accent); color: var(--color-accent-ink); }

/* ============================================================
   13. О клинике: синий фасад
   ============================================================

   Тёмный блок. Главное в нём настоящий фасад клиники: синий пристрой
   с вывеской «Стоматология Смайл Клиник» (кадр по снимку из 2ГИС,
   добавлены вечерний свет и мокрый асфальт). Заголовок «Ищите синий
   фасад» стоит в кадре слева, снимок растворяется в тёмном фоне кадра,
   внизу полоса фактов. Под кадром три карточки интерьера.

   Движение: когда кадр появляется, клиника «открывается»: по очереди
   загораются окна, отражения на асфальте и вывеска, потом вывеска тихо
   дышит. Это ночной слой (.sc-cl__night): погашенный кадр и копии
   освещённого, обрезанные clip-path до окон, вывески и асфальта.
   Без скрипта, при отключённых анимациях и в версии для слабовидящих
   ночного слоя нет. Карточки интерьера под мышью расширяются.
   ============================================================ */

.sc-clinic { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--section-space); background: var(--color-background); }
html:not([data-a11y="on"]) .sc-clinic {
  --ink-hi: #6f96ff; --field-deep: #040a2c;
  --color-text: #ffffff; --color-muted: #9db0e6;
  --color-border: rgba(255, 255, 255, 0.16); --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-focus: #ffd400;
  color: #fff; background: var(--field-deep);
}
.sc-clinic__beam {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 32% at 84% 4%, rgba(90, 150, 255, 0.2), rgba(90, 150, 255, 0) 70%),
    radial-gradient(40% 30% at 2% 100%, rgba(22, 56, 186, 0.4), rgba(22, 56, 186, 0) 72%);
}

.sc-cl { container-type: inline-size; }

/* --- кадр: фасад справа, заголовок слева, факты внизу --- */
.sc-cl__frame {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: 1fr auto;
  min-height: calc(70cqw / 1.5);
  background: radial-gradient(80% 90% at 14% 40%, #0c1c63 0%, #07113f 52%, #050c30 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 90px -50px rgba(0, 0, 0, 0.75);
}
/* Рамка снимка всегда 3:2, как исходник: окна и вывеска заданы в процентах кадра. */
.sc-cl__hero {
  position: absolute; z-index: 0; top: 0; right: 0; width: 70%; aspect-ratio: 3 / 2; margin: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.sc-cl__canvas { position: absolute; inset: 0; }
.sc-cl__canvas img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; }
/* Под мышью фасад чуть смещается навстречу курсору, как в окне. Все слои
   (кадр, ночной слой, ореол) лежат в одном холсте и двигаются вместе. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  html:not([data-a11y="on"]) .sc-cl__canvas {
    transform: translate3d(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -6px), 0) scale(1.035);
    transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  html:not([data-a11y="on"]) .sc-cl__frame.is-move .sc-cl__canvas { transition: transform 220ms linear; }
}

/* Ночной слой включает скрипт (.is-armed), пока кадр не показался. */
.sc-cl__night { display: none; }
.sc-cl.is-armed .sc-cl__night { display: block; position: absolute; inset: 0; }
.sc-cl.is-armed .sc-cl__lit { opacity: 0; }
.sc-cl.is-go .sc-cl__lit--window { animation: sc-cl-window 1100ms ease-out calc(350ms + var(--k) * 180ms) both; }
.sc-cl.is-go .sc-cl__lit--wet { animation: sc-cl-fade 1700ms ease-out 900ms both; }
.sc-cl.is-go .sc-cl__lit--sign { animation: sc-cl-sign 1150ms cubic-bezier(0.55, 0, 0.25, 1) 1700ms both; }
.sc-cl.is-lit .sc-cl__night { display: none; }
@keyframes sc-cl-window {
  0% { opacity: 0; } 22% { opacity: 0.75; } 34% { opacity: 0.35; } 52% { opacity: 0.95; } 62% { opacity: 0.72; } 100% { opacity: 1; }
}
@keyframes sc-cl-fade { from { opacity: 0; } to { opacity: 1; } }
/* Вывеска загорается слева направо, буква за буквой. */
@keyframes sc-cl-sign {
  from { opacity: 1; clip-path: inset(var(--t) calc(100% - var(--l)) var(--b) var(--l)); }
  to { opacity: 1; clip-path: inset(var(--t) var(--r) var(--b) var(--l)); }
}

/* Ореол вывески: после включения вспыхивает и потом тихо дышит. */
.sc-cl__halo {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0.5; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(214, 228, 255, 0.5), rgba(160, 196, 255, 0.16) 55%, rgba(160, 196, 255, 0) 100%);
  transform: scale(1.12, 3.2); filter: blur(6px);
}
.sc-cl.is-armed:not(.is-go) .sc-cl__halo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sc-cl.is-go .sc-cl__halo { animation: sc-cl-halo-in 1600ms ease-out 2500ms both, sc-cl-breathe 6s ease-in-out 4100ms infinite alternate; }
}
@keyframes sc-cl-halo-in { 0% { opacity: 0; } 35% { opacity: 0.95; } 100% { opacity: 0.5; } }
@keyframes sc-cl-breathe { from { opacity: 0.5; } to { opacity: 0.78; } }

/* --- заголовок в кадре --- */
.sc-cl__intro {
  position: relative; z-index: 2; grid-column: 1; grid-row: 1; align-self: center; min-width: 0;
  padding: clamp(40px, 4.6vw, 72px) clamp(16px, 2vw, 32px) clamp(32px, 3.4vw, 52px) clamp(32px, 4.4vw, 68px);
}
.sc-cl__eyebrow { display: block; }
html:not([data-a11y="on"]) .sc-cl__eyebrow { color: #7d95dd; }
.sc-cl__h {
  margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.02; letter-spacing: -1px; text-wrap: balance;
}
.sc-cl__h em { display: block; font-style: normal; color: var(--color-accent); }
html:not([data-a11y="on"]) .sc-cl__h em { color: var(--ink-hi); }
.sc-cl__lead { margin-top: 18px; max-width: 40ch; color: var(--color-muted); }
.sc-cl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

/* Статус пишет скрипт по времени Тольятти; без скрипта здесь расписание. */
.sc-cl__status {
  display: inline-flex; align-items: center; gap: 11px; min-height: 46px; margin: 0; padding: 10px 18px 10px 15px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.3; color: #fff;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.26);
}
.sc-cl__dot { position: relative; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #8ea2d8; }
.sc-cl__status[data-state="open"] .sc-cl__dot { background: #4be29c; box-shadow: 0 0 12px rgba(75, 226, 156, 0.8); }
.sc-cl__status[data-state="appointment"] .sc-cl__dot { background: #ffc857; box-shadow: 0 0 10px rgba(255, 200, 87, 0.7); }
.sc-cl__status[data-state="static"] .sc-cl__dot { background: #6f96ff; }
@media (prefers-reduced-motion: no-preference) {
  .sc-cl__status[data-state="open"] .sc-cl__dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(75, 226, 156, 0.7);
    animation: sc-cl-ping 2.4s ease-out infinite;
  }
}
@keyframes sc-cl-ping { from { transform: scale(0.55); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

.sc-cl__map {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 2px;
  font-weight: 600; font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 6px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}
.sc-cl__map svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 260ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sc-cl__map:hover { color: #cfe0ff; text-decoration-color: rgba(207, 224, 255, 0.8); }
  .sc-cl__map:hover svg { translate: 2px -2px; }
}

/* --- полоса фактов внизу кадра --- */
.sc-cl__passport {
  position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2; margin: 0;
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.5fr);
  container: passport / inline-size;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(5, 12, 48, 0.5), rgba(5, 12, 48, 0.88));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Сверху значение, под ним подпись; в ячейке часов между ними неделя. */
.sc-cl__passport > div {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 20px clamp(18px, 2.2vw, 32px) 22px;
}
.sc-cl__passport dd { order: 1; }
.sc-cl__passport .sc-cl__week { order: 2; }
.sc-cl__passport dt { order: 3; }
.sc-cl__passport .sc-cl__note { order: 4; }
.sc-cl__passport > div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sc-cl__passport dt { font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; letter-spacing: 1.2px; text-transform: uppercase; color: #8ea2d8; }
.sc-cl__passport dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; min-height: 36px; }
.sc-cl__years-value { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.sc-cl__years-value > * { flex: none; white-space: nowrap; overflow-wrap: normal; }
.sc-cl__passport b {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(26px, 2.3vw, 36px) * var(--a11y-scale-display));
  line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #b9cdff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sc-cl__passport b.is-mono { font-size: calc(clamp(17px, 1.45vw, 22px) * var(--a11y-scale)); letter-spacing: 0.2px; overflow-wrap: anywhere; }
.sc-cl__unit, .sc-cl__pre { font-family: var(--font-display); font-weight: 600; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #9dbbff; }

/* Неделя: будни залиты, суббота пунктиром (по записи), воскресенье бледное.
   Сегодняшний день в кольце (data-today ставит скрипт по времени Тольятти). */
.sc-cl__passport .sc-cl__week { display: flex; gap: 5px; min-height: 0; margin-top: 3px; }
.sc-cl__week span {
  position: relative; display: grid; place-items: center; width: 34px; height: 28px; border-radius: 9px;
  font-weight: 600; font-size: max(calc(11.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 0.3px; color: #dce5ff;
  background: rgba(61, 123, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.34);
}
.sc-cl__week [data-state="appointment"] { color: #ffd98a; background: rgba(255, 200, 87, 0.08); box-shadow: none; border: 1px dashed rgba(255, 200, 87, 0.7); }
.sc-cl__week [data-state="closed"] { color: rgba(220, 229, 255, 0.42); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.sc-cl__week [data-today]::after {
  content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1.5px solid #ffffff; opacity: 0.85;
}
.sc-cl__week [data-today]::before {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff;
}
.sc-cl__passport .sc-cl__note { font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: #9db0e6; margin-top: -3px; }
/* Когда ячейка часов достаточно широкая: время и неделя в строку, подписи
   второй строкой. Тогда полоса фактов не выше, чем с двумя другими ячейками. */
@container passport (min-width: 1060px) {
  .sc-cl__passport .sc-cl__hours {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; row-gap: 9px;
  }
  .sc-cl__hours dd:not(.sc-cl__week):not(.sc-cl__note) { grid-column: 1; grid-row: 1; }
  .sc-cl__hours .sc-cl__week { grid-column: 2; grid-row: 1; margin-top: 0; }
  .sc-cl__hours dt { grid-column: 1; grid-row: 2; }
  .sc-cl__hours .sc-cl__note { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* --- карточки интерьера --- */
/* Под мышью карточка расширяется, соседи уступают место. */
.sc-cl__rooms {
  list-style: none; margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(250px, 23vw, 330px);
  gap: clamp(14px, 1.6vw, 22px);
  transition: grid-template-columns 700ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.sc-room { min-width: 0; }
.sc-room__in {
  position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: 22px; background: #06102e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 60px -40px rgba(0, 0, 0, 0.7);
}
.sc-room__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.25, 1); }
.sc-room__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 5px;
  padding: 64px 22px 22px;
  background: linear-gradient(180deg, rgba(4, 10, 44, 0), rgba(4, 10, 44, 0.62) 42%, rgba(4, 10, 44, 0.94));
}
.sc-room__num { font-family: var(--font-display); font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.4px; color: #8fb0ff; }
.sc-room__cap b {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(20px, 1.7vw, 25px) * var(--a11y-scale-display));
  line-height: 1.1; letter-spacing: -0.4px; color: #fff;
}
.sc-room__text { max-width: 36ch; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: #c9d5f5; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .sc-cl__rooms:has(.sc-room:nth-child(1):hover) { grid-template-columns: 1.5fr 1fr 1fr; }
  .sc-cl__rooms:has(.sc-room:nth-child(2):hover) { grid-template-columns: 1fr 1.5fr 1fr; }
  .sc-cl__rooms:has(.sc-room:nth-child(3):hover) { grid-template-columns: 1fr 1fr 1.5fr; }
  .sc-room__in:hover .sc-room__img { transform: scale(1.04); }
}

/* Появление: текст кадра и факты поднимаются по очереди, карточки интерьера следом. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .sc-cl:not(.is-in) .sc-cl__intro > *,
  html:not(.no-js):not([data-a11y="on"]) .sc-cl:not(.is-in) .sc-cl__passport > div { opacity: 0; transform: translateY(18px); }
  html:not(.no-js):not([data-a11y="on"]) .sc-cl.is-in .sc-cl__intro > *,
  html:not(.no-js):not([data-a11y="on"]) .sc-cl.is-in .sc-cl__passport > div {
    opacity: 1; transform: none;
    transition: opacity 800ms ease var(--d, 0ms), transform 900ms cubic-bezier(0.2, 0.8, 0.25, 1) var(--d, 0ms);
  }
  .sc-cl__intro > :nth-child(2) { --d: 90ms; }
  .sc-cl__intro > :nth-child(3) { --d: 180ms; }
  .sc-cl__intro > :nth-child(4) { --d: 270ms; }
  .sc-cl__passport > :nth-child(1) { --d: 500ms; }
  .sc-cl__passport > :nth-child(2) { --d: 600ms; }
  .sc-cl__passport > :nth-child(3) { --d: 700ms; }
  .sc-cl__passport > :nth-child(4) { --d: 800ms; }
  html:not(.no-js):not([data-a11y="on"]) .sc-cl__rooms:not(.is-in) .sc-room { opacity: 0; transform: translateY(34px); }
  html:not(.no-js):not([data-a11y="on"]) .sc-cl__rooms.is-in .sc-room {
    opacity: 1; transform: none;
    transition: opacity 800ms ease calc(var(--i) * 140ms), transform 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--i) * 140ms);
  }
}

/* Планшет: снимок сверху во всю ширину, заголовок и факты под ним. */
@media (max-width: 1099px) {
  .sc-cl__frame { display: block; min-height: 0; }
  .sc-cl__hero {
    position: relative; width: 100%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 32%); mask-image: linear-gradient(0deg, transparent 0%, #000 32%);
  }
  .sc-cl__intro { margin-top: -8%; padding: 0 clamp(24px, 4vw, 44px) 30px; }
  .sc-cl__passport { background: rgba(5, 12, 48, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Телефон: рамка снимка квадратная, кадр сдвинут к фасаду; интерьер лентой вбок. */
@media (max-width: 699px) {
  .sc-cl__frame { border-radius: 22px; }
  .sc-cl__hero { aspect-ratio: 1 / 1; }
  .sc-cl__canvas { inset: 0 auto 0 -44%; width: 150%; }
  .sc-cl__intro { margin-top: -16%; padding: 0 20px 26px; }
  .sc-cl__actions { gap: 6px 16px; margin-top: 22px; }
  .sc-cl__passport > div { padding: 16px 18px 18px; }
  /* Факты столбцом: номер лицензии и неделя не помещаются вдвоём в строку. */
  .sc-cl__passport { grid-template-columns: minmax(0, 1fr); }
  .sc-cl__passport > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .sc-cl__passport dd { min-height: 0; }
  .sc-cl__passport b.is-mono { white-space: nowrap; }
  .sc-cl__rooms {
    grid-template-columns: repeat(3, min(84%, 330px)); grid-auto-rows: auto;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1); padding: 4px var(--page-gutter) 12px; scroll-padding-inline: var(--page-gutter);
  }
  .sc-cl__rooms::-webkit-scrollbar { display: none; }
  .sc-room { scroll-snap-align: start; }
  .sc-room__in { height: auto; aspect-ratio: 4 / 4.4; }
}

/* Версия для слабовидящих: снимок, текст и факты обычным столбцом на теме пользователя. */
html[data-a11y="on"] .sc-clinic { border-top: 2px solid var(--color-border); }
html[data-a11y="on"] .sc-cl__frame { display: block; min-height: 0; border-radius: 12px; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-cl__hero { position: relative; width: 100%; -webkit-mask-image: none; mask-image: none; }
html[data-a11y="on"] .sc-cl__canvas { inset: 0; width: 100%; }
html[data-a11y-images="off"] .sc-cl__hero, html[data-a11y-images="off"] .sc-room__in { aspect-ratio: auto; height: auto; }
html[data-a11y="on"] .sc-cl__intro { margin-top: 0; padding: 20px; }
html[data-a11y="on"] .sc-cl__eyebrow, html[data-a11y="on"] .sc-cl__lead, html[data-a11y="on"] .sc-cl__status,
html[data-a11y="on"] .sc-cl__passport dt, html[data-a11y="on"] .sc-cl__unit, html[data-a11y="on"] .sc-cl__pre,
html[data-a11y="on"] .sc-room__num, html[data-a11y="on"] .sc-room__cap b, html[data-a11y="on"] .sc-room__text { color: var(--color-text); }
html[data-a11y="on"] .sc-cl__status { background: none; box-shadow: none; border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-cl__map { color: var(--color-accent); text-decoration-color: currentColor; }
html[data-a11y="on"] .sc-cl__passport { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); background: none; border-top: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-cl__passport > div + div { border-left: 0; }
html[data-a11y="on"] .sc-cl__passport > div { border-top-color: var(--color-border); }
html[data-a11y="on"] .sc-cl__passport b { background: none; color: var(--color-text); -webkit-background-clip: border-box; background-clip: border-box; }
html[data-a11y="on"] .sc-cl__week span { color: var(--color-text); background: none; box-shadow: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .sc-cl__week [data-state="closed"] { border-style: dotted; }
html[data-a11y="on"] .sc-cl__week [data-state="appointment"] { border-style: dashed; }
/* Дни недели растут вместе со шрифтом; ячейка часов в столбик: время, неделя, подпись. */
html[data-a11y="on"] .sc-cl__passport .sc-cl__week { flex-wrap: wrap; gap: calc(6px * var(--a11y-scale)); }
html[data-a11y="on"] .sc-cl__week span { width: calc(36px * var(--a11y-scale)); height: calc(30px * var(--a11y-scale)); border-width: 2px; }
html[data-a11y="on"] .sc-cl__passport .sc-cl__hours { display: flex; flex-direction: column; align-items: flex-start; }
html[data-a11y="on"] .sc-cl__passport b.is-mono { white-space: normal; }
/* Точка статуса цветом текста и без пульсирующего кольца. */
html[data-a11y="on"] .sc-cl__status .sc-cl__dot { background: currentColor; }
html[data-a11y="on"] .sc-cl__dot::after { display: none; }
html[data-a11y="on"] .sc-cl__week [data-today]::after { border-color: var(--color-text); }
html[data-a11y="on"] .sc-cl__week [data-today]::before { background: var(--color-text); }
html[data-a11y="on"] .sc-cl__passport .sc-cl__note { color: var(--color-text); }
html[data-a11y="on"] .sc-cl__rooms { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: auto; overflow: visible; margin-inline: 0; padding: 0; }
html[data-a11y="on"] .sc-room__in { height: auto; aspect-ratio: auto; background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: 12px; }
html[data-a11y="on"] .sc-room__img { height: auto; aspect-ratio: 3 / 2; }
html[data-a11y="on"] .sc-room__cap { position: static; padding: 16px 18px 18px; background: none; }
html[data-a11y-images="off"] .sc-room__in { flex-direction: column-reverse; align-items: stretch; }

/* ============================================================
   14. Отзывы: живая Яндекс-карта
   ============================================================

   Светлый блок. Отзывы о клинике живут на картах, поэтому основа блока живая
   Яндекс-карта (официальный виджет) с меткой клиники. Поверх карты слева
   стеклянная панель: оценки на Яндекс Картах и в 2ГИС, свежий отзыв, кнопки
   «оставить отзыв». Внизу ряд тем с числом отзывов; тема это кнопка, по нажатию
   открывается окно со списком этих отзывов (краткий пересказ, без имён).

   Карта через JavaScript API Яндекс Карт (виджет-iframe показывал рекламу),
   метка своя: стеклянная капля со знаком клиники и кругами. Кнопки масштаба
   справа сверху, логотип и ссылки Яндекса внизу не закрываются. Масштаб
   колесом выключен; на телефоне карта двигается после нажатия на неё.
   ============================================================ */

.sc-reviews {
  position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--section-space);
  background: linear-gradient(180deg, #f5f8ff 0%, var(--color-surface-alt) 55%, #eef3fd 100%);
}
html[data-a11y="on"] .sc-reviews { background: var(--color-background); }

.rv-head { display: grid; gap: clamp(16px, 2.2vw, 24px); margin-bottom: clamp(30px, 3.6vw, 48px); }
@media (min-width: 980px) {
  .rv-head { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); align-items: end; gap: clamp(34px, 5vw, 82px); }
}
.rv-head__eyebrow { display: block; }
.rv-head__title {
  margin-top: 15px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; text-wrap: balance;
}
.rv-head__title em { font-style: normal; color: var(--color-accent); }
.rv-head__lead { color: var(--color-muted); max-width: 52ch; }

/* --- сцена: карта во всю карточку --- */
.rv__stage {
  --panel: clamp(340px, 27vw, 384px);
  position: relative; isolation: isolate; overflow: hidden; border-radius: 30px;
  height: clamp(620px, 47vw, 690px); background: #eef1f5;
  box-shadow: 0 50px 80px -50px rgba(11, 29, 107, 0.34), inset 0 0 0 1px rgba(11, 29, 107, 0.07);
}
.rv__map { position: absolute; inset: 0; z-index: 0; background: #eef1f5; }
.rv__ymap { position: absolute; inset: 0; }

/* Пока карта не загружена (нет согласия на cookie или нет скрипта): нарисованная
   схема улиц и карточка с адресом, кнопкой «Показать карту» и ссылкой. */
.rv__drawn { position: absolute; inset: 0; }
.rv-map { display: block; width: 100%; height: 100%; }
.rv-map__ground { fill: #e9eff9; }
.rv-map__block { fill: #e0e8f6; }
.rv-map__park { fill: #d9ebee; }
.rv-map__houses rect { fill: #d3ddf0; }
.rv-map__minor path { fill: none; stroke: #fbfcff; stroke-width: 10; }
.rv-map__main path { fill: none; stroke: #ffffff; stroke-width: 30; }
.rv-map__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; fill: #8b9dc9; }
.rv__gate {
  position: absolute; z-index: 2; left: calc(var(--panel) + 36px); right: 36px; top: 30%; display: grid; gap: 8px;
  width: fit-content; max-width: 400px; margin-inline: auto; padding: 18px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 50px -26px rgba(11, 29, 107, 0.55), inset 0 0 0 1px rgba(11, 29, 107, 0.07);
}
.rv__gate-title { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--a11y-scale)); color: var(--color-text); }
.rv__gate-text { font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.rv__gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.rv__gate-btn {
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff; background: var(--color-accent);
}
.rv__gate-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-accent); text-decoration: none; }
.rv.is-map-loading .rv__gate-btn { opacity: 0.6; pointer-events: none; }
.rv.is-map-ready .rv__drawn, .rv.is-map-ready .rv__gate { display: none; }
html.no-js .rv__gate-btn, html.no-js .rv__gate-text { display: none; }
.rv-note { padding: 0 4px; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }

/* Крышка только на сенсорных экранах: палец листает страницу, карта двигается после нажатия. */
.rv__cover { display: none; }
@media (hover: none) {
  .rv.is-map-ready .rv__cover {
    position: absolute; inset: 0 0 42px; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
    padding: 0 0 14px; margin: 0; border: 0; background: transparent; cursor: pointer;
  }
  .rv__cover span {
    padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #fff;
    background: rgba(8, 18, 60, 0.72); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.5);
  }
  .rv__stage.is-map-live .rv__cover { display: none; }
}

/* Метка клиники на карте: стеклянная капля фирменного синего со знаком. */
.rv-mark { position: absolute; left: -31px; top: -82px; width: 62px; height: 82px; cursor: default; }
.rv-mark__pin { position: relative; z-index: 2; display: block; width: 62px; height: 82px; overflow: visible; filter: drop-shadow(0 16px 14px rgba(11, 45, 184, 0.32)); }
.rv-mark__drop { fill: url(#rv-mark-grad); stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.6; }
.rv-mark__logo { position: absolute; z-index: 3; left: 18px; top: 14px; width: 26px; height: 31.5px; color: #ffffff; pointer-events: none; }
.rv-mark__shadow {
  position: absolute; z-index: 1; left: 50%; bottom: -5px; width: 36px; height: 11px; margin-left: -18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 29, 107, 0.4), rgba(11, 29, 107, 0));
}
.rv-mark__halo {
  position: absolute; z-index: 0; left: 50%; bottom: -16px; width: 130px; height: 46px; margin-left: -65px; border-radius: 50%;
  border: 2px solid rgba(27, 90, 240, 0.55); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .rv-mark__halo { animation: rv-halo 3.2s ease-out 1.2s infinite; }
  .rv-mark__halo--2 { animation-delay: 2.8s; }
  .rv-mark { animation: rv-drop 900ms cubic-bezier(0.3, 0.6, 0.3, 1) 200ms both; }
}
@keyframes rv-drop {
  0% { opacity: 0; translate: 0 -120px; }
  55% { opacity: 1; translate: 0 4px; }
  72% { translate: 0 -10px; }
  86% { translate: 0 1px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes rv-halo { 0% { opacity: 0.9; scale: 0.3; } 100% { opacity: 0; scale: 1.25; } }

/* --- стеклянная панель слева --- */
.rv-panel {
  position: absolute; z-index: 3; left: 18px; top: 18px; width: var(--panel); max-height: calc(100% - 76px);
  display: grid; gap: 12px; padding: 14px; border-radius: 24px; overflow: auto; scrollbar-width: none;
  background: rgba(246, 248, 253, 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 60px -30px rgba(11, 29, 107, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.rv-panel::-webkit-scrollbar { display: none; }
.rv-panel__sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rv-src {
  display: grid; align-content: start; gap: 6px; padding: 14px 14px 12px; border-radius: 17px; background: #ffffff;
  box-shadow: 0 10px 24px -18px rgba(11, 29, 107, 0.5), inset 0 0 0 1px rgba(11, 29, 107, 0.06);
}
.rv-src__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); }
.rv-src__mark { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.rv-src--yandex .rv-src__mark { background: #fc3f1d; box-shadow: 0 0 0 4px rgba(252, 63, 29, 0.14); }
.rv-src--2gis .rv-src__mark { background: #19aa1e; box-shadow: 0 0 0 4px rgba(25, 170, 30, 0.14); }
.rv-src__score { display: grid; gap: 5px; }
.rv-src__score b {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(36px, 2.9vw, 42px) * var(--a11y-scale-display));
  line-height: 1; letter-spacing: -1.4px; color: var(--color-text);
}
.rv-src__meta { display: grid; font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: var(--color-muted); }
.rv-src__link {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; margin-top: 2px;
  font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-accent); text-decoration: none;
}

/* Звёзды: серый ряд и поверх него золотой, обрезанный до оценки. */
.rv-stars { position: relative; display: inline-flex; flex-shrink: 0; width: max-content; }
.rv-stars__base, .rv-stars__fill { display: flex; gap: 2px; }
.rv-stars__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; }
.rv-stars svg { width: 16px; height: 16px; flex-shrink: 0; }
.rv-stars__base svg { fill: #d5deef; }
.rv-stars__fill svg { fill: #ffb62e; }
.rv-stars--small svg { width: 14px; height: 14px; }

/* Свежий отзыв. */
.rv-quote {
  margin: 0; padding: 15px 16px 13px; border-radius: 17px; background: #ffffff;
  box-shadow: 0 10px 24px -18px rgba(11, 29, 107, 0.5), inset 0 0 0 1px rgba(11, 29, 107, 0.06);
}
.rv-quote__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-quote__tag {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor));
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-accent);
}
.rv-quote__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.16); }
.rv-quote__text { margin: 9px 0 0; }
.rv-quote__text p {
  font-family: var(--font-display); font-weight: 600; font-size: calc(17.5px * var(--a11y-scale));
  line-height: 1.3; letter-spacing: -0.2px; color: var(--color-text);
}
.rv-quote__meta { margin-top: 8px; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.rv-quote__meta a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
/* Стрелки блока: один рисунок, толщина 2,2, скруглённые концы. */
.rv-ico { flex-shrink: 0; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 260ms ease; }

/* Попросить отзыв у тех, кто уже лечился. */
.rv-cta { display: grid; gap: 10px; padding: 4px 4px 2px; }
.rv-cta__text { font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: var(--color-muted); }
.rv-cta__text b { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
.rv-cta__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rv-cta__btn {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 12px 10px 14px; border-radius: 14px;
  font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2; white-space: nowrap; text-decoration: none;
  color: var(--color-text); background: #ffffff; box-shadow: 0 10px 22px -16px rgba(11, 29, 107, 0.55), inset 0 0 0 1px rgba(11, 29, 107, 0.1);
  transition: box-shadow 250ms ease, translate 300ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.rv-cta__btn .rv-ico { margin-left: auto; color: var(--color-accent); }
.rv-cta__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.rv-cta__btn--yandex .rv-cta__dot { background: #fc3f1d; box-shadow: 0 0 0 4px rgba(252, 63, 29, 0.14); }
.rv-cta__btn--2gis .rv-cta__dot { background: #19aa1e; box-shadow: 0 0 0 4px rgba(25, 170, 30, 0.14); }

/* --- темы внизу карты: кнопки, открывают окно с отзывами --- */
.rv-themes {
  position: absolute; z-index: 3; left: calc(var(--panel) + 36px); right: 64px; bottom: 34px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.rv-themes li { flex: 1 1 0; min-width: 0; }
.rv-theme {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; width: 100%; height: 100%;
  padding: 11px 13px 12px 15px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; font: inherit;
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 22px 40px -24px rgba(11, 29, 107, 0.55), inset 0 0 0 1px rgba(11, 29, 107, 0.07);
  transition: translate 400ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 400ms ease;
}
.rv-theme__n { grid-column: 1; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.rv-theme__n b {
  font-family: var(--font-display); font-weight: 700; font-size: calc(24px * var(--a11y-scale-display)); line-height: 1;
  letter-spacing: -0.8px; color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.rv-theme__text { grid-column: 1; font-weight: 600; font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.3; color: var(--color-text); }
/* Кружок «открыть»: плотный фирменный синий, стрелка белая и крупная. */
.rv-theme__go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #ffffff; background: linear-gradient(135deg, #4a86ff, #1b4fe0);
  box-shadow: 0 10px 18px -10px rgba(27, 79, 224, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: scale 300ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 300ms ease;
}
.rv-theme__go .rv-ico { width: 18px; height: 18px; stroke-width: 2.3; }
.rv-theme:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rv-theme:hover { translate: 0 -4px; box-shadow: 0 30px 50px -26px rgba(11, 29, 107, 0.6), inset 0 0 0 1px rgba(61, 123, 255, 0.4); }
  .rv-theme:hover .rv-theme__go { scale: 1.08; box-shadow: 0 12px 22px -10px rgba(27, 79, 224, 1), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
  .rv-theme:hover .rv-theme__go .rv-ico { translate: 2px 0; }
  .rv-src__link:hover .rv-ico, .rv-quote__meta a:hover .rv-ico, .rv-cta__btn:hover .rv-ico, .rv-pop__links a:hover .rv-ico { translate: 2px -2px; }
  .rv-cta__btn:hover { translate: 0 -2px; box-shadow: 0 16px 26px -16px rgba(11, 29, 107, 0.6), inset 0 0 0 1px rgba(27, 90, 240, 0.35); }
}

/* --- окно темы: список отзывов --- */
.rv-pop {
  width: min(640px, calc(100vw - 32px)); max-height: min(84vh, 760px); margin: auto; padding: 0; border: 0; border-radius: 26px;
  overflow: auto; overscroll-behavior: contain; color: var(--color-text); background: #ffffff;
  box-shadow: 0 50px 120px -30px rgba(4, 10, 44, 0.6), inset 0 0 0 1px rgba(11, 29, 107, 0.06);
  opacity: 0; translate: 0 18px; scale: 0.98;
  transition: opacity 260ms ease, translate 380ms cubic-bezier(0.2, 0.8, 0.25, 1), scale 380ms cubic-bezier(0.2, 0.8, 0.25, 1),
    overlay 380ms allow-discrete, display 380ms allow-discrete;
}
.rv-pop { display: none; }
.rv-pop:popover-open { display: block; opacity: 1; translate: 0 0; scale: 1; }
.rv-pop.is-open { display: block; opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .rv-pop:popover-open { opacity: 0; translate: 0 18px; scale: 0.98; } }
.rv-pop::backdrop { background: rgba(4, 10, 44, 0); transition: background-color 300ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; }
.rv-pop:popover-open::backdrop { background: rgba(4, 10, 44, 0.46); }
@starting-style { .rv-pop:popover-open::backdrop { background: rgba(4, 10, 44, 0); } }
/* Запасной вариант для браузеров без popover: окно поверх страницы по классу. */
.rv-pop.is-open { position: fixed; inset: 0; z-index: 1000; display: block; }

.rv-pop__head {
  position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start;
  padding: 24px 26px 18px; background: linear-gradient(180deg, #ffffff 82%, rgba(255, 255, 255, 0));
}
.rv-pop__n { grid-column: 1; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.rv-pop__n b { font-family: var(--font-display); font-weight: 700; font-size: calc(22px * var(--a11y-scale)); color: var(--color-accent); }
.rv-pop__title {
  grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(22px, 2.2vw, 28px) * var(--a11y-scale-display));
  line-height: 1.12; letter-spacing: -0.6px;
}
.rv-pop__close {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--color-text); background: #eef2fb; transition: background-color 200ms ease;
}
.rv-pop__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rv-pop__close:hover { background: #e1e8f8; }
.rv-pop__list { display: grid; gap: 10px; margin: 0; padding: 0 26px; list-style: none; }
.rv-entry { padding: 14px 16px 15px; border-radius: 16px; background: #f4f7fd; box-shadow: inset 0 0 0 1px rgba(11, 29, 107, 0.05); }
.rv-entry__src { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.rv-entry__mark { width: 8px; height: 8px; border-radius: 50%; }
.rv-entry--yandex .rv-entry__mark { background: #fc3f1d; }
.rv-entry--2gis .rv-entry__mark { background: #19aa1e; }
.rv-entry__text { margin-top: 6px; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-text); }
.rv-pop__caveat { margin: 12px 26px 0; padding: 12px 16px; border-radius: 14px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); background: #fff8e8; box-shadow: inset 0 0 0 1px rgba(255, 182, 46, 0.3); }
.rv-pop__foot { display: grid; gap: 12px; margin-top: 16px; padding: 18px 26px 24px; border-top: 1px solid #e6ecf7; }
.rv-pop__foot p { font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.rv-pop__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rv-pop__links a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-accent); text-decoration: none; }

/* Появление: панель выезжает, темы поднимаются по очереди, звёзды заполняются. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .rv:not(.is-in) .rv-panel { opacity: 0; translate: -24px 0; }
  html:not(.no-js):not([data-a11y="on"]) .rv:not(.is-in) .rv-themes li { opacity: 0; translate: 0 22px; }
  html:not(.no-js):not([data-a11y="on"]) .rv:not(.is-in) .rv-stars__fill { width: 0; }
  html:not(.no-js):not([data-a11y="on"]) .rv.is-in .rv-panel { transition: opacity 800ms ease 200ms, translate 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) 200ms; }
  html:not(.no-js):not([data-a11y="on"]) .rv.is-in .rv-themes li { transition: opacity 600ms ease calc(700ms + var(--i) * 120ms), translate 800ms cubic-bezier(0.3, 1.3, 0.5, 1) calc(700ms + var(--i) * 120ms); }
  html:not(.no-js):not([data-a11y="on"]) .rv.is-in .rv-stars__fill { transition: width 1400ms cubic-bezier(0.3, 0, 0.2, 1) 700ms; }
}

/* Ноутбук: темы два на два справа от панели. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .rv-themes li { flex: 0 0 calc(50% - 5px); }
}

/* Планшет и телефон: карта полосой сверху, всё остальное под ней. */
@media (max-width: 1099px) {
  .rv__stage { height: auto; display: grid; gap: 12px; padding-bottom: clamp(14px, 2.4vw, 22px); background: #f3f6fd; }
  .rv__map { position: relative; inset: auto; height: clamp(300px, 52vw, 420px); }
  .rv__gate { left: 16px; right: 16px; top: 22%; }
  .rv-panel {
    position: relative; left: auto; top: auto; width: auto; max-height: none; margin: 0 clamp(14px, 2.4vw, 22px);
    padding: 0; overflow: visible; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .rv-themes {
    position: relative; left: auto; right: auto; bottom: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 clamp(14px, 2.4vw, 22px);
  }
  .rv-cta { padding: 16px; border-radius: 17px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(11, 29, 107, 0.06); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .rv-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .rv-panel__sources { grid-column: 1; }
  .rv-quote { grid-column: 2; grid-row: 1 / span 2; }
  .rv-cta { grid-column: 1; }
  .rv-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .rv__stage { border-radius: 24px; gap: 10px; }
  .rv-panel { gap: 10px; margin-inline: 12px; }
  .rv-themes { gap: 10px; margin-inline: 12px; }
  .rv-src { padding: 13px 13px 11px; }
  .rv-src__score b { font-size: calc(34px * var(--a11y-scale-display)); }
  .rv-theme { padding: 11px 11px 12px 13px; gap: 2px 8px; }
  .rv-theme__go { width: 32px; height: 32px; }
  .rv-theme__go .rv-ico { width: 16px; height: 16px; }
  .rv-theme__text { font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); }
  .rv-pop { width: calc(100vw - 20px); max-height: 88vh; border-radius: 22px; }
  .rv-pop__head { padding: 20px 18px 14px; }
  .rv-pop__list { padding: 0 18px; }
  .rv-pop__caveat { margin-inline: 18px; }
  .rv-pop__foot { padding: 16px 18px 20px; }
}

/* Версия для слабовидящих: без карты; оценки, отзыв, темы и кнопки столбцом. */
html[data-a11y="on"] .rv__stage { height: auto; display: grid; gap: 14px; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
html[data-a11y="on"] .rv__map { display: none; }
html[data-a11y="on"] .rv-panel, html[data-a11y="on"] .rv-themes {
  position: static; width: auto; max-height: none; margin: 0; padding: 0; overflow: visible; background: none; box-shadow: none;
}
html[data-a11y="on"] .rv-themes { display: grid; gap: 14px; }
html[data-a11y="on"] .rv-src, html[data-a11y="on"] .rv-quote, html[data-a11y="on"] .rv-theme, html[data-a11y="on"] .rv-cta, html[data-a11y="on"] .rv-pop {
  background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong); border-radius: 12px;
}
html[data-a11y="on"] .rv-theme { max-width: none; width: 100%; }
html[data-a11y="on"] .rv-src__name, html[data-a11y="on"] .rv-src__score b, html[data-a11y="on"] .rv-src__meta, html[data-a11y="on"] .rv-quote__text p,
html[data-a11y="on"] .rv-quote__meta, html[data-a11y="on"] .rv-quote__tag, html[data-a11y="on"] .rv-theme__n, html[data-a11y="on"] .rv-theme__n b,
html[data-a11y="on"] .rv-theme__text, html[data-a11y="on"] .rv-cta__text, html[data-a11y="on"] .rv-cta__text b, html[data-a11y="on"] .rv-pop__title,
html[data-a11y="on"] .rv-pop__n, html[data-a11y="on"] .rv-entry__text, html[data-a11y="on"] .rv-entry__src, html[data-a11y="on"] .rv-pop__foot p { color: var(--color-text); }
html[data-a11y="on"] .rv-entry, html[data-a11y="on"] .rv-pop__head, html[data-a11y="on"] .rv-pop__caveat { background: var(--color-surface); }
html[data-a11y="on"] .rv-stars__base svg { fill: var(--color-border); }
html[data-a11y="on"] .rv-stars__fill svg { fill: var(--color-text); }
html[data-a11y="on"] .rv-cta__btn { color: var(--color-text); background: var(--color-surface); box-shadow: none; border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .rv-theme__go { color: var(--color-accent-ink); background: var(--color-accent); box-shadow: none; }
html[data-a11y="on"] .rv-pop__close { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .rv-pop__caveat { color: var(--color-text); border: 1px solid var(--color-border-strong); }
/* Раскладка без карты: карточки источников, темы и кнопки «оставить отзыв» встают
   сеткой во всю ширину и переходят в один столбец, когда крупный шрифт не помещается;
   подписи кнопок переносятся, а не обрезаются. Цветные метки площадок цветом текста:
   название площадки написано рядом. */
html[data-a11y="on"] .rv-panel__sources,
html[data-a11y="on"] .rv-cta__links { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(250px * var(--a11y-scale))), 1fr)); }
html[data-a11y="on"] .rv-themes { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(270px * var(--a11y-scale))), 1fr)); justify-content: stretch; }
html[data-a11y="on"] .rv-theme { padding: 14px 16px; }
html[data-a11y="on"] .rv-theme__go { width: calc(38px * var(--a11y-scale)); height: calc(38px * var(--a11y-scale)); }
html[data-a11y="on"] .rv-cta { padding: 16px; }
html[data-a11y="on"] .rv-cta__btn { white-space: normal; }
html[data-a11y="on"] .rv-src__mark, html[data-a11y="on"] .rv-cta__dot, html[data-a11y="on"] .rv-entry__mark,
html[data-a11y="on"] .rv-quote__tag::before { background: currentColor; }
html[data-a11y="on"] .rv-note { color: var(--color-text); }

/* ============================================================
   15. Вопросы и ответы: переписка
   ============================================================

   Тёмный блок. Не аккордеон, а переписка: слева частые вопросы, справа окно
   в стиле мессенджера. Нажали вопрос: он уходит синим пузырём, клиника
   «печатает» (три точки), появляется ответ. Окно подписано «Готовые ответы
   на частые вопросы», это не живой чат. Внизу окна звонок. Когда окно впервые
   показалось, первый вопрос задаётся сам, чтобы было видно, как это работает.

   Без скрипта и в версии для слабовидящих вместо переписки обычный список
   вопросов (details), он же читается поисковиками.
   ============================================================ */

.sc-faq { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--section-space); background: var(--color-background); }
html:not([data-a11y="on"]) .sc-faq {
  --ink-hi: #6f96ff; --field-deep: #040a2c;
  --color-text: #ffffff; --color-muted: #9db0e6;
  --color-border: rgba(255, 255, 255, 0.16); --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-focus: #ffd400;
  color: #fff; background: var(--field-deep);
}
.sc-faq__beam {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 34% at 82% 10%, rgba(90, 150, 255, 0.22), rgba(90, 150, 255, 0) 70%),
    radial-gradient(44% 36% at 4% 96%, rgba(22, 56, 186, 0.42), rgba(22, 56, 186, 0) 72%);
}

.fq { display: grid; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 1100px) {
  .fq { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(40px, 5vw, 84px); }
}
.fq__eyebrow { display: block; }
html:not([data-a11y="on"]) .fq__eyebrow { color: #7d95dd; }
.fq__h {
  margin-top: 13px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display));
  line-height: 1.04; letter-spacing: -1px; text-wrap: balance;
}
.fq__h em { font-style: normal; color: var(--color-accent); }
html:not([data-a11y="on"]) .fq__h em { color: var(--ink-hi); }
.fq__lead { margin-top: 18px; max-width: 46ch; color: var(--color-muted); }

/* --- вопросы --- */
.fq__asks { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.fq-ask {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px;
  font: inherit; text-align: left; color: #dce5ff; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16);
  transition: background-color 250ms ease, box-shadow 250ms ease, color 250ms ease, translate 350ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.fq-ask__n { flex-shrink: 0; min-width: 24px; font-family: var(--font-display); font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 0.6px; color: #6f96ff; }
.fq-ask__q { font-weight: 600; font-size: max(calc(15.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.35; }
.fq-ask.is-asked { color: #9db0e6; }
.fq-ask.is-asked .fq-ask__n { color: #5dd39e; }
.fq-ask.is-current { color: #ffffff; background: rgba(61, 123, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(111, 150, 255, 0.6); }
.fq-ask:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .fq-ask:hover { color: #ffffff; background: rgba(255, 255, 255, 0.09); translate: 4px 0; }
}

/* --- окно переписки --- */
.fq-chat {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: clamp(560px, 45vw, 660px); overflow: hidden; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.18), 0 60px 90px -50px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.fq-chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); }
.fq-chat__ava {
  display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #4d86ff, #0b2db8); box-shadow: 0 8px 18px -8px rgba(61, 123, 255, 0.8);
}
.fq-logo { width: 21.5px; height: 26px; color: #ffffff; }
.fq-chat__who { display: grid; gap: 1px; min-width: 0; }
.fq-chat__who b { font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); }
.fq-chat__who span { font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }

.fq-chat__thread {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 20px 20px 24px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(157, 187, 255, 0.3) transparent;
}
.fq-msg { display: flex; transition: opacity 400ms ease, translate 500ms cubic-bezier(0.2, 0.8, 0.25, 1); }
.fq-msg.is-new { opacity: 0; translate: 0 10px; }
.fq-msg--in { justify-content: flex-start; }
.fq-msg--out { justify-content: flex-end; }
.fq-msg__bubble { max-width: 84%; padding: 12px 15px 13px; border-radius: 18px; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; }
.fq-msg__bubble p + p { margin-top: 8px; }
.fq-msg--in .fq-msg__bubble { color: #eef3ff; border-bottom-left-radius: 6px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.fq-msg--out .fq-msg__bubble { color: #ffffff; font-weight: 600; border-bottom-right-radius: 6px; background: linear-gradient(135deg, #3d7bff, #1b4fe0); box-shadow: 0 10px 24px -14px rgba(27, 90, 240, 0.9); }
.fq-msg.is-flash .fq-msg__bubble { animation: fq-flash 1.2s ease; }
@keyframes fq-flash { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } 30% { box-shadow: inset 0 0 0 2px #6f96ff, 0 0 30px rgba(111, 150, 255, 0.5); } }
.fq-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 10px;
  font-weight: 600; color: #ffffff; text-decoration: none; background: rgba(61, 123, 255, 0.35); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.4);
}
.fq-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.fq-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9db0e6; animation: fq-dot 1s ease-in-out infinite; }
.fq-typing i:nth-child(2) { animation-delay: 0.15s; }
.fq-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fq-dot { 0%, 60%, 100% { opacity: 0.35; translate: 0 0; } 30% { opacity: 1; translate: 0 -4px; } }

/* Быстрые вопросы внутри окна: только на телефоне и планшете. */
.fq-quick { display: none; }
.fq-quick__label { margin-bottom: 9px; font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; color: #7d95dd; }
.fq-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fq-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2; color: #eaf0ff; cursor: pointer;
  background: rgba(61, 123, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.34);
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.fq-chip.is-asked { color: #9db0e6; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16); }
.fq-chip.is-asked::before { content: ""; width: 10px; height: 6px; margin: -3px 1px 0 0; border-left: 2px solid #5dd39e; border-bottom: 2px solid #5dd39e; rotate: -45deg; }
.fq-chip.is-current { color: #ffffff; background: linear-gradient(135deg, #3d7bff, #1b4fe0); box-shadow: 0 8px 16px -10px rgba(27, 90, 240, 0.9); }
.fq-chip.is-current::before { border-color: #ffffff; }
.fq-chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.fq-chat__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(4, 10, 44, 0.4);
}
.fq-chat__foot p { font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.fq-chat__foot b { color: #ffffff; }
.fq-call {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 18px; border-radius: 14px;
  font-weight: 600; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #06102e; text-decoration: none; background: #ffffff;
  transition: background-color 220ms ease;
}
.fq-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .fq-call:hover { background: #e3ebff; } }

/* --- список без скрипта и для слабовидящих --- */
html:not(.no-js):not([data-a11y="on"]) .fq__list { display: none; }
html.no-js .fq__asks, html.no-js .fq-chat, html[data-a11y="on"] .fq__asks, html[data-a11y="on"] .fq-chat { display: none; }
.fq__list { display: grid; gap: 10px; grid-column: 1 / -1; }
.fq-item { border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16); }
.fq-item summary {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: calc(16px * var(--a11y-scale));
}
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item__n { min-width: 24px; font-family: var(--font-display); font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #6f96ff; }
.fq-item__a { padding: 0 16px 16px 54px; color: var(--color-muted); }
.fq-item__a p + p { margin-top: 8px; }
html[data-a11y="on"] .fq-item { background: var(--color-surface); border: 2px solid var(--color-border-strong); box-shadow: none; }
html[data-a11y="on"] .fq-item__a, html[data-a11y="on"] .fq-item__n { color: var(--color-text); }
/* Раскрывающийся вопрос помечен знаком «+», открытый знаком «−»: без маркера список
   выглядит как простые надписи в рамках. Ответ с отступом под текст вопроса. */
html[data-a11y="on"] .fq-item summary { min-height: calc(52px * var(--a11y-scale)); }
html[data-a11y="on"] .fq-item summary::after {
  content: "+"; flex-shrink: 0; margin-left: auto; font-family: var(--font-display); font-weight: 700;
  font-size: calc(26px * var(--a11y-scale)); line-height: 1;
}
html[data-a11y="on"] .fq-item[open] summary::after { content: "\2212"; }
html[data-a11y="on"] .fq-item__n { min-width: calc(24px * var(--a11y-scale)); flex-shrink: 0; }
html[data-a11y="on"] .fq-item__a { padding: 0 16px 18px calc(24px * var(--a11y-scale) + 30px); }
html[data-a11y="on"] .fq-link { background: none; box-shadow: none; color: var(--color-accent); text-decoration: underline; }

/* Появление: вопросы поднимаются по очереди, окно выезжает справа. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .fq:not(.is-in) .fq__asks li { opacity: 0; translate: -16px 0; }
  html:not(.no-js):not([data-a11y="on"]) .fq:not(.is-in) .fq-chat { opacity: 0; translate: 0 30px; }
  html:not(.no-js):not([data-a11y="on"]) .fq.is-in .fq__asks li { transition: opacity 600ms ease calc(var(--i) * 70ms), translate 800ms cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--i) * 70ms); }
  html:not(.no-js):not([data-a11y="on"]) .fq.is-in .fq-chat { transition: opacity 800ms ease 250ms, translate 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) 250ms; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-typing i { animation: none; opacity: 0.8; }
}

/* Телефон и планшет: список слева не нужен, вопросы внутри окна под перепиской.
   Окно помещается в экран целиком: видно и вопрос, и ответ. */
@media (max-width: 1099px) {
  html:not(.no-js):not([data-a11y="on"]) .fq__asks { display: none; }
  .fq-quick { display: block; padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(4, 10, 44, 0.3); }
  .fq-chat { height: min(calc(100svh - var(--sc-header-h, 64px) - 28px), 740px); min-height: 540px; }
}
@media (max-width: 699px) {
  .fq-chat { border-radius: 22px; }
  .fq-chat__head { padding: 12px 14px; }
  .fq-chat__ava { width: 38px; height: 38px; }
  .fq-logo { width: 19px; height: 23px; }
  .fq-chat__thread { padding: 14px 12px 16px; }
  .fq-msg__bubble { max-width: 90%; padding: 10px 13px 11px; font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); }
  .fq-quick { padding: 10px 12px 12px; }
  .fq-chip { min-height: 36px; padding: 7px 12px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); }
  .fq-chat__foot { flex-wrap: nowrap; padding: 10px 12px; }
  .fq-chat__more { display: none; }
  .fq-call { flex-shrink: 0; min-height: 40px; padding: 8px 14px; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); }
}

/* ============================================================
   16. Попап записи
   ============================================================

   Окно открывают все кнопки «Записаться» (data-book). Слева тёмная панель
   с вечерним фасадом клиники: заголовок, статус «сейчас открыто», телефоны.
   Справа форма: имя, телефон, согласие. На телефоне окно выезжает снизу,
   панель становится шапкой, телефоны уходят под форму.
   ============================================================ */

.bk {
  width: min(900px, calc(100vw - 40px)); max-width: none; max-height: min(92vh, 680px); margin: auto; padding: 0; border: 0;
  overflow: visible; color: var(--color-text); background: transparent;
  opacity: 0; translate: 0 22px; scale: 0.97;
  transition: opacity 280ms ease, translate 420ms cubic-bezier(0.2, 0.8, 0.25, 1), scale 420ms cubic-bezier(0.2, 0.8, 0.25, 1),
    overlay 420ms allow-discrete, display 420ms allow-discrete;
}
.bk[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .bk[open] { opacity: 0; translate: 0 22px; scale: 0.97; } }
.bk::backdrop { background: rgba(4, 10, 44, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color 320ms ease, backdrop-filter 320ms ease, overlay 320ms allow-discrete, display 320ms allow-discrete; }
.bk[open]::backdrop { background: rgba(4, 10, 44, 0.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@starting-style { .bk[open]::backdrop { background: rgba(4, 10, 44, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
html:has(.bk[open]) { overflow: hidden; }

.bk__card {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); max-height: inherit; overflow: hidden; border-radius: 28px;
  background: #ffffff; box-shadow: 0 60px 140px -40px rgba(4, 10, 44, 0.75), inset 0 0 0 1px rgba(11, 29, 107, 0.06);
}

/* --- тёмная панель с фасадом --- */
.bk__side { position: relative; isolation: isolate; overflow: hidden; color: #ffffff; background: #050c30; }
/* Фасад полосой сверху: вывеска и окна видны целиком, ниже фото плавно уходит в синий. */
.bk__photo { position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: 290px; object-fit: cover; object-position: 62% 28%; }
.bk__side::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 292px;
  background: linear-gradient(180deg, rgba(5, 12, 48, 0.35) 0%, rgba(5, 12, 48, 0) 22%, rgba(5, 12, 48, 0) 52%, rgba(5, 12, 48, 0.8) 80%, #050c30 100%);
}
.bk__side-in { display: flex; flex-direction: column; min-height: 100%; padding: 22px 30px 28px; }
.bk__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 0.4px; }
.bk__logo { width: 25px; height: 30px; color: #ffffff; }
.bk__title {
  margin-top: 212px; color: #ffffff; font-family: var(--font-display); font-weight: 700;
  font-size: calc(clamp(30px, 3vw, 38px) * var(--a11y-scale-display)); line-height: 1.04; letter-spacing: -0.8px;
}
.bk__text { margin-top: 12px; max-width: 34ch; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: #c9d5f5; }
.bk__status {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 18px; padding: 8px 14px 8px 12px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.28);
}
.bk__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #6f96ff; }
.bk__status[data-state="open"] .bk__dot { background: #4be29c; box-shadow: 0 0 10px rgba(75, 226, 156, 0.8); }
.bk__status[data-state="appointment"] .bk__dot { background: #ffc857; box-shadow: 0 0 10px rgba(255, 200, 87, 0.7); }
.bk__status[data-state="closed"] .bk__dot { background: #8ea2d8; }
.bk__call { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.bk__call-label { font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #8ea2d8; }
.bk__tel { display: flex; align-items: center; gap: 12px; min-height: 44px; color: #ffffff; text-decoration: none; }
.bk__tel svg, .bk__result-call svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.bk__tel svg { padding: 9px; width: 36px; height: 36px; border-radius: 50%; background: rgba(61, 123, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.35); }
.bk__tel span { display: grid; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #8ea2d8; }
.bk__tel b { font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--a11y-scale)); letter-spacing: -0.2px; color: #ffffff; }
.bk__addr { margin-top: 6px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #9db0e6; }

/* --- форма --- */
.bk__main { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 44px 40px 36px; overflow-y: auto; overscroll-behavior: contain; }
.bk[data-mode="teeth"] .bk__main { justify-content: flex-start; padding-top: 30px; padding-bottom: 24px; }
.bk[data-mode="teeth"] .bk__form { gap: 12px; }
.bk[data-mode="teeth"] .bk__field input[type="text"], .bk[data-mode="teeth"] .bk__field input[type="tel"] { min-height: 48px; padding-block: 11px; }
.bk[data-mode="teeth"] .bk__group legend { margin-bottom: 6px; }
.bk[data-mode="teeth"] .bk__tooth { min-height: 38px; }
.bk[data-mode="teeth"] .bk__tooth b { min-width: 28px; height: 28px; }
.bk[data-mode="teeth"] .bk__opt span { min-height: 34px; padding: 7px 12px; }
.bk[data-mode="teeth"] .bk__submit { min-height: 52px; }
.bk[data-mode="teeth"] { max-height: min(94vh, 760px); }
.bk__close {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--color-text); background: #eef2fb; transition: background-color 200ms ease, rotate 300ms ease;
}
.bk__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk__close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bk__form { display: grid; gap: 16px; }
.bk__form[hidden] { display: none; }
.bk__field { display: grid; gap: 7px; }
.bk__field label:not(.bk__check) { font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); }
.bk__field input[type="text"], .bk__field input[type="tel"] {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 0; border-radius: 14px; font: inherit; font-size: calc(16px * var(--a11y-scale));
  color: var(--color-text); background: #f3f6fd; box-shadow: inset 0 0 0 1.5px rgba(11, 29, 107, 0.1);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.bk__field input::placeholder { color: #93a1c4; }
.bk__field input:focus { outline: none; background: #ffffff; box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 0 4px rgba(27, 90, 240, 0.12); }
.bk__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #e5484d; background: #fff7f7; }
.bk__err { display: none; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #d93036; }
.bk__field.is-invalid .bk__err { display: block; }

.bk__check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: var(--color-muted); }
.bk__check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.bk__box {
  flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f3f6fd;
  box-shadow: inset 0 0 0 1.5px rgba(11, 29, 107, 0.2); transition: background-color 180ms ease, box-shadow 180ms ease;
}
.bk__box svg { width: 16px; height: 16px; fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: 0.6; transition: opacity 180ms ease, scale 220ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.bk__check input:checked + .bk__box { background: var(--color-accent); box-shadow: none; }
.bk__check input:checked + .bk__box svg { opacity: 1; scale: 1; }
.bk__check input:focus-visible + .bk__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bk__field.is-invalid .bk__box { box-shadow: inset 0 0 0 2px #e5484d; }
.bk__check a { color: var(--color-accent); }

.bk__submit {
  min-height: 56px; margin-top: 4px; padding: 14px 20px; border: 0; border-radius: 16px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: calc(16px * var(--a11y-scale)); color: #ffffff;
  background: linear-gradient(135deg, #3d7bff, #1b4fe0); box-shadow: 0 16px 30px -16px rgba(27, 79, 224, 0.9);
  transition: translate 300ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 300ms ease;
}
.bk__submit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.bk__submit[disabled] { opacity: 0.7; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .bk__close:hover { background: #e1e8f8; rotate: 90deg; }
  .bk__submit:hover { translate: 0 -2px; box-shadow: 0 20px 34px -16px rgba(27, 79, 224, 1); }
}

/* --- два режима окна: обычная запись и запись с выбранными зубами --- */
/* Режимы: general (обычная запись), teeth (с зубами из формулы), estimate (по смете со страницы цен). */
.bk[data-mode="general"] .bk__for-teeth, .bk[data-mode="general"] [data-book-health],
.bk[data-mode="general"] .bk__for-estimate, .bk[data-mode="teeth"] .bk__for-estimate,
.bk[data-mode="estimate"] .bk__for-teeth, .bk[data-mode="estimate"] .bk__for-general { display: none; }
.bk[data-mode="teeth"] .bk__for-general { display: none; }
.bk[data-mode="teeth"] .bk__photo, .bk[data-mode="teeth"] .bk__side::before,
.bk[data-mode="estimate"] .bk__photo, .bk[data-mode="estimate"] .bk__side::before { display: none; }
.bk[data-mode="teeth"] .bk__side, .bk[data-mode="estimate"] .bk__side { background: radial-gradient(120% 70% at 100% 0%, #1d3fbf 0%, #0a1a66 42%, #050c30 100%); }
.bk[data-mode="teeth"] .bk__title, .bk[data-mode="estimate"] .bk__title { margin-top: 26px; }
.bk[data-mode="estimate"] .bk__call { display: none; }

/* Смета в окне записи: список услуг и сумма на тёмной панели. */
.bk__estimate { display: grid; gap: 8px; margin-top: 22px; padding: 16px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16); }
.bk__estimate-label { font-weight: 600; font-size: max(calc(10px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; color: #8ea2d8; }
.bk__estimate-list { display: grid; gap: 6px; max-height: 190px; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.bk__estimate-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.4; color: #dce5ff; }
.bk__estimate-list li b { font-weight: 600; color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk__estimate-list li span span { color: #8ea2d8; }
.bk__estimate-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.bk__estimate-total span { font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); color: #9db0e6; }
.bk__estimate-total b { font-family: var(--font-display); font-weight: 700; font-size: calc(24px * var(--a11y-scale-display)); color: #ffffff; font-variant-numeric: tabular-nums; }

/* Зубная формула: выбранные зубы горят фирменным синим. */
.bk__formula { display: none; }
.bk[data-mode="teeth"] .bk__formula { display: grid; gap: 12px; margin-top: 22px; padding: 16px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16); }
.bk__jaw { display: grid; gap: 6px; }
.bk__jaw + .bk__jaw { padding-top: 12px; border-top: 1px dashed rgba(157, 187, 255, 0.25); }
.bk__jaw-label { font-weight: 600; font-size: max(calc(10px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.2px; text-transform: uppercase; color: #8ea2d8; }
.bk__cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.bk__cells span {
  display: grid; place-items: center; height: 26px; border-radius: 7px; font-family: var(--font-display); font-weight: 600;
  font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); color: rgba(220, 229, 255, 0.55); background: rgba(255, 255, 255, 0.05);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.bk__cells span.is-mid { margin-right: 5px; }
.bk__cells span.is-on { color: #ffffff; background: linear-gradient(135deg, #4a86ff, #1b4fe0); box-shadow: 0 0 14px rgba(77, 134, 255, 0.7); }

/* Выбранные зубы в форме: номер, название, убрать. */
.bk__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.bk__group legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); }
.bk__group legend span { font-weight: 500; color: var(--color-muted); }
.bk__teeth { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk__tooth {
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 5px 5px 6px; border-radius: 13px;
  background: #eef3ff; box-shadow: inset 0 0 0 1px rgba(27, 90, 240, 0.2);
}
.bk__tooth b {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff; background: var(--color-accent);
}
.bk__tooth span { font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.25; color: var(--color-text); }
.bk__tooth button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--color-muted); background: transparent;
}
.bk__tooth button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk__tooth button:hover { color: #d93036; background: rgba(217, 48, 54, 0.08); }
.bk__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.bk__opt { position: relative; cursor: pointer; }
.bk__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk__opt span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.2; color: var(--color-text);
  background: #f3f6fd; box-shadow: inset 0 0 0 1.5px rgba(11, 29, 107, 0.12); transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.bk__opt input:checked + span { color: #ffffff; background: var(--color-accent); box-shadow: none; }
.bk__opt input:checked + span::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; }
.bk__opt input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bk__policy { margin-top: -4px; font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.bk__policy a, .bk__check a { color: var(--color-accent); }

/* --- итог отправки --- */
.bk__result { display: grid; justify-items: start; gap: 10px; outline: none; }
.bk__result[hidden] { display: none; }
/* Значок итога: трубка, если нужно позвонить; галочка, если заявка принята. */
.bk__result-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; color: #c47a06; background: #fff4e0; }
.bk__result-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk__result-icon svg + svg { display: none; }
.bk[data-state="sent"] .bk__result-icon { color: #1a9a5c; background: #e7f8ef; }
.bk[data-state="sent"] .bk__result-icon svg:first-child { display: none; }
.bk[data-state="sent"] .bk__result-icon svg + svg { display: block; }
.bk__result-title { font-family: var(--font-display); font-weight: 700; font-size: calc(24px * var(--a11y-scale-display)); line-height: 1.15; letter-spacing: -0.5px; }
.bk__result-text { font-size: max(calc(15.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: var(--color-muted); }
.bk__result-call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; margin-top: 8px; padding: 12px 20px; border-radius: 16px;
  font-weight: 700; font-size: calc(17px * var(--a11y-scale)); color: #ffffff; text-decoration: none;
  background: linear-gradient(135deg, #3d7bff, #1b4fe0); box-shadow: 0 16px 30px -16px rgba(27, 79, 224, 0.9);
}
.bk[data-state="sent"] .bk__result-call { display: none; }
.bk__result-back { min-height: 44px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--color-accent); }

/* Телефон: окно выезжает снизу. */
@media (max-width: 759px) {
  .bk { width: 100%; max-height: 94svh; margin: auto 0 0; translate: 0 40px; scale: 1; }
  .bk[open] { translate: 0 0; }
  @starting-style { .bk[open] { translate: 0 100%; } }
  .bk__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 94svh; border-radius: 26px 26px 0 0; }
  .bk__side-in { padding: 16px 20px 18px; }
  .bk__photo, .bk__side::before { height: 170px; }
  .bk__photo { object-position: 60% 30%; }
  .bk__title { margin-top: 104px; font-size: calc(28px * var(--a11y-scale-display)); }
  .bk__text { font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); }
  .bk__status { margin-top: 12px; }
  .bk__call { display: none; }
  .bk__main { justify-content: flex-start; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
  /* С зубами окно выше экрана: прокручивается целиком, формула уезжает вверх
     вместе с формой, крестик остаётся на месте. */
  .bk[data-mode="teeth"] .bk__card { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .bk[data-mode="teeth"] .bk__main { overflow: visible; }
  .bk[data-mode="teeth"] .bk__formula { margin-top: 14px; padding: 12px 10px 10px; gap: 9px; }
  .bk[data-mode="teeth"] .bk__title { margin-top: 16px; }
  .bk[data-mode="teeth"] .bk__text, .bk[data-mode="teeth"] .bk__status { display: none; }
  .bk__cells { gap: 2px; }
  .bk__cells span { height: 22px; border-radius: 5px; font-size: max(calc(9.5px * var(--a11y-scale)), var(--a11y-floor)); }
  .bk__cells span.is-mid { margin-right: 3px; }
  /* Крестик тёмный полупрозрачный: виден и на фото, и на белой форме, когда окно прокручено. */
  .bk__close { top: 14px; right: 14px; z-index: 3; color: #ffffff; background: rgba(8, 18, 60, 0.72); position: fixed;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); }
}

/* Версия для слабовидящих: окно на теме пользователя, без фото. */
html[data-a11y="on"] .bk__card { background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: 12px; }
html[data-a11y="on"] .bk__side { color: var(--color-text); background: var(--color-surface); border-right: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__photo { display: none; }
html[data-a11y="on"] .bk__side::before { display: none; }
html[data-a11y="on"] .bk__title { margin-top: 16px; color: var(--color-text); }
html[data-a11y="on"] .bk__text, html[data-a11y="on"] .bk__call-label, html[data-a11y="on"] .bk__tel, html[data-a11y="on"] .bk__tel b,
html[data-a11y="on"] .bk__tel span, html[data-a11y="on"] .bk__addr, html[data-a11y="on"] .bk__status, html[data-a11y="on"] .bk__brand,
html[data-a11y="on"] .bk__check, html[data-a11y="on"] .bk__result-text { color: var(--color-text); }
html[data-a11y="on"] .bk__logo { color: var(--color-text); }
html[data-a11y="on"] .bk__field input[type="text"], html[data-a11y="on"] .bk__field input[type="tel"] { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__submit, html[data-a11y="on"] .bk__result-call { color: var(--color-accent-ink); background: var(--color-accent); }
html[data-a11y="on"] .bk__close { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .bk[data-mode="teeth"] .bk__side { background: var(--color-surface); }
html[data-a11y="on"] .bk__formula { background: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__cells span, html[data-a11y="on"] .bk__jaw-label { color: var(--color-text); background: none; border: 1px solid var(--color-border); }
html[data-a11y="on"] .bk__cells span.is-on { color: var(--color-accent-ink); background: var(--color-accent); }
html[data-a11y="on"] .bk__tooth, html[data-a11y="on"] .bk__opt span { color: var(--color-text); background: var(--color-surface); box-shadow: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__tooth span, html[data-a11y="on"] .bk__policy, html[data-a11y="on"] .bk__group legend span { color: var(--color-text); }
/* Галочка: рамка вместо тени, отмеченная залита цветом темы с галкой цветом фона. */
html[data-a11y="on"] .bk__box { width: calc(24px * var(--a11y-scale)); height: calc(24px * var(--a11y-scale)); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__box svg { stroke: var(--color-accent-ink); width: calc(16px * var(--a11y-scale)); height: calc(16px * var(--a11y-scale)); }
html[data-a11y="on"] .bk__check input:checked + .bk__box { background: var(--color-accent); border-color: var(--color-accent); }
html[data-a11y="on"] .bk__opt span { border-width: 2px; }
html[data-a11y="on"] .bk__opt input:checked + span { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
html[data-a11y="on"] .bk__opt input:checked + span::before { border-color: var(--color-accent-ink); }
/* Ошибка: не красным, а знаком «!» в круге и жирным, поле с пунктирной рамкой. */
html[data-a11y="on"] .bk__err { color: var(--color-text); font-weight: 700; }
html[data-a11y="on"] .bk__err::before {
  content: "!"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 0.45em;
  border: 2px solid currentColor; border-radius: 50%; font-weight: 800; line-height: 1;
}
html[data-a11y="on"] .bk__field input[aria-invalid="true"] { background: var(--color-surface); border: 3px dashed var(--color-border-strong); }
html[data-a11y="on"] .bk__field.is-invalid .bk__box { border-style: dashed; border-width: 3px; }
html[data-a11y="on"] .bk__field input::placeholder { color: var(--color-text); opacity: 1; font-style: italic; }
html[data-a11y="on"] .bk__field input:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Статус, телефоны, смета и зубы в окне цветом темы. */
html[data-a11y="on"] .bk__status .bk__dot { background: currentColor; }
html[data-a11y="on"] .bk__status { background: none; border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__tel svg { background: none; border: 2px solid var(--color-border-strong); color: var(--color-text); }
html[data-a11y="on"] .bk__estimate { background: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__estimate-label, html[data-a11y="on"] .bk__estimate-list li, html[data-a11y="on"] .bk__estimate-total span,
html[data-a11y="on"] .bk__estimate-total b { color: var(--color-text); }
html[data-a11y="on"] .bk__cells span { border-width: 2px; }
/* Мини-формула из 32 клеток при крупном шрифте нечитаема, а те же зубы перечислены
   списком справа, поэтому в версии для слабовидящих её нет. Номер зуба в списке
   цветом фона на заливке темы, крестик удаления с рамкой. */
html[data-a11y="on"] .bk[data-mode="teeth"] .bk__formula { display: none; }
html[data-a11y="on"] .bk__call { border-top-color: var(--color-border); }
html[data-a11y="on"] .doc__head { border-bottom-color: var(--color-border); }
html[data-a11y="on"] .rv-pop__foot { border-top-color: var(--color-border); }
html[data-a11y="on"] .bk__tooth b { color: var(--color-accent-ink); background: var(--color-accent); min-width: calc(32px * var(--a11y-scale)); height: calc(32px * var(--a11y-scale)); }
html[data-a11y="on"] .bk__tooth button { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .bk__tooth button:hover { color: var(--color-accent-ink); background: var(--color-accent); }

/* ============================================================
   17. Подвал: контакты
   ============================================================

   Светлый подвал после тёмного блока «Вопросы и ответы». Сверху заголовок
   и тёмная карточка звонка: крупный телефон, статус «сейчас открыто», кнопка
   записи (открывает попап). Под ними адрес с маршрутами, часы с неделей,
   почта. Внизу разделы, реквизиты, лицензия, предупреждение о противопоказаниях,
   «Разработка сайта» и крупное название клиники, обрезанное краем страницы.
   ============================================================ */

.sc-footer {
  position: relative; isolation: isolate; overflow: hidden; padding-top: var(--section-space);
  background: linear-gradient(180deg, #f5f8ff 0%, var(--color-surface-alt) 55%, #e9effc 100%);
}
html[data-a11y="on"] .sc-footer { background: var(--color-background); border-top: 2px solid var(--color-border); }
.sc-deco--footer .sc-deco__glow--a { left: auto; right: -14%; top: -30%; }
.sc-deco--footer .sc-deco__glow--b { right: auto; left: -18%; bottom: -20%; }

.ft__top { display: grid; gap: clamp(24px, 3vw, 36px); }
@media (min-width: 1100px) {
  .ft__top { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: end; gap: clamp(40px, 5vw, 84px); }
}
.ft__eyebrow { display: block; }
.ft__title {
  margin-top: 15px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display)); line-height: 1.02; letter-spacing: -1px;
}
.ft__title em { display: block; font-style: normal; color: var(--color-accent); }
.ft__lead { margin-top: 18px; max-width: 44ch; color: var(--color-muted); }

/* --- карточка звонка --- */
.ft-call {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; color: #ffffff;
  background: radial-gradient(90% 130% at 100% 0%, #2148d6 0%, #0b1d6b 46%, #050c30 100%);
  box-shadow: 0 50px 80px -44px rgba(5, 13, 58, 0.7), inset 0 0 0 1px rgba(157, 187, 255, 0.16);
}
.ft-call::before {
  content: ""; position: absolute; z-index: -1; right: -90px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(157, 187, 255, 0.18); box-shadow: 0 0 0 40px rgba(157, 187, 255, 0.04), 0 0 0 80px rgba(157, 187, 255, 0.03);
}
.ft-call__label { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #8ea2d8; }
.ft-call__phone {
  display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; white-space: nowrap;
  font-size: calc(clamp(30px, 4.4vw, 60px) * var(--a11y-scale-display)); line-height: 1; letter-spacing: -1.6px;
  color: #ffffff; text-decoration: none; background: linear-gradient(180deg, #ffffff 40%, #c4d4ff); -webkit-background-clip: text; background-clip: text;
}
.ft-call__second { margin-top: 10px; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #9db0e6; }
.ft-call__second a { font-weight: 600; color: #ffffff; text-decoration: none; }
.ft-call__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 24px; }
.ft-call__status {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 15px 9px 13px; border-radius: 999px;
  font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.28);
}
.ft-call__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #6f96ff; }
.ft-call__status[data-state="open"] .ft-call__dot { background: #4be29c; box-shadow: 0 0 10px rgba(75, 226, 156, 0.8); }
.ft-call__status[data-state="appointment"] .ft-call__dot { background: #ffc857; box-shadow: 0 0 10px rgba(255, 200, 87, 0.7); }
.ft-call__status[data-state="closed"] .ft-call__dot { background: #8ea2d8; }
.ft-call__book {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px 12px 20px; border-radius: 15px;
  font-weight: 600; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #06102e; text-decoration: none; background: #ffffff;
  transition: background-color 220ms ease;
}
.ft-ico { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 260ms ease; }

/* --- адрес, часы, почта --- */
.ft__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(16px, 1.8vw, 22px); }
.ft-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 24px 22px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -34px rgba(11, 29, 107, 0.4), inset 0 0 0 1px rgba(11, 29, 107, 0.06);
}
.ft-card__label { font-weight: 600; font-size: max(calc(10.5px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #6a7fb8; }
.ft-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(21px, 1.8vw, 26px) * var(--a11y-scale-display));
  line-height: 1.15; letter-spacing: -0.5px; color: var(--color-text); overflow-wrap: anywhere;
}
.ft-card__mail { text-decoration: none; }
.ft-card__text { font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: var(--color-muted); }
.ft-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.ft-route {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 12px 9px 13px; border-radius: 13px;
  font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); text-decoration: none; background: #ffffff;
  box-shadow: 0 8px 18px -14px rgba(11, 29, 107, 0.5), inset 0 0 0 1px rgba(11, 29, 107, 0.1);
}
.ft-route .ft-ico { width: 15px; height: 15px; color: var(--color-accent); }
.ft-route__dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }
.ft-route--yandex .ft-route__dot { background: #fc3f1d; box-shadow: 0 0 0 4px rgba(252, 63, 29, 0.14); }
.ft-route--2gis .ft-route__dot { background: #19aa1e; box-shadow: 0 0 0 4px rgba(25, 170, 30, 0.14); }

/* Неделя на светлом: будни залиты, суббота пунктиром, воскресенье бледное, сегодня в кольце. */
.ft-week { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.ft-week span {
  position: relative; display: grid; place-items: center; width: 36px; height: 30px; border-radius: 9px;
  font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #1b3fb8; background: rgba(27, 90, 240, 0.1);
  box-shadow: inset 0 0 0 1px rgba(27, 90, 240, 0.22);
}
.ft-week [data-state="appointment"] { color: #a86508; background: rgba(245, 165, 36, 0.08); box-shadow: none; border: 1px dashed rgba(245, 165, 36, 0.8); }
.ft-week [data-state="closed"] { color: #9aa6c6; background: rgba(11, 29, 107, 0.03); box-shadow: inset 0 0 0 1px rgba(11, 29, 107, 0.08); }
.ft-week [data-today]::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1.5px solid var(--color-accent); }

/* --- низ подвала --- */
.ft-bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid rgba(11, 29, 107, 0.1); }
.ft-bottom__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.ft-logo__mark { width: 29px; height: 35px; color: var(--color-accent); }
.ft-logo span:not(.sc-mark) { font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--a11y-scale)); letter-spacing: -0.3px; }
.ft-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.ft-nav a { display: inline-block; padding: 6px 0; font-weight: 500; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); text-decoration: none; }
.ft-a11y {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 15px; border: 0; border-radius: 13px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-accent); background: rgba(27, 90, 240, 0.08);
  box-shadow: inset 0 0 0 1px rgba(27, 90, 240, 0.2);
}
.ft-a11y svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Подпись говорит, что сделает кнопка: включит версию или вернёт обычную. */
.ft-a11y__on { display: none; }
html[data-a11y="on"] .ft-a11y__off { display: none; }
html[data-a11y="on"] .ft-a11y__on { display: inline; }
.ft-nowrap { white-space: nowrap; }
.ft-legal { display: grid; gap: 4px; margin-top: 22px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.6; color: var(--color-muted); max-width: 96ch; }
.ft-disclaimer {
  margin-top: 18px; padding: 14px 18px; border-radius: 14px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(13px, 1.25vw, 16px) * var(--a11y-scale)); letter-spacing: 0.8px; text-transform: uppercase;
  color: #0b1d6b; background: rgba(27, 90, 240, 0.07); box-shadow: inset 0 0 0 1px rgba(27, 90, 240, 0.14);
}
.ft-bottom__row--meta { margin-top: 18px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.ft-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ft-meta a { color: var(--color-muted); }
/* П. 7.3 договора: высота текста 12 px, прозрачность 75–90 %. */
.ft-dev { font-size: 12px; opacity: 0.8; color: var(--color-text); }

/* Крупное название клиники: заканчивает страницу, обрезано краем, по буквам изредка проходит блик. */
.ft-wordmark {
  position: relative; margin: clamp(18px, 2.4vw, 34px) 0 0; font-family: var(--font-display); font-weight: 700; white-space: nowrap; text-align: center;
  font-size: 13.4vw; line-height: 0.74; letter-spacing: -0.045em; translate: 0 16%; user-select: none; pointer-events: none;
  color: transparent;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 58%) -60% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, rgba(27, 90, 240, 0.22) 0%, rgba(27, 90, 240, 0.1) 55%, rgba(27, 90, 240, 0.02) 100%);
  -webkit-background-clip: text; background-clip: text;
}
@media (min-width: 1440px) { .ft-wordmark { font-size: 192px; } }
@media (prefers-reduced-motion: no-preference) {
  .ft-wordmark { animation: ft-shine 11s ease-in-out 2s infinite; }
}
@keyframes ft-shine {
  0% { background-position: -60% 0, 0 0; }
  45%, 100% { background-position: 160% 0, 0 0; }
}
@media (hover: hover) and (pointer: fine) {
  .ft-call__book:hover { background: #e3ebff; }
  .ft-call__book:hover .ft-ico { translate: 3px 0; }
  .ft-route:hover .ft-ico { translate: 2px -2px; }
  .ft-nav a:hover, .ft-card__mail:hover { color: var(--color-accent); }
  .ft-call__phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}

/* Появление: заголовок, карточка звонка и карточки по очереди. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .ft:not(.is-in) .ft__intro,
  html:not(.no-js):not([data-a11y="on"]) .ft:not(.is-in) .ft-call,
  html:not(.no-js):not([data-a11y="on"]) .ft:not(.is-in) .ft-card { opacity: 0; translate: 0 26px; }
  html:not(.no-js):not([data-a11y="on"]) .ft.is-in .ft__intro,
  html:not(.no-js):not([data-a11y="on"]) .ft.is-in .ft-call,
  html:not(.no-js):not([data-a11y="on"]) .ft.is-in .ft-card { transition: opacity 800ms ease var(--d, 0ms), translate 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) var(--d, 0ms); }
  .ft-call { --d: 120ms; }
  .ft-card:nth-child(1) { --d: 260ms; }
  .ft-card:nth-child(2) { --d: 360ms; }
  .ft-card:nth-child(3) { --d: 460ms; }
}

/* Планшет: карточки в два ряда. Телефон: всё столбцом. */
@media (max-width: 1099px) {
  .ft__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__cards .ft-card:first-child { grid-column: 1 / -1; }
  .ft-bottom__row:first-child { display: grid; justify-content: start; }
}
@media (max-width: 699px) {
  .ft__cards { grid-template-columns: minmax(0, 1fr); }
  .ft-call { border-radius: 24px; }
  .ft-call__phone { font-size: calc(8vw * var(--a11y-scale-display)); letter-spacing: -1px; }
  .ft-call__row { display: grid; justify-content: stretch; }
  .ft-call__status { width: fit-content; }
  .ft-call__book { justify-content: center; }
  .ft-card { padding: 20px; }
  .ft-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .ft-disclaimer { text-align: left; letter-spacing: 0.4px; }
  .ft-bottom__row--meta { display: grid; justify-content: start; gap: 8px; }
}

/* Версия для слабовидящих: карточки на теме, без названия-декора. */
html[data-a11y="on"] .ft-call, html[data-a11y="on"] .ft-card, html[data-a11y="on"] .ft-disclaimer {
  color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: 12px;
}
html[data-a11y="on"] .ft-call::before, html[data-a11y="on"] .ft-wordmark { display: none; }
html[data-a11y="on"] .ft-call__phone { color: var(--color-text); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
html[data-a11y="on"] .ft-call__label, html[data-a11y="on"] .ft-call__second, html[data-a11y="on"] .ft-call__second a, html[data-a11y="on"] .ft-call__status,
html[data-a11y="on"] .ft-card__label, html[data-a11y="on"] .ft-card__text, html[data-a11y="on"] .ft-legal, html[data-a11y="on"] .ft-bottom__row--meta,
html[data-a11y="on"] .ft-meta a, html[data-a11y="on"] .ft-week span { color: var(--color-text); }
html[data-a11y="on"] .ft-call__book { color: var(--color-accent-ink); background: var(--color-accent); }
html[data-a11y="on"] .ft-route, html[data-a11y="on"] .ft-a11y, html[data-a11y="on"] .ft-week span { background: var(--color-surface); box-shadow: none; border: 1px solid var(--color-border-strong); }
/* Метки статуса и площадок цветом текста (подпись рядом), линии сплошные цветом темы,
   номер телефона на телефоне не выходит за карточку при крупном шрифте. */
html[data-a11y="on"] .ft-call__status .ft-call__dot, html[data-a11y="on"] .ft-route .ft-route__dot { background: currentColor; }
html[data-a11y="on"] .ft-call__status { background: none; border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .ft-a11y, html[data-a11y="on"] .ft-route { border-width: 2px; }
html[data-a11y="on"] .ft-bottom { border-top: 2px solid var(--color-border); }
html[data-a11y="on"] .ft-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
html[data-a11y="on"] .ft-week [data-state="closed"] { border-style: dotted; }
html[data-a11y="on"] .ft-week [data-state="appointment"] { border-style: dashed; }
html[data-a11y="on"] .ft-dev { font-size: var(--a11y-floor); opacity: 1; }
html[data-a11y="on"] .ft-week span { width: auto; min-width: calc(36px * var(--a11y-scale)); height: calc(30px * var(--a11y-scale)); padding-inline: 4px; border-width: 2px; }
/* Номер в карточке звонка: одной строкой, кегль по ширине карточки (контейнерные
   единицы), чтобы при крупном шрифте номер не обрезался краем карточки. */
html[data-a11y="on"] .ft-call { container-type: inline-size; }
html[data-a11y="on"] .ft-call__phone { font-size: min(calc(clamp(30px, 4.4vw, 60px) * var(--a11y-scale-display)), calc(96cqi / (9 + 18 * var(--a11y-ls)))); letter-spacing: -0.5px; }

/* ============================================================
   18. Правовые элементы
   ============================================================

   Предупреждение о противопоказаниях (ФЗ «О рекламе», ст. 24 ч. 7): строкой
   в блоках с услугами и ценами и большой плашкой в конце страницы. Окно
   просмотра документов, баннер cookie, страницы документов.
   ============================================================ */

/* Предупреждение в блоках: тихая подпись, без значков и плашек (заказчик,
   28.09.2026: жёлтый «!» некрасив, у услуг достаточно маленькой подписи).
   Одиночная строка начинается с тонкой черты; в сноске у цен черта стоит
   слева во всю высоту, а предупреждение первой, чуть более плотной строкой. */
.sc-legal {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; max-width: 64ch;
  font-weight: 500; font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; letter-spacing: 0.1px;
}
.sc-legal::before { content: ""; flex-shrink: 0; width: 18px; height: 1px; margin-top: 0.75em; background: currentColor; opacity: 0.55; }
.sc-legal--dark { color: #9db0e6; }
.sc-legal--light { color: #56668f; }
.sc-legal-wrap {
  display: grid; gap: 3px; max-width: 82ch; margin-top: clamp(18px, 2vw, 26px); padding-left: 14px;
  border-left: 1px solid rgba(27, 90, 240, 0.28);
}
.sc-legal-wrap .sc-legal { max-width: none; font-weight: 600; }
.sc-legal-wrap .sc-legal::before { display: none; }
.sc-legal-wrap .sc-legal--light { color: #33416b; }
.sc-legal-wrap .sc-legal--dark { color: #c9d5f5; }
.sc-legal-note { font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: var(--color-muted); }
html:not([data-a11y="on"]) .sc-care .sc-legal-wrap { border-left-color: rgba(157, 187, 255, 0.3); }
html:not([data-a11y="on"]) .sc-care .sc-legal-note { color: #8ea2d8; }
html[data-a11y="on"] .sc-legal, html[data-a11y="on"] .sc-legal-wrap .sc-legal, html[data-a11y="on"] .sc-legal-note { color: var(--color-text); }
html[data-a11y="on"] .sc-legal-wrap { border-left: 2px solid var(--color-border-strong); }

/* Финал страницы: предупреждение крупным набором в стиле заголовков сайта,
   первая строка тёмная, вторая фирменным синим; строки выезжают снизу,
   по тексту изредка проходит блик. */
.ft-final { margin-top: clamp(36px, 4.4vw, 64px); padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid rgba(11, 29, 107, 0.12); }
.ft-final__text {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: calc(clamp(28px, 4.55vw, 66px) * var(--a11y-scale-display)); line-height: 1.04; letter-spacing: -0.035em;
}
.ft-final__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ft-final__line > span {
  display: inline-block; color: transparent;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 62%) -70% 0 / 45% 100% no-repeat,
    linear-gradient(90deg, #0b1220, #1a2550);
  -webkit-background-clip: text; background-clip: text;
}
.ft-final__line--accent > span {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 62%) -70% 0 / 45% 100% no-repeat,
    linear-gradient(90deg, #1b4fe0 0%, #3d7bff 55%, #6f96ff 100%);
  -webkit-background-clip: text; background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not([data-a11y="on"]) .ft-final:not(.is-in) .ft-final__line > span { translate: 0 105%; }
  html:not(.no-js):not([data-a11y="on"]) .ft-final.is-in .ft-final__line > span {
    transition: translate 1100ms cubic-bezier(0.2, 0.8, 0.25, 1);
    animation: ft-final-shine 12s ease-in-out 1.6s infinite;
  }
  html:not(.no-js):not([data-a11y="on"]) .ft-final.is-in .ft-final__line--accent > span { transition-delay: 140ms; animation-delay: 1.9s; }
}
@keyframes ft-final-shine {
  0% { background-position: -70% 0, 0 0; }
  38%, 100% { background-position: 170% 0, 0 0; }
}
html[data-a11y="on"] .ft-final__line > span, html[data-a11y="on"] .ft-final__line--accent > span {
  color: var(--color-text); background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
html[data-a11y="on"] .ft-final { border-top: 2px solid var(--color-border-strong); }
/* Самое длинное слово («противопоказания.») помещается в ширину экрана при любом
   размере шрифта и интервале; перенос по слогам как запасной вариант. */
html[data-a11y="on"] .ft-final__text { font-size: min(calc(clamp(28px, 4.55vw, 66px) * var(--a11y-scale-display)), 7vw); hyphens: auto; overflow-wrap: anywhere; }
html[data-a11y="on"] .ft-final__line { overflow: visible; }
html[data-a11y="on"] .ft-final__line > span { display: inline; }

/* Информация для пациентов: раскрывающийся раздел в подвале. */
.ft-info { margin-top: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 20px 44px -34px rgba(11, 29, 107, 0.45), inset 0 0 0 1px rgba(11, 29, 107, 0.08); }
.ft-info > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 18px 20px; cursor: pointer; list-style: none;
}
.ft-info > summary::-webkit-details-marker { display: none; }
.ft-info__title { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--a11y-scale)); color: var(--color-text); }
.ft-info__sum { grid-column: 1; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.ft-info__chev {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--color-accent); background: rgba(27, 90, 240, 0.08); transition: rotate 300ms ease;
}
.ft-info__chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ft-info[open] .ft-info__chev { rotate: 180deg; }
.ft-info > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 20px; }
.ft-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding: 4px 20px 22px; }
.ft-info__col { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ft-info__col h3 { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #6a7fb8; }
.ft-info__col h3:not(:first-child) { margin-top: 10px; }
.ft-info__col p, .ft-info__col li { font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: var(--color-text); }
.ft-info__col a { color: var(--color-accent); overflow-wrap: anywhere; }
.ft-info__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ft-info__org + .ft-info__org { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(11, 29, 107, 0.08); }
.ft-info__org { display: grid; gap: 2px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; }
.ft-info__org b { font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.35; color: var(--color-text); }
.ft-info__org span { color: var(--color-muted); }
.ft-info__org a { color: var(--color-accent); text-decoration: none; }
.ft-info__org a:hover { text-decoration: underline; }
.ft-info__pending { color: var(--color-muted); }
.ft-info__pending em { display: inline-block; font-style: normal; font-size: max(calc(11.5px * var(--a11y-scale)), var(--a11y-floor)); padding: 1px 7px; margin-left: 4px; border-radius: 999px; white-space: nowrap; color: #a86508; background: #fff4e0; }
.ft-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1099px) { .ft-info__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .ft-info > summary { padding: 16px; }
  .ft-info__grid { padding: 4px 16px 18px; }
}
html[data-a11y="on"] .ft-info { background: var(--color-surface); box-shadow: none; border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .ft-info__sum, html[data-a11y="on"] .ft-info__col h3, html[data-a11y="on"] .ft-info__org span, html[data-a11y="on"] .ft-link { color: var(--color-text); }
html[data-a11y="on"] .ft-info__chev { background: none; border: 2px solid var(--color-border-strong); color: var(--color-text); }
html[data-a11y="on"] .ft-info__org + .ft-info__org { border-top: 1px solid var(--color-border); }
html[data-a11y="on"] .ft-info__pending em { color: var(--color-text); background: none; border: 1px dashed var(--color-border-strong); }
html[data-a11y="on"] .doc__draft { color: var(--color-text); background: none; border: 2px solid var(--color-border-strong); }

/* Окно просмотра документа. */
.doc {
  width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 820px); margin: auto; padding: 0; border: 0; border-radius: 24px;
  overflow: hidden; color: var(--color-text); background: #ffffff; box-shadow: 0 60px 140px -40px rgba(4, 10, 44, 0.75);
}
.doc::backdrop { background: rgba(4, 10, 44, 0.5); }
.doc__card { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; }
.doc__head { position: relative; padding: 24px 28px 16px; border-bottom: 1px solid #e6ecf7; }
.doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.doc__draft { padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 0.8px; text-transform: uppercase; color: #a86508; background: #fff4e0; }
.doc[data-draft="0"] .doc__draft { display: none; }
.doc__title { margin-top: 8px; padding-right: 52px; font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(20px, 2.2vw, 26px) * var(--a11y-scale-display)); line-height: 1.15; letter-spacing: -0.4px; }
.doc__close {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--color-text); background: #eef2fb;
}
.doc__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.doc__body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 28px 30px; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.62; }
.doc__body h3, .doc-page__body h3 { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); }
.doc__body p, .doc-page__body p { margin-top: 8px; }
html[data-a11y="on"] .doc { background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .doc__close { background: var(--color-surface); border: 2px solid var(--color-border-strong); }

/* Страница документа (без скрипта и в Tilda это отдельные страницы). */
.doc-page { background: var(--color-surface-alt); }
.doc-page__main { max-width: calc(820px + var(--page-gutter) * 2); padding-block: clamp(32px, 6vw, 72px); }
.doc-page__back a { font-weight: 600; color: var(--color-accent); }
.doc-page__meta { margin-top: 28px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.doc-page__title { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(28px, 4vw, 40px) * var(--a11y-scale-display)); line-height: 1.1; }
.doc-page__draft { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 10px; font-weight: 600; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #a86508; background: #fff4e0; }
.doc-page__body { margin-top: 20px; font-size: calc(16px * var(--a11y-scale)); line-height: 1.65; }

/* Баннер cookie: карточка внизу слева; на телефоне во всю ширину. */
.ck { position: fixed; z-index: 95; left: 18px; bottom: 18px; width: min(430px, calc(100vw - 36px)); }
.ck[hidden] { display: none; }
.ck__card {
  padding: 18px 20px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -24px rgba(4, 10, 44, 0.5), inset 0 0 0 1px rgba(11, 29, 107, 0.08);
}
.ck__title { font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); color: var(--color-text); }
.ck__text { margin-top: 6px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }
.ck__text a { color: var(--color-accent); }
.ck__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ck__btn {
  flex: 1 1 auto; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text); background: #eef2fb;
}
.ck__btn--main { color: #ffffff; background: var(--color-accent); }
.ck__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ck:not([hidden]) .ck__card { animation: ck-in 600ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
}
@keyframes ck-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 699px) { .ck { left: 10px; right: 10px; bottom: 10px; width: auto; } }
html[data-a11y="on"] .ck__card { background: var(--color-surface); border: 2px solid var(--color-border-strong); box-shadow: none; }
html[data-a11y="on"] .ck__text { color: var(--color-text); }
html[data-a11y="on"] .ck__btn { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .ck__btn--main { color: var(--color-accent-ink); background: var(--color-accent); }

/* ============================================================
   19. Страница цен
   ============================================================

   Тёмная шапка с частыми запросами и карточками отделений; светлый каталог:
   слева закреплённое оглавление, справа закреплённая панель поиска и вкладок,
   строки как в меню (название, пунктир, цена), у каждой кнопка «в смету».
   Смета внизу экрана: число услуг, сумма, список с количеством, запись.
   ============================================================ */

.sc-page--price { --pr-top: calc(var(--sc-header-h, 72px) + 12px); }
.sc-page--price.has-estimate { padding-bottom: 92px; }

/* --- шапка страницы --- */
.pr-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 3vw, 36px) 0 clamp(44px, 5.6vw, 84px); }
html:not([data-a11y="on"]) .pr-hero { color: #ffffff; background: #040a2c; }
html:not([data-a11y="on"]) .pr-hero__title, html:not([data-a11y="on"]) .pr-dept__title, html:not([data-a11y="on"]) .pr-cta__title { color: #ffffff; }
.pr-hero__beam {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 84% 10%, rgba(90, 150, 255, 0.26), rgba(90, 150, 255, 0) 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(22, 56, 186, 0.45), rgba(22, 56, 186, 0) 72%);
}
.pr-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #8ea2d8; }
.pr-crumbs a { color: #c9d5f5; text-decoration: none; }
.pr-crumbs a:hover { text-decoration: underline; }
.pr-hero__grid { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: clamp(22px, 3vw, 40px); }
@media (min-width: 1100px) {
  .pr-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(40px, 5vw, 84px); }
}
.pr-hero__eyebrow { display: block; }
html:not([data-a11y="on"]) .pr-hero__eyebrow { color: #7d95dd; }
.pr-hero__title {
  margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--display-size) * var(--a11y-scale-display)); line-height: 1.02; letter-spacing: -1px; text-wrap: balance;
}
.pr-hero__title em { font-style: normal; color: var(--color-accent); }
html:not([data-a11y="on"]) .pr-hero__title em { color: #6f96ff; }
.pr-hero__lead { margin-top: 18px; max-width: 54ch; }
html:not([data-a11y="on"]) .pr-hero__lead { color: #9db0e6; }
.pr-hero .sc-legal { margin-top: 24px; }

/* Карточки отделений: снимок из «Направлений», число услуг, цены от и до. */
.pr-deps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pr-dep {
  position: relative; display: grid; grid-template-columns: clamp(96px, 10vw, 136px) minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 10px 16px 10px 10px; border-radius: 22px; color: #ffffff; text-decoration: none;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.16);
  transition: background-color 300ms ease, box-shadow 300ms ease, translate 400ms cubic-bezier(0.2, 0.8, 0.25, 1);
}
.pr-dep__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 15px; }
.pr-dep__body { display: grid; gap: 3px; min-width: 0; }
.pr-dep__name { font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(18px, 1.6vw, 22px) * var(--a11y-scale)); line-height: 1.15; }
.pr-dep__tag { font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.4; color: #9db0e6; }
.pr-dep__meta { margin-top: 6px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: #c9d5f5; font-variant-numeric: tabular-nums; }
.pr-dep__meta b { font-family: var(--font-display); font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff; }
.pr-dep__go {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #ffffff;
  background: rgba(61, 123, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.3);
  transition: background-color 300ms ease;
}
.pr-dep__go svg, .pr-cta__book svg, .pr-est__book svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 260ms ease; }
.pr-dep:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pr-dep:hover { translate: 4px 0; background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.34); }
  .pr-dep:hover .pr-dep__go { background: linear-gradient(135deg, #4a86ff, #1b4fe0); }
  .pr-dep:hover .pr-dep__go svg { translate: 3px 0; }
}

/* --- каталог --- */
.pr-body { padding: clamp(28px, 3.6vw, 52px) 0 clamp(40px, 5vw, 72px); background: linear-gradient(180deg, #f5f8ff 0%, var(--color-surface-alt) 60%); }
html[data-a11y="on"] .pr-body { background: var(--color-background); }
.pr-body__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (min-width: 1100px) { .pr-body__grid { grid-template-columns: 236px minmax(0, 1fr); align-items: start; } }

/* Оглавление слева: отделения и группы, текущая подсвечена. */
.pr-nav { display: none; }
@media (min-width: 1100px) {
  .pr-nav {
    display: block; position: sticky; top: var(--pr-top); max-height: calc(100vh - var(--pr-top) - 20px); overflow-y: auto;
    padding: 6px 4px 12px 0; scrollbar-width: thin; scrollbar-color: rgba(11, 29, 107, 0.2) transparent;
  }
}
.pr-nav__label { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #6a7fb8; }
.pr-nav__list { display: grid; gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.pr-nav__dep > a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); color: var(--color-text);
}
.pr-nav__dep > a span, .pr-nav__dep li a span { font-family: var(--font-body); font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #8a97b8; font-variant-numeric: tabular-nums; }
.pr-nav__dep ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; border-left: 1px solid rgba(11, 29, 107, 0.1); }
.pr-nav__dep li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-left: -1px; padding: 6px 4px 6px 12px;
  border-left: 2px solid transparent; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.35; color: var(--color-muted); text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.pr-nav__dep li.is-current a { color: var(--color-accent); border-left-color: var(--color-accent); }
.pr-nav__dep li a:hover { color: var(--color-text); }
.pr-nav .is-empty { display: none; }

/* Панель поиска и вкладок, прилипает под шапкой. */
.pr-toolbar {
  position: sticky; top: var(--pr-top); z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px;
  margin-bottom: 22px; padding: 12px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -32px rgba(11, 29, 107, 0.5), inset 0 0 0 1px rgba(11, 29, 107, 0.07);
}
html.no-js .pr-toolbar { display: none; }
.pr-search { position: relative; display: flex; align-items: center; min-width: 0; }
.pr-search > svg { position: absolute; left: 15px; width: 20px; height: 20px; fill: none; stroke: #6a7fb8; stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }
.pr-search input {
  width: 100%; min-height: 50px; padding: 12px 46px; border: 0; border-radius: 14px; font: inherit; font-size: calc(16px * var(--a11y-scale));
  color: var(--color-text); background: #f1f5fd; box-shadow: inset 0 0 0 1.5px rgba(11, 29, 107, 0.08);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.pr-search input::placeholder { color: #93a1c4; }
.pr-search input::-webkit-search-cancel-button { display: none; }
.pr-search input:focus { outline: none; background: #ffffff; box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 0 4px rgba(27, 90, 240, 0.12); }
.pr-search__clear[hidden] { display: none; }
.pr-search__clear {
  position: absolute; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--color-muted); background: rgba(11, 29, 107, 0.06);
}
.pr-search__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pr-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 14px; border: 0; border-radius: 13px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-text);
  background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 29, 107, 0.1); transition: background-color 200ms ease, color 200ms ease;
}
.pr-tab span { font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor)); color: #596987; font-variant-numeric: tabular-nums; }
.pr-tab[aria-pressed="true"] { color: #ffffff; background: var(--color-accent); box-shadow: none; }
.pr-tab[aria-pressed="true"] span { color: #ffffff; }
.pr-tab:focus-visible, .pr-search__clear:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pr-count { grid-column: 1 / -1; margin: 0 4px; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); }
.pr-count:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .pr-tab:not([aria-pressed="true"]):hover { background: rgba(27, 90, 240, 0.06); } }

/* Отделение: шапка на снимке, затем группы белыми карточками. */
.pr-dept { scroll-margin-top: calc(var(--pr-top) + 130px); }
.pr-dept + .pr-dept { margin-top: clamp(34px, 4vw, 56px); }
.pr-dept__head {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(170px, 16vw, 210px);
  padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; color: #ffffff; background: #050c30;
}
.pr-dept__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.pr-dept__head::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5, 12, 48, 0.94) 0%, rgba(5, 12, 48, 0.72) 48%, rgba(5, 12, 48, 0.1) 100%); }
.pr-dept__title { font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(24px, 2.3vw, 32px) * var(--a11y-scale-display)); line-height: 1.1; letter-spacing: -0.5px; }
.pr-dept__lead { margin-top: 6px; max-width: 54ch; font-size: max(calc(14.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: #c9d5f5; }
.pr-dept__meta { margin-top: 12px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: #9db0e6; font-variant-numeric: tabular-nums; }
.pr-dept__meta b { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--a11y-scale)); color: #ffffff; }
.pr-dept__meta span { margin: 0 8px; }

.pr-group {
  margin-top: 14px; padding: 4px clamp(14px, 2vw, 24px) 10px; border-radius: 20px; background: #ffffff;
  box-shadow: 0 18px 40px -34px rgba(11, 29, 107, 0.45), inset 0 0 0 1px rgba(11, 29, 107, 0.05); scroll-margin-top: calc(var(--pr-top) + 130px);
}
.pr-group__title {
  display: flex; align-items: center; gap: 10px; padding: 16px 0 10px; border-bottom: 1px solid rgba(11, 29, 107, 0.08);
  font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--a11y-scale)); letter-spacing: -0.2px;
}
.pr-group__title span {
  padding: 2px 8px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: max(calc(12px * var(--a11y-scale)), var(--a11y-floor));
  color: #435786; background: rgba(27, 90, 240, 0.07); font-variant-numeric: tabular-nums;
}
.pr-list { margin: 0; padding: 0; list-style: none; }
/* Строка как в меню: название, пунктир до цены, цена, кнопка «в смету». */
.pr-row {
  display: flex; align-items: baseline; gap: 10px; margin: 0 -10px; padding: 11px 10px; border-radius: 12px;
  transition: background-color 200ms ease;
}
.pr-row + .pr-row { box-shadow: 0 -1px 0 rgba(11, 29, 107, 0.06); }
.pr-row__name { flex: 0 1 auto; min-width: 0; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.45; color: var(--color-text); }
.pr-row__code {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 7px; vertical-align: 1px;
  font-weight: 700; font-size: max(calc(11.5px * var(--a11y-scale)), var(--a11y-floor)); color: #1b3fb8; background: rgba(27, 90, 240, 0.08); font-variant-numeric: tabular-nums;
}
.pr-row__dots { flex: 1 1 24px; min-width: 24px; border-bottom: 1.5px dotted rgba(11, 29, 107, 0.22); translate: 0 -4px; }
.pr-row__price { flex: none; font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--a11y-scale)); color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-row__add {
  flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--color-accent); background: rgba(27, 90, 240, 0.08); box-shadow: inset 0 0 0 1px rgba(27, 90, 240, 0.22);
  transition: background-color 200ms ease, color 200ms ease, scale 260ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
html.no-js .pr-row__add { display: none; }
.pr-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-ico__check { display: none; }
.pr-row__add[aria-pressed="true"] { color: #ffffff; background: var(--color-accent); box-shadow: 0 8px 16px -8px rgba(27, 90, 240, 0.8); }
.pr-row__add[aria-pressed="true"] .pr-ico__plus { display: none; }
.pr-row__add[aria-pressed="true"] .pr-ico__check { display: inline; }
.pr-row__add:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pr-row.is-picked { background: rgba(27, 90, 240, 0.05); }
.pr-row mark { padding: 0 1px; border-radius: 3px; color: inherit; background: rgba(255, 212, 0, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .pr-row:hover { background: rgba(27, 90, 240, 0.04); }
  .pr-row__add:hover { scale: 1.08; }
}
.pr-row[hidden], .pr-group[hidden], .pr-dept[hidden] { display: none; }

.pr-empty {
  display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 5vw, 56px) 20px; border-radius: 24px; text-align: center;
  background: #ffffff; box-shadow: inset 0 0 0 1px rgba(11, 29, 107, 0.06);
}
.pr-empty[hidden] { display: none; }
.pr-empty__title { font-family: var(--font-display); font-weight: 700; font-size: calc(22px * var(--a11y-scale)); }
.pr-empty__text { max-width: 44ch; color: var(--color-muted); }
.pr-empty__call, .pr-cta__phone {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: 14px;
  font-weight: 700; font-size: calc(16px * var(--a11y-scale)); color: #ffffff; text-decoration: none; background: var(--color-accent);
}
.pr-empty__call svg, .pr-cta__phone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }

/* --- условия цен и призыв --- */
.pr-notes { padding: 0 0 clamp(28px, 3vw, 40px); background: var(--color-surface-alt); }
.pr-notes__in { margin-top: 0; }
.pr-notes__list { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: max(calc(13px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.55; color: var(--color-muted); }
.pr-cta { padding: 0 0 clamp(48px, 6vw, 88px); background: var(--color-surface-alt); }
.pr-cta__card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; align-items: center;
  padding: clamp(26px, 3.4vw, 46px); border-radius: 28px; color: #ffffff;
  background: radial-gradient(90% 140% at 100% 0%, #2148d6 0%, #0b1d6b 46%, #050c30 100%);
  box-shadow: 0 50px 80px -44px rgba(5, 13, 58, 0.7), inset 0 0 0 1px rgba(157, 187, 255, 0.16);
}
@media (min-width: 1100px) { .pr-cta__card { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.pr-cta__title { font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(26px, 2.8vw, 40px) * var(--a11y-scale-display)); line-height: 1.08; letter-spacing: -0.6px; }
.pr-cta__title em { display: block; font-style: normal; color: #8fb0ff; }
.pr-cta__lead { margin-top: 12px; max-width: 56ch; color: #c9d5f5; }
.pr-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-cta__phone { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(157, 187, 255, 0.35); }
.pr-cta__book {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 20px; border-radius: 14px;
  font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #06102e; text-decoration: none; background: #ffffff;
}

/* --- смета внизу экрана --- */
.pr-est { position: fixed; z-index: 90; left: 50%; bottom: 16px; width: min(780px, calc(100vw - 24px)); translate: -50% 0; }
.pr-est[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pr-est:not([hidden]) { animation: pr-est-in 520ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
  .pr-est.is-bump .pr-est__sum b { animation: pr-bump 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
}
@keyframes pr-est-in { from { opacity: 0; translate: -50% 30px; } to { opacity: 1; translate: -50% 0; } }
@keyframes pr-bump { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
.pr-est__bar {
  display: flex; align-items: center; gap: 12px 18px; padding: 10px 10px 10px 16px; border-radius: 20px; color: #ffffff;
  background: rgba(6, 14, 52, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -20px rgba(4, 10, 44, 0.65), inset 0 0 0 1px rgba(157, 187, 255, 0.22);
}
.pr-est__toggle {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; color: #ffffff; background: none;
}
.pr-est__toggle svg { width: 18px; height: 18px; fill: none; stroke: #9db0e6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 300ms ease; }
.pr-est__toggle[aria-expanded="true"] svg { rotate: 180deg; }
.pr-est__label { font-weight: 600; font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); letter-spacing: 1.3px; text-transform: uppercase; color: #8ea2d8; }
.pr-est__count { font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); }
.pr-est__sum { display: grid; margin: 0 0 0 auto; text-align: right; }
.pr-est__sum span { font-size: max(calc(11px * var(--a11y-scale)), var(--a11y-floor)); color: #8ea2d8; }
.pr-est__sum b { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: calc(22px * var(--a11y-scale)); line-height: 1.1; font-variant-numeric: tabular-nums; transform-origin: 100% 50%; }
.pr-est__book {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px 10px 18px; border-radius: 14px;
  font-weight: 700; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: #ffffff; text-decoration: none;
  background: linear-gradient(135deg, #3d7bff, #1b4fe0); box-shadow: 0 12px 24px -12px rgba(27, 79, 224, 0.9);
}
.pr-est__toggle:focus-visible, .pr-est__book:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pr-est__panel {
  margin-bottom: 8px; max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 14px; border-radius: 20px;
  color: var(--color-text); background: #ffffff; box-shadow: 0 30px 60px -24px rgba(4, 10, 44, 0.55), inset 0 0 0 1px rgba(11, 29, 107, 0.07);
}
.pr-est__panel[hidden] { display: none; }
.pr-est__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-est__title { font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--a11y-scale)); }
.pr-est__clear { min-height: 36px; padding: 6px 10px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-muted); background: rgba(11, 29, 107, 0.05); }
.pr-est__list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.pr-est__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 9px 0;
  font-size: max(calc(14px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.4;
}
.pr-est__item + .pr-est__item { border-top: 1px solid rgba(11, 29, 107, 0.07); }
.pr-est__qty { display: inline-flex; align-items: center; gap: 4px; }
.pr-est__qty button, .pr-est__rm {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1; color: var(--color-accent); background: rgba(27, 90, 240, 0.08);
}
.pr-est__qty output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-est__line { min-width: 84px; text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-est__rm { color: var(--color-muted); background: transparent; }
.pr-est__rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pr-est__note { margin-top: 10px; font-size: max(calc(12.5px * var(--a11y-scale)), var(--a11y-floor)); line-height: 1.5; color: var(--color-muted); }

/* Планшет: поиск во всю ширину, вкладки под ним. */
@media (max-width: 1099px) { .pr-toolbar { grid-template-columns: minmax(0, 1fr); } }

/* Телефон: карточки отделений компактнее, строки переносятся, смета во всю ширину. */
@media (max-width: 699px) {
  .pr-dep { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; }
  .pr-dep__name { font-size: calc(clamp(15px, 4.8vw, 18px) * var(--a11y-scale)); }
  .pr-dep__img { border-radius: 12px; }
  .pr-dep__tag { display: none; }
  .pr-dep__go { width: 34px; height: 34px; }
  /* Панель поиска компактная: на узком экране она прилипает и не должна съедать экран. */
  .pr-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; padding: 8px; border-radius: 18px; }
  .pr-search input { min-height: 44px; padding-block: 9px; font-size: 16px; }
  .pr-tabs { margin: 0 -8px; padding: 0 8px; }
  .pr-tab { min-height: 36px; padding: 6px 11px; font-size: max(calc(13.5px * var(--a11y-scale)), var(--a11y-floor)); }
  .pr-dept__head { min-height: 150px; border-radius: 20px; }
  .pr-dept__lead { display: none; }
  .pr-group { padding: 2px 14px 8px; border-radius: 18px; }
  .pr-row { flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .pr-row__name { flex: 1 1 100%; }
  .pr-row__dots { display: none; }
  .pr-row__price { margin-right: auto; font-size: max(calc(15px * var(--a11y-scale)), var(--a11y-floor)); color: var(--color-accent); }
  .pr-est { bottom: 8px; width: calc(100vw - 16px); }
  .pr-est__bar { gap: 8px; padding: 8px 8px 8px 12px; }
  .pr-est__label { display: none; }
  .pr-est__sum b { font-size: calc(19px * var(--a11y-scale)); }
  .pr-est__book { min-height: 44px; padding: 8px 12px; }
  .pr-est__item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name name" "qty line rm"; gap: 6px 12px; }
  .pr-est__item > span:first-child { grid-area: name; }
  .pr-est__qty { grid-area: qty; }
  .pr-est__line { grid-area: line; }
  .pr-est__rm { grid-area: rm; }
}

@media (max-width: 374px) { .pr-dep { grid-template-columns: 64px minmax(0, 1fr) auto; } }

/* Версия для слабовидящих: всё на теме пользователя, без снимков и декора. */
html[data-a11y="on"] .pr-hero { border-bottom: 2px solid var(--color-border); }
/* Шапка в версии для слабовидящих не прилипает, поэтому и панель поиска с оглавлением тоже. */
html[data-a11y="on"] .pr-toolbar, html[data-a11y="on"] .pr-nav { position: static; max-height: none; }
html[data-a11y="on"] .pr-crumbs, html[data-a11y="on"] .pr-crumbs a, html[data-a11y="on"] .pr-dep,
html[data-a11y="on"] .pr-dep__tag, html[data-a11y="on"] .pr-dep__meta, html[data-a11y="on"] .pr-dep__meta b, html[data-a11y="on"] .pr-dept__head,
html[data-a11y="on"] .pr-dept__lead, html[data-a11y="on"] .pr-dept__meta, html[data-a11y="on"] .pr-dept__meta b, html[data-a11y="on"] .pr-nav__dep li a span,
html[data-a11y="on"] .pr-tab span, html[data-a11y="on"] .pr-group__title span, html[data-a11y="on"] .pr-cta__card, html[data-a11y="on"] .pr-cta__title em,
html[data-a11y="on"] .pr-cta__lead, html[data-a11y="on"] .pr-est__bar, html[data-a11y="on"] .pr-est__label, html[data-a11y="on"] .pr-est__sum span,
html[data-a11y="on"] .pr-row__code { color: var(--color-text); }
html[data-a11y="on"] .pr-dep, html[data-a11y="on"] .pr-dept__head, html[data-a11y="on"] .pr-group, html[data-a11y="on"] .pr-toolbar,
html[data-a11y="on"] .pr-cta__card, html[data-a11y="on"] .pr-est__bar, html[data-a11y="on"] .pr-est__panel, html[data-a11y="on"] .pr-empty {
  background: var(--color-surface); box-shadow: none; border: 2px solid var(--color-border-strong);
}
html[data-a11y="on"] .pr-dep__img, html[data-a11y="on"] .pr-dept__img, html[data-a11y="on"] .pr-dept__head::before { display: none; }
html[data-a11y="on"] .pr-dep { grid-template-columns: minmax(0, 1fr) auto; }
html[data-a11y="on"] .pr-dept__head { min-height: 0; }
html[data-a11y="on"] .pr-search input { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); box-shadow: none; }
html[data-a11y="on"] .pr-tab[aria-pressed="true"], html[data-a11y="on"] .pr-row__add[aria-pressed="true"], html[data-a11y="on"] .pr-est__book,
html[data-a11y="on"] .pr-empty__call, html[data-a11y="on"] .pr-cta__book, html[data-a11y="on"] .pr-cta__phone { color: var(--color-accent-ink); background: var(--color-accent); }
html[data-a11y="on"] .pr-row__add, html[data-a11y="on"] .pr-dep__go { color: var(--color-text); background: var(--color-surface); box-shadow: none; border: 1px solid var(--color-border-strong); }
html[data-a11y="on"] .pr-row__dots { border-bottom-color: var(--color-border-strong); }
html[data-a11y="on"] .pr-row mark { background: var(--color-accent); color: var(--color-accent-ink); }
html[data-a11y="on"] .pr-row__code { background: none; border: 1px solid var(--color-border-strong); }
/* Подписи, значки поиска, счётчики и линии цветом темы; вкладки с рамкой (тень в версии
   выключена), выбранная залита; кнопки сметы крупнее вместе со шрифтом. */
html[data-a11y="on"] .pr-nav__label { color: var(--color-text); }
html[data-a11y="on"] .pr-nav__dep > a span, html[data-a11y="on"] .pr-nav__dep li a span { flex-shrink: 0; }
@media (min-width: 1100px) { html[data-a11y="on"] .pr-body__grid { grid-template-columns: calc(236px * var(--a11y-scale)) minmax(0, 1fr); } }
html[data-a11y="on"] .pr-nav__dep ul { border-left: 2px solid var(--color-border); }
html[data-a11y="on"] .pr-search > svg { stroke: var(--color-text); }
html[data-a11y="on"] .pr-search input::placeholder { color: var(--color-text); font-style: italic; }
html[data-a11y="on"] .pr-search input:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
html[data-a11y="on"] .pr-search input { font-size: max(calc(16px * var(--a11y-scale)), var(--a11y-floor)); }
html[data-a11y="on"] .pr-group__title { border-bottom: 2px solid var(--color-border); }
html[data-a11y="on"] .pr-group__title span { color: var(--color-text); background: none; border: 1px solid var(--color-border-strong); }
/* Заголовок группы строкой, а не flex: длинное название («Профессиональная гигиена
   полости рта») переносится, счётчик встаёт за последним словом. */
html[data-a11y="on"] .pr-group__title { display: block; }
html[data-a11y="on"] .pr-group__title span { display: inline-block; margin-left: 8px; vertical-align: 2px; }
html[data-a11y="on"] .pr-tab { border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .pr-tab[aria-pressed="true"] { border-color: var(--color-accent); }
html[data-a11y="on"] .pr-tab[aria-pressed="true"] span { color: var(--color-accent-ink); }
html[data-a11y="on"] .pr-row__add { width: calc(34px * var(--a11y-scale)); height: calc(34px * var(--a11y-scale)); border-width: 2px; }
html[data-a11y="on"] .pr-est__item + .pr-est__item { border-top: 1px solid var(--color-border); }
html[data-a11y="on"] .pr-est__qty button, html[data-a11y="on"] .pr-est__rm { width: calc(34px * var(--a11y-scale)); height: calc(34px * var(--a11y-scale)); color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); font-size: max(calc(16px * var(--a11y-scale)), var(--a11y-floor)); }
html[data-a11y="on"] .pr-est__clear { color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
html[data-a11y="on"] .pr-est__note { color: var(--color-text); }
/* Вкладки переносятся, а не уезжают вбок; выбранная строка без подложки, название жирное
   (отмечена и галочкой на кнопке); полоса сметы на узком экране в две строки. */
html[data-a11y="on"] .pr-tabs { flex-wrap: wrap; overflow: visible; }
html[data-a11y="on"] .pr-tab { white-space: normal; }
html[data-a11y="on"] .pr-row.is-picked { background: none; }
html[data-a11y="on"] .pr-row.is-picked .pr-row__name { font-weight: 700; }
html[data-a11y="on"] .pr-est__toggle svg { stroke: currentColor; }
html[data-a11y="on"] .pr-est__toggle { color: var(--color-text); }
@media (max-width: 699px) {
  html[data-a11y="on"] .pr-est__bar { flex-wrap: wrap; }
  html[data-a11y="on"] .pr-est__book { flex: 1 1 100%; justify-content: center; }
}