/* ============================================================================
   Лендинг «Марат Гаджиев» — дизайн-система
   ----------------------------------------------------------------------------
   Один файл на три страницы: index.html, product.html, fragment.html. Общий файл,
   а не стиль в каждом документе, — чтобы кнопка на странице продукта и кнопка
   во фрагменте не разъехались через месяц.

   Что здесь важно знать правящему:

   1. Цвета. Фирменная бирюза #c08a3e не проходит WCAG AA белым текстом
      (3.36:1 при норме 4.5:1), поэтому на заливках кнопок стоит --brand-strong
      #0b7d85 (4.90:1) — тот же тон на шаг темнее. #c08a3e остался на декоре,
      где контраст текста не при чём. Не возвращайте светлый тон на кнопки.
   2. Отступы. Единая шкала --space-*, кратная 4. Между секциями — --rhythm.
      Произвольных значений в разметке быть не должно.
   3. Фокус. Виден всегда и везде: см. блок «Фокус». outline: none без замены
      здесь запрещён — по лендингу ходят с клавиатуры.
   4. Разметка контракта (data-sf-buy, data-sf-price, data-sf-price-old)
      неприкосновенна: значения в неё подставляет рантайм.
   5. Состояние без скриптов. `.faq` на <details> — в бандле нет ни одного
      скрипта, их режет CSP. Любое новое раскрывающееся состояние делается тем
      же способом; :hover вместо клика — не замена, он не работает пальцем и не
      озвучивается.
   6. Продающие блоки. `.spec` — плашки фактов под заголовком продукта,
      `.steps` — что будет после нажатия «Купить», `.faq` — вопросы на
      <details> (скриптов в бандле нет и не будет, их режет CSP), `.pledge` и
      `.buybox--offer` — закрывающий блок. Всё, что они утверждают о выдаче,
      взято из кода платформы: `apps/landing/src/popup/view.ts` и
      `src/bot/templates.ts`. Меняется код — меняется текст в этих блоках.
   ========================================================================= */

/* --- Шрифт ---------------------------------------------------------------- */
/* Пути относительно этого файла: он сам лежит в assets/. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("golos-400-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("golos-400-cyr-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("golos-400-cyr.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("golos-700-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("golos-700-cyr-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("golos-700-cyr.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("golos-700-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("golos-700-cyr-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("golos-700-cyr.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --- Токены --------------------------------------------------------------- */

:root {
  /* Цвет. В скобках — контраст с белым либо с заливкой. */
  /* Палитра тёплая песочная — по макету владельца 29.08.26. Каркас и
     раскладка те же, что у Гаджиева: «сайт Марата это полный референс,
     нужно только цвет поменять». Контраст с белым пересчитан. */
  --ink: #2a1f14;             /* заголовки, 16.1:1 */
  --body: #40342a;            /* основной текст, 12.1:1 */
  --muted: #736558;           /* второстепенный текст, 5.6:1 */
  --brand: #c08a3e;           /* декор: линейки, иконки, рамки */
  --brand-strong: #9a6a22;    /* заливка кнопок и цвет ссылок, 4.7:1 */
  --brand-deep: #7a521a;      /* наведение и нажатие */
  --accent: #b4551b;          /* цена и заливка оранжевой кнопки, 4.9:1 */
  --accent-deep: #8c4114;     /* наведение и нажатие оранжевой, 7.3:1 */
  --tint: #fbf3e8;            /* подложка шапки и подвала */
  --tint-soft: #fdf9f3;       /* подложка панелей */
  --line: #ecdcc4;            /* граница на белом */
  --line-soft: #f3e8d8;       /* граница на подложке */
  --surface: #ffffff;

  /* Шкала отступов, шаг 4. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Вертикальный ритм страницы: одно значение на все промежутки между блоками. */
  --rhythm: clamp(56px, 7vw, 96px);
  /* Половинный шаг — внутри блока, между заголовком и содержимым. */
  --rhythm-half: clamp(28px, 3.5vw, 48px);

  /* Типографика */
  --font: "Golos Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --size-display: clamp(26px, 1.35rem + 1.4vw, 38px);
  --size-h2: clamp(22px, 1.2rem + 0.9vw, 30px);
  --size-h3: clamp(18px, 1.05rem + 0.3vw, 22px);
  --size-h4: 18px;
  --size-lede: clamp(17px, 1rem + 0.3vw, 20px);
  --size-body: 17px;
  --size-small: 15px;
  --size-micro: 13px;

  /* Мера строки: длиннее 75 знаков глаз теряет начало следующей строки. */
  --measure: 68ch;
  --measure-narrow: 54ch;

  /* Скругления */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Тени. Мягкие и цветные — под бирюзу, а не серый по умолчанию. */
  --shadow-sm: 0 1px 2px rgba(80, 55, 25, 0.06), 0 2px 6px rgba(80, 55, 25, 0.05);
  --shadow-md: 0 4px 10px rgba(80, 55, 25, 0.07), 0 12px 28px rgba(80, 55, 25, 0.08);
  --shadow-lg: 0 8px 20px rgba(80, 55, 25, 0.09), 0 28px 60px rgba(80, 55, 25, 0.1);

  /* Переходы. Быстрые: изменение состояния должно читаться, а не проигрываться. */
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);

  /* Высота залипшей шапки — на неё опирается scroll-margin у якорей. */
  --header-h: 76px;
}

