/* ==========================================================================
   ЛайфСтатс — базовый слой: токены, сброс, типографика, примитивы
   Значения перенесены 1:1 из макетов (export 2/design/*.dc.html).
   ========================================================================== */

/* --- Токены: светлая тема ------------------------------------------------ */
:root {
  color-scheme: light;

  /* Поверхности */
  --bg:            #F6F6F7;
  --surface:       #FFFFFF;
  --surface-2:     #EFEFF1;
  --surface-3:     #F6F6F7;   /* плитки внутри белых карточек */
  --ink-block:     #0A0A0A;   /* тёмные секции и карточки */
  --ink-block-2:   #1C1D21;   /* плейсхолдер рендера на тёмном */
  --shot:          #101114;   /* плейсхолдер скриншота */
  --shot-soft:     #2A2B2F;

  /* Текст */
  --ink:           #1D1D1F;
  --ink-strong:    #000000;
  --ink-2:         #6E6E73;
  --ink-3:         #77777C;

  /* Бренд */
  --brand:         #1D5BE0;
  --on-brand:      #FFFFFF;
  --brand-07:      rgba(29, 91, 224, .07);
  --brand-10:      rgba(29, 91, 224, .10);
  --brand-18:      rgba(29, 91, 224, .18);
  --brand-28:      rgba(29, 91, 224, .28);
  --brand-lite:    #8FB0F5;   /* акцент на тёмном фоне */

  /* Линии */
  --line:          rgba(0, 0, 0, .08);
  --line-soft:     rgba(0, 0, 0, .05);
  --line-strong:   rgba(0, 0, 0, .12);
  --line-06:       rgba(0, 0, 0, .06);
  --line-10:       rgba(0, 0, 0, .10);
  --grab:          rgba(0, 0, 0, .12);

  /* На тёмном (не меняются между темами) */
  --on-dark:       #FFFFFF;
  --on-dark-92:    rgba(255, 255, 255, .92);
  --on-dark-90:    rgba(255, 255, 255, .90);
  --on-dark-70:    rgba(255, 255, 255, .70);
  --on-dark-55:    rgba(255, 255, 255, .55);
  --on-dark-50:    rgba(255, 255, 255, .50);
  --on-dark-40:    rgba(255, 255, 255, .40);
  --on-dark-18:    rgba(255, 255, 255, .18);
  --on-dark-14:    rgba(255, 255, 255, .14);
  --on-dark-08:    rgba(255, 255, 255, .08);

  /* Состояния */
  --placeholder:   #86868B;
  --danger:        #A32A2A;
  --danger-bg:     rgba(200, 40, 40, .06);

  /* Слои */
  --glass:         rgba(255, 255, 255, .82);
  --glass-strong:  rgba(255, 255, 255, .92);
  --scrim:         rgba(0, 0, 0, .40);
  --scrim-strong:  rgba(0, 0, 0, .45);
  --scrim-menu:    rgba(0, 0, 0, .35);
  --field-bg:      #FFFFFF;
  --timer:         var(--brand);

  /* Тени */
  --sh-card:   0 1px 1px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.05);
  --sh-chip:   0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --sh-brand:  0 2px 6px rgba(29,91,224,.22), 0 8px 20px rgba(29,91,224,.18);
  --sh-brand-s: 0 2px 6px rgba(29,91,224,.22);
  --sh-hero-m: 0 2px 8px rgba(0,0,0,.04), 0 24px 64px rgba(0,0,0,.10);
  --sh-hero-d: 0 40px 100px rgba(0,0,0,.14);
  --sh-raised: 0 2px 8px rgba(0,0,0,.04), 0 32px 80px rgba(0,0,0,.10);
  --sh-dialog: 0 40px 120px rgba(0,0,0,.3);
  --sh-sheet:  0 -8px 40px rgba(0,0,0,.18);
  --sh-menu:   0 24px 64px rgba(0,0,0,.18);
  --sh-dark:   0 32px 80px rgba(0,0,0,.5);

  /* Контейнер */
  --pad: 20px;
  --max: 430px;
  --nav-h: 56px;

  /* Движение */
  --e-out:   cubic-bezier(.2, .7, .2, 1);
  --e-sheet: cubic-bezier(.32, .72, 0, 1);

  /* Шрифты */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Типографика: мобильная ступень (переопределяется на ≥768 и ≥1280) */
  --fs-h1: 34px;   --lh-h1: 1.06;
  --fs-h2: 26px;   --lh-h2: 1.12;
  --fs-h3: 19px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-eyebrow: 11px;
  --sec-gap: 56px;
}

/* --- Токены: тёмная тема ------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:          #0E0E10;
    --surface:     #1A1A1D;
    --surface-2:   #232327;
    --surface-3:   #232327;
    --ink-block:   #050506;
    --ink-block-2: #1C1D21;

    --ink:         #F5F5F7;
    --ink-strong:  #F5F5F7;
    --ink-2:       #A1A1A6;
    --ink-3:       #8E8E93;

    --line:        rgba(255, 255, 255, .12);
    --line-soft:   rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --line-06:     rgba(255, 255, 255, .08);
    --line-10:     rgba(255, 255, 255, .14);
    --grab:        rgba(255, 255, 255, .18);

    --glass:        rgba(26, 26, 29, .85);
    --glass-strong: rgba(26, 26, 29, .92);
    --placeholder:  #6E6E73;
    --field-bg:     #141416;
    --timer:        var(--ink-strong);

    --sh-card:   0 1px 1px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --sh-chip:   0 1px 1px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --sh-brand:  0 2px 6px rgba(29,91,224,.30), 0 8px 20px rgba(29,91,224,.25);
    --sh-brand-s: 0 2px 6px rgba(29,91,224,.30);
    --sh-hero-m: 0 1px 1px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --sh-hero-d: 0 1px 1px rgba(0,0,0,.3), 0 24px 64px rgba(0,0,0,.5);
    --sh-raised: 0 1px 1px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* --- Сброс --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* Скриншот первого экрана и рендер набора намеренно уходят за правый край.
     Обрезаем их на уровне окна: clip, а не hidden, — hidden сделал бы <html>
     скролл-контейнером и сломал sticky-шапку. Как в макете, на обоих элементах. */
  overflow-x: clip;
  /* Место под полосу прокрутки резервируется всегда. Иначе в браузерах
     с «классической» полосой (Windows, macOS с постоянными полосами) страница
     под открытым меню или шторкой становилась шире на её ширину и дёргалась. */
  scrollbar-gutter: stable;
}

/* Safari до 16 не знает clip. Там подстраховываемся hidden — но только на
   <html>: hidden на <body> ломает липкую шапку. */
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* Как в макете — базовый кегль браузера (16px); каждый компонент
     задаёт свой размер сам. --fs-body используется точечно. */
  font-size: 16px;
  /* Как в макете: базовая интерлиньяж — браузерная (normal).
     Везде, где нужен свой ритм, line-height задаётся на самом элементе. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
s { text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

::placeholder { color: var(--placeholder); opacity: 1; }

/* --- Утилиты ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

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

.nums { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* Показ/скрытие по брейкпоинтам. Правила только прячут — собственный
   display элемента при показе не затирается.
     .only-m  — только телефон (<768)
     .only-d  — от 768 (планшет + десктоп)
     .only-w  — от 1024 (широкий десктоп)
     .not-w   — до 1024                                                    */
@media (max-width: 767px)  { .only-d { display: none !important; } }
@media (min-width: 768px)  { .only-m { display: none !important; } }
@media (max-width: 1023px) { .only-w { display: none !important; } }
@media (min-width: 1024px) { .not-w  { display: none !important; } }

/* --- Типографика --------------------------------------------------------- */
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink-strong);
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink-strong);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.eyebrow {
  /* Как в макете — строчный элемент: высота строки берётся из контекста
     секции, за счёт этого совпадают отступы над заголовком. */
  display: inline;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.muted {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* --- Кнопки -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms var(--e-out), background-color 200ms, border-color 200ms, opacity 200ms;
}
.btn:active { transform: scale(.975); }

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--sh-brand);
}
.btn--primary:hover { color: var(--on-brand); }

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

.btn--onDark {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--on-dark-18);
}
.btn--onDark:hover { color: var(--on-dark); }

.btn--block { display: flex; width: 100%; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 52px; }

/* Круглая кнопка закрытия в модалках */
.iconbtn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1;
  transition: transform 120ms var(--e-out), background-color 200ms;
}
.iconbtn:active { transform: scale(.94); }

/* --- Плейсхолдеры под скриншоты/рендеры ---------------------------------
   Реальные картинки подставляются вместо .ph — см. README.
   ------------------------------------------------------------------------ */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: var(--shot);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px);
  text-align: center;
}
.ph__label {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--on-dark-55);
  padding: 0 24px;
}
.ph--light {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 8px, transparent 8px 16px);
}
.ph--light .ph__label { color: var(--ink-3); }
.ph--soft {
  background-color: var(--ink-block-2);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px);
}

/* Плейсхолдер с подставленной картинкой: штриховка и подпись больше не нужны.
   contain, а не cover, — кадр должен помещаться целиком. */
.ph.has-img { background-image: none; background-color: transparent; }
.ph.has-img .ph__label { display: none; }
.ph picture { display: block; width: 100%; height: 100%; }
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Поля ---------------------------------------------------------------- */
.field { display: block; }
.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.field__input {
  margin-top: 8px;
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 16px;
  outline-offset: 2px;
  transition: border-color 200ms;
}
.field__input:focus { border-color: var(--brand); }
.field__input[aria-invalid="true"] { border-color: var(--danger); }

