/* ==========================================================================
   Астра-мед — лендинг «Имплантация», вариант 2
   Фирменные цвета сайта сохранены точно (base #f17f1d из логотипа,
   more #63bcc9). Оранжевый намеренно занимает мало площади: одна
   заливка на экран, никаких цветных свечений и градиентов на нём —
   работает контраст с бирюзой, а не количество оранжевого,
   но пластика более современная: крупная типографика, мягкие радиусы,
   светлый градиентный фон, стеклянные карточки. Шрифт — Manrope.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Manrope. Лежит локально, а не на Google Fonts: внешний домен — это лишний
   DNS + TCP + TLS перед первой отрисовкой текста, а с 2022 года ещё и вопрос
   к передаче IP посетителей за рубеж, неуместный на сайте медицинской клиники.

   Файл вариативный (одна насыщенность 400..800 вместо пяти статических),
   разбит на подмножества Юникода — браузер тянет только нужные:
   cyrillic и latin грузятся всегда, latin-ext почти никогда, он здесь
   ради одного знака ₽ в ценах.

   font-display: swap — текст читается сразу системным шрифтом и перерисовывается,
   когда файл доехал. Для лендинга это правильный размен:
   пустая страница в ожидании шрифта дороже одного перерисовывания.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Фирменный оранжевый логотипа, точное значение rgb(241,127,29).
     Рядом с ним живёт --base-ink: тот же цвет, доведённый до тёмного.
     На светлом фоне сам #f17f1d даёт контраст 3:1 — для текста мало,
     поэтому весь мелкий акцентный текст берёт --base-ink (7:1),
     а чистый #f17f1d остаётся только крупной заливкой */
  --base: #f17f1d;
  --base-dark: #dd6f0e;
  --base-ink: #8c4a13;
  --base-soft: #fdf2e6;
  --base-line: rgba(241, 127, 29, .32);
  /* Тень под кнопкой — нейтральная, а не цветная: цветное свечение
     под каждым оранжевым элементом и есть та самая «дешевизна».
     Переменную забирает и общий модуль квиза, у него свой файл */
  --base-shadow: rgba(16, 38, 45, .12);
  --more: #63bcc9;
  --more-dark: #2f8b99;
  --more-soft: #eef8fa;
  --more-deep: #0f3a44;

  --text: #10262d;
  --text-2: #4d646c;
  --muted: #8ea3aa;
  --line: #e2eaed;
  --bg: #fff;

  --radius: 16px;
  --radius-lg: 28px;
  --shadow: 0 6px 24px rgba(15, 58, 68, .07);
  --shadow-lg: 0 26px 70px rgba(15, 58, 68, .16);

  --font: "Manrope", -apple-system, "Segoe UI", Arial, sans-serif;
  --container: 1240px;
  --header-h: 78px;

  /* Период повтора акционной анимации в карточке цены. Пауза внутри цикла
     заложена в сами кейфреймы, поэтому период длинный: черта и подскок
     занимают первую четверть, остальное — покой. Задержка отсчитывается
     от загрузки и подводит первый проход под выход самой карточки */
  --offer-loop: 5.5s;
  --offer-loop-delay: .32s;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Тон подвала продолжается за конец документа: иначе при «оттягивании»
   страницы вниз (инерционная прокрутка на macOS и iOS) под подвалом
   открывается белая полоса — тот же шов, только на краю экрана */
html { background: #eef6f8; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--more-dark); text-decoration: none; }
h1, h2, h3 { margin: 0 0 16px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 16px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap;
  padding: 17px 32px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Текст на кнопке тёмный, а не белый: белый на #f17f1d даёт 2.7:1 и
   читается плохо, тёмный — 5.8:1. Заодно это снимает эффект «кислотной
   кнопки», из-за которого яркий оранжевый выглядит дёшево */
.btn--primary { background: var(--base); color: var(--text); box-shadow: 0 1px 2px var(--base-shadow); }
.btn--primary:hover { background: var(--base-dark); color: var(--text); box-shadow: 0 2px 6px var(--base-shadow); }
.btn--sm { padding: 12px 22px; font-size: 15px; }
.btn--lg { padding: 20px 40px; font-size: 17px; }

/* --- Шапка --- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 234, 237, .9);
}
.header__row { display: flex; align-items: center; gap: 26px; min-height: var(--header-h); }
/* display: block — иначе картинка стоит на базовой линии и под ней остаётся
   зазор строки, из-за которого шапка кажется несимметричной по вертикали */
.header__logo img { display: block; height: 44px; width: auto; }
.header__slogan {
  font-size: 13px; line-height: 1.35; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 18px;
}
.header__phone { margin-left: auto; font-weight: 800; font-size: 19px; color: var(--text); white-space: nowrap; }
.header__phone:hover { color: var(--base); }
.header__phone span { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }

/* ============================ ПЕРВЫЙ ЭКРАН ============================ */
/* Фон: мягкий градиент фирменного «more» с двумя цветными пятнами —
   даёт объём, но не спорит с фотографией врача справа */
/* Нижний цвет экрана (#eef6f8) — стыковочный: ровно с него начинается
   фон следующей секции. Границы блока не видно, тон продолжается за ней
   и уже там растворяется в белый (см. «Переходы между блоками» ниже) */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 520px at 88% 8%, rgba(99, 188, 201, .30), transparent 62%),
    linear-gradient(180deg, #f7fbfc 0%, #eef6f8 100%);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 56px; align-items: center;
  padding: 64px 24px 72px;
}
.hero__main { max-width: 640px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--more-deep);
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(99, 188, 201, .38);
  border-radius: 999px; padding: 9px 18px 9px 14px; margin-bottom: 26px;
  box-shadow: var(--shadow);
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--base);
}

.hero h1 { font-size: clamp(30px, 4.4vw, 60px); margin-bottom: 18px; }
/* Строка = предложение. text-wrap: balance выравнивает длину строк, если
   предложение всё-таки переносится (узкий экран), — не оставляет висячее
   слово; pretty — фолбэк для браузеров без balance */
.h1-line {
  display: block;
  text-wrap: pretty;
  text-wrap: balance;
}
/* Вторая строка заголовка — смысловой акцент: выделение фирменным цветом,
   как в макете. Плашка обрывается, не доходя до нижнего края строки:
   заливка, упёртая в самый низ, читается как ошибка вёрстки, а не как маркер.
   box-decoration-break: clone — чтобы выделение повторялось на каждой строке,
   если фраза перенеслась, а не рисовалось одним куском */
.hero h1 em {
  font-style: normal;
  background-image: linear-gradient(
    transparent 56%,
    rgba(241, 127, 29, .30) 56%,
    rgba(241, 127, 29, .30) 96%,
    transparent 96%
  );
  background-repeat: no-repeat;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__sub { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; color: var(--more-dark); margin-bottom: 14px; }
.hero__lead { font-size: 17px; color: var(--text-2); max-width: 520px; margin-bottom: 34px; }

.hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 34px; }
.hero__phone { font-size: 22px; font-weight: 800; color: var(--text); }
.hero__phone span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.hero__phone:hover { color: var(--base); }

.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hero__chips li {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px;
}

/* --- Правая колонка: фото + ценовая выноска --- */
.hero__media { position: relative; }
.hero__photo {
  position: relative; aspect-ratio: 1040 / 1300; border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .35), transparent 55%),
    linear-gradient(160deg, var(--more) 0%, #4aa4b3 55%, var(--more-deep) 100%);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Кадр обрезается по рамке: пропорции снимка (1080×1344) почти совпадают
   с рамкой, поэтому cover срезает меньше процента */
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* Лёгкое затемнение левого низа — под ценовой карточкой фон снимка светлый,
   белая карточка на нём терялась бы без этой подложки */
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom left, transparent 45%, rgba(15, 58, 68, .26) 100%);
}