/* --- База ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Без этого якорь #buy уезжает под залипшую шапку. */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
  -webkit-text-size-adjust: 100%;
}

/* min-height: 100vh здесь НЕ ставить — ни на body, ни на .page.
   Документ автора живёт в бесшовном кадре, высоту которому платформа задаёт по
   прошлому замеру содержимого. Значит внутри кадра `100vh` — это высота самого
   кадра, то есть наша же прошлая высота: мера ссылается на себя. Страница
   растягивается до неё, следующий замер возвращает то же число, и высота уже
   не уменьшается никогда. Отсюда экран пустоты под последней секцией, который
   владелец видит на боевом лендинге.
   Растягивать нечего и незачем: кадр и так ровно по содержимому. */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Переполнение по горизонтали — дефект, а не то, что можно скрыть overflow-x.
     Здесь только страховка от одного длинного слова в узкой колонке. */
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* --- Типографика ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  /* Крупный кегль набирается плотнее: иначе заголовок рассыпается на буквы. */
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-display);
  line-height: 1.06;
}

h2 {
  font-size: var(--size-h2);
  line-height: 1.12;
}

h3 {
  font-size: var(--size-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

h4 {
  font-size: var(--size-h4);
  line-height: 1.3;
  letter-spacing: -0.008em;
}

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

strong,
b {
  font-weight: 700;
  color: var(--ink);
}

/* Ссылка в тексте — подчёркнутая. Ссылка без подчёркивания опознаётся только
   по цвету, то есть не опознаётся дальтониками (WCAG 1.4.1). */
a {
  color: var(--brand-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--brand-strong) 45%, transparent);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

a:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

/* Надзаголовок: маленькая метка над крупным заголовком. */
.eyebrow {
  margin: 0;
  font-size: var(--size-micro);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

/* Подзаголовок-вводка: крупнее корпуса, короче меры. */
.lede {
  font-size: var(--size-lede);
  line-height: 1.55;
  color: var(--body);
  max-width: var(--measure);
}

.muted {
  color: var(--muted);
}

.measure-narrow {
  max-width: var(--measure-narrow);
}

/* --- Фокус ---------------------------------------------------------------- */
/* Единственный источник правды для видимого фокуса. Правило намеренно широкое:
   любой новый интерактивный элемент получает индикатор без отдельной строчки. */

:focus-visible {
  outline: 3px solid var(--brand-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Внутри бирюзовых плашек контур того же цвета сливается с фоном —
   там он белый, и это тоже 4.5:1 к заливке. */
.on-brand :focus-visible {
  outline-color: var(--surface);
}

/* --- Служебное ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому»: первая по Tab, видна только при фокусе. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--brand-strong);
  color: var(--surface);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--t-base);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--surface);
  outline-color: var(--ink);
}

/* --- Раскладка ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  /* Поле растёт вместе с экраном: 20px на телефоне, 32px на десктопе. */
  padding-inline: clamp(20px, 3vw, 32px);
}

/* Колонка остаётся: по ней `.footer { margin-top: auto }` прижимает подвал к
   низу, когда содержимого мало. Без `min-height` прижимать не к чему — подвал
   просто встаёт сразу за содержимым, и это верное поведение внутри кадра.
   Про запрет `min-height: 100vh` — см. комментарий у `body`. */
.page {
  display: flex;
  flex-direction: column;
}

.page__main {
  flex: 1;
  padding-block: var(--rhythm) var(--rhythm);
}


/* Промежуток между секциями — один на весь сайт. */
.section + .section {
  margin-top: var(--rhythm);
}

/*
 * Первая секция своего отступа не добавляет.
 *
 * `.page__main` уже отбивает содержимое от шапки на `--rhythm`, и вместе с
 * `margin-top` секции получалось до 192px пустоты — экран открывался почти
 * пустым, заголовок «Обо мне» уезжал ниже сгиба.
 */
.page__main > .section:first-child {
  margin-top: 0;
}

.section {
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

/* Заголовок секции с фирменной линейкой. */
.section__head {
  margin-bottom: var(--rhythm-half);
}

.section__rule {
  width: 52px;
  height: 4px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--brand);
}

/* Заголовок второго уровня внутри длинной страницы: тише главного, но
   заметно крупнее корпуса. */
.h2--compact {
  font-size: clamp(22px, 1.15rem + 0.9vw, 30px);
  line-height: 1.18;
}

/* Вертикальная стопка с шагом из шкалы. */
.stack {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.stack--lg {
  gap: var(--space-5);
}

/* Две колонки: текст и иллюстрация. Схлопывается на планшете. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--rhythm-half) var(--space-7);
  align-items: center;
}

/* Картинка задавала высоту всей секции: 526px против 155px текста рядом.
   Ограничиваем — разница воздуха перестаёт читаться как незаполненный блок. */
.split .figure__frame {
  max-height: 380px;
}

.split .figure__frame img {
  height: 100%;
  object-fit: contain;
}

/* Список преимуществ в две колонки — на широком экране лента из пяти строк
   выглядит недоделанной. */
.checklist--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-7);
}

/* Полоса с одним второстепенным действием по центру. */
.band-center {
  display: flex;
  justify-content: center;
}

/* --- Кнопки --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 48px — палец попадает без прицеливания (WCAG 2.5.5 требует 44). */
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--size-body);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
}

/*
 * Кнопка «Мои методички» — главное действие шапки. Цвет задан заказчиком.
 *
 * Текст ТЁМНЫЙ, а не белый: на золотой заливке #d9a253 белый даёт 2.1:1 при
 * норме 4.5 — надпись расплывается. Тёмный даёт 7.09:1. Посчитано, не на глаз.
 */
.btn--products {
  background: #d9a253;
  color: #2a1f14;
  box-shadow: var(--shadow-sm);
}

.btn--products:hover {
  background: #c08a3e;
}

/* Консультация уезжает в верхнюю строку, к правому её краю. */
.btn--consult {
  background: transparent;
  color: var(--brand-strong);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn--consult:hover {
  border-color: var(--brand);
  background: var(--tint-soft);
}

.header__consult {
  margin-left: auto;
}

/*
 * Пока ширины хватает — вся шапка в одну строку. Как только перестаёт,
 * навигация уходит на вторую целиком, а «Консультация» остаётся наверху
 * рядом с именем: именно этого просил заказчик, и именно так нарисовано
 * на макете.
 */
@media (max-width: 700px) {
  .header__nav {
    flex-basis: 100%;
    justify-content: stretch;
  }

  .header__nav .btn {
    flex: 1;
  }
}

.btn--primary {
  background: var(--brand-strong);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--brand-deep);
  color: var(--surface);
  box-shadow: var(--shadow-md);
}

/* Нажатие возвращает элемент на место — движение вниз читается как «сработало». */
.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

/* Оранжевая кнопка. Второе по силе действие в шапке — переход к продуктам:
   рядом с бирюзовой «Записаться» она читается как другой путь, а не как ещё
   одна ссылка. Тон взят из --accent, того же, которым набрана цена: оранжевый
   на странице один, и он означает «покупка». Светлее его не делать — заливка
   держит белый текст на 4.89:1, а любой шаг в сторону яркости роняет контраст
   ниже AA. */
.btn--accent {
  background: var(--accent);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  background: var(--accent-deep);
  color: var(--surface);
  box-shadow: var(--shadow-md);
}

.btn--accent:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--ink);
}

