/* ==========================================================================
   MT English Lab — визуальный мир

   Канон: третий референс клиента (жёлто-розовый лендинг репетитора).
   Страница белая, содержимое живёт в крупных скруглённых цветных блоках
   с воздухом между ними. Жёлтый несёт главные смыслы, розовый — действие,
   рукописные пометки ставят акценты как маркер на полях тетради.

   Одно отступление от референса, намеренное: у него розовая кнопка
   с белым текстом даёт контраст 3.2:1 при норме 4.5:1. Кнопочный розовый
   углублён до #d62e5c (4.8:1), исходный светлый оставлен для заливок,
   где текст тёмный. Язык дизайна сохранён, читаемость — тоже.
   ========================================================================== */

/* --- 1. Токены ---------------------------------------------------------- */
:root {
  /* Поверхности */
  --page:      #fefaf9;   /* фон страницы */
  --card:      #ffffff;   /* карточки на цветном */
  --yellow:    #fde066;   /* главный жёлтый блок */
  --yellow-2:  #fcf3bd;   /* светлый жёлтый, вложенные карточки */
  --pink:      #fdeef0;   /* мягкий розовый блок */
  --pink-2:    #fbdde3;   /* розовая карточка */

  /* Действие */
  --hot:       #d62e5c;   /* кнопки, белый текст поверх: 4.8:1 */
  --hot-deep:  #b51f48;   /* наведение */
  --hot-soft:  #f2597f;   /* заливки и пометки, текста поверх нет */

  /* Текст и линии */
  --ink:       #191713;
  --ink-2:     #55504a;
  --ink-3:     #6d6760;
  --line:      #eae3dc;
  --line-ink:  #191713;

  /* Форма: блоки 28, карточки 20, поля ввода 14, кнопки и чипы — пилюля */
  --r-block: 28px;
  --r-card:  20px;
  --r-input: 14px;
  --r-pill:  999px;

  /* Тень: всегда со смещением и мягким размытием, тонированная в тёплый */
  --shadow-sm: 0 2px 4px rgba(60, 42, 30, .05), 0 6px 16px rgba(60, 42, 30, .05);
  --shadow-md: 0 4px 10px rgba(60, 42, 30, .07), 0 18px 40px rgba(60, 42, 30, .08);

  /* Ритм */
  --gap:     clamp(14px, 1.6vw, 22px);
  --section: clamp(40px, 5vw, 76px);
  --shell:   1280px;

  --z-header: 100;
  --z-menu:   200;
  --z-modal:  300;
  --z-cookie: 400;

  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Мир светлый по сцене использования: дневной свет, телефон в руке,
     страницу открывают на минуту чтобы оплатить. Тёмной темы нет. */
  color-scheme: light;
}

/* --- 2. База ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Rubik, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* Поверхности браузера тоже принадлежат дизайну */
::selection { background: var(--yellow); color: var(--ink); }
:root { caret-color: var(--hot); accent-color: var(--hot); scrollbar-color: var(--hot-soft) var(--pink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pink); }
::-webkit-scrollbar-thumb { background: var(--hot-soft); border-radius: var(--r-pill); border: 3px solid var(--pink); }
::-webkit-scrollbar-thumb:hover { background: var(--hot); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 3px;
  border-radius: 6px;
}

:target { scroll-margin-top: 104px; }
section[id] { scroll-margin-top: 96px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 32px);
}

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