/* --- Ползунок ------------------------------------------------------------ */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) var(--p, 50%), var(--track, rgba(0,0,0,.1)) var(--p, 50%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -11px;
  border-radius: 999px;
  background: var(--thumb, #fff);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
}
.range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) var(--p, 50%), var(--track, rgba(0,0,0,.1)) var(--p, 50%));
}
.range::-moz-range-thumb {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--thumb, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* --- Аккордеон (общий для FAQ и состава набора) -------------------------- */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--e-out);
}
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc__inner { transition: opacity 200ms; opacity: 0; }
[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
[aria-expanded="true"] + .acc__panel .acc__inner { opacity: 1; }

/* --- Анимации ------------------------------------------------------------ */
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn    { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
@keyframes popInD   { from { opacity: 0; transform: scale(.97) translateY(8px) } to { opacity: 1; transform: none } }
@keyframes sheetIn  { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes fadeOut  { to { opacity: 0 } }
@keyframes sheetOut { to { transform: translateY(100%) } }
@keyframes popOutD  { to { opacity: 0; transform: scale(.97) translateY(8px) } }
@keyframes promoPop { 0% { opacity: 0; transform: scale(.3) } 55% { opacity: 1; transform: scale(1.12) } 78% { transform: scale(.97) } 100% { opacity: 1; transform: scale(1) } }
@keyframes promoRing{ from { opacity: .5; transform: scale(1) } to { opacity: 0; transform: scale(1.9) } }
@keyframes promoDraw{ to { stroke-dashoffset: 0 } }
@keyframes promoRise{ from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes menuPanel{ from { transform: translateY(-100%) } to { transform: none } }
@keyframes menuIn   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes expandIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes heroIn   { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes marquee  { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.hi { animation: heroIn 400ms var(--e-out) both; }

/* --- Брейкпоинт: планшет и десктоп (≥768) -------------------------------- */
@media (min-width: 768px) {
  :root {
    --pad: 32px;
    --max: 1024px;
    --nav-h: 72px;

    --fs-h1: 52px;   --lh-h1: 1.05;
    --fs-h2: 38px;   --lh-h2: 1.1;
    --fs-h3: 21px;
    --fs-lead: 20px;
    --fs-body: 17px;
    --fs-small: 14px;
    --fs-eyebrow: 12px;
    --sec-gap: 96px;
  }

  .btn { height: 56px; padding: 0 28px; font-size: 17px; }
  .btn--sm { height: 44px; padding: 0 18px; font-size: 15px; }
  .btn--block { display: inline-flex; width: auto; }

  .ph__label { font-size: 12px; }

  .hi { animation-duration: 500ms; }
}

/* --- Брейкпоинт: полный контейнер (≥1280) -------------------------------- */
@media (min-width: 1280px) {
  :root {
    --pad: 48px;
    --max: 1280px;

    --fs-h1: 64px;
    --fs-h2: 44px;
  }
}

/* --- Уважение к настройкам движения -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Глобальные состояния ------------------------------------------------ */

/* Замок прокрутки под модалкой и меню.
   Раньше здесь был position:fixed на body — он же ломал липкую шапку:
   документ съезжал на величину прокрутки, и sticky-элемент уезжал за экран.
   Гасим прокрутку на <html> — это и есть скролл-контейнер страницы
   (у него overflow-x: clip), позиция при этом не сбивается. */
html.is-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Пока печатают, полоса под нижней панелью браузера может оказаться уже вне
   страницы — там виден фон холста, а не разметка. Красим его под цвет шторки,
   чтобы стык не бросался в глаза. Саму страницу это не трогает: её фон рисует
   <body>. */
html.is-typing { background: var(--surface); }

/* Ссылка «к содержимому» для клавиатуры и скринридеров */
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--sh-brand-s);
  transform: translateY(-200%);
  transition: transform 200ms var(--e-out);
}
.skip:focus-visible { transform: none; }

/* Атрибут hidden должен побеждать любой display из компонентных стилей:
   на нём держатся модалки, меню, состояния форм и блок таймера. */
[hidden] { display: none !important; }

/* === Шапка и мобильное меню === */

/* --------------------------------------------------------------------------
   Базовые правила = мобильный макет (LifeStats Mobile, блоки NAV и MENU).
   @media (min-width:768px) = десктопная шапка (LifeStats Desktop, блок NAV):
   бургер и меню уходят, появляются ссылки и синяя кнопка.
   -------------------------------------------------------------------------- */

/* --- Скип-линк -----------------------------------------------------------
   Класс .skip целиком описан в базе (00-foundation.css, «Глобальные
   состояния»): фиксированная позиция, выезд по :focus-visible. Здесь
   не дублируем — иначе секционные правила перебивают базовые.
   ------------------------------------------------------------------------ */

/* --- Фоновая атмосфера (только телефон) ----------------------------------
   Абсолютный слой у верха документа: содержащий блок — начальный
   (body не позиционируем), поэтому top:0 = верх страницы.
   Ширина ограничена контейнером макета (--max = 430px до 768).
   ------------------------------------------------------------------------ */
.ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: var(--max);
  height: 560px;
  background: radial-gradient(60% 50% at 50% 0%, rgba(0,0,0,.035), rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.ambient__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .025;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .ambient {
    background: radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%);
  }
  .ambient__noise {
    opacity: .05;
    mix-blend-mode: screen;
  }
}

/* --- Шапка ---------------------------------------------------------------
   --nav-r / --nav-sh / --nav-z переключают состояние «меню открыто»
   (в макете это плейсхолдеры navRadius / navShadow / navZ).
   ------------------------------------------------------------------------ */
.nav {
  --nav-r: 20px;
  --nav-sh: var(--sh-chip);
  --nav-z: 40;

  position: sticky;
  top: 0;
  z-index: var(--nav-z);
}

.nav__bar {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  border-radius: 0 0 var(--nav-r) var(--nav-r);
  box-shadow: var(--nav-sh);
  transition: border-radius 300ms var(--e-sheet), box-shadow 300ms;
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;   /* перебивает .wrap: в макете 20 слева / 12 справа */
}

/* Меню открыто: скругление и тень снимаются, шапка встаёт над слоем меню.
   Основной хук — aria-expanded на бургере; .nav--open оставлен как
   запасной вариант, если JS удобнее вешать класс. */
.nav--open { --nav-r: 0px; --nav-sh: none; --nav-z: 52; }
.nav:has(.nav__burger[aria-expanded="true"]) { --nav-r: 0px; --nav-sh: none; --nav-z: 52; }

/* --- Логотип ------------------------------------------------------------- */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  /* Тач-цель: визуально ничего не меняет, ссылка и так по центру полосы. */
  min-height: 44px;
}

.nav__logoMark {
  flex: none;
  width: 22px;
  height: 21px;
}

/* --- Ссылки шапки (от 768) ----------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 200ms;
}
.nav__link:hover { color: var(--ink-strong); }

/* .btn.btn--primary.btn--sm + геометрия макета */
.nav__cta {
  padding: 0 22px;
  margin-left: 12px;
  box-shadow: var(--sh-brand-s);
}

/* --- Бургер (только телефон) --------------------------------------------- */
.nav__burger {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
}

.nav__burgerBox {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.nav__burgerBar {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-strong);
}

.nav__burgerBar--1 { top: 0;    transition: transform 320ms var(--e-sheet); }
.nav__burgerBar--2 { top: 6px;  transition: opacity 200ms; }
.nav__burgerBar--3 { top: 12px; transition: transform 320ms var(--e-sheet); }

.nav__burger[aria-expanded="true"] .nav__burgerBar--1 { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burgerBar--2 { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burgerBar--3 { transform: translateY(-6px) rotate(-45deg); }

/* --- Мобильное меню ------------------------------------------------------
   В разметке лежит всегда, закрыто атрибутом hidden на панели [data-menu]
   (так же, как модалки закрыты hidden на [data-modal]; базовое правило
   [data-menu][hidden]{display:none} рассчитано именно на это). Слой
   с затемнением показывается только вместе с открытой панелью.
   ------------------------------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.menu:has(> [data-menu]:not([hidden])) { display: block; }

.menu__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-menu);
  animation: fadeIn 300ms ease-out both;
}

.menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + env(safe-area-inset-top)) var(--pad) var(--pad);
  background: var(--surface);
  border-radius: 0 0 28px 28px;
  box-shadow: var(--sh-menu);
  animation: menuPanel 380ms var(--e-sheet) both;
}
.menu__panel:focus { outline: none; }

.menu__list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.menu__link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-align: left;
  animation: menuIn 360ms var(--e-out) both;
}

/* Лестница появления пунктов */
.menu__list li:nth-child(1) .menu__link { animation-delay: 140ms; }
.menu__list li:nth-child(2) .menu__link { animation-delay: 185ms; }
.menu__list li:nth-child(3) .menu__link { animation-delay: 230ms; }
.menu__list li:nth-child(4) .menu__link { animation-delay: 275ms; }
.menu__list li:nth-child(5) .menu__link { animation-delay: 320ms; }

/* .btn.btn--primary.btn--block + задержка следом за пунктами */
.menu__cta {
  margin-top: 20px;
  animation: menuIn 360ms 365ms var(--e-out) both;
}

/* --- Планшет и десктоп (≥768) -------------------------------------------- */
@media (min-width: 768px) {
  .nav { --nav-r: 0px; }

  /* Бургер скрыт классом .only-m; если aria-expanded остался true —
     возвращаем шапке десктопный вид. */
  .nav--open { --nav-sh: var(--sh-chip); --nav-z: 40; }
  .nav:has(.nav__burger[aria-expanded="true"]) { --nav-sh: var(--sh-chip); --nav-z: 40; }

  .nav__bar {
    max-width: none;
    height: var(--nav-h);
    padding-top: 0;
  }

  .nav__inner {
    gap: 24px;
    padding-right: var(--pad);
  }

  .nav__logo { font-size: 17px; }
  .nav__logoMark { width: 24px; height: 23px; }
}

/* === Первый экран и полоса доверия === */

/* Секции, где скриншот намеренно уходит за правый край страницы, обрезаем
   по их собственной ширине — она равна ширине окна. Тогда <body> не тянется
   вширь даже там, где clip на <html> не поддерживается.
   Именно clip, а не hidden: вертикальные тени и sticky остаются целыми. */
.hero,
.offer { overflow-x: clip; }


/* Мобильный макет — база. Порядок: бейдж → h1 → подзаголовок → скриншот →
   CTA → чипы. Десктопная раскладка собирается через grid-template-areas
   ниже, DOM один. */

section.hero {
  padding: 40px 0 0;
}

/* --- Текст --------------------------------------------------------------- */
.hero__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-chip);
  color: var(--ink);
}

.hero__title { margin: 18px 0 0; }

.hero__lead {
  margin: 16px 0 0;
  max-width: 34ch;
}

/* --- Скриншот: уходит за правый край ------------------------------------- */
.hero__shot { margin: 24px -20px 0 0; }

/* Картинка прозрачная и с собственной тенью, поэтому у кнопки нет ни фона,
   ни рамки, ни тени — только вынос за правый край, как в макете. */
.hero__shotBtn {
  display: block;
  width: calc(100% + 20px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

/* Рендер первого экрана: прозрачный PNG в пропорции 16/10, лежит прямо
   на фоне страницы и выносится за правый край, как заглушка в макете. */
.hero__pic { display: block; }

.hero__img {
  display: block;
  width: 100%;
  height: auto;
  /* Пропорцию берём из width/height самой картинки — поля у неё обрезаны,
     поэтому левый край кадра совпадает с левым краем текста. */
}

/* --- CTA и сноска -------------------------------------------------------- */
.hero__btn  { margin-top: 28px; }

/* В макете у сноски нет line-height (normal); из базы .note пришло бы 1.5 —
   строка стала бы на 4px выше и сдвинула чипы вниз. */
.hero__note {
  margin: 12px 0 0;
  line-height: normal;
}

/* --- Чипы ---------------------------------------------------------------- */
.hero__chips {
  display: flex;
  gap: 8px;
  margin: 20px 0 0;
}

.hero__chip {
  flex: 1;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.hero__chipIcon {
  flex: none;
  color: var(--brand);
}

/* --- Полоса доверия (в разметке скрыта до 768 через .only-d) -------------- */
.trust {
  margin-top: 96px;
  background: var(--surface);
  border-top: 1px solid var(--line-06);
  border-bottom: 1px solid var(--line-06);
}

.trust__row {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  font-size: 15px;
  color: var(--ink-2);
}

.trust__num {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust__strong {
  color: var(--ink);
  font-weight: 600;
}

.trust__sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line-10);
}

/* --- ≥768: десктопный макет в одну колонку ------------------------------- */
@media (min-width: 768px) {
  section.hero { padding-top: 96px; }

  .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "cta"
      "shot";
    grid-template-rows: auto auto auto;
    column-gap: 24px;
    row-gap: 0;
    align-items: center;
    min-height: 544px;
  }

  .hero__text { grid-area: text; max-width: none; }
  .hero__cta  { grid-area: cta; }
  .hero__shot { grid-area: shot; margin: 40px 0 0; }

  .hero__badge { height: 28px; padding: 0 14px; }
  .hero__title { margin-top: 24px; }
  .hero__lead  { margin-top: 24px; max-width: 460px; }

  .hero__shotBtn { width: 100%; }

  .hero__btn { margin-top: 32px; padding: 0 36px; }

  .hero__chips { flex-wrap: wrap; margin-top: 28px; }
  .hero__chip  { flex: none; justify-content: flex-start; gap: 8px; }
}

/* --- ≥1024: две колонки 5fr / 7fr ---------------------------------------- */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "text shot"
      "cta  shot";
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  .hero__text { align-self: end;   max-width: 520px; }
  .hero__cta  { align-self: start; max-width: 520px; }

  .hero__shot {
    align-self: center;
    min-width: 0;
    margin: 0 calc((min(var(--max), 100vw) - 100vw) / 2 - var(--pad)) 0 0;
  }
}

/* === Знакомо? и Механика === */

/* --------------------------------------------------------------------------
   ЗНАКОМО?
   Мобильный: h2 → карточки → два абзаца.
   ≥768:      h2 → два абзаца → список (одна колонка).
   ≥1024:     grid 5fr / 1fr / 6fr — текст слева, список справа.
   -------------------------------------------------------------------------- */
.familiar { padding-top: 56px; }

.familiar__grid {
  display: flex;
  flex-direction: column;
}

/* --- Список пунктов ------------------------------------------------------ */
.familiar__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.famItem {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.famItem__icon {
  flex: none;
  width: 24px;
  display: flex;
  justify-content: center;
  margin-top: 1px;
  color: var(--brand);
}
.famItem__icon svg { width: 22px; height: 22px; }

.famItem__title {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.famItem__text { margin-top: 6px; }

/* --- Текстовый блок ------------------------------------------------------ */
.familiar__text { margin-top: 32px; }

.familiar__lead {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}

.familiar__sub { margin-top: 12px; }

/* --------------------------------------------------------------------------
   МЕХАНИКА
   Мобильный: строчные карточки с иконками.
   ≥768:      карточки-блоки с визуализациями, в одну колонку.
   ≥1024:     две колонки, последняя во всю ширину.
   ≥1280:     три колонки.
   -------------------------------------------------------------------------- */
.mech { padding-top: 56px; }

.mech__title { margin-top: 10px; }

.mech__grid {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mechCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.mechCard__icon {
  flex: none;
  width: 24px;
  display: flex;
  justify-content: center;
  margin-top: 1px;
  color: var(--brand);
}
.mechCard__icon svg { width: 22px; height: 22px; }

.mechCard__title {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.mechCard__text { margin-top: 6px; }

/* --- Декоративные визуализации (видны с 768) ----------------------------- */
.mechViz {
  height: 96px;
  background: var(--surface-2);
  border-radius: 12px;
}

.mechViz--bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 24px;
}
.mechViz--bars i { flex: 1; border-radius: 4px; }
.mechViz--bars i:nth-child(1) { height: 30%;  background: rgba(29, 91, 224, .25); }
.mechViz--bars i:nth-child(2) { height: 45%;  background: rgba(29, 91, 224, .4); }
.mechViz--bars i:nth-child(3) { height: 40%;  background: rgba(29, 91, 224, .5); }
.mechViz--bars i:nth-child(4) { height: 65%;  background: rgba(29, 91, 224, .7); }
.mechViz--bars i:nth-child(5) { height: 85%;  background: var(--brand); }
.mechViz--bars i:nth-child(6) { height: 100%; background: var(--brand); }

.mechViz--dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 16px 24px;
}
.mechViz--dots i { background: var(--brand); border-radius: 3px; }
.mechViz--dots i:nth-child(4),
.mechViz--dots i:nth-child(9),
.mechViz--dots i:nth-child(12),
.mechViz--dots i:nth-child(17),
.mechViz--dots i:nth-child(20) { background: var(--brand-18); }

.mechViz--ring {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.mechViz__ring {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: conic-gradient(var(--brand) 0 72%, var(--brand-18) 72% 100%);
  display: grid;
  place-items: center;
}
.mechViz__ring i {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-2);
}
.mechViz__num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   ≥768 — десктопный макет в одну колонку
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Знакомо? */
  .familiar {
    background: var(--surface);
    padding: 120px 0;
  }

  .familiar__title { order: 1; }
  .familiar__text  { order: 2; margin-top: 48px; }
  /* В макете это одноколоночный грид с gap:40px и пустой ячейкой-распоркой
     между текстом и списком — суммарно 80px. */
  .familiar__list  { order: 3; margin-top: 80px; gap: 0; }

  .famItem {
    gap: 20px;
    padding: 24px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
  }
  .famItem:last-child { border-bottom: 0; }

  .famItem__icon { width: auto; margin-top: 2px; }
  .famItem__icon svg { width: 24px; height: 24px; }

  .famItem__title { font-size: 21px; }

  .familiar__lead { font-size: 24px; max-width: 34ch; }
  .familiar__sub  { margin-top: 16px; max-width: 60ch; }

  /* Механика */
  .mech {
    background: var(--bg);
    padding: 120px 0;
  }

  .mech__title { margin-top: 12px; }

  .mech__grid { margin-top: 48px; gap: 24px; }

  .mechCard {
    display: block;
    padding: 32px;
    border-radius: 24px;
  }

  .mechCard__body { margin-top: 24px; }

  .mechCard__title { font-size: 21px; }

  .mechCard__text { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   ≥1024 — полная десктопная раскладка
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .familiar__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
    /* Вторая строка — гибкая: список, растянутый на обе строки, не раздвигает
       первую, и абзац остаётся на 48px под заголовком, как в макете. */
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
  }
  .familiar__title { grid-column: 1; grid-row: 1; }
  .familiar__text  { grid-column: 1; grid-row: 2; }
  .familiar__list  { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }

  .mech__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
  .mech__grid > .mechCard:last-child { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   ≥1280 — три колонки
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .mech__grid { grid-template-columns: repeat(3, 1fr); }
  .mech__grid > .mechCard:last-child { grid-column: auto; }
}

/* === Начать займёт минуту === */

/* --------------------------------------------------------------------------
   ШАГИ (.steps)
   База = мобильный макет: карточки на белом с номером в колонке слева.
   С 768 — десктопный вариант: номер 56px над заголовком, верхняя линейка.
   -------------------------------------------------------------------------- */
.steps { padding-top: var(--sec-gap); }

.steps__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.stepsItem {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.stepsItem__num {
  flex: none;
  display: flex;
  justify-content: center;
  width: 24px;
  margin-top: 2px;
  font-size: 17px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.stepsItem__body { min-width: 0; }

.stepsItem__text { margin-top: 6px; }

/* --- ≥768: десктопный макет в одноколоночной раскладке -------------------- */
@media (min-width: 768px) {
  .steps {
    padding: 120px 0;
    background: var(--surface);
  }

  .steps__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .stepsItem {
    display: block;
    padding: 32px 0 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .stepsItem__num {
    display: block;
    width: auto;
    margin-top: 0;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .stepsItem__body { margin-top: 24px; }

  .stepsItem__text { margin-top: 8px; }
}

/* --- ≥1024: полная десктопная раскладка ---------------------------------- */
@media (min-width: 1024px) {
  .steps__list { grid-template-columns: repeat(2, 1fr); }
  .steps__list > li:last-child { grid-column: span 2; }
}

/* --- ≥1280: крупный контейнер -------------------------------------------- */
@media (min-width: 1280px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); }
  .steps__list > li:last-child { grid-column: auto; }
}

/* === Набор — оффер с таймером === */

/* Мобильный: секция на светлом фоне страницы, тёмная только карточка.
   От 768: тёмная вся секция — цвета заголовочной группы переключаются
   через локальные переменные блока.                                        */
.offer {
  --offer-eyebrow: var(--ink-3);
  --offer-title:   var(--ink-strong);
  --offer-lead:    var(--ink-2);

  padding: var(--sec-gap) 0 0;
  scroll-margin-top: var(--nav-h);
}

.offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* Колонка-поток: порядок таймера и заголовка меняется на десктопе */
.offer__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- Заголовочная группа ------------------------------------------------- */
.offer__head { order: 1; }

/* В макете этот надзаголовок — блочный (в отличие от остальных секций),
   поэтому строка над h2 на 3px ниже. */
.offer__eyebrow { display: block; color: var(--offer-eyebrow); }

.offer__title {
  margin: 10px 0 0;
  color: var(--offer-title);
}

.offer__lead {
  margin: 12px 0 0;
  max-width: 34ch;
  color: var(--offer-lead);
}

/* --- Таймер: белая карточка на мобильном --------------------------------- */
.offer__timer {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 20px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--sh-card);
}

.offer__timerLabel {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2);
}

.offer__timerValue {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--timer);
  white-space: nowrap;
}

/* --- Тёмная карточка набора ---------------------------------------------- */
.offer__card {
  order: 3;
  margin-top: 24px;
  padding: 24px 20px 20px;
  background: var(--ink-block);
  border-radius: 24px;
  color: var(--on-dark);
}

.offer__cardTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--on-dark);
}

.offer__list {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: normal;   /* в макете li без line-height: с 1.55 из базы строка
                            выше кружка и весь список растёт на 3-6px на пункт */
  color: var(--on-dark-90);
}

.offer__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-28);
  color: var(--brand-lite);
}

/* --- Плейсхолдеры рендера ------------------------------------------------ */
/* Квадратный — внутри карточки, только телефон */
/* Рендер набора. Фон картинки совпадает с --ink-block-2 из макета, поэтому
   слот и кадр читаются как одна панель. */
.offer__shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-block-2);
  overflow: hidden;
}

.offer__pic { display: block; }

.offer__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer__shot--m {
  margin-top: 20px;
  margin-bottom: 2px;
  aspect-ratio: 1;
  border-radius: 16px;
}

/* 4/3 с выносом за правый край — от 768 */
/* В макете здесь было 4/3 под заглушку; рендер квадратный, и слот
   подстроен под него, чтобы кадр не пришлось кадрировать. */
.offer__shot--d {
  aspect-ratio: 1;
  border-radius: 24px 0 0 24px;
}

.offer__aside { min-width: 0; }

/* --- Цена ---------------------------------------------------------------- */
.offer__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.offer__priceNow {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--on-dark);
  white-space: nowrap;
}

.offer__priceOld {
  font-size: 15px;
  line-height: normal;
  color: var(--on-dark-50);
  white-space: nowrap;
}

.offer__off {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-28);
  color: var(--brand-lite);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Кнопки и сноска ----------------------------------------------------- */
.offer__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

/* В обоих макетах синяя кнопка набора идёт без тени — она на тёмном */
.offer__btn--buy { box-shadow: none; }

.offer__note {
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--on-dark-50);
}

.offer__note--m {
  margin: 12px 0 0;
  text-align: center;
}

.offer__note--d {
  margin: 14px 0 0;
}