/*
 * Кнопка ознакомительного фрагмента — бледно-зелёная, просьба заказчика от
 * 11.08.26 («сделать бледнозелёной, чтобы выделить»).
 *
 * Это второе по важности действие на странице после «Купить», и белая кнопка
 * на белом фоне не читалась как действие вовсе. Заливка `#f9efdf` даёт 1.13:1
 * к белому — видно как отдельный объект, — и 8.1:1 с текстом `--ink`, то есть
 * подпись остаётся контрастной. Ярче делать нельзя: кнопка начнёт спорить с
 * «Купить», а она вторая, а не первая.
 */
.btn--sample {
  background: #f9efdf;
  border-color: #e6cfa8;
  color: var(--ink);
}

.btn--sample:hover {
  background: #f5e6cf;
  border-color: var(--brand);
}

.btn--sample:active {
  transform: translateY(1px);
}

.btn--ghost:active {
  transform: translateY(1px);
}

/* Тихая кнопка: для возврата и второстепенных переходов. */
.btn--quiet {
  min-height: 44px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  font-size: var(--size-small);
}

.btn--quiet:hover {
  background: var(--tint);
  color: var(--ink);
}

.btn--sm {
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--size-small);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Стрелка в кнопке чуть отъезжает при наведении — направление действия. */
.btn__arrow {
  transition: transform var(--t-base);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--back:hover .btn__arrow {
  transform: translateX(-3px);
}

/* Ряд кнопок: на узком экране кнопки становятся во всю ширину. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --- Шапка ---------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--tint) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* Логотип — тоже ссылка, и по нему тоже попадают пальцем. */
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  transition: background-color var(--t-fast), transform var(--t-base);
}