/* Карточка-выноска с ценой: «хвостик» рисуем псевдоэлементом,
   чтобы карточка визуально росла из кадра, как в макете */
/* Фон непрозрачный: полупрозрачная карточка просвечивала, и сквозь неё
   был виден край хвостика. Blur убран за ненадобностью — размывать нечего */
/* Появление и «парение» разведены по разным свойствам: вход анимирует
   translate/scale/opacity, парение — transform. Индивидуальные свойства
   трансформации складываются с transform, поэтому две анимации на одном
   элементе не перетирают друг друга */
.offer {
  position: absolute; left: -34px; bottom: 56px; width: min(320px, 82%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  opacity: 0;
  animation:
    offer-in .7s cubic-bezier(.16, 1, .3, 1) .45s forwards,
    offer-float 6s ease-in-out 1.4s infinite;
}
/* Карточка выходит следом за заголовком, а не одновременно с ним:
   взгляд успевает прочитать H1 и переходит на цену */
@keyframes offer-in {
  from { opacity: 0; translate: 0 26px; scale: .96; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}
@keyframes offer-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Хвостик — треугольник по clip-path, вынесенный целиком за нижнюю границу
   карточки (top: 100%). Раньше это был повёрнутый на 45° квадрат: половина
   его площади заходила на карточку, и на просвет читался лишний угол.
   Треугольник ничего не перекрывает — карточка и хвостик стыкуются встык */
.offer::after {
  content: ""; position: absolute; top: 100%; right: 38px;
  width: 28px; height: 15px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  /* drop-shadow повторяет форму после клипа, box-shadow обвёл бы квадрат */
  filter: drop-shadow(0 8px 8px rgba(15, 58, 68, .10));
}
.offer__title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.offer__prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Старая цена сначала читается целой и только потом зачёркивается —
   поэтому линия не нативная, а рисуется псевдоэлементом слева направо.

   Зачёркивание и подскок новой цены зацикленно повторяются: акция должна
   отрабатывать и для тех, кто пролистал первый экран и вернулся к нему
   позже. Обе анимации сидят на одном периоде (--offer-loop) с одной
   задержкой — иначе они разъезжаются, и цена подпрыгивает не в такт черте.
   Проценты кейфреймов подобраны так, чтобы первый проход совпал по времени
   с прежним однократным: черта идёт на 1.2s, подскок — сразу за ней */
.offer__old { position: relative; font-size: 18px; font-weight: 600; color: var(--muted); text-decoration: none; }
.offer__old::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 2px; border-radius: 2px; background: var(--muted);
  transform-origin: left center;
  scale: 0 1;
  animation: strike var(--offer-loop) ease-out var(--offer-loop-delay) infinite;
}
/* Уходит черта в обратную сторону — origin переезжает на правый край.
   Смена origin приходится на участок, где линия растянута целиком
   (scale: 1 1) и точка отсчёта ни на что не влияет, поэтому переезд
   не виден: читается одно движение «нарисовалась слева → стёрлась вправо» */
@keyframes strike {
  0%, 16%   { scale: 0 1; transform-origin: left center; }
  25%       { scale: 1 1; transform-origin: left center; }
  80%       { scale: 1 1; transform-origin: right center; }
  90%, 100% { scale: 0 1; transform-origin: right center; }
}

/* Новая цена коротко «подпрыгивает» в момент, когда старая уже зачёркнута */
.offer__new {
  display: inline-block;
  font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  animation: price-pop var(--offer-loop) ease-out var(--offer-loop-delay) infinite;
}
@keyframes price-pop {
  0%, 24%   { scale: 1; }
  30%       { scale: 1.07; }
  37%, 100% { scale: 1; }
}
/* Комплектация набрана в две строки: одной она не помещается в 320px карточки,
   а перенос по словам рвал бы «Южная Корея» пополам. Явный <br> держит состав
   читаемым столбиком под ценой — прайсовая строка, а не хвост абзаца */
.offer__note {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  margin-top: 8px; text-wrap: balance;
}
/* Срок акции набран как строка мелкого шрифта под чертой — так это выглядит
   в прайсе, а не в шаблоне лендинга. Цветная пилюля с пульсирующей точкой,
   которая была здесь раньше, — самый узнаваемый штамп: она кричит о срочности
   ровно тем приёмом, который читатель уже видел сотню раз.
   Работает сама дата: она одна набрана акцентным цветом */
.offer__deadline {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.offer__deadline b { color: var(--base-ink); font-weight: 700; white-space: nowrap; }

/* Блок ниже относится к вариантам A/B-теста и лежит в базовом style.css
   намеренно: без класса .offer--rassrochka на карточке он ничего не делает,
   а один общий файл на все четыре варианта не даёт стилям разъехаться
   по копиям. Оси и варианты — ../../../variants.tsv */

/* ------- Вариант B: оффер «рассрочка вместо скидки» -------
   Отличие от базовой карточки одно, но принципиальное: здесь нечего
   перечёркивать. В варианте A движущаяся черта и подскок цены отыгрывали
   скидку; на плече без скидки тот же приём соврал бы про оффер и смазал бы
   разницу между плечами теста — ради которой тест и ставится.
   Поэтому обе зацикленные анимации гасятся, а сама черта остаётся только
   как пометка «значение не подтверждено» (.is-draft) */
.offer--rassrochka .offer__new { animation: none; }
.offer--rassrochka .offer__old::after { animation: none; }

/* Главное число — платёж в месяц. «в месяц» набрано отдельной строкой мелким
   шрифтом: приписка в той же кегли съедала бы всю ширину карточки, а перенос
   по словам оторвал бы «в» от «месяца» */
.offer--rassrochka .offer__prices { display: block; }
.offer--rassrochka .offer__new { display: block; line-height: 1.05; }
.offer--rassrochka .offer__new i {
  display: block; margin-top: 2px;
  font-size: 14px; font-weight: 600; font-style: normal;
  letter-spacing: 0; color: var(--muted);
}
/* Черта заглушки идёт только по числу. На всём блоке она перечеркнула бы
   заодно и «в месяц» — а неподтверждено значение, а не единица измерения */
.offer--rassrochka .offer__new.is-draft { text-decoration: none; }
.offer--rassrochka .offer__new.is-draft span {
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.offer--rassrochka .offer__prices .offer__draft-note { margin: 8px 0 0; margin-left: 0; }

/* Полная цена ушла на второй план: она больше не оффер, а справка */
.offer__full {
  margin-top: 10px;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.offer__full .offer__old { font-size: 15px; }

/* ------- Заглушка неподтверждённого значения -------
   Числа, которых клиника ещё не подтвердила, набраны так, чтобы их нельзя
   было принять за готовую цену: серым, зачёркнутыми статичной чертой
   (не той анимированной, что рисует скидку) и с пометкой рядом.
   Когда цены придут — снять .is-draft и убрать .offer__draft-note */
.is-draft {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  /* Анимированную черту .offer__old::after заглушка не использует */
}
.is-draft::after { display: none; }
.offer__draft-note {
  display: inline-block; margin-left: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  border: 1px dashed currentColor; border-radius: 4px;
  padding: 1px 5px;
}

/* ============================ СЕКЦИИ ============================ */
.section { padding: 84px 0; }
.section__head { max-width: 720px; margin-bottom: 52px; }
.section__head h2 { font-size: clamp(28px, 3.1vw, 42px); margin-bottom: 0; }
.section__lead { font-size: 17px; color: var(--text-2); margin: 0; }
/* Заголовок и лид рядом, а не друг под другом: экономит ~80px высоты.
   align-items: end подтягивает лид к базовой линии последней строки H2 */
.section__head--split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: end; max-width: none;
}
.section__head--split .eyebrow { margin-bottom: 20px; }

/* ========================= ЭТАПЫ ЛЕЧЕНИЯ =========================
   Шесть карточек змейкой 3 + 3. Номер этапа — внутри карточки: отдельный
   ряд кружков читался не лучше, а высоты съедал вдвое больше.
   Связи между шагами рисует пунктир: горизонтальный между соседями по ряду
   (псевдоэлемент карточки, живёт в зазоре сетки) и дуга .path__turn
   на переходе с конца первого ряда к началу второго. */
/* ---- Переходы между блоками ----
   Секции не залиты каждая своим ровным цветом с резкой границей между ними:
   тон продолжается ЗА границу и растворяется уже внутри следующего блока.
   Приём один и тот же во всех переходах: верхний стоп градиента секции
   в точности равен нижнему цвету предыдущей, растворение — в пикселях,
   а не в процентах, чтобы длина перехода не зависела от высоты секции
   (а она разная на десктопе и на мобильной).
   Меняете цвет любой секции — правьте и стыковочный стоп у соседней */
.path {
  background: linear-gradient(180deg, #eef6f8 0%, var(--bg) 240px);
}

.path__stage { position: relative; }

.path__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Ряды равной высоты — на это опирается позиционирование дуги перехода,
     и заодно карточки в ряду выравниваются по нижнему краю */
  grid-auto-rows: 1fr;
  column-gap: 40px;
  row-gap: 88px;
  list-style: none; margin: 0; padding: 0;
}

.path-step {
  /* z-index: 1 — чтобы карточка перекрывала дугу перехода: в DOM svg идёт
     после списка и без явного слоя рисовался бы поверх карточек */
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px 30px;
}

/* Горизонтальный пунктир к следующей карточке ряда. Рисуется точечной
   границей в зазоре сетки; у третьей и шестой его нет — там ряд кончается */
/* Точки рисуются фоном, а не dotted-границей: у границы шаг задать нельзя,
   и на коротком отрезке точки сбивались в плотную строчку. Здесь шаг 14px —
   ровно как stroke-dasharray у дуги перехода, так что оба пунктира одинаковы */
.path-step::after {
  content: "";
  position: absolute; left: 100%; top: 50%; width: 40px; height: 4px;
  background-image: radial-gradient(circle, rgba(99, 188, 201, .75) 2px, transparent 2.2px);
  background-size: 14px 4px;
  background-repeat: repeat-x;
  translate: 0 -50%;
}
.path-step:nth-child(3n)::after { display: none; }

.path-step__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.path-step__num {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  /* Плоская заливка без тени: шесть градиентных кружков с цветным свечением —
     ровно тот приём, который выдаёт шаблонный лендинг */
  color: var(--more-deep);
  background: var(--more-soft);
  border: 1px solid rgba(99, 188, 201, .38);
}
.path-step__time {
  flex: none;
  font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--more-dark);
  background: var(--more-soft); border-radius: 999px; padding: 7px 15px;
}

.path-step h3 { font-size: 21px; margin: 0 0 12px; }
.path-step p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* Ключевой этап окрашен фирменным оранжевым — тем же, что и кнопки,
   так что акцент читается как «сюда» */
/* Оранжевым залит ровно один кружок на всю секцию — так акцент работает
   как акцент. Остальные номера остаются спокойно-бирюзовыми */
.path-step--key { border-color: var(--base-line); }
.path-step--key .path-step__num {
  background: var(--base);
  border-color: transparent;
  color: var(--text);
}
/* Пометка встроена в первую строку абзаца, а не стоит отдельной плашкой:
   плашка добавила бы карточке целую строку высоты */
.path-step__badge { color: var(--base-ink); font-weight: 800; }

/* Дуга перехода между рядами: из-под центра третьей карточки вниз,
   влево через всю ширину и вверх к центру четвёртой.
   Высота 88px = row-gap, поэтому дуга ровно занимает зазор */
/* Слой — 0, а не -1: .path__stage не создаёт контекста наложения
   (relative без z-index), поэтому отрицательный слой уходил в корневой
   контекст и прятался под непрозрачный фон секции. Ноль держит дугу
   внутри стопки .path__stage, а карточки перекрывают её своим z-index: 1 */
.path__turn {
  position: absolute; left: 0; top: calc(50% - 44px);
  width: 100%; height: 88px;
  z-index: 0;
}
.path__track path, .path__turn path {
  fill: none;
  stroke: rgba(99, 188, 201, .75);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
}

/* Появление по мере прокрутки. Класс .path--anim вешает JS: без него (или
   без JS) карточки просто видны и страница не остаётся пустой */
.path--anim .path-step,
.path--anim .path__turn {
  opacity: 0;
  transition: opacity .5s ease, translate .5s cubic-bezier(.16, 1, .3, 1);
}
/* Карточки проявляются по очереди — взгляд идёт по змейке */
.path--anim .path-step { translate: 0 14px; transition-delay: calc(var(--i) * .07s); }
.path--anim .path__turn { transition-delay: .21s; }
.path--anim.is-in .path-step { opacity: 1; translate: 0 0; }
.path--anim.is-in .path__turn { opacity: 1; }

/* Финальный призыв: та же пластика, что у карточек первого экрана */
.path__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  margin-top: 48px; padding: 22px 22px 22px 34px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 300px at 12% 0%, rgba(99, 188, 201, .22), transparent 70%),
    var(--more-soft);
  border: 1px solid rgba(99, 188, 201, .32);
}
.path__cta p { margin: 0; max-width: 860px; font-size: 16px; color: var(--text-2); }
.path__cta b { color: var(--text); }