/* --- 3. Типографика ----------------------------------------------------- */
.display {
  font-weight: 700;
  font-size: clamp(2.1rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.h3 {
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.lede {
  font-size: clamp(1.03rem, .98rem + .3vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

.small { font-size: .9375rem; line-height: 1.5; }
.muted { color: var(--ink-2); }

/* Рукописная пометка: единственный второй шрифт на странице */
.hand {
  font-family: Caveat, cursive;
  font-weight: 700;
  color: var(--hot);
  line-height: 1;
}
.hand--lg { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.hand--sm { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }

/* Обводка от руки вокруг слова.
   max-width: none обязателен: базовое правило для svg ставит max-width: 100%
   и без отмены обрезает овал до ширины самого слова — обводка заезжала
   на буквы справа. preserveAspectRatio="none" в разметке: иначе овал
   ужимается по меньшему масштабу и снова не достаёт до краёв слова. */
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled > svg {
  position: absolute; top: -20%; left: -13%;
  width: 122%; height: 144%; max-width: none;
  pointer-events: none; overflow: visible; color: var(--hot-soft);
}

/* Подчёркивание от руки. Рисунок живёт фоном, а не отдельным элементом:
   абсолютный SVG умеет лечь только под весь блок целиком, и на узком экране
   штрих торчал на 199px правее последней строки. Фон с box-decoration-break
   подчёркивает каждую строку по её собственной ширине. */
.underlined {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c48-5 108-7 158-5 40 2 96 5 138 2' fill='none' stroke='%23f2597f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .38em;
  padding-bottom: .42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- 4. Блоки ----------------------------------------------------------- */
.block {
  border-radius: var(--r-block);
  padding: clamp(22px, 3.4vw, 52px);
}
.block--yellow { background: var(--yellow); }
.block--pink   { background: var(--pink); }
.block--card   { background: var(--card); border: 1px solid var(--line); }

/* --- 5. Кнопки ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--hot);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .12s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover  { background: var(--hot-deep); }
.btn:active { transform: translateY(1px); }

/* Тёмная кнопка: работает на любом цветном фоне */
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--ink:hover { background: #322c25; }

/* Обводка по тёмному контуру, как в референсе */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

/* Белая кнопка на цветном блоке */
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: transparent; }
.btn--white:hover { background: #fff; box-shadow: var(--shadow-md); }

.btn--sm    { padding: 11px 20px; font-size: .9375rem; }
.btn--wide  { width: 100%; }

/* На узком экране длинная подпись должна переноситься, а не обрезаться.
   На десктопе перенос запрещён — там ширины хватает всем кнопкам. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; }
}
/* Выключенная кнопка. Прозрачность .45 давала подписи 1.99:1 к своему фону,
   а форма открывается именно в этом состоянии — до галочки согласия.
   Бледная малиновая заливка с углублённым текстом: 4.63:1, и по цвету видно,
   что кнопка ещё не активна. */
.btn[disabled], .btn[aria-disabled="true"] {
  --btn-bg: color-mix(in srgb, var(--hot) 22%, #fff);
  --btn-fg: var(--hot-deep);
  --btn-bd: transparent;
  cursor: not-allowed; pointer-events: none;
}

.btn__arrow { flex-shrink: 0; width: 18px; height: 18px; transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--spin { position: relative; color: transparent; pointer-events: none; }
.btn--spin::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.textlink {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--hot-soft); text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s var(--ease);
}
.textlink:hover { text-decoration-color: var(--hot); }

/* --- 6. Чипы ------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 500; line-height: 1.3;
}
.chip--yellow { background: var(--yellow); border-color: transparent; }
.chip--pink   { background: var(--pink-2); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- 7. Шапка ----------------------------------------------------------- */
/* Подложка шапки. 88% пропускали проезжающий контент: тёмный подвал сдвигал
   канал R на 27 из 255 (11%), жёлтый блок — канал B на 18. При 95% сдвиг
   падает до 11 и 7 — плашка читается как плашка, размытие остаётся. */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding-block: 12px;
  background: color-mix(in srgb, var(--page) 95%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header__bar {
  display: flex; align-items: center; gap: 20px;
  height: 62px; padding: 0 10px 0 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease);
}
.header[data-stuck="true"] .header__bar { box-shadow: var(--shadow-md); }

.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.035em;
  text-decoration: none; white-space: nowrap;
}
.brand__mark {
  display: grid; place-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--yellow); color: var(--ink);
  font-size: .75rem; font-weight: 700; letter-spacing: -.04em;
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); }
.nav__link {
  text-decoration: none; font-size: .9375rem; font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link:hover { color: var(--ink); }

.header__cta { flex-shrink: 0; }
.burger {
  display: none; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--page); cursor: pointer; color: var(--ink);
}
.burger__box { display: block; width: 18px; height: 12px; position: relative; }
.burger__box::before, .burger__box::after, .burger__box span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .28s var(--ease), opacity .18s var(--ease);
}
.burger__box::before { top: 0; }
.burger__box span    { top: 5px; }
.burger__box::after  { bottom: 0; }
.burger[aria-expanded="true"] .burger__box::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span    { opacity: 0; }
.burger[aria-expanded="true"] .burger__box::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__cta { margin-inline-start: auto; }
  .header__bar { gap: 10px; padding-right: 8px; }
}
/* Ниже 384px содержимое плашки перестаёт в неё влезать: логотип, кнопка
   и бургер требуют 331.9px при внутренней ширине 308 на экране 360.
   Бургер вылезал за белую плашку на 23.9px и за экран на 0.9px — появлялась
   горизонтальная прокрутка. Убираем стрелку из маленькой кнопки шапки
   (28px вместе с зазором) и поджимаем зазоры: остаётся 293.9px. */
@media (max-width: 420px) {
  .header__cta .btn { padding: 10px 12px; font-size: .875rem; }
  .header__cta .btn__arrow { display: none; }
  .header__bar { padding-left: 14px; gap: 8px; }
  .brand { gap: 6px; }
}
/* На самых узких экранах остаётся знак «MT»: доступное имя ссылки
   задано через aria-label, поэтому смысл не теряется. */
@media (max-width: 359px) {
  .brand__name { display: none; }
}

/* Панель живёт рядом с шапкой, а не внутри неё: у .header есть backdrop-filter,
   а он делает элемент содержащим блоком для fixed-потомков и в WebKit ещё
   и обрезает их по своей рамке. Отступы по бокам совпадают с полем .shell,
   иначе панель шире плашки шапки на 9–14px в диапазоне 700–940px. */
.mobile-menu {
  position: fixed; z-index: var(--z-menu);
  top: 86px;
  inset-inline: max(clamp(14px, 3vw, 32px),
                    calc((100% - var(--shell)) / 2 + clamp(14px, 3vw, 32px)));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  box-shadow: var(--shadow-md);
  padding: 8px 20px 18px;
  transform: translateY(-10px) scale(.98);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobile-menu__link {
  display: block; padding: 14px 2px; text-decoration: none;
  font-size: 1.0625rem; font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-menu li:last-child .mobile-menu__link { border-bottom: 0; }

/* --- 8. Первый экран ---------------------------------------------------- */
.hero { padding-block: clamp(10px, 1.6vw, 20px) var(--section); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--gap);
  align-items: stretch;
}

.hero__pitch {
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px);
  position: relative;
  min-height: clamp(380px, 46vw, 520px);
}
.hero__title { max-width: 15ch; }
.hero__sub { max-width: 40ch; font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); color: var(--ink); opacity: .78; }
.hero__actions { margin-top: auto; display: grid; gap: 12px; }
.hero__note { display: flex; align-items: center; gap: 10px; }

.hero__media { position: relative; display: grid; }
.hero__photo {
  border-radius: var(--r-block);
  overflow: hidden;
  min-height: clamp(380px, 46vw, 520px);
  background: var(--yellow-2);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__chips {
  position: absolute; inset-inline: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hero__chips .chip { box-shadow: var(--shadow-sm); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__pitch, .hero__photo { min-height: 0; }
  .hero__photo { aspect-ratio: 4 / 3; }
  .hero__actions .btn { width: 100%; }
}

/* Слот под фотографию: честная заглушка, а не имитация снимка */
.slot {
  display: grid; place-content: center; align-content: center; gap: 8px;
  text-align: center; padding: 26px; height: 100%;
  background: var(--yellow-2);
  border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: inherit;
  color: var(--ink-2);
}
.slot__label { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.slot__meta  { font-size: .8125rem; }
.slot--portrait { aspect-ratio: 4 / 5; }
.slot--wide     { aspect-ratio: 3 / 2; }

/* --- 9. Заголовки секций ------------------------------------------------ */
.section { padding-block: 0 var(--section); }
.section__head {
  display: grid; gap: 12px; max-width: 58ch;
  margin-bottom: clamp(20px, 2.6vw, 34px);
}

/* --- 10. Форматы и цены ------------------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

.price {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-block);
  background: var(--card);
  border: 1px solid var(--line);
}
.price--yellow  { background: var(--yellow);   border-color: transparent; }
.price--yellow2 { background: var(--yellow-2); border-color: transparent; }
.price--pink    { background: var(--pink);     border-color: transparent; }

.price--a { grid-column: span 7; }
.price--b { grid-column: span 5; }
.price--c { grid-column: span 5; }
.price--d { grid-column: span 7; }
.price--e { grid-column: span 5; }
.price--f { grid-column: span 7; }

.price__desc  { color: var(--ink); opacity: .72; font-size: .98rem; }
/* baseline, а не last baseline: строк в элементах всё равно по одной, результат
   тот же, но «last baseline» не понимают старые движки — там объявление
   отбрасывается целиком и align-items падает на stretch, из-за чего «в месяц»
   уезжает к верхнему краю цифры вместо базовой линии. */
.price__cost  { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__num   { font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); letter-spacing: -.045em; line-height: 1; }
.price__unit  { font-size: .9375rem; opacity: .7; }
.price__note  { font-size: .875rem; opacity: .68; }
.price__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Тарифные строки внутри карточки: пакет, сумма, кнопка.
   Цена — главное на этой странице, поэтому плотность здесь оправдана. */
.tiers { margin-top: auto; display: grid; gap: 9px; }
.tier {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(25, 23, 19, .07);
  border-radius: var(--r-card);
}
/* Название — своя строчная сетка. Пока метка «выгоднее» была строчным блоком
   с отступом слева, при переносе она оставалась висеть отдельной строкой
   с лишними 6px слева. Как элемент флекса она переносится вровень с названием. */
.tier__name {
  flex: 1 1 150px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 6px; row-gap: 2px;
  font-weight: 600; font-size: .95rem; line-height: 1.25;
}
.tier__per  { flex: 1 0 100%; font-weight: 400; font-size: .8125rem; opacity: .66; }
/* Ширина суммы фиксируется по самой длинной цене: иначе перенос кнопки
   решался отдельно для каждой строки, и в одной карточке «Оплатить» стояла
   в строке, а у соседнего пакета уезжала под неё. */
.tier__sum  {
  flex: 0 0 auto; min-width: 5em; text-align: end;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; white-space: nowrap;
}
.tier .btn  { margin-inline-start: auto; }
.tier--best { background: #fff; border-color: rgba(25, 23, 19, .14); }
.tier__flag {
  display: inline-block; padding: 2px 9px;
  border-radius: var(--r-pill); background: var(--hot); color: #fff;
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
}
@media (max-width: 520px) {
  .tier .btn { margin-inline-start: 0; width: 100%; }
}

@media (max-width: 1040px) {
  .price--a, .price--b, .price--c, .price--d, .price--e, .price--f { grid-column: span 6; }
}
@media (max-width: 700px) {
  .price--a, .price--b, .price--c, .price--d, .price--e, .price--f { grid-column: 1 / -1; }
  .price__actions .btn { width: 100%; }
}

/* --- 11. Как я работаю -------------------------------------------------- */
.method__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 56px); align-items: start;
}
.method__copy { display: grid; gap: 20px; align-content: start; }
.method__copy .lede { color: var(--ink); opacity: .8; }

.principles { display: grid; gap: 10px; }
.principle {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--r-card);
  font-size: 1.02rem; font-weight: 500;
}
.principle svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--hot); }

@media (max-width: 860px) { .method__grid { grid-template-columns: 1fr; } }

/* --- 12. Как начать ----------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.step {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-block);
  background: var(--card); border: 1px solid var(--line);
}
.step:nth-child(1) { background: var(--yellow);   border-color: transparent; }
.step:nth-child(3) { background: var(--yellow-2); border-color: transparent; }
.step__no {
  display: grid; place-content: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: .875rem; font-weight: 600;
}
.step:nth-child(1) .step__no { background: var(--hot); }
.step__title { font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; }
.step__text  { font-size: .9375rem; opacity: .72; }

.start__tail {
  margin-top: var(--gap);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
  background: var(--pink); border-radius: var(--r-block);
}
.start__tail p { flex: 1 1 320px; }

@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .start__tail .btn { width: 100%; }
}

/* --- 13. Обо мне -------------------------------------------------------- */
.about__grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(22px, 3.4vw, 52px); align-items: start;
}
.about__media { display: grid; gap: var(--gap); position: sticky; top: 100px; }
.about__img { width: 100%; border-radius: var(--r-card); object-fit: cover; }
.about__prose { display: grid; gap: 18px; max-width: 64ch; }
.about__prose p { color: var(--ink); opacity: .84; }
.about__prose p:first-of-type {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  line-height: 1.3; letter-spacing: -.02em; font-weight: 600; opacity: 1;
}
.about__facts { margin-top: 6px; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .about__media { grid-template-columns: 1fr; } }

/* --- 14. Частые вопросы ------------------------------------------------- */
.faq { display: grid; gap: 10px; max-width: 900px; }
.qa { background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.qa__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 24px; background: none; border: 0;
  font: inherit; font-weight: 600; font-size: 1.05rem; color: inherit;
  text-align: start; cursor: pointer; letter-spacing: -.015em;
}
.qa__icon {
  flex-shrink: 0; display: grid; place-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--ink); position: relative;
}
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 2px;
}
.qa__icon::before { width: 12px; height: 2px; }
.qa__icon::after  { width: 2px; height: 12px; transition: transform .28s var(--ease); }
.qa__btn[aria-expanded="true"] .qa__icon { background: var(--hot); color: #fff; }
.qa__btn[aria-expanded="true"] .qa__icon::after { transform: scaleY(0); }

/* Раскрытие через grid-template-rows: анимируется без пересчёта раскладки
   и без измерения высоты скриптом. Правило с :has() покрывает современные
   браузеры, атрибут data-open — страховка для остальных. */
.qa__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;          /* обрезаем сами: отступы вложенного блока
                                иначе торчат из схлопнутой строки грида */
  transition: grid-template-rows .32s var(--ease);
}
.qa__panel[data-open="true"],
.qa:has(.qa__btn[aria-expanded="true"]) .qa__panel { grid-template-rows: 1fr; }