.brand:hover .brand__mark {
  background: var(--brand-strong);
  transform: rotate(-8deg);
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand__name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.brand__role {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  /* Не --brand-strong: 12px/600 на подложке шапки дают 4.46:1 — на четыре
     сотых ниже нормы AA. Тон глубже даёт 6.6:1. */
  color: var(--brand-deep);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Текстовая ссылка навигации: подчёркивание рисуем сами, чтобы оно появлялось
   снизу вверх, а не мигало. */
.navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
}

.navlink::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.navlink:hover {
  color: var(--brand-deep);
}

.navlink:hover::after {
  transform: scaleX(1);
}

/* --- Подвал --------------------------------------------------------------- */

.footer {
  margin-top: auto;
  background: var(--tint);
  border-top: 1px solid var(--line-soft);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.footer__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.footer__role {
  display: block;
  margin-top: var(--space-1);
  font-size: 14px;
  color: var(--muted);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
}

.footer__link:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* Медицинская сноска.
   Намеренно НЕ --size-micro: тем кеглем набраны надзаголовки-метки в два
   слова, а здесь шесть строк текста, который на телефоне и должен читаться —
   в нём противопоказания и указание обратиться к врачу. Сноска о рисках,
   набранная мельче всего на странице, читается как «обязаны написать, но не
   хотим, чтобы прочли». 15px даёт 4.81:1 на подложке подвала. */
.footer__note {
  margin: 0;
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* --- Панель --------------------------------------------------------------- */
/* Основа для геройских блоков и карточек: скруглённая подложка с рамкой. */

.panel {
  background: linear-gradient(180deg, var(--tint-soft), var(--surface) 60%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel--plain {
  background: var(--surface);
  border-color: var(--line);
}

.panel--tint {
  background: var(--tint-soft);
  border-color: var(--line-soft);
}

.panel__body {
  padding: clamp(24px, 4vw, 48px);
}

/* Геройская сетка: изображение прижато к краю панели, текст с полем. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
}

.hero__media {
  position: relative;
  margin: 0;
  min-height: 100%;
  background: var(--tint);
}

.hero__media img {
  width: 100%;
  height: 100%;
  /* Портрет 615×900 в полный рост разгоняет первый экран до полутора тысяч
     пикселей. Ограничиваем высоту и кадрируем по верхней трети — там лицо. */
  max-height: 600px;
  object-fit: cover;
  object-position: 50% 16%;
}

.hero__body .lede {
  font-size: var(--size-body);
  line-height: 1.65;
}

/*
 * Короткое описание под названием пособия (правка владельца 13.08).
 *
 * Отрицательный отступ, а не своя строка в потоке: `.hero__body` — колонка с
 * общим `gap`, и без подтяжки подзаголовок отъезжал от заголовка на ту же
 * величину, что и цена от подзаголовка. Тогда он читался как самостоятельный
 * абзац, а не как расшифровка названия.
 */
.hero__tagline {
  margin: calc(var(--space-5) * -1 + var(--space-2)) 0 0;
  max-width: 46ch;
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--body);
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(28px, 4vw, 56px);
}

/* Имя врача капсом внутри секции «Обо мне». Регистр поднимает CSS, а не
   разметка: в разметке имя написано обычным образом, и озвучка не читает его
   по буквам. Разрядка обязательна — капс без неё слипается. */
.about__name {
  font-size: var(--size-h3);
  line-height: 1.15;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

/* Вариант для обложки: показываем целиком, без обрезки, на подложке. */
.hero--cover {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero--cover .hero__media {
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.6vw, 36px);
  background: var(--tint-soft);
}

.hero--cover .hero__media img {
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* --- Цена ----------------------------------------------------------------- */
/* Внимание: содержимое .price__old и .price__now подставляет рантайм.
   Внутри этих элементов не должно быть вложенных тегов — иначе подстановка
   пропускается и на странице останется цена из вёрстки. */

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.price__old {
  font-size: var(--size-lede);
  font-weight: 500;
  color: var(--muted);
  /* Своя линия зачёркивания: браузерная сливается с цифрами. */
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.price__now {
  font-size: clamp(30px, 1.6rem + 1.2vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  /* Цифры одной ширины: цена не пляшет, когда рантайм подставит другую. */
  font-variant-numeric: tabular-nums;
}

/* --- Таймер скидки -----------------------------------------------------------
   Место под обратный отсчёт: `data-sf-timer` рядом с `data-sf-price`.

   ЧТО ЗДЕСЬ ЗНАТЬ ПРАВЯЩЕМУ. Рантайм пишет в элемент с `data-sf-timer`
   `textContent` (`sf/dom.ts`, `tick`) — то есть затирает всё вложенное. Внутрь
   этого элемента нельзя класть ни подпись, ни иконку: их сотрёт первый же тик.
   Подпись поэтому лежит рядом, а не внутри.

   ИСЧЕЗАЮТ ВМЕСТЕ — ДВУМЯ РАЗНЫМИ МЕХАНИЗМАМИ, и оба нужны:
   1. скидки нет вовсе → рантайм гасит обёртку по `data-sf-if="has-discount"`;
   2. отсчёт дотикал до нуля → рантайм гасит ТОЛЬКО сам счётчик (`hide`), и
      подпись осталась бы висеть одна: «Скидка действует ещё» без числа.
      Ловим это по `data-sf-prev-display` — атрибуту, который рантайм вешает
      ровно в момент сокрытия и снимает при возврате. Никакого своего состояния
      заводить не нужно, признак уже есть.

   ШИРИНА. `formatCountdown` меняет не только цифры, но и длину строки:
   «23:59:59» → «9:59:59» → «59:59». Поэтому мало табличных цифр — под самую
   длинную форму резервируется ширина, иначе соседи дёргаются раз в секунду, а
   на переходах через час и того заметнее. */

.offer-timer {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-size: var(--size-small);
  line-height: 1.3;
}

/* Отсчёт дотикал до нуля — пропадает вся плашка, а не одно число. */
.offer-timer:has(.offer-timer__value[data-sf-prev-display]) {
  display: none;
}

.offer-timer__label {
  color: var(--body);
}

.offer-timer__value {
  /* 8ch — под «23:59:59», самую длинную форму отсчёта. */
  min-width: 8ch;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
}

/* Компактная цена — в карточке каталога. */
.price--sm .price__now {
  font-size: clamp(24px, 1.3rem + 0.6vw, 30px);
}

.price--sm .price__old {
  font-size: var(--size-body);
}

/* --- Карточка продукта ---------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.product:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.product__media {
  margin: 0;
  display: block;
  background: var(--tint-soft);
  overflow: hidden;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}

.product__media:hover img {
  transform: scale(1.03);
}

/*
 * Карточка методички отделена от белого фона — просьба заказчика.
 *
 * Цвет `#f5e6cf` подобран замером, а не на глаз: он даёт 1.26:1 к белому фону
 * страницы (карточка видна как отдельный объект) и 8.86:1 с текстом. Более
 * тёмные варианты отделяют сильнее, но начинают спорить с фото обложки над
 * ними — карточка перестаёт читаться как одно целое.
 */
.product {
  background: #f5e6cf;
  border-color: #e6cfa8;
}

/*
 * Кликабельна вся плитка.
 *
 * Растянутая псевдоссылка, а не `<a>` вокруг `<article>`: внутри карточки уже
 * есть кнопка «Купить» и вторая ссылка, а вложенные интерактивные элементы —
 * невалидная разметка, сломанный Tab и невозможность нажать кнопку.
 *
 * `position: relative` у кнопок поднимает их над этим слоем, поэтому «Купить»
 * и «Подробнее» продолжают работать как раньше.
 */
.product--linked {
  position: relative;
}

.product--linked .product__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.product--linked .actions {
  position: relative;
  z-index: 1;
}

.product--linked:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md, 0 10px 30px rgb(11 125 133 / 12%));
}

/*
 * Лента со скидкой — на месте кнопки консультации на странице пособия.
 *
 * Текст ТЁМНЫЙ: белый на #d9a253 даёт 2.1:1 при норме 4.5, а это строка,
 * которую человек должен успеть прочесть боковым зрением. Тёмный — 7.09:1.
 *
 * Лента живёт под липкой шапкой и прокручивается вместе со страницей: две
 * приклеенные полосы сверху съедают экран телефона вдвоём.
 */
.promo-ribbon {
  background: #d9a253;
  color: #2a1f14;
}

.promo-ribbon__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--size-small);
  font-weight: 600;
  text-align: center;
}

.promo-ribbon__pct {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
}

.promo-ribbon__time {
  padding: 4px 12px;
  border-radius: 8px;
  background: #2a1f14;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/*
 * Панель покупки, приклеенная к низу экрана.
 *
 * `position: fixed`, а не `sticky`: панель обязана висеть всегда, а не только
 * пока её секция в потоке. Странице добавлен нижний отступ на её высоту —
 * иначе она накрывает последние строки, и человек не дочитывает ровно то
 * место, ради которого дочитал до конца.
 */
.buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--brand-deep, #086068);
  color: #ffffff;
  box-shadow: 0 -6px 24px rgb(8 96 104 / 22%);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.buybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.buybar__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--size-lede);
  font-weight: 700;
}

.buybar__old {
  font-size: var(--size-small);
  font-weight: 500;
  opacity: 0.72;
}

.btn--buybar {
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  background: #e0aa5c;
  color: #2a1f14;
  font-weight: 700;
  white-space: nowrap;
}

.btn--buybar:hover {
  background: #d9a253;
}

/* Место под панель, чтобы она не накрывала конец страницы. */
body:has(.buybar) .page__main {
  padding-block-end: calc(var(--rhythm) + 72px);
}

/* Обводка у кнопки «На главную»: без неё это просто текст со стрелкой. */
.btn--outline {
  background: transparent;
  color: var(--brand-strong);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn--outline:hover {
  border-color: var(--brand);
  background: var(--tint-soft);
}

/*
 * Страница со ссылкой возврата начинается выше.
 *
 * `.page__main` отбивает содержимое от шапки на `--rhythm` — до 96px. Для
 * первой секции это правильно, а для маленькой кнопки «На главную» — нет:
 * между шапкой и ней зияло 90px, кнопка висела в пустоте.
 */
.page__main:has(> .backnav:first-child) {
  padding-block-start: var(--space-5);
}

/* Отступ до кнопки возврата был задан инлайном на 24px — уменьшен вдвое. */
.backnav {
  margin-bottom: var(--space-3);
}

.product__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: clamp(24px, 3.5vw, 40px);
}

.product__title {
  margin: 0;
}

.product__title a {
  display: inline-block;
  /* Область нажатия до 44px, не сдвигая вёрстку: отрицательное поле ровно
     компенсирует внутреннее.
     Именно 10px, а не 8: кегль h3 задан clamp() и на 390px падает до 20px,
     строка получается 24px, и 8px с каждой стороны давали 40px — ниже нормы
     как раз там, где по ссылке попадают пальцем. 24 + 20 = 44 при любом
     значении clamp. */
  padding-block: 10px;
  margin-block: -10px;
  color: var(--ink);
  text-decoration: none;
}

.product__title a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --- Списки --------------------------------------------------------------- */
/* Браузерные маркеры не используются нигде: и точка, и её отступ — чужие. */

.checklist,
.marklist,
.gallery,
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist {
  display: grid;
  gap: var(--space-4);
}

.checklist li {
  position: relative;
  padding-left: 38px;
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--body);
}

/* Кружок под галочкой. */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--line);
}