/* ========================= ВОПРОСЫ ВРАЧУ =========================
   Аккордеон слева, снимок с подписью врача справа. Фон секции — очень
   светлая заливка «more»: она отделяет блок от белых «Этапов» выше,
   не добавляя ни одной рамки. Сверху заливка не начинается сразу, а
   набирается из белого на протяжении 260px: «Этапы» заканчиваются белым,
   и переход между блоками не читается как шов. Снизу заливка держится —
   её подхватывает и растворяет уже блок «Слово директора» */
.faq {
  background:
    /* Пятно уведено на середину секции (было 8% 0%) и по вертикали
       ужато до 430px: так оно гаснет раньше, чем доходит до границы блока.
       На границе обрезанный круг давал ступеньку яркости — ровно тот шов,
       который мы и убираем. Правило общее: радиус пятна по вертикали
       должен быть меньше расстояния от его центра до края секции */
    radial-gradient(700px 430px at 6% 50%, rgba(99, 188, 201, .15), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, #f7fbfc 260px);
}

.faq__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 56px; align-items: start;
}

/* Вопросы идут единым списком в одной карточке: шесть отдельных карточек
   с тенями превратили бы блок в лоскутное одеяло. Разделитель — одна линия */
.faq__list {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--line); }

.faq-item summary {
  position: relative;
  padding: 22px 74px 22px 28px; cursor: pointer;
  font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
  color: var(--text);
  list-style: none; /* убираем нативный треугольник в Firefox */
  transition: color .18s ease, background .18s ease;
}
/* Второй способ убрать маркер — для WebKit */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--more-dark); background: rgba(99, 188, 201, .06); }
/* Клавиатурная навигация: фокус видно, но рамка не залезает на соседний вопрос */
.faq-item summary:focus-visible { outline: 2px solid var(--more-dark); outline-offset: -3px; }