/* Отступы живут на содержимом, а не на элементе сетки: собственный padding
   элемента задал бы строке минимальную высоту, и схлопнутая панель осталась
   бы полоской в 22px вместо нуля. */
.qa__inner { min-height: 0; padding: 0; color: var(--ink-2); }
.qa__inner > * { padding: 0 24px 22px; max-width: 62ch; }

/* --- 15. Финальный призыв ----------------------------------------------- */
.cta__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3.4vw, 52px); align-items: center;
}
.cta__copy { display: grid; gap: 16px; align-content: center; }
.cta__copy .lede { color: var(--ink); opacity: .8; }
@media (max-width: 860px) { .cta__grid { grid-template-columns: 1fr; } }

/* --- 16. Формы ---------------------------------------------------------- */
.form {
  display: grid; gap: 16px;
  padding: clamp(22px, 2.8vw, 34px);
  background: var(--card);
  border-radius: var(--r-block);
}
.field { display: grid; gap: 7px; }
.field__label { font-weight: 600; font-size: .9375rem; }
.field__req   { color: var(--hot); }
.field__hint  { font-size: .8125rem; color: var(--ink-3); }

.input, .textarea {
  width: 100%; padding: 14px 16px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--page);
  border: 2px solid var(--line);
  border-radius: var(--r-input);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