/* Сама галочка: два бордера повёрнутого прямоугольника, без картинки. */
.checklist li::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 0.42em;
  width: 6px;
  height: 11px;
  border: solid var(--brand-strong);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

/* Список с фирменной чертой вместо точки. */
.marklist {
  display: grid;
  gap: var(--space-3);
}

.marklist li {
  position: relative;
  padding-left: 26px;
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--body);
}

.marklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--brand);
}

/* --- Изображения ---------------------------------------------------------- */

.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.figure__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--tint-soft);
  box-shadow: var(--shadow-sm);
}

.figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.figure figcaption {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* Ряд превью приложений. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 221px));
  justify-content: center;
  gap: var(--space-5);
}

.figure__frame--tile {
  aspect-ratio: 3 / 4;
}

.figure__frame--tile img {
  object-fit: cover;
  object-position: 50% 0;
}

/* Развороты во фрагменте: страница книги на подложке, а не картинка в тексте.
   Одна в ряд и во всю доступную ширину — фрагмент открывают, чтобы прочитать.
   760 px против прежних 660: страницы теперь настоящие, A4, и каждый десяток
   пикселей ширины — это разница между «читаю» и «щурюсь». Больше не берём:
   исходник 1100 px, растянутый сверх него разворот превращается в мыло.
   Рядом по две не ставить — это было решение под старые заглушки 221 px. */