/* Знак «плюс» рисуем двумя линиями, а не символом шрифта: при раскрытии
   вертикальная линия доворачивается до горизонтали и гаснет — плюс
   превращается в минус. Обе линии привязаны к первой строке вопроса
   (top: 34px), а не к центру блока: длинный вопрос переносится на две
   строки, и знак не должен уезжать вниз вместе с ним */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute; top: 34px; right: 30px;
  background: var(--more-dark); border-radius: 2px;
  transition: rotate .25s ease, opacity .25s ease;
}
.faq-item summary::before { width: 15px; height: 2.5px; translate: 0 -50%; }
.faq-item summary::after  { width: 2.5px; height: 15px; translate: -6.25px -50%; }
.faq-item[open] summary { color: var(--more-dark); }
.faq-item[open] summary::after { rotate: 90deg; opacity: 0; }

.faq-item__body { padding: 0 74px 24px 28px; }
.faq-item__body p {
  margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-2);
  /* Ответ проявляется, а не выпрыгивает: раскрытие само по себе резкое,
     плавная высота на <details> без JS недоступна — смягчаем появлением */
  animation: faq-answer .28s ease-out;
}
@keyframes faq-answer {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Прайс в ответе про цену: список наследует набор абзаца, маркер — фирменный */
.faq-item__body p + ul,
.faq-item__body ul + p { margin-top: 10px; }
.faq-item__body ul {
  margin: 0; padding: 0 0 0 20px; list-style: none;
  font-size: 16px; line-height: 1.65; color: var(--text-2);
  animation: faq-answer .28s ease-out;
}
.faq-item__body li { position: relative; }
.faq-item__body li + li { margin-top: 6px; }
.faq-item__body li::before {
  content: ""; position: absolute; left: -14px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--more);
}

/* --- Правая колонка: снимок + подпись врача --- */
.faq__media { position: relative; }
.faq__photo {
  position: relative; aspect-ratio: 1040 / 1385; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--more) 0%, #4aa4b3 55%, var(--more-deep) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Кадр смещён вправо: слева на снимке монитор, справа — врач и пациентка,
   при обрезке под узкую рамку важнее сохранить людей */
.faq__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
/* Затемнение низа — под белой подписью врача */
.faq__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 58, 68, .34), transparent 42%);
}

/* Подпись врача лежит внутри кадра, а не под ним: так она читается как
   часть фотографии, и блок не растёт по высоте */
.faq__doc {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px 18px;
}
.faq__doc-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--base-ink); margin-bottom: 6px; }
.faq__doc-name { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.faq__doc-role { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Финальный призыв повторяет плашку из «Этапов»: один и тот же приём
   в конце каждой секции — это ритм страницы, а не дубль */
.faq__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px; padding: 22px 22px 22px 34px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.faq__cta p { margin: 0; max-width: 860px; font-size: 16px; color: var(--text-2); }
.faq__cta b { color: var(--text); }

/* ======================= ИСТОРИИ ПАЦИЕНТОВ =======================
   Три карточки: снимок пациента и белая выноска с историей, вырастающая
   из кадра. Приём тот же, что у ценовой карточки первого экрана.
   Фон секции ровный #f7fbfc — тот же тон, которым заканчиваются
   «Вопросы» и с которого начинается «Слово директора». Градиента здесь
   нет намеренно: блок вклинился между двумя секциями, у которых на
   стыках уже стоит #f7fbfc, и любая растяжка в белый внутри него
   создала бы ровно тот шов, которого на странице нет.
   Правило то же, что и у соседей: меняете тон одной секции — правьте
   стыковочные стопы соседних (см. README, «Переходы между блоками»). */
.stories { background: #f7fbfc; }

/* auto-fit вместо фиксированных трёх колонок: карточки одинаковые и
   независимые (в отличие от «Этапов», где раскладка 3+3 держит дугу
   перехода), поэтому раскладка сама складывается в 3 → 2 → 1 колонку
   без отдельных брейкпоинтов */
.stories__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 34px 32px;
}

/* Карточки в ряду разной высоты (у Смирновой к цитате добавлена приписка
   клиники), поэтому start, а не растягивание: иначе низкие карточки
   тянулись бы до высоты самой высокой и внизу оставалась бы пустота */
.stories__list > .story { align-self: start; }

/* Нижний отступ — место под «хвостик» выноски: он вынесен за границу
   карточки и без запаса налез бы на следующий ряд */
.story { position: relative; padding-bottom: 18px; }

/* Кадр пациента. Заливка тона «more» видна только там, где снимка ещё нет:
   под <img> и <video> она полностью закрыта. Кадр 3:4, файлы 780×1040 */
.story__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #d7ecf0 0%, #c3e2e8 100%);
  box-shadow: var(--shadow);
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------- ВИДЕООТЗЫВЫ -----------------------------
   Ролики сняты вертикально (9:16), а кадр карточки — 3:4. В покое видео
   работает как фотография: object-fit: cover, лишнее по бокам срезано,
   виден poster. На воспроизведении переключаемся на contain и тёмный фон:
   у роликов вшиты субтитры в нижней трети, и cover их бы обрезал.
   Тёмный фон — не чёрный, а --more-deep: чёрный прямоугольник посреди
   светлой секции читается как дыра. */
.story__photo--video { background: var(--more-deep); }
.story__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.story--video.is-playing .story__video { object-fit: contain; }

/* Панель управления браузер рисует по нижнему краю видео — то есть ровно
   в тех 64px, которыми на кадр наезжает выноска. На время просмотра меняем
   их местами по z-index: кадр выходит вперёд, и панель оказывается доступна.
   Прятать саму выноску нельзя: она стоит в потоке, и на её месте осталась
   бы дыра между кадром и следующим рядом. Скрытыми на время ролика
   оказываются только верхние 64px карточки — подпись «Видеоотзыв» и имя;
   человек в этот момент смотрит видео, а не читает подпись. */
.story--video.is-playing .story__photo { z-index: 2; }
/* Нижняя граница кадра проходит по строке с именем и срезает её по
   середине букв — остаётся полоска глифов, читающаяся как дефект вёрстки.
   Гасим обе строки целиком: место они занимают прежнее, поэтому карточка
   не дёргается, а по окончании ролика подпись возвращается */
.story--video.is-playing .story__label,
.story--video.is-playing .story__name { opacity: 0; }

/* Кнопка запуска накрывает весь кадр: попасть по ней нужно с телефона,
   поэтому цель — кадр целиком, а не кружок 62×62 */
.story__play {
  position: absolute; inset: 0;
  display: block;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Затемнение сверху: под ним читается бейдж с хронометражем,
   а лицо в середине кадра остаётся нетронутым */
.story__play::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 58, 68, .34) 0%, rgba(15, 58, 68, 0) 42%);
}
.story--video.is-playing .story__play { display: none; }

/* Кружок стоит по центру ОТКРЫТОЙ части кадра, а не всего кадра: снизу
   на кадр наезжает выноска, и её наезд — ровно 64px (см. .story__card),
   поэтому центр открытой части — это 50% минус половина наезда.
   Значение связано с margin выноски: меняете наезд — правьте и здесь */