/* Смены цвета рамки для индикации фокуса мало. Кольцо рисуем тенью, а не
   outline: тень видна при любом способе фокусировки, тогда как :focus-visible
   у текстовых полей срабатывает не во всех сценариях. Плюс явный outline
   для клавиатуры — правило с :where() имеет нулевую специфичность
   и проигрывает строке ниже. */
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--hot);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 28%, transparent);
}
.input:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--hot); outline-offset: 2px;
}
.textarea { min-height: 96px; resize: vertical; }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea { border-color: #b3261e; background: #fff5f4; }
.field__error { font-size: .8125rem; color: #a01d16; font-weight: 500; display: none; }
.field[data-invalid="true"] .field__error { display: block; }

.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice__item { position: relative; }
.choice__item input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__item span {
  display: block; padding: 12px 22px;
  border: 2px solid var(--line); border-radius: var(--r-pill);
  background: var(--page); font-size: .9375rem; font-weight: 500;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.choice__item input:checked + span { border-color: var(--ink); background: var(--yellow); }
.choice__item input:focus-visible + span { outline: 3px solid var(--hot); outline-offset: 3px; }

.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.consent input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.consent label { font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.consent a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot-soft); text-underline-offset: 3px; }

.form__status { font-size: .9375rem; font-weight: 500; display: none; }
.form__status[data-kind] { display: block; }
.form__status[data-kind="error"] { color: #a01d16; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 17. Подвал --------------------------------------------------------- */
.footer { padding-block: 0 clamp(20px, 3vw, 36px); }
.footer__inner {
  background: var(--ink); color: #f6f1e9;
  border-radius: var(--r-block);
  padding: clamp(28px, 3.4vw, 48px);
}
/* auto-fit, а не жёсткие три колонки: на правовых страницах колонок две,
   и третий трек оставался пустым — до 295px мёртвого места справа. */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(22px, 3vw, 48px);
}
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__title { font-weight: 600; font-size: .875rem; }
.footer__list { display: grid; gap: 9px; font-size: .9375rem; color: #d5cec3; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer .brand__mark { background: var(--yellow); }
.footer__legal {
  margin-top: clamp(24px, 3vw, 38px); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; gap: 8px; font-size: .8125rem; color: #b3aca2;
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; } }

/* --- 18. Модальное окно ------------------------------------------------- */
.modal {
  width: min(560px, calc(100vw - 24px));
  padding: 0; border: 0; border-radius: var(--r-block);
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-md);
}
.modal::backdrop { background: rgba(25, 23, 19, .5); backdrop-filter: blur(3px); }
.modal__head {
  display: flex; align-items: start; justify-content: space-between; gap: 16px;
  padding: 26px clamp(22px, 3vw, 32px) 0;
}
.modal__close {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-content: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--page); color: var(--ink); cursor: pointer; font-size: 19px; line-height: 1;
}
.modal__close:hover { background: var(--yellow); border-color: transparent; }
.modal .form { box-shadow: none; background: transparent; padding: 18px clamp(22px, 3vw, 32px) clamp(24px, 3vw, 32px); }