.spreads {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: var(--rhythm);
  justify-items: center;
}

.figure__frame--page {
  width: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* --- Разделитель ---------------------------------------------------------- */
/* Вместо <hr> по умолчанию: линия с фирменной точкой посередине. */

.rule {
  position: relative;
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  transform: translate(-50%, -50%);
}

/* --- Врезка --------------------------------------------------------------- */

.callout {
  display: grid;
  gap: var(--space-5) var(--space-7);
  padding: clamp(24px, 4vw, 44px);
  background: var(--tint-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

/* Две колонки многоколоночным потоком, а не сеткой.
   Сетка требует заранее знать, что в какой колонке, и высоту строк задаёт
   самый высокий элемент — отсюда были и 91px разрыва в левой колонке, и
   576px мёртвого поля справа. Многоколоночный поток раскладывает содержимое
   сам и выравнивает высоту колонок — ровно та задача, под которую он и
   сделан. Разделитель и превью идут во всю ширину. */
.callout--split {
  display: block;
  columns: 2;
  column-gap: var(--space-7);
}

/* Рвать можно между абзацами и пунктами, но не внутри них: список из семи
   пунктов высотой 353px, запрещённый к разрыву, целиком уезжает в одну
   колонку и балансировать становится нечем. */
.callout--split > * {
  margin-bottom: var(--space-5);
}

.callout--split p,
.callout--split li {
  break-inside: avoid;
}

.callout--split > .callout__full {
  column-span: all;
  margin-bottom: 0;
}

.callout__full {
  grid-column: 1 / -1;
}

/* Оставлено намеренно пустым по смыслу: растяжка на две строки разрывала
   левую колонку на 91px. Врезка теперь в одну колонку, растягивать нечего. */
.callout__col--tall {
  grid-row: auto;
}

/* Блок покупки внизу страницы. Цена и кнопка стоят рядом: разнесённые по
   краям широкой плашки, они перестают читаться как одно предложение. */
.buybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5) var(--space-7);
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(135deg, var(--tint), var(--tint-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

/* --- Строка характеристик ------------------------------------------------- */
/* Плашки под лидом первого экрана: формат, автор, канал выдачи. Не список
   преимуществ — только то, что можно показать в коде платформы. */

.spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.spec li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.spec svg {
  flex: none;
  color: var(--brand-strong);
}

/* --- Шаги ----------------------------------------------------------------- */
/* «Что будет после нажатия „Купить“». Механика платформы, а не обещание: форма
   открывается поверх страницы, канал выдачи выбирает покупатель
   (`popup/view.ts`), ссылка приходит сообщением после оплаты
   (`bot/templates.ts`, ключ `paid`), чек по 54-ФЗ уходит на почту всегда. */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--rhythm-half) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}

/* Номер сидит верхом на линейке — она читается как одна общая шкала процесса,
   разрезанная колонками, а не как три отдельные рамки. */
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #ffffff;
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1;
}

.step h3 {
  font-size: var(--size-h4);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--muted);
}

/* --- Вопросы -------------------------------------------------------------- */
/* На <details>, а не на скрипте: CSP режет инлайн-скрипты, а раскрывающийся
   блок нужен — пять развёрнутых ответов подряд перед кнопкой покупки
   отодвигают её на экран вниз. */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.faq__item[open] {
  border-color: color-mix(in srgb, var(--brand-strong) 42%, transparent);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* 56px — цель нажатия с запасом к 44px по WCAG 2.5.8. */
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font-size: var(--size-h4);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  /* Треугольник браузера убираем в обе стороны: `display: flex` гасит его в
     современных движках, `::-webkit-details-marker` — в старых WebKit. */
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* Шеврон нарисован рамкой: иконочного шрифта в бандле нет, а лишний SVG в
   каждом из пунктов — это копия одного пути в разметке. */
.faq__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: var(--space-1);
  border-right: 2.5px solid var(--brand-strong);
  border-bottom: 2.5px solid var(--brand-strong);
  border-radius: 2px;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-base);
}

.faq__item[open] .faq__q::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
}

.faq__a > * + * { margin-top: var(--space-3); }

.faq__a p {
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--body);
}

/* --- Обещания в блоке покупки --------------------------------------------- */
/* Три строки рядом с ценой и кнопкой. Каждая — факт из кода платформы, а не
   оборот вроде «мгновенный доступ». */

.pledge {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pledge li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--body);
}

.pledge li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.2em;
  width: 7px;
  height: 12px;
  border: solid var(--brand-strong);
  border-width: 0 2.5px 2.5px 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Блок покупки с обещаниями слева и решением справа. Одной колонкой кнопка
   уезжает под три строки текста — последнее, что видит человек перед
   решением, должно быть решением, а не пояснением к нему. */
.buybox--offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  justify-content: initial;
  gap: var(--rhythm-half) var(--space-8);
  text-align: left;
}

.buybox__decide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/*
 * Кнопка внешней оплаты в узкой колонке.
 *
 * Подпись «Оплатить иностранной картой» длиннее «Купить» втрое, а колонка
 * решения узкая: на 1280 она ломалась на ТРИ строки и переставала читаться
 * как кнопка. Кегль на ступень меньше и боковые поля поуже — подпись встаёт в
 * одну строку, оставаясь второй по важности, а не спорит с «Купить».
 *
 * Ниже 900 px колонка занимает всю ширину, места хватает и без этого, поэтому
 * правило снимается: мельчить подпись на телефоне незачем.
 */
.buybox__decide .btn--ghost {
  font-size: var(--size-small);
  padding-inline: var(--space-4);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .buybox__decide .btn--ghost {
    font-size: var(--size-body);
    padding-inline: var(--space-5);
    white-space: normal;
  }
}

/* --- Адаптив -------------------------------------------------------------- */

@media (max-width: 700px) {
  /* Портрет ужимается до колонки по центру: на телефоне важнее увидеть,
     кто это и о чём страница, а не разглядывать фотографию во весь экран. */
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
  }

  .hero,
  .product,
  .split,
  .checklist--two,
  /* Цена и кнопка уходят под обещания, а не рядом: колонка в 300px на планшете
     сжимает левую до нечитаемой. */
  .buybox--offer {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Врезка раскладывается columns, а не сеткой: grid-template-columns её не
     схлопывает, и на 390px получались две колонки по десять знаков в строке. */
  .callout--split {
    columns: 1;
  }

  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(0, 221px));
  }

  .callout__col--tall {
    grid-row: auto;
  }

  /* На узком экране портрет обрезаем до альбомного: экран не должен целиком
     уходить под одну картинку. */
  /* В одной колонке картинка становится полосой: 5:4 на планшете — это
     600 px, то есть больше половины экрана под одну иллюстрацию. */
  .hero__media img {
    aspect-ratio: 5 / 4;
    height: auto;
    max-height: 420px;
    object-position: 50% 14%;
  }

  /*
   * Портрет врача остаётся портретом на всех узких ширинах.
   *
   * Правило выше режет фото в альбомные 5:4. Для обложки пособия это верно —
   * она и снята горизонтальной. Для вертикального портрета в карточке «Обо
   * мне» это означает срезанные плечи и руки: снимок теряет ровно то, ради
   * чего сделан.
   *
   * Поэтому здесь исключение по признаку «не обложка», а не по ширине экрана.
   * Ширина кадра плавающая: 200px на узком телефоне, до 300px на планшете —
   * иначе на 900px портрет выглядит маркой посреди пустой карточки.
   */
  .hero:not(.hero--cover) .hero__media {
    width: clamp(200px, 40vw, 300px);
    margin-inline: auto;
    padding-top: var(--space-5);
    background: transparent;
    min-height: 0;
  }

  .hero:not(.hero--cover) .hero__media img {
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    border-radius: 14px;
    object-position: 50% 20%;
  }

  .product__media img {
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: 360px;
  }
}

@media (max-width: 860px) {
  /* Пункты меню дублируют то, до чего два экрана прокрутки. Первичное
     действие в шапке остаётся одно.
     Оранжевая «Продукты» уходит вместе с ними: на телефоне шапка складывается
     в две строки, и вторая кнопка во всю ширину сделала бы её третьей — то
     есть отдала бы треть экрана под навигацию. Путь к продуктам остаётся: по
     логотипу и из секции страницы. */
  .header__nav .navlink,
  .header__nav .btn--accent {
    display: none;
  }
}

@media (max-width: 700px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 340px;
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .brand__name {
    font-size: 16px;
    white-space: nowrap;
  }

  /* Специализация повторена первым же абзацем страницы, а вместе с именем и
     кнопкой она не оставляет шапке шанса уместиться в одну строку. */
  .brand__role {
    display: none;
  }
}

@media (max-width: 600px) {
  /* Кнопка действия во всю ширину: промахнуться невозможно. */
  .actions > .btn {
    width: 100%;
  }

  .buybox {
    flex-direction: column;
    align-items: stretch;
  }

  .buybox .btn {
    width: 100%;
  }

  .buybox__decide {
    padding: var(--space-5);
  }

  /* Номер шага съезжает на строку выше и накладывается на предыдущий пункт,
     когда колонки схлопнулись в одну: разводим шагом ритма. */
  .steps {
    gap: var(--rhythm-half);
  }

  .checklist li {
    padding-left: 34px;
  }
}

/* Шапка на телефоне ---------------------------------------------------------
   «Марат Гаджиев» и «Записаться на консультацию» в одну строку укладываются
   только до 520 px; дальше кегль пришлось бы опустить до 11 px. Поэтому две
   строки, но собранные: имя сверху, действие полосой во всю ширину.
   Было три строки и 180 px залипшей шапки — треть экрана телефона. */

@media (max-width: 520px) {
  :root {
    --header-h: 108px;
  }

  .header__inner {
    padding-block: 10px;
    gap: var(--space-2);
    min-height: 0;
  }

  .header__nav {
    flex: 1 1 100%;
  }

  .header__nav .btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* --- Движение ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Печать --------------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .skip-link {
    display: none;
  }

  body {
    color: #000;
  }
}