.story__play-icon {
  position: absolute;
  left: 50%; top: calc(50% - 32px);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
/* Треугольник — на бордерах, без иконочного шрифта и без svg-файла */
.story__play-icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-42%, -50%);
  width: 0; height: 0;
  border-left: 16px solid var(--base);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.story__play:hover .story__play-icon { transform: translate(-50%, -50%) scale(1.07); }
.story__play:focus-visible { outline: 3px solid var(--more-dark); outline-offset: -3px; }

/* Хронометраж в углу: человек должен видеть, на сколько минут он
   подписывается, до того как нажал */
.story__duration {
  position: absolute; top: 16px; right: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: #fff;
}

/* Уважаем системную настройку «меньше движения»: убираем только
   увеличение кружка, сам запуск видео — осознанное действие человека */
@media (prefers-reduced-motion: reduce) {
  .story__play-icon,
  .story__play:hover .story__play-icon { transition: none; transform: translate(-50%, -50%); }
}

/* Выноска с историей: та же пластика, что у .offer и .director__card —
   белая карточка, наезжающая на кадр.
   ВАЖНО, В ЧЁМ ОТЛИЧИЕ ОТ .offer И .director__card. Там выноска прижата
   к низу кадра (`position: absolute; bottom: 0`) и текста в ней ровно
   на три строки. Здесь текст пишет клиника, и он разной длины: у выноски,
   прижатой к низу, вся лишняя высота уходит ВВЕРХ, на снимок. У Смирновой
   с цитатой и припиской клиники карточка съедала половину кадра вместе
   с лицом — а лицо в отзыве и есть содержание.
   Поэтому здесь выноска стоит в потоке и поднята отрицательным margin:
   наезд на кадр всегда ровно 64px, а растёт карточка ВНИЗ. Сколько бы
   текста ни добавили, снимок остаётся видно целиком.
   Из этого следует, что карточки в ряду разной высоты — так и задумано,
   выравнивать их по низу не нужно. */
.story__card {
  position: relative;
  z-index: 1;
  margin: -64px 16px 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
}
/* Хвостик — треугольник по clip-path, целиком за нижней границей карточки
   (top: 100%), как у ценовой выноски: карточка и хвостик стыкуются встык */
.story__card::after {
  content: ""; position: absolute; top: 100%; left: 46px;
  width: 28px; height: 15px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 8px 8px rgba(15, 58, 68, .10));
}

.story__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--base-ink); margin-bottom: 6px; }
.story__name { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.story__case { font-size: 13px; color: var(--muted); margin-top: 4px; }
.story__text { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 12px 0 0; }

/* Приписка клиники под цитатой пациента. Отделена волосяной линией
   и набрана мельче: в карточке два голоса подряд, и читатель должен
   видеть, где заканчивается прямая речь и начинается клиника */
.story__note {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* Финальная плашка повторяет «Этапы» и «Вопросы»: один и тот же приём
   закрытия блока действием */
.stories__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  margin-top: 44px; padding: 22px 22px 22px 34px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stories__cta p { margin: 0; max-width: 860px; font-size: 16px; color: var(--text-2); }
.stories__cta b { color: var(--text); }

/* ========================= СЛОВО ДИРЕКТОРА =========================
   Зеркало блока вопросов: там текст слева и портрет справа с белой
   выноской — здесь то же самое, но колонка текста уже, потому что
   цитата набрана крупно и длинная строка в ней читалась бы тяжело.
   Фон белый: секция стоит между светло-бирюзовыми «Вопросами» и низом
   страницы, ещё одна заливка превратила бы конец страницы в полосатый */
/* Секция принимает нижний тон «Вопросов» (#f7fbfc) и растворяет его в белый
   уже у себя — граница между блоками не видна. Мягкое пятно справа внизу
   закрывает страницу тем же приёмом, каким открыт первый экран */
.director {
  background:
    /* Пятно по центру секции и с запасом по вертикали — по тому же правилу,
       что и в «Вопросах»: у краёв блока от него уже ничего не остаётся,
       иначе низ страницы обрежет круг и получится линия */
    radial-gradient(720px 380px at 92% 50%, rgba(99, 188, 201, .16), transparent 62%),
    linear-gradient(180deg, #f7fbfc 0%, var(--bg) 300px);
}

.director__grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px; align-items: center;
}

/* Цитата — смысловой заголовок блока, поэтому кегль ближе к H2, чем
   к абзацу. Открывающая «ёлочка» вынесена в псевдоэлемент и висит
   в левом поле (margin-left: -.5em у первого абзаца не трогаем —
   текст должен стоять по одной линии с плашкой и подписью) */
/* Графическое выделение цитаты: крупная «ёлочка» и уходящая от неё вниз
   линия занимают отдельную колонку слева, а текст на неё наложен отступом.
   Ключевое отличие от первой версии, где знак висел над первой строкой:
   он больше ни к чему не приклеен «на глаз» — линия связывает его со всей
   цитатой, и вместе они читаются как поле цитаты, а не как случайный
   залетевший символ. Кавычки в самом тексте при этом не набираются */
.director__quote {
  position: relative;
  margin: 0 0 26px; padding-left: 56px;
}
/* Пустая alt-строка после слэша оставляет знак картинкой: скринридер его
   не озвучивает — цитату он и так читает как цитату (<blockquote>) */
.director__quote::before {
  content: "«" / "";
  position: absolute; left: 0; top: -16px;
  font-size: 72px; line-height: 1; font-weight: 800;
  color: var(--more);
  pointer-events: none;
}
/* Линия начинается под знаком и растворяется к концу цитаты: сплошная
   до самого низа читалась бы как рамка блока, а не как продолжение знака */
.director__quote::after {
  content: "";
  position: absolute; left: 20px; top: 52px; bottom: 4px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(99, 188, 201, .6), rgba(99, 188, 201, 0));
}
.director__quote p {
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55;
  color: var(--text); letter-spacing: -.01em;
  margin: 0 0 18px;
}
.director__quote p:last-child { margin-bottom: 0; }

/* Подпись: имя крупно, роль мелко — то же соотношение, что в выноске
   на портрете, чтобы два подписанных места читались как одно целое */
.director__sign {
  padding-top: 20px; border-top: 1px solid var(--line);
}
.director__sign b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.director__sign span { font-size: 14px; color: var(--muted); }

.director__mail { margin: 14px 0 0; font-size: 15px; color: var(--text-2); }
.director__mail a { font-weight: 700; border-bottom: 1px solid rgba(47, 139, 153, .35); }
.director__mail a:hover { color: var(--more-deep); border-bottom-color: var(--more-deep); }

/* --- Правая колонка: портрет + выноска с должностью --- */
.director__media { position: relative; }
.director__photo {
  position: relative; aspect-ratio: 1040 / 1300; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--more) 0%, #4aa4b3 55%, var(--more-deep) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Снимок уже обрезан под рамку (1040×1300), поэтому object-position
   центральный: сдвигать нечего, кадр совпадает один в один */
.director__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Затемнение левого низа — ровно под белой выноской: там на снимке
   светлый халат, без подложки карточка теряет край */
.director__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(15, 58, 68, .30), transparent 52%);
}

/* Выноска повторяет ценовую карточку первого экрана: тот же вылет
   за край кадра и тот же хвостик-треугольник, только зеркально —
   хвостик слева, потому что карточка прижата к левому краю портрета */
.director__card {
  position: absolute; left: -34px; bottom: 64px; width: min(268px, 84%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px 18px;
}
.director__card::after {
  content: ""; position: absolute; top: 100%; left: 38px;
  width: 28px; height: 15px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 8px 8px rgba(15, 58, 68, .10));
}
.director__card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--base-ink); margin-bottom: 6px; }
.director__card-name { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }

/* ================= ЗАПИСЬ, КОНТАКТЫ, О КЛИНИКЕ =================
   Финальный блок: слева форма, справа контакты и регалии.
   Фон снова набирает тон «more» из белого — тем же приёмом, что и
   остальные переходы: «Слово директора» заканчивается белым, поэтому
   здесь верхний стоп белый, а тон проявляется за 300px. Нижний цвет
   (#eef6f8) — стыковочный: ровно им залит подвал, и границы между
   блоком и подвалом не видно. Меняете один — правьте второй. */
.final {
  background:
    /* Пятно по центру секции, радиус меньше расстояния до её краёв —
       иначе обрезанный круг даст горизонтальный шов на границе */
    radial-gradient(760px 420px at 92% 50%, rgba(99, 188, 201, .16), transparent 68%),
    linear-gradient(180deg, var(--bg) 0%, #eef6f8 300px);
}

/* Колонки одной высоты: форма слева и справочные карточки справа —
   визуально один блок, и разная длина колонок читалась бы как обрыв.
   align-items по умолчанию (stretch) тянет обе колонки до высоты ряда */
.final__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
}

/* Форма лежит в белой карточке: на тонированном фоне поля ввода без
   подложки читаются как часть страницы, а не как то, что нужно заполнить */
.final__form-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 36px 32px;
}
.final__form-card h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 14px; }
.final__lead { font-size: 16px; color: var(--text-2); margin: 0 0 22px; }

/* Обещания — та же плашка, что в попапе: человек видит одинаковый
   список и там, и здесь, и не перечитывает его как новый */
.final__perks { list-style: none; margin: 0 0 24px; padding: 16px 18px; background: var(--more-soft); border-radius: var(--radius); }
.final__perks li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15px; color: var(--text-2); }
.final__perks li:last-child { margin-bottom: 0; }
/* Галочка рисуется двумя границами, а не символом: шрифтовая галка
   в Manrope выпадает в системный фолбэк и выглядит чужой */
.final__perks li::before {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--more-dark); border-bottom: 2.5px solid var(--more-dark);
  transform: rotate(-45deg);
}

/* Нижний отступ держит зазор до блока с опросом там, где карточку
   не растягивает соседняя колонка (узкий экран): margin-top: auto
   у соседа в этом случае схлопывается в ноль */
.final__alt { margin: 14px 0 24px; text-align: center; font-size: 14px; color: var(--muted); }
.final__alt a { font-weight: 800; color: var(--text); white-space: nowrap; }
.final__alt a:hover { color: var(--base-dark); }

/* Второй путь — опрос. Отделён линией, а не рамкой: это не отдельная
   карточка, а продолжение того же разговора для тех, кто не готов
   оставлять телефон прямо сейчас */
/* margin-top: auto прижимает блок к низу карточки: когда колонка
   растянута до высоты соседней, лишнее место уходит сюда, в разрыв
   между формой и вторым путём, а не пустотой под последней кнопкой */
.final__quiz {
  margin-top: auto; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.final__quiz b { display: block; font-size: 16px; margin-bottom: 6px; }
.final__quiz span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin-bottom: 14px; }

/* Кнопка-контур: на странице уже есть оранжевая кнопка формы, вторая
   заливка рядом спорила бы с ней за внимание */
.btn--ghost {
  background: transparent; color: var(--more-deep);
  border: 1.5px solid rgba(47, 139, 153, .45);
}
.btn--ghost:hover { background: var(--more-soft); color: var(--more-deep); border-color: var(--more-dark); }

/* --- Правая колонка: контакты и регалии --- */
/* Остаток высоты забирает нижняя карточка («О клинике»): её список
   длиннее, и лишнее место в ней не бросается в глаза, тогда как
   растянутые контакты выглядели бы полупустой рамкой */
.final__info { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.final__box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}
.final__box-title { font-size: 19px; margin: 0 0 18px; }

/* Контакты списком определений: подпись слева, значение справа —
   так адрес и часы работы читаются с одного взгляда */
.final__contacts { margin: 0; display: grid; gap: 14px; }
.final__contacts > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.final__contacts dt { font-size: 13px; color: var(--muted); padding-top: 2px; }
.final__contacts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.final__contacts a { font-weight: 700; border-bottom: 1px solid rgba(47, 139, 153, .35); }
.final__contacts a:hover { color: var(--more-deep); border-bottom-color: var(--more-deep); }

/* Карточка тянется до низа колонки, поэтому список внутри распределяется
   по её высоте, а не собирается сверху с пустотой под собой.
   gap задаёт минимальный зазор: на узком экране, где растягивать нечего,
   space-between схлопнул бы пункты вплотную */
.final__box--facts { display: flex; flex-direction: column; }
.final__facts {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px;
}
.final__facts li {
  position: relative;
  padding-left: 22px;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
/* Маркер — точка тона «more», как в плашках-надзаголовках:
   оранжевого в блоке ровно одна крупная заливка — кнопка формы */
.final__facts li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--more);
}
.final__facts b { color: var(--text); font-weight: 800; }
.final__facts a { font-weight: 700; border-bottom: 1px solid rgba(47, 139, 153, .35); }
.final__facts a:hover { color: var(--more-deep); border-bottom-color: var(--more-deep); }

/* Снимок клиники в карточке «О клинике»: правой колонке нужен
   визуальный вес, иначе рядом с формой она читается как сноска.
   Кадр широкий, а не вертикальный, — высокий снимок вытянул бы
   колонку выше формы, и колонки перестали бы совпадать по высоте */
.final__photo {
  position: relative;
  /* Пропорция подобрана под высоту соседней колонки: узкая полоса 12/5
     стояла, пока в списке был шестой пункт (про врача). Пункт убрали —
     освободившееся место забрал кадр, и колонки остались вровень */
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  /* Подложка видна, пока отложенный снимок не загрузился: пустая белая
     дыра в карточке заметнее, чем спокойная заливка тона «more» */
  background: linear-gradient(180deg, #d7ecf0 0%, #c3e2e8 100%);
}
.final__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Встроенная форма (разметку даёт ../shared/lead) --- */
/* Поля лежат на белой карточке, и белое поле с тонкой рамкой на белом
   фоне не читается как поле ввода — глаз его просто не находит.
   Поэтому здесь у полей своя заливка и более заметная рамка; в попапе
   этой правки не нужно: там форма и так лежит на затемнённом фоне */
.al-inline .al__field input {
  background: #f6fafb;
  border: 1.5px solid #cfe0e5;
  padding: 16px 18px;
  font-size: 16px;
}
.al-inline .al__field input::placeholder { color: #8ea3aa; }
/* В фокусе поле светлеет и получает кольцо: видно, куда сейчас
   попадёт ввод, в том числе при навигации с клавиатуры */
.al-inline .al__field input:focus {
  background: #fff;
  border-color: var(--more-dark);
  box-shadow: 0 0 0 3px rgba(99, 188, 201, .22);
}
.al-inline .al__field.is-invalid input { background: #fff6f6; }

/* Кнопка отправки в блоке шире и крупнее, чем в попапе: в модалке
   она последняя в коротком списке, а здесь конкурирует с контентом.
   Тень нейтральная, не оранжевая, — правило страницы */
.al-inline .al__submit {
  padding: 17px 24px; font-size: 17px; font-weight: 800;
  box-shadow: 0 4px 14px var(--base-shadow);
}
.al-inline .al__submit:hover:not(:disabled) { box-shadow: 0 6px 18px var(--base-shadow); }

/* ============================== ПОДВАЛ ============================== */
/* Залит нижним тоном финального блока (#eef6f8) — без границы и без
   тёмной плашки: единственная резкая граница на странице — под шапкой */
.footer {
  background: #eef6f8;
  padding: 8px 0 44px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}

/* Предупреждение о противопоказаниях обязательно по ст. 24 закона
   «О рекламе». Набрано крупнее остального юридического текста и стоит
   первым: его нельзя прятать в мелкий шрифт */
.footer__warning {
  margin: 0 0 18px; padding: 14px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; font-weight: 700; color: var(--text);
}

.footer__legal { margin: 0 0 20px; max-width: 980px; color: var(--muted); }
.footer__legal a { color: var(--text-2); border-bottom: 1px solid var(--line); }
.footer__legal a:hover { color: var(--more-deep); }

.footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid rgba(15, 58, 68, .10);
  color: var(--muted);
}
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__links a { color: var(--text-2); }
.footer__links a:hover { color: var(--more-deep); }

/* --- Плавающая кнопка квиза --- */
.quiz-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 18px; border-radius: 999px;
  background: #fff; color: var(--text); font-size: 14px; line-height: 1.25;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transition: transform .18s ease;
  /* Кнопка, а не ссылка: квиз — действие на странице, а не переход */
  font-family: inherit; text-align: left; cursor: pointer;
}
.quiz-fab[hidden] { display: none; }
/* Появление отложено на 2,6 с: сначала человек читает заголовок и цену,
   и только потом в углу возникает движение. Вход анимирует translate,
   а hover — transform, поэтому они не конфликтуют */
.quiz-fab {
  opacity: 0;
  animation: fab-in .6s cubic-bezier(.16, 1, .3, 1) 2.6s forwards;
}
@keyframes fab-in {
  from { opacity: 0; translate: 40px 0; }
  to   { opacity: 1; translate: 0 0; }
}
.quiz-fab:hover { transform: translateY(-2px) scale(1.02); color: var(--text); }

/* Рядом с квизом — круглая кнопка мессенджеров (shared/messengers): одна
   «панель» в углу, мессенджеры с краю, квиз левее. Сдвиг — только когда
   кнопка мессенджеров действительно есть (без JS её нет, квиз остаётся у края).
   Центры по вертикали совпадают: пилюля выше круга на несколько пикселей */
body:has(> .amsg) .quiz-fab { right: 96px; }        /* 24 + 60 + 12 */
body > .amsg { right: 24px; bottom: 26px; }
@media (max-width: 991px) {
  body:has(> .amsg) .quiz-fab { right: 92px; }      /* 24 + 56 + 12 */
  body > .amsg { right: 24px; bottom: 28px; }
}
.quiz-fab b { color: var(--base-ink); }

/* Редкий импульс: волна расходится раз в 7 секунд. Постоянное движение
   в углу экрана раздражает и «выцветает» — редкое ловится боковым зрением.

   Волну рисует растущий spread у box-shadow, а не scale: кнопка — «пилюля»
   примерно 250×56, и равномерное масштабирование прибавляло ~35px по ширине
   против ~8px по высоте, то есть кольцо не расходилось, а растягивалось вбок.
   Spread добавляет одинаковое число пикселей со всех сторон, поэтому волна
   идёт ровно и повторяет форму кнопки.

   Псевдоэлемент растянут по границам кнопки: внешняя тень обрезается его
   border-box, так что видна ровно расходящаяся полоса снаружи, без заливки
   поверх текста. Две волны со сдвигом фазы читаются как одно мягкое
   движение — одиночная на такой большой паузе выглядит как моргание */
.quiz-fab::before,
.quiz-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: fab-ring 7s cubic-bezier(.22, .61, .36, 1) 3.6s infinite;
}
.quiz-fab::after { animation-delay: 4.05s; }
/* Затухание растянуто на 24% цикла (≈1,7 с) — прежняя секунда обрывалась
   слишком резко и волна читалась как рывок */
@keyframes fab-ring {
  0%   { box-shadow: 0 0 0 0    rgba(241, 127, 29, .45); }
  24%  { box-shadow: 0 0 0 18px rgba(241, 127, 29, 0); }
  100% { box-shadow: 0 0 0 18px rgba(241, 127, 29, 0); }
}

/* Подарок покачивается в том же ритме, что и кольцо */
.quiz-fab__gift {
  /* inline-элемент не поворачивается — нужен блочный контекст */
  display: inline-block;
  font-size: 22px;
  animation: gift-wiggle 7s ease-in-out 3.6s infinite;
}
@keyframes gift-wiggle {
  0%, 10%, 100% { rotate: 0deg; }
  2%            { rotate: -12deg; }
  5%            { rotate: 10deg; }
  8%            { rotate: -5deg; }
}

/* ============================ АДАПТИВ ============================ */
@media (max-width: 1100px) {
  .hero__grid { gap: 36px; }
  .header__slogan { display: none; }
}

@media (max-width: 900px) {
  /* В одну колонку снимок с ценой оказывался после всего текстового блока,
     то есть заведомо под сгибом. Поэтому .hero__main распускается
     (display: contents) и его дети становятся элементами той же сетки —
     тогда снимок можно поставить сразу за подзаголовком, перед кнопкой.
     Порядок задаёт order, вертикальные интервалы остаются на собственных
     margin элементов, поэтому row-gap здесь снимаем: иначе к каждому
     margin добавились бы ещё 36-56px сеточного зазора */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0; align-items: start;
    padding: 44px 24px 56px;
  }
  .hero__main { display: contents; }
  /* justify-self обязателен: как элемент сетки пилюля блокифицируется
     из inline-flex во flex и без него растянулась бы на всю ширину */
  .hero__main > .eyebrow { order: 1; justify-self: start; }
  .hero h1 { order: 2; }
  .hero__sub { order: 3; margin-bottom: 22px; }
  .hero__media { order: 4; }
  .hero__cta { order: 5; }
  .hero__chips { order: 6; }

  /* Абзац-лид на узком экране занимал почти весь остаток экрана и уводил
     снимок с ценой вниз. Содержание не теряется: гарантия в договоре, КТ
     и план лечения, письменная цена «под ключ» разобраны отдельными
     блоками ниже и в FAQ, где на них есть место */
  .hero__lead { display: none; }

  .hero__media { max-width: 460px; margin: 0 auto 30px; }
  .hero__photo { aspect-ratio: 4 / 5; }
  .offer { left: 0; right: 0; margin: -46px auto 0; position: relative; bottom: auto; width: min(360px, 100%); }
  .offer::after { display: none; }
  /* На мобильной карточка не висит над фото, а стоит в потоке — парение
     здесь выглядит как дребезг вёрстки, оставляем только появление */
  .offer { animation: offer-in .7s cubic-bezier(.16, 1, .3, 1) .35s forwards; }
  /* Тень мельче десктопной не только ради вкуса: --shadow-lg (0 26px 70px)
     уходит вниз примерно на 61px, а до нижнего края первого экрана остаётся
     56px внутреннего отступа — разницу срезал overflow: hidden у .hero,
     и тень обрывалась ровно по стыку с соседней секцией.
     Меняете отступ .hero__grid снизу — проверьте, что он больше, чем
     смещение тени плюс половина её размытия */
  .offer { box-shadow: 0 12px 30px rgba(15, 58, 68, .13); }
}

/* Ниже 1080px три колонки становятся слишком узкими: переходим на две,
   змейка исчезает — дуга перехода рассчитана ровно на раскладку 3+3 */
@media (max-width: 1079px) {
  /* Две колонки в шапке секции нужны только ради экономии высоты на десктопе;
     на узком экране скроллить всё равно придётся — возвращаем столбик */
  .section__head--split { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

  /* Равная высота всех рядов нужна только под дугу перехода на десктопе;
     здесь она бы просто добавила пустоты в короткие карточки */
  .path__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 48px; }
  .path__turn { display: none; }
  /* Пунктир — только между соседями по ряду, то есть у нечётных карточек */
  .path-step:nth-child(3n)::after { display: block; }
  .path-step:nth-child(even)::after { display: none; }

  /* Вопросы важнее портрета, поэтому список остаётся первым, а снимок
     уходит под него и сжимается до колонки текста */
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq__media { max-width: 440px; margin: 0 auto; width: 100%; }
  /* Кадр становится ниже: в узкой колонке вертикальный снимок занял бы
     пол-экрана прокрутки, а ответы важнее портрета */
  .faq__photo { aspect-ratio: 4 / 5; }

  /* Слово директора: портрет уходит наверх, а не под текст, — в личном
     обращении сначала видно, кто говорит, и только потом что говорит */
  .director__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .director__media { max-width: 420px; margin: 0 auto; width: 100%; order: -1; }
  .director__photo { aspect-ratio: 4 / 5; }
  /* Карточка встаёт в поток под кадром: вылет за левый край в узкой
     колонке упирался бы в поле контейнера */
  .director__card {
    position: relative; left: 0; bottom: auto;
    margin: -40px auto 0; width: min(320px, 100%);
  }
  .director__card::after { display: none; }
  /* Поле цитаты сужается: 56px отступа в колонке шириной с экран съедали
     бы строку, а знак при этом остаётся крупным настолько, чтобы читаться */
  .director__quote { padding-left: 42px; }
  .director__quote::before { font-size: 60px; top: -12px; }
  .director__quote::after { left: 16px; top: 44px; }

  /* Финальный блок: форма остаётся первой, контакты уходят под неё —
     на узком экране сначала действие, потом справочная часть */
  .final__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .final__form-card { padding: 28px 22px 26px; }
}

/* Ниже 640px в ряд историй помещается ровно одна карточка. Растянутый
   на всю ширину вертикальный кадр съедал бы экран целиком, поэтому
   ограничиваем колонку той же шириной, что и снимки в соседних блоках */
@media (max-width: 640px) {
  .stories__list { max-width: 420px; margin: 0 auto; }
  /* Подпись контакта над значением, а не слева: колонка в 116px
     на узком экране оставляла бы адресу половину строки */
  .final__contacts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Пользователи с включённым «уменьшить движение» получают статичный экран:
   всё конечное состояние выставлено вручную, ничего не остаётся невидимым */
@media (prefers-reduced-motion: reduce) {
  .offer, .offer__new, .offer__old::after,
  .quiz-fab, .quiz-fab::before, .quiz-fab::after, .quiz-fab__gift { animation: none; }
  .offer, .quiz-fab { opacity: 1; }
  /* Волна живёт только внутри кейфреймов: без анимации у псевдоэлементов
     нет собственной тени, гасить отдельно нечего */
  .offer__old::after { scale: 1 1; }
  .btn, .quiz-fab { transition: none; }

  /* Ответ появляется мгновенно, знак «плюс» меняется без доворота */
  .faq-item__body p,
  .faq-item__body ul { animation: none; }
  .faq-item summary::before,
  .faq-item summary::after { transition: none; }

  /* Этапы показываем сразу и без сдвига: смысл блока не в анимации */
  .path--anim .path-step,
  .path--anim .path__turn { opacity: 1; translate: 0 0; transition: none; }
}

@media (max-width: 700px) {
  /* Одна колонка: пунктир разворачивается из горизонтального в вертикальный
     и уходит под номер этапа, продолжая его линию */
  .path__list { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .path-step:nth-child(n)::after {
    display: block;
    left: 45px; top: 100%; width: 4px; height: 36px;
    background-size: 4px 14px;
    background-repeat: repeat-y;
    translate: -50% 0;
  }
  .path-step:last-child::after { display: none; }
}

@media (max-width: 640px) {
  /* Липкая шапка на мобильной не должна съедать шестую часть экрана */
  :root { --header-h: 64px; }
  .header__logo img { height: 34px; }
  .header__row { gap: 12px; }

  /* Навигации на лендинге нет намеренно, а кнопка «Записаться» на этой ширине
     скрыта (она дублируется в первом экране и в плавающей кнопке опроса) —
     звонок остаётся единственным действием в шапке. Оформления ему не нужно,
     хватает размера; min-height держит зону нажатия в 44px */
  .header__cta { display: none; }
  .header__phone {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 44px;
    font-size: 18px;
  }

  /* Смысл всей группы правил ниже — уместить снимок врача вместе с ценовой
     карточкой в первый экран телефона. Порядок элементов уже переставлен
     на 900px, но при портрете 4/5 карточка всё равно начиналась ниже сгиба,
     поэтому здесь сжимается и текстовая часть, и сам снимок.
     Правите что-то из этого — проверяйте на высоте 667px (минимум,
     на который мы ориентируемся): карточка должна быть видна целиком */
  .hero__grid { padding: 26px 20px 48px; }
  .hero .eyebrow { font-size: 13px; padding: 7px 14px 7px 12px; margin-bottom: 16px; }
  .hero h1 { font-size: 28px; margin-bottom: 12px; }
  .hero__sub { font-size: 18px; margin-bottom: 16px; }
  /* Квадрат вместо портрета: object-position держит кадр по лицу,
     обрезается низ халата — он ничего не сообщает */
  .hero__media { max-width: 264px; margin-bottom: 26px; }
  .hero__photo { aspect-ratio: 1 / 1; }
  .offer { margin-top: -40px; padding: 16px 18px; }
  .offer__title { font-size: 14px; margin-bottom: 6px; }
  .offer__new { font-size: 28px; }
  .offer__note { font-size: 12.5px; margin-top: 6px; }
  .offer__deadline { margin-top: 12px; padding-top: 10px; }

  .hero__cta { gap: 18px; }
  .btn--lg { width: 100%; }
  .hero__phone { font-size: 20px; }
  .quiz-fab { right: 12px; bottom: 12px; padding: 12px 18px; font-size: 13px; }
  body:has(> .amsg) .quiz-fab { right: 78px; }      /* 12 + 56 + 10 */
  body > .amsg { right: 12px; bottom: 13px; }

  .section { padding: 56px 0; }
  .section__head { margin-bottom: 34px; }
  .path-step { padding: 22px 22px 24px; }
  .path__cta { padding: 24px; }
  .path__cta .btn { width: 100%; }

  .faq-item summary { font-size: 16.5px; padding: 18px 56px 18px 20px; }
  .faq-item summary::before,
  .faq-item summary::after { top: 29px; right: 22px; }
  .faq-item__body { padding: 0 56px 20px 20px; }
  .faq-item__body p,
  .faq-item__body ul { font-size: 15.5px; }
  .faq__cta { padding: 24px; }
  .faq__cta .btn { width: 100%; }
}