/* --- 19. Уведомление о cookie ------------------------------------------- */
.cookie {
  position: fixed; z-index: var(--z-cookie);
  inset-inline: 14px; inset-block-end: 14px;
  max-width: 660px; margin-inline: auto;
  display: none; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-block); box-shadow: var(--shadow-md);
  font-size: .875rem; color: var(--ink-2);
}
.cookie[data-show="true"] { display: flex; }
.cookie__text { flex: 1 1 250px; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- 20. Движение -------------------------------------------------------
   Один поставленный момент: вход первого экрана. Блоки въезжают по очереди,
   как будто их разложили на стол. Всё остальное на странице обходится
   спокойным появлением при прокрутке в той же грамматике.
   ------------------------------------------------------------------------ */
@keyframes deal {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero [data-deal] {
    animation: deal .72s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
}

/* Появление при прокрутке — целиком на CSS. Скрытие живёт внутри @supports,
   поэтому там, где браузер не умеет привязывать анимацию к прокрутке,
   контент просто виден сразу. Пустой страницы не бывает ни при каком сбое. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- 21. Текстовые страницы (оферта, политика, согласие) ---------------- */
.doc {
  max-width: 820px; margin-inline: auto;
  padding: clamp(26px, 4vw, 56px);
  background: var(--card); border-radius: var(--r-block);
  box-shadow: var(--shadow-sm);   /* белое на почти белом давало контраст 1.04:1
                                     и скругления в 28px не было видно вовсе */
  margin-block: clamp(20px, 3vw, 40px) var(--section);
}
.doc h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 10px; }
/* Нижняя граница поднята: на 390px старая давала 18.4px против 17px у текста,
   и заголовок раздела почти не отличался от абзаца под ним. */
.doc h2 { font-size: clamp(1.3rem, 1rem + .8vw, 1.45rem); margin-top: 38px; margin-bottom: 12px; letter-spacing: -.02em; }
.doc h3 { font-size: 1.2rem; margin-top: 24px; margin-bottom: 8px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin-bottom: 14px; max-width: 72ch; }
.doc ul, .doc ol { margin: 0 0 16px; padding-inline-start: 22px; display: grid; gap: 8px; max-width: 72ch; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc a  { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot-soft); text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .9375rem; }
/* Без min-width браузер сжимает колонки до 7 знаков в строке вместо того,
   чтобы дать обёртке прокрутиться: «итого 40 000 ₽» рвалось пополам,
   а строки вырастали до 189px. Значение подобрано по самой тяжёлой таблице
   (прайс в оферте, 4 колонки): при 42rem ячейки держат 2–3 строки. */
.doc__wrap table { min-width: 42rem; }
.doc th, .doc td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 600; color: var(--ink); }
/* Линия под шапкой таблицы была 1.27:1 — при высоких строках связать ячейку
   со строкой было нечем. Плюс лёгкая зебра. */