/* --- От 768: тёмная секция, десктопная раскладка в одну колонку ---------- */
@media (min-width: 768px) {
  .offer {
    --offer-eyebrow: var(--on-dark-50);
    --offer-title:   var(--on-dark);
    --offer-lead:    var(--on-dark-70);

    padding: var(--sec-gap) 0;
    background: var(--ink-block);
    color: var(--on-dark);
  }

  .offer__title { margin-top: 12px; }

  .offer__lead {
    margin-top: 16px;
    max-width: 460px;
  }

  /* Таймер — пилюля над надзаголовком */
  .offer__timer {
    order: 0;
    align-self: start;
    justify-content: flex-start;
    max-width: 380px;
    margin: 0 0 24px;
    padding: 10px 10px 10px 16px;
    background: var(--on-dark-08);
    border-radius: 999px;
    box-shadow: none;
  }

  .offer__timerLabel {
    color: var(--on-dark-70);
    white-space: nowrap;
  }

  .offer__timerLabel br { display: none; }

  .offer__timerValue {
    padding: 8px 12px;
    font-size: 18px;
    color: var(--on-dark);
    background: var(--brand);
    border-radius: 999px;
  }

  /* Карточка растворяется — контент лежит прямо на тёмной секции */
  .offer__card {
    margin-top: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
  }

  .offer__list {
    margin-top: 32px;
    gap: 12px;
  }

  .offer__item {
    gap: 12px;
    font-size: 19px;
    color: var(--on-dark-92);
  }

  .offer__tick {
    width: 24px;
    height: 24px;
  }

  .offer__price {
    gap: 12px;
    margin-top: 40px;
  }

  /* Цена занимает свою строку, старая цена и чип — следующую */
  .offer__priceNow {
    flex: 0 0 100%;
    font-size: 64px;
    letter-spacing: -0.03em;
  }

  .offer__priceOld { font-size: 17px; }

  .offer__off {
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
  }

  .offer__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
  }

  .offer__btn--buy { padding: 0 36px; }
}

/* --- От 1024: две колонки, вынос рендера за правый край ------------------ */
@media (min-width: 1024px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .offer__aside {
    margin-right: calc((min(var(--max), 100vw) - 100vw) / 2 - var(--pad));
  }
}

/* --- Тёмная тема: карточке нужен контурный ободок ------------------------ */
@media (prefers-color-scheme: dark) {
  .offer__card { box-shadow: inset 0 0 0 1px var(--on-dark-08); }
}

@media (prefers-color-scheme: dark) and (min-width: 768px) {
  .offer__card { box-shadow: none; }
}

/* === Поштучно — карточки четырёх планеров === */

.products {
  padding-top: var(--sec-gap);
  background: var(--bg);
  scroll-margin-top: var(--nav-h);
}

.products__title { margin-top: 10px; }

.products__lead {
  margin-top: 12px;
  max-width: 34ch;
}

.products__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* --- Карточка: мобильная раскладка ---------------------------------------
   Вертикальная: плейсхолдер 4/3 → текст → строка кнопок → кнопка «в наборе».
   -------------------------------------------------------------------------- */
.prodCard {
  background: var(--surface);
  border-radius: 24px;
  padding: 12px;
  box-shadow: var(--sh-card);
}

/* Плейсхолдер рендера */
/* Рендеры планеров — 868×653, ровно 4:3, как слот в макете. Фон у файлов
   белый, поэтому подложка слота тоже светлая: стыка не видно. */
.prodCard__shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}

.prodCard__pic { display: block; height: 100%; }

.prodCard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заголовок и описание */
.prodCard__text { padding: 16px 8px 0; }

.prodCard__desc {
  margin-top: 6px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Строка цены — только от 768 (на телефоне цена живёт в кнопке «Купить») */
.prodCard__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.prodCard__priceNow {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-strong);
}
.prodCard__priceOld {
  font-size: 16px;
  line-height: normal;   /* в макете <s> без line-height: не наследуем 1.55 из базы,
                            иначе строка цены выше 32px и «уезжает» весь низ карточки */
  color: var(--ink-3);
}

/* Кнопки «Детали» / «Купить» */
.prodCard__actions { margin-top: 16px; }

.prodCard__btns {
  display: flex;
  gap: 8px;
}

.prodCard__details {
  flex: none;
  padding: 0 22px;
  border-color: var(--line-10);
}

.prodCard__buy {
  flex: 1;
  gap: 0;
}

/* Кнопка «цена в наборе» */
.prodCard__bundle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0;
  border: 1px solid var(--brand-18);
  border-radius: 999px;
  background: var(--brand-07);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms var(--e-out), background-color 200ms;
}
.prodCard__bundle:hover {
  border-color: var(--brand);
  background: var(--brand-10);
}
.prodCard__bundle:active { transform: scale(.975); }

.prodCard__bundlePrice { font-weight: 700; }

.prodCard__off {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: 600;
}

/* --- ≥768: десктопная карточка в одну колонку ----------------------------- */
@media (min-width: 768px) {
  .products { padding: 120px 0; }

  .products__title { margin-top: 12px; }

  .products__lead {
    margin-top: 16px;
    max-width: 620px;
  }

  .products__list {
    gap: 24px;
    margin-top: 48px;
  }

  .prodCard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    height: auto;
    padding: 20px;
  }

  .prodCard__shot { height: auto; }

  .prodCard__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 12px 12px 8px 0;
  }

  .prodCard__text { padding: 0; }

  .prodCard__title {
    font-size: 24px;
    letter-spacing: -0.02em;
  }

  .prodCard__desc {
    margin-top: 8px;
    line-height: 1.55;
    max-width: 520px;
  }

  .prodCard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
  }

  .prodCard__btns { gap: 10px; }

  .prodCard__btns .btn {
    height: 48px;
    font-size: 16px;
  }

  .prodCard__buy {
    order: 1;
    flex: none;
    padding: 0 24px;
    box-shadow: var(--sh-brand-s);
  }

  .prodCard__details {
    order: 2;
    padding: 0 22px;
    border-color: var(--line-strong);
  }

  .prodCard__bundle {
    width: auto;
    height: 36px;
    margin-top: 0;
    gap: 8px;
    padding: 0 6px 0 14px;
  }

  .prodCard__off { height: 24px; }
}

/* --- ≥1024: горизонтальная карточка --------------------------------------- */
@media (min-width: 1024px) {
  .prodCard { grid-template-columns: 4fr 8fr; }

  .prodCard__body {
    justify-content: center;
    gap: 28px;
  }
}



/* === Вопросы, финал, футер и нижний бар === */

/* --------------------------------------------------------------------------
   ВОПРОСЫ
   Мобильный: надзаголовок + h2, ниже восемь карточек на всю ширину.
   ≥768:      белая секция, крупная типографика; левый столбец с контактами
              появляется (.only-d) и стоит над списком в одну колонку.
   ≥1280:     grid 4fr / 8fr, левый столбец липкий (top:120px).
   -------------------------------------------------------------------------- */
.faq {
  padding-top: 56px;
  scroll-margin-top: 80px;
}

.faq__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

.faq__title { margin-top: 10px; }

/* --- Левый столбец: «Не нашёл ответа?» (только ≥768) --------------------- */
.faq__help {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 320px;
}

.faq__helpTitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.faq__helpText {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.faq__tg {
  margin-top: 16px;
  background: transparent;
}
.faq__tg svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.faq__recover {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Список вопросов ----------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faqItem {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--sh-card);
}

.faqItem__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 14px 12px 14px 18px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.faqItem__mark {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  transition: transform 240ms var(--e-out);
}
.faqItem__mark svg { width: 12px; height: 12px; }

.faqItem__markV { transition: opacity 200ms; }

[aria-expanded="true"] .faqItem__mark  { transform: rotate(180deg); }
[aria-expanded="true"] .faqItem__markV { opacity: 0; }

.faqItem__a { padding: 0 18px 18px; }

/* --------------------------------------------------------------------------
   ФИНАЛ
   Мобильный: тёмная карточка внутри контейнера.
   ≥768:      тёмная секция во всю ширину, контент по центру.
   -------------------------------------------------------------------------- */
.final { padding-top: 56px; }

.final__card {
  background: var(--ink-block);
  border-radius: 20px;
  padding: 32px 24px;
  color: var(--on-dark);
}

.final__title { color: var(--on-dark); }

.final__lead {
  margin-top: 12px;
  color: var(--on-dark-70);
}

/* В макете у этой кнопки нет тени — гасим тень .btn--primary. */
.final__cta {
  margin-top: 24px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   ФУТЕР
   Мобильный: две карточки друг под другом, группы ссылок вертикально.
   ≥768:      секция на фоне --bg, карточки radius 24, ссылки в три колонки.
   ≥1280:     grid 4fr / 8fr.
   -------------------------------------------------------------------------- */
.footer {
  padding-top: 56px;
  /* место под липкий нижний бар */
  padding-bottom: 96px;
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Тёмная карточка бренда ---------------------------------------------- */
.footBrand {
  background: var(--ink-block);
  border-radius: 20px;
  padding: 24px;
  color: var(--on-dark);
}

.footBrand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}

.footBrand__mark {
  flex: none;
  width: 22px;
  height: 21px;
}

.footBrand__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-dark-70);
}

.footBrand__copy {
  margin-top: 20px;
  font-size: 13px;
  color: var(--on-dark-50);
}

/* --- Светлая карточка со ссылками ---------------------------------------- */
.footLinks {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.footLinks__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.footLinks__title {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

.footLinks__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footLinks__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.footLinks__item svg {
  flex: none;
  color: var(--brand);
}

/* В макете: gap 12px во flex-колонке футера + margin-top 12px у строки. */
.footer__legal {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   НИЖНИЙ БАР (только телефон)
   Скрыт по умолчанию: transform: translateY(160%).
   Показывает JS — классом .is-visible или атрибутом aria-hidden="false".
   -------------------------------------------------------------------------- */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-width: 430px;
  margin: 0 auto;
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom) + 12px);
  display: flex;
  align-items: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(160%);
  transition: transform 240ms var(--e-sheet);
}
.buybar.is-visible,
.buybar[aria-hidden="false"] { transform: translateY(0); }

.buybar__state {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: fadeIn 200ms ease-out both;
}
.buybar__state[hidden] { display: none; }

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

.buybar__lead {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.buybar__sub {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
}

.buybar__price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.buybar__sum {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.buybar__chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand-10);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.buybar__cta {
  flex: none;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
}
.buybar__cta--buy {
  width: 150px;
  padding: 0;
}

/* --------------------------------------------------------------------------
   ≥768 — десктопный макет в одну колонку
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Вопросы */
  .faq {
    background: var(--surface);
    padding: 120px 0;
    scroll-margin-top: 72px;
  }

  .faq__title {
    margin-top: 12px;
    max-width: 10ch;
  }

  .faq__list { gap: 10px; }

  .faqItem {
    background: var(--surface-3);
    border-radius: 18px;
    box-shadow: none;
  }

  .faqItem__btn {
    min-height: 64px;
    padding: 18px 16px 18px 24px;
    font-size: 19px;
  }

  .faqItem__mark {
    width: 36px;
    height: 36px;
    border-color: var(--line-10);
    background: var(--surface);
  }
  .faqItem__mark svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .faqItem__a {
    padding: 0 24px 22px;
    max-width: 60ch;
  }

  /* Финал */
  .final {
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: 80px 0;
    background: var(--ink-block);
    color: var(--on-dark);
  }

  .final__card {
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: center;
  }

  .final__lead { margin-top: 16px; }

  .final__cta {
    margin-top: 32px;
    padding: 0 36px;
  }

  /* Футер */
  .footer {
    background: var(--bg);
    padding: 64px 0 48px;
  }

  .footer__grid {
    display: grid;
    gap: 24px;
    align-items: stretch;
  }

  .footBrand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    border-radius: 24px;
  }

  .footBrand__logo { font-size: 17px; }

  .footBrand__mark {
    width: 24px;
    height: 23px;
  }

  .footBrand__text {
    margin-top: 16px;
    font-size: 15px;
    max-width: 28ch;
  }

  .footBrand__copy { margin-top: 0; }

  .footLinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 32px;
    border-radius: 24px;
  }

  .footLinks__group {
    margin-top: 0;
    gap: 0;
  }

  .footLinks__title { margin-bottom: 8px; }

  .footLinks__list { gap: 0; }
  .footLinks__list > li:last-child .footLinks__item { border-bottom: 0; }

  .footer__legal {
    margin-top: 24px;
    padding-top: 20px;
  }
}

/* --------------------------------------------------------------------------
   ≥1280 — полная десктопная раскладка.
   В макете две колонки 4fr/8fr и липкий левый столбец включаются только
   в ветке ≥1280: ветка ≤1279 держит [data-d=faq] и [data-d=footer]
   в одну колонку, а [data-d=faqside] — в position:static.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .faq__side {
    position: sticky;
    top: 120px;
  }

  .footer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* --------------------------------------------------------------------------
   Тёмная тема: тёмным карточкам на телефоне нужен контурный ободок
   (в десктопном макете карточки его не получают).
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .final__card,
  .footBrand { box-shadow: inset 0 0 0 1px var(--on-dark-08); }
}

@media (prefers-color-scheme: dark) and (min-width: 768px) {
  .final__card,
  .footBrand { box-shadow: none; }
}

/* === Модалки: детали планера, состав набора, оплата, промокод, восстановление ===
   База (без медиа-запроса) — мобильные шторки снизу.
   ≥768  — центрированный диалог в одну колонку.
   ≥1024 — широкий диалог с боковой панелью (grid 5fr / 7fr).
   ============================================================================ */

/* --------------------------------------------------------------------------
   ПРОМОКОД
   Строка под кнопкой «Оплатить» открывает окно поверх оплаты; по закрытию
   оплата остаётся на месте. Цена в шапке пересобирается со скидкой.
   -------------------------------------------------------------------------- */
.checkout__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout__promo {
  align-self: center;
  min-height: 32px;
  padding: 0 8px;
  color: var(--ink-3);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms;
}
.checkout__promo:hover { color: var(--ink); }
.checkout__promo.is-on {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

/* Старая цена — отдельной строкой под новой */
.checkout__was {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.checkout__media .checkout__was {
  margin-top: 8px;
  font-size: 20px;
  color: var(--on-dark-50);
}

.promo__hint {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.promo__input { text-transform: uppercase; }
/* При вводе поле не подсвечивается синим — курсора достаточно.
   Красная рамка на неверный код при этом остаётся. */
.promo__input:focus { border-color: var(--line-strong); }
.promo__input:focus-visible { outline: none; }
.promo__input[aria-invalid="true"] { border-color: var(--danger); }

.promo__err {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
}

.promo__done { text-align: center; }
.promo__done:focus { outline: none; }

.promo__doneIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  animation: promoPop 460ms var(--e-out) both;
}
/* Круг расходится волной и гаснет */
.promo__doneIcon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--brand);
  animation: promoRing 760ms 140ms var(--e-out) both;
}
/* Галочка прорисовывается */
.promo__doneIcon path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: promoDraw 320ms 200ms var(--e-out) forwards;
}

.promo__doneTitle {
  animation: promoRise 360ms 200ms var(--e-out) both;
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.promo__doneText {
  animation: promoRise 360ms 280ms var(--e-out) both;
  margin-top: 6px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Общий каркас: телефон = шторка снизу --------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 55;
}
.modal--recover,
.modal--checkout { z-index: 58; }
/* Открывается поверх «Оплаты», поэтому слой выше */
.modal--promo { z-index: 62; }

/* Окно уезжает вниз само (после принятого промокода), а не пропадает рывком */
.modal.is-closing .modal__scrim { animation: fadeOut 260ms ease-out both; }
.modal.is-closing .modal__dialog { animation: sheetOut 300ms var(--e-sheet) both; }

.modal__scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  animation: fadeIn 280ms ease-out both;
}

.modal__dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 430px;
  height: calc(92dvh + var(--vv-kb, 0px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--sh-sheet);
  overscroll-behavior: contain;
  animation: sheetIn 280ms var(--e-sheet);
  max-height: 100%;
  /* Экранная клавиатура ложится поверх страницы и накрывает низ шторки.
     Вместо того чтобы двигать шторку вверх (между ней и клавиатурой тогда
     остаётся щель со страницей), растим её вниз: нижний край остаётся на
     месте, а содержимое поднимает отступ. Фон при этом сплошной — щели
     взяться неоткуда. Высоту кладёт скрипт в --vv-kb. */
  padding-bottom: var(--vv-kb, 0px);
}
/* Шторки, которые подстраиваются под содержимое */
.modal--recover .modal__dialog,
.modal--promo .modal__dialog,
.modal--checkout .modal__dialog {
  height: auto;
  max-height: min(calc(92dvh + var(--vv-kb, 0px)), 100%);
}

/* Полоска-ручка */
.modal__grab {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--grab);
}

/* <form> не должен создавать бокс: его дети остаются ячейками flex/grid */
.modal__form { display: contents; }

/* Шапка */
.modal__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.modal__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 6px;
}

.modal__title {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-strong);
}

/* Прокрутка: на телефоне media и body едут одним потоком */
.modal__scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* У «восстановления» и «промокода» нет боковой панели — прокручивается сам body */
.modal--recover .modal__body,
.modal--promo .modal__body {
  flex: 1;
  min-height: 0;
  padding: 20px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal [data-scroll] { scrollbar-width: thin; }

/* Блоки в потоке прокрутки не сжимаются: у .ph overflow:hidden, из-за чего
   его min-height:auto схлопнулся бы до нуля. */
.modal__scroll > *,
.modal__media > * { flex: none; }

.modal__media { display: contents; }
.modal--checkout .modal__media { display: none; }

/* Подвал */
.modal__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
}
.modal__foot[hidden] { display: none; }

.modal__footNote {
  font-size: 14px;
  color: var(--ink-3);
}

/* --- Детали планера: телефон --------------------------------------------- */
.details__shot {
  order: -1;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .03) 0 8px, transparent 8px 16px);
}
.details__shot .ph__label { color: var(--ink-3); }

.details__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
}
.details__priceNow {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
}
.details__priceOld {
  font-size: 15px;
  color: var(--ink-3);
  white-space: nowrap;
}

.details__desc {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.details__secTitle {
  /* .eyebrow в базе строчный — вертикальные отступы к нему не применяются. */
  display: block; margin-top: 28px; }

.details__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.details__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.details__check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
}

.details__featTitle {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}
.details__featDesc {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Примеры: на телефоне — под функциями, на ≥1024 — в боковой панели */
.details__ex { order: 1; }
.details__exTitle {
  /* .eyebrow строчный — включаем блок, чтобы работал отступ сверху. */
  display: block; margin-top: 28px; }

.details__exList {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 14px;
}

.details__thumb {
  aspect-ratio: 16 / 7;
  border-radius: 12px;
}
.details__thumb .ph__label { color: rgba(255, 255, 255, .6); }

/* Пример с настоящим скриншотом: белая подложка с полями, картинка во всю
   ширину блока, высота подложки — по высоте картинки. У файлов свои пропорции,
   поэтому фиксированное соотношение сторон снимаем. Подложка белая в обеих
   темах: скриншоты прозрачные и рассчитаны на светлый фон. */
.details__thumb.has-img {
  aspect-ratio: auto;
  display: block;
  padding: 12px;
  background-color: #FFFFFF;
  background-image: none;
}
.details__thumb.has-img picture { height: auto; }
.details__thumb.has-img img {
  height: auto;
  object-fit: contain;
}

.details__figCap { margin-top: 12px; }
.details__figTitle {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}
.details__figDesc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Подвал: «Купить» + «В наборе» */
/* Раньше это был просто текст и не читался как кнопка. Теперь — такая же
   «таблетка», как чип цены в наборе на карточке планера. */
.details__bundle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--brand-18);
  border-radius: 999px;
  background: var(--brand-07);
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms var(--e-out), background-color 200ms, border-color 200ms;
}
.details__bundle:hover {
  border-color: var(--brand);
  background: var(--brand-10);
}
.details__bundle:active { transform: scale(.975); }

.details__bundlePrice {
  margin-left: 6px;
  color: var(--brand);
  font-weight: 700;
}

/* --- Состав набора: телефон ---------------------------------------------- */
.bundle__price {
  order: -2;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bundle__priceNow {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
}
.bundle__priceOld {
  font-size: 15px;
  color: var(--ink-3);
  white-space: nowrap;
}
.bundle__off {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-10);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.bundle__intro { order: -1; }

.bundle__lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.bundle__inTitle {
  /* .eyebrow строчный — включаем блок, чтобы работал отступ сверху. */
  display: block; margin-top: 28px; }

.bundle__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.bundle__item {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 240ms;
}
.bundle__item:has(> .bundle__btn[aria-expanded="true"]) { border-color: var(--brand); }
.bundle__item.is-open { border-color: var(--brand); }

.bundle__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 12px 12px 18px;
  text-align: left;
}

.bundle__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.bundle__sign {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  transition: background-color 240ms, transform 240ms var(--e-out);
}
.bundle__signV { transition: opacity 240ms var(--e-out); }
.bundle__btn[aria-expanded="true"] .bundle__sign {
  background: var(--brand);
  color: var(--on-brand);
  transform: rotate(180deg);
}
.bundle__btn[aria-expanded="true"] .bundle__signV { opacity: 0; }

/* В базе .acc__panel настроен по FAQ (240/200 мс); в составе набора макет
   просит 280 мс на раскрытие и 220 мс на проявление. */
.modal--bundle .acc__panel { transition-duration: 280ms; }
.modal--bundle .acc__inner { transition-duration: 220ms; }

.bundle__panel { padding: 0 18px 18px; }

/* Рендер планера внутри раскрытого пункта — та же картинка, что в карточке
   на странице, и та же пропорция 4:3. Фон белый, как у файла. */
.bundle__shotM {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

.bundle__picM { display: block; height: 100%; }

.bundle__imgM {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bundle__short {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.bundle__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.bundle__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}
.bundle__bullets i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.bundle__more {
  height: 48px;
  margin-top: 16px;
  font-size: 15px;
  border-color: var(--line-strong);
}

/* Компактная шапка на 768–1023 */
.bundle__headPrice {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.bundle__headPrice s {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-3);
}

/* --- Оплата: телефон ------------------------------------------------------ */
.checkout__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-3);
  border-radius: 16px;
}
.checkout__sumLabel {
  font-size: 13px;
  color: var(--ink-3);
}
.checkout__sumName {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.checkout__sumPrice {
  text-align: right;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.checkout__field { margin-top: 20px; }
.email-suggestion {
  min-width: 0;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--brand-28);
  border-radius: 16px;
  background: var(--brand-07);
  font-size: 13px;
  line-height: 1.45;
}
.email-suggestion[hidden] { display: none; }
.email-suggestion__title { margin: 0 0 4px; color: var(--ink); }
.email-suggestion__accept {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  text-align: left;
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.email-suggestion__keep {
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink-2);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email-suggestion button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
@media (prefers-color-scheme: dark) {
  .email-suggestion__accept { color: var(--brand-lite); }
  .email-suggestion button:focus-visible { outline-color: var(--brand-lite); }
}
.checkout__error { margin-top: 12px; color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
.checkout__error[hidden] { display: none; }

.checkout__label {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.checkout__methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.checkout__method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  transition: border-color 200ms;
}
.checkout__method[aria-checked="true"] { border-color: var(--brand); }

.checkout__methodMain {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.checkout__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--brand);
}

.checkout__methodText {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.checkout__methodTitle { font-weight: 600; }
.checkout__methodDesc {
  font-size: 13px;
  color: var(--ink-3);
}

/* Радиокружок: в базе нет токена на rgba(0,0,0,.2) — значение из макета */
.checkout__dot {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, .2);
  transition: border-color 200ms;
}
@media (prefers-color-scheme: dark) {
  .checkout__dot { border-color: rgba(255, 255, 255, .28); }
}
.checkout__dot i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  transform: scale(0);
  transition: transform 200ms var(--e-out);
}
.checkout__method[aria-checked="true"] .checkout__dot { border-color: var(--brand); }
.checkout__method[aria-checked="true"] .checkout__dot i { transform: scale(1); }

.checkout__terms {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.checkout__terms a {
  color: var(--ink);
  text-decoration: underline;
}

.checkout__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-2);
}
.checkout__tip svg {
  flex: none;
  margin-top: 1px;
}
.checkout__tip p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Компактная шапка на 768–1023 */
.checkout__headPrice {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

/* --- Восстановление: телефон --------------------------------------------- */
.recover__state[hidden] { display: none; }

.recover__lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.recover__field { margin-top: 20px; }

.recover__error {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--danger-bg);
  border-radius: 14px;
  animation: expandIn 240ms var(--e-out) both;
}
.recover__error[hidden] { display: none; }
.recover__error p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
  text-wrap: pretty;
}

.recover__ok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--brand-07);
  border-radius: 16px;
  animation: expandIn 240ms var(--e-out) both;
}
.recover__ok p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.recover__okIcon {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
}

.recover__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.recover__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-10);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.recover__link svg {
  flex: none;
  color: var(--brand);
}

.recover__hint {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.recover__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.recover__contactsLead {
  font-size: 13px;
  color: var(--ink-3);
}
.recover__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.recover__contact svg {
  flex: none;
  color: var(--brand);
}

/* --- ≥768: центрированный диалог в одну колонку --------------------------- */
@media (min-width: 768px) {
  /* Каркас */
  .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    /* Диалог по центру, растить его вниз бессмысленно — вместо этого
       сжимаем каркас до видимой части экрана (её размеры кладёт скрипт). */
    top: var(--vv-top, 0px);
    height: var(--vv-h, auto);
  }

  .modal__scrim {
    background: var(--scrim-strong);
    animation-duration: 240ms;
  }

  .modal__dialog {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(640px, calc(100% - 48px));
    max-width: none;
    height: auto;
    /* 100% — на случай, когда видимую часть съела экранная клавиатура
       (айфон в альбомной ориентации уже шире 768px) */
    max-height: min(86vh, 100%);
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: var(--sh-dialog);
    animation: popInD 260ms var(--e-out) both;
  }
  .modal--recover .modal__dialog,
  .modal--promo .modal__dialog,
  .modal--checkout .modal__dialog { max-height: min(86vh, 100%); }

  .modal.is-closing .modal__dialog { animation: popOutD 220ms var(--e-out) both; }

  /* Телефон в альбомной ориентации уже шире 768px, а с открытой клавиатурой
     по высоте остаётся полоска. Ужимаем поля и разрешаем окну прокрутиться
     целиком, иначе кнопку внизу срезает. Класс ставит скрипт — на обычном
     мониторе с коротким окном ничего не меняется. */
  .is-kb .modal { padding: 8px; }
  .is-kb .modal__dialog { overflow: hidden auto; }
  .is-kb .modal__head { padding: 16px 16px 12px 24px; }
  .is-kb .modal__foot { padding: 10px 24px 14px; }
  .modal--recover .modal__dialog { width: min(560px, 100%); }
  .modal--promo .modal__dialog { width: min(460px, 100%); }

  .modal__grab { display: none; }

  .modal__head { padding: 32px 24px 20px 40px; }
  .modal--bundle .modal__head {
    align-items: center;
    padding: 28px 24px 16px 40px;
    border-bottom: 0;
  }
  .modal--checkout .modal__head {
    align-items: center;
    padding: 28px 24px 8px 40px;
    border-bottom: 0;
  }
  .modal--recover .modal__head,
  .modal--promo .modal__head { padding: 28px 24px 18px 32px; }

  .modal__heading { padding-top: 0; }

  .modal__title {
    margin-top: 6px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .modal--recover .modal__title,
  .modal--promo .modal__title {
    font-size: 26px;
    letter-spacing: -0.02em;
  }

  /* Боковая панель на этом брейкпоинте не показывается */
  .modal__media { display: none; }

  .modal__scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal--details .modal__body { padding: 24px 40px 32px; }
  .modal--bundle .modal__body { padding: 0 40px 24px; }
  .modal--checkout .modal__body { padding: 8px 40px 24px; }
  .modal--recover .modal__body,
  .modal--promo .modal__body { padding: 24px 32px 28px; }

  .modal__foot {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px 40px 28px;
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .modal--recover .modal__foot,
  .modal--promo .modal__foot { padding: 16px 32px 28px; }

  .modal__foot .btn {
    height: 52px;
    padding: 0 32px;
    font-size: 16px;
  }
  .modal__foot .btn--primary { box-shadow: var(--sh-brand-s); }

  /* Детали планера */
  .details__price {
    gap: 12px;
    margin-top: 0;
  }
  .details__priceNow {
    font-size: 48px;
    letter-spacing: -0.03em;
  }
  .details__priceOld { font-size: 17px; }

  .details__desc {
    margin-top: 16px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.55;
  }

  .details__secTitle { margin-top: 32px; }
  .details__features { margin-top: 16px; }

  /* В подвале модалки кнопки стоят в строку — «в наборе» занимает
     всё оставшееся место рядом с «Купить». */
  .details__bundle { flex: 1; height: 48px; }

  /* Состав набора */
  .bundle__list { margin-top: 0; }

  .bundle__btn {
    min-height: 60px;
    padding: 12px 12px 12px 20px;
  }
  .bundle__name { font-size: 17px; }

  .bundle__panel { padding: 0 20px 20px; }
  .bundle__short { margin-top: 0; }

  .bundle__more {
    height: 44px;
    padding: 0 20px;
  }

  /* Оплата */
  .checkout__field { margin-top: 0; }
  .checkout__label { margin-top: 24px; }
  .checkout__methods { margin-top: 10px; }
  .checkout__method { min-height: 64px; }
  .checkout__methodDesc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Восстановление */
  .recover__contacts {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }
  .recover__contact {
    gap: 8px;
    min-height: 0;
  }
}

/* --- ≥1024: широкий диалог с боковой панелью ------------------------------ */
@media (min-width: 1024px) {
  .modal--wide .modal__dialog {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "media head"
      "media body"
      "media foot";
  }

  .modal--wide .modal__scroll { display: contents; }

  .modal--wide .modal__media,
  .modal--checkout .modal__media {
    display: flex;
    flex-direction: column;
    grid-area: media;
    min-height: 0;
  }
  .modal--wide .modal__media > * { order: 0; }

  .modal--wide .modal__head { grid-area: head; }
  .modal--wide .modal__body { grid-area: body; }
  .modal--wide .modal__foot { grid-area: foot; }

  /* Боковая панель: детали планера */
  .details__media {
    gap: 20px;
    padding: 32px;
    background: var(--surface-2);
    overflow-y: auto;
  }

  .details__shot {
    border-radius: 16px;
    background-color: var(--shot);
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 16px);
  }
  .details__shot .ph__label {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
  }

  .details__exList {
    gap: 20px;
    margin-top: 0;
  }

  .details__fig {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
  }

  /* Со скриншотом фигура раскладывается в столбец: картинке нужна вся ширина
     колонки, миниатюрой в 120px такой кадр не прочитать. */
  .details__fig:has(.has-img) {
    display: block;
  }
  .details__fig:has(.has-img) .details__figCap { margin-top: 12px; }

  .details__thumb {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }

  .details__thumb.has-img { padding: 14px; border-radius: 12px; }

  .details__figCap { margin-top: 0; }
  .details__figTitle {
    font-size: 15px;
    letter-spacing: 0;
  }
  .details__figDesc {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
  }

  .details__features {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 24px;
  }

  /* Боковая панель: состав набора */
  .bundle__media {
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    background: var(--ink-block);
    color: var(--on-dark);
    overflow: hidden;
  }

  .bundle__eyebrow { color: var(--on-dark-50); }

  .bundle__title {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--on-dark);
  }

  .bundle__lead {
    font-size: 15px;
    color: var(--on-dark-70);
  }

  .bundle__shot {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: #FFFFFF;
  }

  .bundle__price {
    flex-wrap: wrap;
    align-items: center;
  }
  .bundle__priceNow {
    flex: 0 0 100%;
    font-size: 48px;
    letter-spacing: -0.03em;
    color: var(--on-dark);
  }
  .bundle__priceOld { color: var(--on-dark-50); }
  .bundle__off {
    background: var(--brand-28);
    color: var(--brand-lite);
  }

  .bundle__bullets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 16px;
  }

  /* Боковая панель: оплата */
  .checkout__media {
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    background: var(--ink-block);
    color: var(--on-dark);
    overflow: hidden;
  }

  .checkout__eyebrow { color: var(--on-dark-50); }

  .checkout__title {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--on-dark);
  }

  .checkout__price {
    display: block;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--on-dark);
  }
  .checkout__priceNote {
    margin-top: 12px;
    font-size: 14px;
    color: var(--on-dark-50);
  }

  .checkout__methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
}

/* === Партнёрам: шапка, меню и первый экран === */

/* --------------------------------------------------------------------------
   Шапка и меню партнёрской страницы собраны на классах .nav / .menu из
   nav.css — геометрия у них та же, что на главной, отличаются только ссылки.
   Своего CSS им не нужно, поэтому ниже только герой.

   Базовые правила = мобильный макет (LifeStats Partners, блок HERO).
   @media (min-width:768px) = десктопный герой в одну колонку
     (ветка @media (max-width:1023px) файла LifeStats Partners Desktop).
   @media (min-width:1024px) = полная сетка 7fr / 5fr.
   -------------------------------------------------------------------------- */

.pHero {
  position: relative;
  padding-top: 40px;
}

/* --- Бейдж ---------------------------------------------------------------
   Не .eyebrow: в макете цвет --ink (#1D1D1F), а не --ink-3, и это «таблетка».
   ------------------------------------------------------------------------ */
.pHero__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-chip);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Текстовая колонка --------------------------------------------------- */
.pHero__title {
  margin-top: 18px;
  animation-delay: 60ms;
}

.pHero__lead {
  margin-top: 16px;
  max-width: 34ch;
  animation-delay: 120ms;
}

/* .btn.btn--primary.btn--block: на телефоне во всю ширину, от 768 по контенту */
.pHero__cta {
  margin-top: 24px;
  animation-delay: 180ms;
}

.pHero__note {
  margin-top: 10px;
  text-align: center;
  animation-delay: 240ms;
  /* В макете у этой строки нет line-height — только normal. */
  line-height: normal;
}

/* --- Чипы: бегущая строка на телефоне ------------------------------------
   Лента выезжает за поля контейнера (в макете margin 20px -20px 0),
   края растворяет маска. Второй набор чипов в разметке — «хвост» для
   бесшовной петли (translateX(-50%)), он aria-hidden и .only-m.
   ------------------------------------------------------------------------ */
.pHero__chips {
  margin: 20px calc(var(--pad) * -1) 0;
  padding: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  animation-delay: 300ms;
}

.pHero__chipsTrack {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: marquee 26s linear infinite;
}

/* Дубль набора: на телефоне прозрачен для раскладки, от 768 прячется .only-m */
.pHero__chipsDup { display: contents; }

.pHero__chip {
  flex: none;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Карточка дохода -----------------------------------------------------
   В мобильном макете её нет — элемент висит на .only-d.
   ------------------------------------------------------------------------ */
.pHero__card {
  background: var(--surface);
  border-radius: 28px;
  padding: 40px;
  box-shadow: var(--sh-raised);
  animation-delay: 360ms;
}

.pHero__cardLabel {
  font-size: 14px;
  color: var(--ink-3);
}

.pHero__cardSum {
  margin-top: 12px;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

.pHero__cardNote {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-3);
}

.pHero__list {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pHero__item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  color: var(--ink);
}

.pHero__tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-10);
  display: grid;
  place-items: center;
  color: var(--brand);
}

/* --- Планшет и десктоп в одну колонку (≥768) ----------------------------- */
@media (min-width: 768px) {
  .pHero {
    padding: 96px 0 120px;
    background: var(--bg);
  }

  .pHero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pHero__badge {
    height: 28px;
    padding: 0 14px;
  }

  .pHero__title {
    margin-top: 24px;
    max-width: 14ch;
  }

  .pHero__lead {
    margin-top: 24px;
    max-width: 520px;
  }

  .pHero__cta {
    margin-top: 32px;
    padding: 0 36px;
  }

  .pHero__note {
    margin-top: 12px;
    text-align: left;
  }

  /* Бегущая строка выключается: чипы просто переносятся по строкам */
  .pHero__chips {
    margin: 28px 0 0;
    max-width: 560px;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .pHero__chipsTrack {
    width: auto;
    flex-wrap: wrap;
    animation: none;
  }

  .pHero__chip {
    flex: 0 1 auto;
    height: 34px;
  }
}

/* --- Полная раскладка (≥1024) -------------------------------------------- */
@media (min-width: 1024px) {
  .pHero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
    align-items: center;
    min-height: 424px;
  }
}

/* --- Уважение к настройкам движения -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pHero__chipsTrack { animation: none; }
}

/* === Партнёрам: ступени процента и калькулятор === */

/* --------------------------------------------------------------------------
   ЛЕСТНИЦА — мобильный макет
   -------------------------------------------------------------------------- */
.tiers {
  padding-top: 56px;
  scroll-margin-top: var(--nav-h);
}

.tiers__lead {
  margin-top: 12px;
  max-width: 34ch;
}

.tiers__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.tier {
  background: var(--surface);
  border: 1px solid var(--line-06);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--sh-card);
}
.tier--main { border-color: var(--brand); }

.tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tier__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tier__name {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.tier__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--brand-10);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.tier__pct {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

.tier__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.tier__cond {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tier__cut {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.tiers__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   КАЛЬКУЛЯТОР — мобильный макет
   Порядок блоков в белой карточке задан через order: ползунок → строки
   расчёта → переключатель ступени → подпись → «Твоя доля».
   -------------------------------------------------------------------------- */
.calc { padding-top: 56px; }

.calc__panel {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

/* Десктопные обёртки колонок на телефоне растворяются */
.calc__body,
.calc__card { display: contents; }

/* Ползунок */
.calc__slider {
  order: 1;
  display: flex;
  flex-direction: column;
}
.calc__sliderLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.calc__range { margin-top: 6px; }
.calc__views {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-strong);
}

/* Переходы и покупки */
.calc__rows {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.calc__rowKey {
  font-size: var(--fs-body);
  color: var(--ink-2);
}
.calc__rowVal {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Переключатель ступени */
.calc__rateLabel { order: 3; }

.calc__rates {
  order: 4;
  display: flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-3);
}
.calc__rate {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 200ms, color 200ms;
}
.calc__rate[aria-checked="true"] {
  background: var(--ink-block);
  color: var(--on-dark);
}

.calc__rateNote {
  order: 5;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Итог */
.calc__total {
  order: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.calc__totalKey {
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.calc__income {
  margin-top: 6px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.calc__per { margin-top: 6px; }

.calc__note { margin-top: 16px; }

/* --------------------------------------------------------------------------
   ≥768 — десктопный макет в одноколоночной раскладке
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* --- Ступени --- */
  .tiers {
    background: var(--surface);
    padding: 120px 0;
  }

  .tiers__lead {
    margin-top: 16px;
    max-width: 620px;
  }

  .tiers__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
    margin-top: 48px;
  }

  /* Порядок десктопного макета: Старт · Максимум · Основная */
  .tiers__list > .tier:nth-child(1) { order: 1; }
  .tiers__list > .tier:nth-child(2) { order: 3; }
  .tiers__list > .tier:nth-child(3) { order: 2; }

  .tier {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    box-shadow: none;
  }
  .tier--main {
    border: 2px solid var(--brand);
    box-shadow: var(--sh-hero-m);   /* в макете 0 2px 8px .04, 0 24px 64px .10 */
  }

  /* Строки карточки распадаются, порядок задаётся order */
  .tier__head,
  .tier__foot { display: contents; }

  .tier__title {
    order: 1;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
  }
  .tier__name { font-size: 19px; }
  .tier__chip {
    height: 26px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .tier__cond {
    order: 2;
    margin-top: 4px;
    line-height: normal;   /* в десктопном макете у условия нет line-height */
  }

  .tier__pct {
    order: 3;
    margin-top: auto;
    padding-top: 28px;
    font-size: 56px;
    letter-spacing: -0.03em;
  }

  .tier__cut {
    order: 4;
    margin-top: 16px;
    font-size: 17px;
    font-weight: 400;
  }

  .tiers__note {
    margin-top: 32px;
    font-size: 15px;
  }

  /* --- Калькулятор: тёмная секция --- */
  .calc { padding-top: 0; }

  .calc__dark {
    background: var(--ink-block);
    padding: 96px 0;
    color: var(--on-dark);
  }

  .calc__title { color: var(--on-dark); }

  .calc__lead {
    margin-top: 16px;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--on-dark-70);
    text-wrap: pretty;
  }

  /* Мобильная карточка растворяется, колонки становятся блоками */
  .calc__panel { display: contents; }
  .calc__body {
    display: block;
    margin-top: 48px;
  }
  .calc__card {
    display: block;
    margin-top: 48px;   /* в макете 24px gap + пустая колонка-распорка + 24px gap */
    padding: 40px;
    border-radius: 28px;
    background: var(--surface);
    color: var(--ink);
  }

  /* Ползунок: значение над треком */
  .calc__sliderLabel {
    font-size: 14px;
    color: var(--on-dark-70);
  }
  .calc__views {
    order: 2;
    margin-top: 8px;
    font-size: 44px;
    letter-spacing: -0.03em;
    color: var(--on-dark);
  }
  .calc__range {
    order: 3;
    margin-top: 16px;
    height: 32px;
    --track: var(--on-dark-14);
  }
  .calc__range::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
  .calc__range::-moz-range-thumb     { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

  /* Строки расчёта — внутри белой карточки */
  .calc__rows {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .calc__row {
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .calc__rowVal {
    font-size: 24px;
    letter-spacing: -0.01em;
  }

  /* Переключатель ступени на тёмном */
  .calc__rateLabel {
    display: block;
    margin-top: 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-dark-70);
  }
  .calc__rates {
    margin-top: 10px;
    max-width: 360px;
    background: var(--on-dark-14);
    border: 1px solid var(--on-dark-14);
  }
  .calc__rate { color: var(--on-dark); }
  .calc__rate[aria-checked="true"] { background: var(--brand); }
  .calc__rateNote { color: var(--on-dark-50); }

  /* Итог: «Твоя доля» + «с одного ролика» одной строкой, сумма ниже */
  .calc__total {
    flex-flow: row wrap;
    align-items: baseline;
    column-gap: .25em;
    margin-top: 0;
    padding-top: 32px;
    border-top: 0;
  }
  .calc__per {
    order: 1;
    margin-top: 0;
  }
  .calc__income {
    order: 2;
    width: 100%;
    margin-top: 10px;
    font-size: 64px;
    letter-spacing: -0.03em;
  }

  .calc__note { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   ≥1024 — полная десктопная раскладка
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  .tiers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head . card"
      "body . card";
    column-gap: 24px;
    align-items: start;
  }
  .calc__head { grid-area: head; }
  .calc__body { grid-area: body; }
  .calc__card {
    grid-area: card;
    align-self: center;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Тёмная тема: у ползунка на светлой карточке (телефон) в базе нет токена
   для незалитой части трека и для бегунка.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .calc__range {
    --track: var(--on-dark-14);
    --thumb: #F5F5F7;
  }
}

/* === Партнёрам: как это работает, условия, что получишь, кому подойдёт === */

/* --------------------------------------------------------------------------
   КАК ЭТО РАБОТАЕТ (.pSteps)
   База = мобильный макет: карточки на белом, номер 17px в колонке 24px слева.
   С 768 — десктопный вариант: колонка с верхней линейкой и номером 56px.
   -------------------------------------------------------------------------- */
.pSteps { padding-top: var(--sec-gap); }

.pSteps__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.pStepsItem {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.pStepsItem__num {
  flex: none;
  display: flex;
  justify-content: center;
  width: 24px;
  margin-top: 2px;
  font-size: 17px;
  line-height: normal;   /* в макете у номера свой line-height не задан */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.pStepsItem__body { min-width: 0; }

.pStepsItem__text { margin-top: 6px; }

/* --------------------------------------------------------------------------
   УСЛОВИЯ (.terms)
   База = мобильный макет: белая карточка, девять строк «ключ — значение».
   С 768 — карточка снимается, строки становятся сеткой с линейками.
   -------------------------------------------------------------------------- */
.terms {
  padding-top: var(--sec-gap);
  scroll-margin-top: var(--nav-h);
}

.terms__list {
  margin: 24px 0 0;
  padding: 4px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.termsRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-06);
}
/* Под последней строкой линейка ни к чему — списку нечего отделять. */
.termsRow:last-child { border-bottom: 0; }

.termsRow__k {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}

.termsRow__v {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

/* --------------------------------------------------------------------------
   ЧТО ПОЛУЧИШЬ (.gives)
   База = мобильный макет: карточки строками, иконка 22×22 в колонке 24px.
   С 768 — карточки крупнее (radius 24, padding 28/32), иконка 24×24.
   -------------------------------------------------------------------------- */
.gives { padding-top: var(--sec-gap); }

.gives__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.giveCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.giveCard__ico {
  flex: none;
  display: flex;
  justify-content: center;
  width: 24px;
  margin-top: 1px;
  color: var(--brand);
}
.giveCard__ico svg { width: 22px; height: 22px; }

.giveCard__body { min-width: 0; }

.giveCard__text { margin-top: 6px; }

/* --------------------------------------------------------------------------
   КОМУ ПОДОЙДЁТ (.fits)
   База = мобильный макет: карточки строками, заголовок 17px.
   С 768 — карточка снимается: строки с нижней линейкой, заголовок 21px.
   -------------------------------------------------------------------------- */
.fits { padding-top: var(--sec-gap); }

.fits__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.fitItem {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.fitItem__ico {
  flex: none;
  display: flex;
  justify-content: center;
  width: 24px;
  margin-top: 1px;
  color: var(--brand);
}
.fitItem__ico svg { width: 22px; height: 22px; }

.fitItem__body { min-width: 0; }

.fitItem__title { font-size: 17px; }

.fitItem__text { margin-top: 6px; }

.fits__note { margin-top: 24px; }

/* --- ≥768: десктопный макет в одноколоночной раскладке -------------------- */
@media (min-width: 768px) {

  /* Как это работает */
  .pSteps {
    padding: 96px 0 120px;
    background: var(--bg);
  }

  .pSteps__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .pStepsItem {
    display: block;
    padding: 32px 0 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .pStepsItem__num {
    display: block;
    width: auto;
    margin-top: 0;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .pStepsItem__body { margin-top: 24px; }

  .pStepsItem__text { margin-top: 8px; }

  /* Условия */
  .terms {
    padding: 120px 0;
    background: var(--surface);
  }

  .terms__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 64px;
    margin-top: 48px;
    padding: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
    background: none;
    box-shadow: none;
  }

  .termsRow {
    gap: 24px;
    padding: 20px 0;
    border-bottom-color: var(--line);
  }
  /* Строки лежат в две колонки, поэтому нижних в списке две. */
  .termsRow:nth-last-child(-n + 2) { border-bottom: 0; }

  .termsRow__k { font-size: 17px; }

  .termsRow__v {
    font-size: 19px;
    white-space: nowrap;
  }

  /* Что получишь */
  .gives {
    padding: 120px 0;
    background: var(--bg);
  }

  .gives__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .giveCard {
    padding: 28px 32px;
    border-radius: 24px;
  }

  .giveCard__ico {
    width: auto;
    margin-top: 2px;
  }
  .giveCard__ico svg { width: 24px; height: 24px; }

  .giveCard__title { font-size: 19px; }

  .giveCard__text { font-size: 16px; }

  /* Кому подойдёт */
  .fits {
    padding: 120px 0;
    background: var(--surface);
  }

  .fits__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 64px;
    margin-top: 48px;
  }

  .fitItem {
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .fitItem__ico {
    width: auto;
    margin-top: 2px;
  }
  .fitItem__ico svg { width: 24px; height: 24px; }

  .fitItem__title { font-size: var(--fs-h3); }

  .fitItem__text { max-width: 52ch; }

  .fits__note { margin-top: 32px; }
}

/* --- ≥1024: полная десктопная раскладка ---------------------------------- */
@media (min-width: 1024px) {
  .pSteps__list { grid-template-columns: repeat(2, 1fr); }
  .pSteps__list > li:last-child { grid-column: span 2; }

  .terms__list { grid-template-columns: 1fr 1fr; }

  .gives__list { grid-template-columns: repeat(2, 1fr); }

  .fits__list { grid-template-columns: 1fr 1fr; }
}

/* --- ≥1280: крупный контейнер -------------------------------------------- */
@media (min-width: 1280px) {
  .pSteps__list { grid-template-columns: repeat(3, 1fr); }
  .pSteps__list > li:last-child { grid-column: auto; }
}

/* === Партнёрам: как начать, вопросы, футер, нижний бар === */

/* --------------------------------------------------------------------------
   КАК НАЧАТЬ
   Мобильный: заголовок на светлом фоне страницы, ниже белая карточка
              с кнопкой и подписью, сноска — под карточкой.
   ≥768:      тёмная секция во всю ширину; карточка «растворяется»
              (фон, тень и падинги снимаются), контент центрируется
              в колонке 560. Цвета текста переключает набор локальных
              переменных --pStart-*, чтобы тема блока менялась в одном месте.
   -------------------------------------------------------------------------- */
.pStart {
  /* светлая тема блока (телефон) */
  --pStart-title: var(--ink-strong);
  --pStart-text:  var(--ink);
  --pStart-cap:   var(--ink-3);
  --pStart-note:  var(--ink-3);
  --pStart-link:  var(--ink);

  padding-top: 56px;
  scroll-margin-top: var(--nav-h);
}

.pStart__title { color: var(--pStart-title); }

.pStart__card {
  margin-top: 24px;
  max-width: 640px;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.pStart__text {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--pStart-text);
  text-wrap: pretty;
}

.pStart__cta { margin-top: 24px; }
.pStart__cta svg { flex: none; }

.pStart__cap {
  margin-top: 10px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--pStart-cap);
}

.pStart__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pStart-note);
  text-wrap: pretty;
}
.pStart__note a {
  color: var(--pStart-link);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ФОРМА ЗАЯВКИ
   Живёт в .pStart__card, поэтому подложка у неё всегда светлая (--surface) —
   и на телефоне, и на тёмной десктопной секции. Поля собраны из базовых
   .field / .field__input, свои только «чипы» площадки и селект тематики.
   -------------------------------------------------------------------------- */
.pForm { text-align: left; }

.pForm__grid {
  display: grid;
  gap: 16px;
}

.pForm__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pForm__fieldset > .field__label { padding: 0; }

/* Площадка: нативные радио, спрятанные под .vh, — состояние и клавиатура
   достаются бесплатно, стилизуем соседний span. */
.pForm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pForm__chip { display: inline-flex; }

.pForm__chip span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms, color 200ms;
}

.pForm__chip input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.pForm__chip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Селект: нативный, но со своей стрелкой — системная не совпадает с макетом. */
.pForm__selectWrap {
  position: relative;
  display: block;
}

.pForm__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.pForm__select:invalid { color: var(--placeholder); }

.pForm__chevron {
  position: absolute;
  right: 16px;
  bottom: 19px;
  color: var(--ink-3);
  pointer-events: none;
}

/* Числовые поля печатаются с разрядами, поэтому нужен моноширинный ритм цифр. */
.pForm__field input[data-num] { font-variant-numeric: tabular-nums; }

.pForm__err {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
}

.pForm__submit { margin-top: 24px; }
.pForm__submit[disabled] { opacity: .6; cursor: default; }

.pForm__alt {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-3);
  text-wrap: pretty;
}
.pForm__alt a {
  color: var(--brand);
  font-weight: 600;
}

/* Экран «отправлено» — на месте формы, как состояние «покупка найдена». */
.pForm__done { text-align: center; }
/* Фокус сюда переносит скрипт, с клавиатуры элемент недостижим —
   рамка была бы только шумом. */
.pForm__done:focus { outline: none; }

.pForm__doneIcon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
}

.pForm__doneTitle {
  margin-top: 16px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}

.pForm__doneText {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pForm__doneText a {
  color: var(--brand);
  font-weight: 600;
}

@media (min-width: 768px) {
  .pForm__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pForm__field--wide { grid-column: 1 / -1; }
  .pForm__submit {
    display: flex;
    width: auto;
    min-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   ВОПРОСЫ — модификатор партнёрской страницы
   Разметка и классы общие с главной (.faq / .faqItem, см. faq.css).
   Отличия: секция на --bg (на главной --surface), карточки белые с тенью
   на всех ширинах (на главной десктопные карточки серые и без тени),
   кнопки «Не получил товар» в боковой колонке нет.
   -------------------------------------------------------------------------- */

/* Секция здесь серая, поэтому кнопке телеграма нужен собственный белый фон
   (на главной секция белая и фон кнопки погашен до прозрачного). */
.faq--partners .faq__tg { background: var(--surface); }

/* --------------------------------------------------------------------------
   ФУТЕР — модификатор партнёрской страницы
   Мобильный совпадает с главной; отличается только последняя ссылка
   последней группы — в макете она без разделительной линии.
   -------------------------------------------------------------------------- */
.footer--onLight .footLinks__group:last-child .footLinks__list > li:last-child .footLinks__item {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   НИЖНИЙ БАР (только телефон)
   Одно состояние: доля слева, кнопка справа. Скрытое положение —
   translateY(110%); показывает JS (.is-visible / aria-hidden="false").
   -------------------------------------------------------------------------- */
.buybar--partners {
  justify-content: space-between;
  gap: 16px;
  transform: translateY(110%);
}

.buybar--partners .buybar__cta { padding: 0 22px; }

/* --------------------------------------------------------------------------
   ≥768 — десктопный макет в одноколоночной раскладке
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Как начать */
  .pStart {
    /* тёмная тема блока */
    --pStart-title: var(--on-dark);
    --pStart-text:  var(--on-dark-70);
    --pStart-cap:   var(--on-dark-50);
    --pStart-note:  var(--on-dark-40);
    --pStart-link:  var(--on-dark-70);

    padding: 96px 0;
    background: var(--ink-block);
    color: var(--on-dark);
  }

  .pStart__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }

  /* Раньше карточка на тёмной секции «растворялась»: внутри была одна кнопка.
     Теперь внутри форма, и ей нужна светлая подложка — как у карточки
     результата в калькуляторе выше. */
  .pStart__card {
    margin-top: 32px;
    max-width: none;
    padding: 32px;
    border-radius: 28px;
  }

  .pStart__note { margin-top: 24px; }

  /* Вопросы */
  .faq--partners { background: var(--bg); }

  .faq--partners .faqItem {
    background: var(--surface);
    box-shadow: var(--sh-card);
  }

  .faq--partners .faqItem__mark { background: transparent; }

  /* Футер */
  .footer--onLight {
    background: var(--surface);
    border-top: 1px solid var(--line-06);
  }

  .footer--onLight .footLinks {
    background: var(--bg);
    box-shadow: none;
  }
}

/* === Служебные страницы: «Спасибо за покупку» и FAQ по ошибкам === */
.upage { padding: 40px 0 80px; }
.upage__head { margin-bottom: 34px; }
.upage__logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.upage__card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 34px; }
.upage__ok { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-10); color: var(--brand); margin-bottom: 20px; }
.upage__title { margin: 0 0 10px; }
.upage__lead { color: var(--ink-2); margin: 0 0 26px; font-size: 17px; line-height: 1.5; }
.upage__sub { margin: 0 0 14px; }
.dl { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.dl__item { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .15s ease, transform .15s ease; }
.dl__item:hover { border-color: var(--brand); transform: translateY(-1px); }
.dl__item svg { flex: none; color: var(--brand); }
.upage__note { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.upage__foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.upage__foot a, .upage__note a, .faqp__p a { color: var(--brand); }
.faqp__item { margin: 0 0 42px; }
.faqp__q { margin: 0 0 12px; }
.faqp__p { color: var(--ink-2); line-height: 1.65; margin: 0 0 12px; }
.faqp__list { color: var(--ink-2); line-height: 1.75; margin: 0 0 14px; padding-left: 20px; }
.faqp__shot { display: block; width: 100%; max-width: 340px; height: auto; border: 1px solid var(--line); border-radius: 14px; margin: 14px 0 6px; }
.faqp__cap { color: var(--ink-3); font-size: 13px; margin: 0 0 20px; }
@media (max-width: 767px) {
  .upage { padding: 26px 0 60px; }
  .upage__card { padding: 22px; border-radius: 16px; }
}

/* === Юридические документы (оферта, политика) === */
.doc { min-width: 0; overflow-wrap: anywhere; }
.doc .upage__title { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 767px) {
  .doc .upage__title { font-size: clamp(24px, 7vw, 32px); line-height: 1.15; }
}
.doc__meta { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.doc__h { margin: 34px 0 12px; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.doc__h:first-of-type { margin-top: 0; }
.doc__p { color: var(--ink-2); line-height: 1.7; margin: 0 0 12px; }
.doc__list { color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; padding-left: 20px; }
.doc__list li { margin-bottom: 8px; }
.doc a { color: var(--brand); }