.doc thead th { border-bottom: 2px solid var(--ink-3); }
.doc tbody tr:nth-child(even) { background: #faf7f4; }
.doc blockquote {
  margin: 0 0 24px; padding: 18px 22px;
  background: var(--yellow-2); border-radius: var(--r-card);
  color: var(--ink); font-size: .9375rem;
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc__back { margin-bottom: 24px; display: inline-block; }
/* Полоса прокрутки здесь наложенная и невидимая, поэтому спрятанная справа
   колонка ничем себя не выдавала. Тень у правого края показывает, что там
   есть продолжение, и гаснет, когда таблица докручена до конца. */
.doc__wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--card) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(60,42,30,.16), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(60,42,30,.16), transparent) right / 14px 100% no-repeat scroll;
}
/* Обёртка становится фокусируемой сама собой, когда содержимое не влезает.
   Без этого правила ей досталось бы системное кольцо вместо фирменного. */
.doc__wrap:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; border-radius: 6px; }

/* Углублённый малиновый вместо основного: на розовой подложке основной
   даёт 3.76:1 при норме 4.5:1, углублённый — 5.09:1.
   box-decoration-break: на переносе строки заливка иначе режется по буквам,
   без скругления и без боковых отступов. */
.doc mark {
  background: var(--pink-2); color: var(--hot-deep);
  border-radius: 5px; padding: 1px 6px; font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- 22. Служебные страницы --------------------------------------------- */
.plain {
  min-height: 100dvh;
  display: grid; place-content: center; justify-items: center;
  gap: 20px; text-align: center;
  padding: clamp(24px, 6vw, 64px);
}
.plain__badge {
  display: grid; place-content: center;
  width: clamp(96px, 16vw, 140px); aspect-ratio: 1; border-radius: var(--r-pill);
  background: var(--yellow);
  font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); letter-spacing: -.05em;
}
.plain .lede { text-align: center; margin-inline: auto; }
.plain__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }