/*
 * Стили сайта «Стоп Переплата».
 * Порядок: шрифты → токены (docs/design-system/tokens.css) → компоненты
 * (docs/design-system/components.css, только нужные экрану секции) → стили экранов.
 * Токены и компоненты меняются сначала в docs/design-system/, потом переносятся сюда.
 * Квиз, результат, форма, шторка — SP-37…SP-40, cookie-баннер и юридические страницы — SP-43.
 */

/* Шрифты только со своего домена: внешний хост шрифтов — передача IP посетителя
   за рубеж, в политике ПДн её нет. Подмножество latin + cyrillic + ₽ — команда сборки в PR SP-36. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-var.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-italic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- Цвет: основа ---------- */
  --color-bg: #fff7ee; /* крем, фон страницы */
  --color-surface: #ffffff; /* карточки, ответы, поля */
  --color-surface-soft: #eee4f6; /* лаванда: круги иконок, «скоро», лента ставок, честная плашка */
  --color-text: #2b1838; /* баклажан: текст, заголовки, логотип — 15,34:1 на креме */
  --color-text-secondary: #6e5a7a; /* слива: подсказки, подписи — 5,81:1 крем, 5,01:1 лаванда */
  --color-border: #e9dfd5; /* пудра: декоративные рамки и разделители (1,3:1 — не для полей) */
  --color-border-strong: #8f7e99; /* рамки полей, чекбоксов, secondary-кнопок — 3,53:1 крем */
  --color-inverse-bg: #2b1838; /* подвал */
  --color-inverse-text: #fff7ee; /* 15,34:1 */
  --color-inverse-text-secondary: #c9b9cf; /* 8,78:1 */

  /* ---------- Цвет: действие и фокус ---------- */
  --color-accent: #ff9a5a; /* абрикос: фон primary, прогресс, знак. Текст на нём — только --color-on-accent */
  --color-accent-hover: #ff8b45; /* текст 7,00:1 */
  --color-accent-active: #f27a33; /* текст 5,89:1 */
  --color-on-accent: #2b1838; /* 7,77:1 */
  --color-focus: #2b1838; /* кольцо фокуса; на тёмном фоне — --color-inverse-text */

  /* ---------- Цвет: статусы ---------- */
  --color-save: #bdebd2; /* мята: только экономия и «готово». Текст на ней — --color-text, 12,38:1 */
  --color-warning-text: #9a4a12; /* 5,89:1 крем, 5,28:1 на --color-warning-bg */
  --color-warning-bg: #ffe8d6;
  --color-error-text: #b3261e; /* 6,16:1 крем, 6,54:1 белый */
  --color-error-bg: #fde7e4; /* текст ошибки на ней 5,52:1 */

  /* ---------- Цвет: служебные ---------- */
  --color-disabled-bg: #f1eae3;
  --color-disabled-text: #8a7a92; /* 3,34:1 — исключение WCAG для неактивных элементов */
  --color-overlay: rgb(43 24 56 / 0.45);

  /* ---------- Типографика ---------- */
  --font-ui:
    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-human: 'Lora', Georgia, 'Times New Roman', serif;

  /* размер / межстрочный — мобильные значения; десктоп переопределён ниже */
  --text-amount-size: 40px;
  --text-amount-lh: 44px; /* 800, -0.03em, tabular-nums */
  --text-amount-hero-size: 48px;
  --text-amount-hero-lh: 52px; /* итог ResultCard; 800, -0.035em */
  --text-amount-hero-min: 44px; /* нижняя граница итога на узком экране */
  --text-amount-was-size: 28px;
  --text-amount-was-lh: 34px; /* старая сумма ResultCard; 800; на телефоне меньше ради SP-24 */
  --text-h1-size: 28px;
  --text-h1-lh: 34px; /* 800, -0.03em */
  --text-h2-size: 22px;
  --text-h2-lh: 28px; /* 800, -0.025em */
  --text-h3-size: 18px;
  --text-h3-lh: 24px; /* 800, -0.02em */
  --text-body-lg-size: 17px;
  --text-body-lg-lh: 26px; /* 500 */
  --text-body-size: 16px;
  --text-body-lh: 24px; /* 500; 700 для значений */
  --text-body-sm-size: 14px;
  --text-body-sm-lh: 20px; /* 500 */
  --text-caption-size: 13px;
  --text-caption-lh: 18px; /* 600 */
  --text-micro-size: 12px;
  --text-micro-lh: 16px; /* 500; минимум для любого текста */
  --text-overline-size: 12px;
  --text-overline-lh: 16px; /* 700, +0.08em, uppercase */
  --text-button-size: 16px;
  --text-button-lh: 20px; /* 700 */
  --text-human-size: 16px;
  --text-human-lh: 24px; /* Lora Italic 400 */

  --weight-regular: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --tracking-tight: -0.03em;
  --tracking-hero: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.02em;
  --tracking-overline: 0.08em;

  /* ---------- Отступы (шаг 4 px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Раскладка ---------- */
  --page-gutter: var(--space-5); /* 20 px телефон, 32 планшет, 40 десктоп */
  --section-gap: var(--space-12); /* 48 телефон, 80 десктоп */
  --container-narrow: 560px; /* квиз, результат, форма, шторка */
  --container-wide: 1120px; /* главный на десктопе */
  --container-result: 880px; /* ResultCard на десктопе (исключение из narrow) */
  --grid-gap: var(--space-6); /* 24 */
  --tap-min: 48px; /* минимальная зона нажатия */
  --control-height: 52px; /* кнопки, ответы, поля */
  --control-height-sm: 44px; /* кнопки cookie-баннера, чипы */

  /* ---------- Формы ---------- */
  --radius-xs: 6px; /* чекбокс */
  --radius-md: 14px; /* ответы квиза, поля, раскрывашка */
  --radius-lg: 20px; /* карточки, плашки, cookie-баннер */
  --radius-xl: 24px; /* шторка сверху, карточка примера на десктопе */
  --radius-pill: 999px; /* кнопки, пилюли, чипы, прогресс */

  --border-width: 1px;
  --border-width-strong: 2px; /* выбранный ответ, ошибка, фокус поля */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  --shadow-raised: 0 6px 24px rgb(43 24 56 / 0.14); /* cookie-баннер */
  --shadow-sheet: 0 -8px 32px rgb(43 24 56 / 0.18); /* шторка waitlist */

  /* ---------- Движение ---------- */
  --duration-fast: 120ms; /* цвет при наведении и нажатии */
  --duration-base: 200ms; /* выбор ответа, прогресс, смена шага */
  --duration-slow: 320ms; /* шторка, cookie-баннер */
  --duration-ring: 700ms; /* заполнение кольца экономии */
  --duration-strike: 380ms; /* вычерк старой суммы в ResultCard */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 600px) {
  :root {
    --page-gutter: var(--space-8);
    --text-amount-was-size: 34px;
    --text-amount-was-lh: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: var(--space-10);
    --section-gap: var(--space-20);
    --text-amount-size: 56px;
    --text-amount-lh: 60px;
    --text-amount-hero-size: 76px;
    --text-amount-hero-lh: 80px;
    --text-amount-was-size: 52px;
    --text-amount-was-lh: 58px;
    --text-h1-size: 44px;
    --text-h1-lh: 50px;
    --text-h2-size: 28px;
    --text-h2-lh: 34px;
    --text-h3-size: 20px;
    --text-h3-lh: 26px;
    --text-body-lg-size: 19px;
    --text-body-lg-lh: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-ring: 0ms;
    --duration-strike: 0ms;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
img,
svg {
  display: block;
}
button,
input {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--color-text-secondary);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.site-footer :focus-visible {
  outline-color: var(--color-inverse-text);
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* ---------- type ---------- */
.t-amount {
  font-size: var(--text-amount-size);
  line-height: var(--text-amount-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.t-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
}
.t-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h2);
}
.t-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h3);
}
.t-body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
}
.t-body-sm {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}
.t-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-semibold);
}
.t-micro {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
}
.t-overline {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.t-human {
  font-family: var(--font-human);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-human-size);
  line-height: var(--text-human-lh);
}
.t-secondary {
  color: var(--color-text-secondary);
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--page-gutter));
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-5));
}

/* ---------- button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  width: 100%;
  padding: 0 var(--space-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}
.btn:active {
  background: var(--color-accent-active);
  transform: scale(0.98);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy='true'] {
  pointer-events: none;
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
}
.btn--secondary:active {
  background: var(--color-surface-soft);
  border-color: var(--color-text);
}
.btn--secondary[disabled] {
  border-color: var(--color-border);
}

.btn--text {
  width: auto;
  min-height: var(--tap-min);
  padding: 0 var(--space-1);
  background: none;
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
  justify-content: flex-start;
}
.btn--text:hover {
  background: none;
  color: var(--color-text);
  text-decoration: underline;
}
.btn--text:active {
  background: none;
  color: var(--color-text);
}
.btn--text:focus-visible {
  border-radius: var(--radius-xs);
}

.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  font-size: 14px;
  line-height: 18px;
}

.btn__spinner {
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn__spinner {
    animation-duration: 2.4s;
  }
}

@media (min-width: 600px) {
  .btn:not(.btn--text) {
    width: auto;
    min-width: 200px;
  }
}

/* ---------- quiz ---------- */
.quiz-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.quiz-head__back {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.quiz-head__step {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-standard);
}

.answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}
.answer:hover {
  border-color: var(--color-border-strong);
}
.answer[aria-pressed='true'] {
  padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
  border: var(--border-width-strong) solid var(--color-text);
  background: var(--color-surface-soft);
  font-weight: var(--weight-bold);
}
.answer__check {
  display: none;
  width: 20px;
  height: 20px;
  flex: none;
}
.answer[aria-pressed='true'] .answer__check {
  display: block;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-inverse-text);
  font-weight: var(--weight-bold);
}

/* ---------- verdict pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-bold);
}
.pill svg {
  width: 16px;
  height: 16px;
}
.pill--save {
  background: var(--color-save);
  color: var(--color-text);
}
.pill--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.pill--neutral {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

/* ---------- text field ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  font-weight: var(--weight-semibold);
}
.field__input {
  height: var(--control-height);
  padding: 0 14px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 16px; /* не меньше 16 px: иначе iOS увеличивает страницу при фокусе */
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.field__input::placeholder {
  color: var(--color-text-secondary);
}
.field__input:hover {
  border-color: var(--color-text);
}
.field__input:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow:
    inset 0 0 0 1px var(--color-text),
    0 0 0 4px var(--color-surface-soft);
}
.field__input[aria-invalid='true'] {
  border-color: var(--color-error-text);
  box-shadow: inset 0 0 0 1px var(--color-error-text);
}
.field__input[aria-invalid='true']:focus {
  box-shadow:
    inset 0 0 0 1px var(--color-error-text),
    0 0 0 4px var(--color-error-bg);
}
.field__input:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-border);
  color: var(--color-disabled-text);
}
.field__error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  color: var(--color-error-text);
}
.field__error:empty {
  display: none;
}
.field__error svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

/* ---------- result ---------- */
.savings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.savings__main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.savings__ring {
  width: 64px;
  height: 64px;
  flex: none;
}
.savings__ring .track {
  fill: none;
  stroke: var(--color-surface-soft);
  stroke-width: 7;
}
.savings__ring .value {
  fill: none;
  stroke: var(--color-save);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dasharray var(--duration-ring) var(--ease-standard);
}
.savings__amount {
  font-size: 36px;
  line-height: 40px;
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mark-save {
  box-shadow: inset 0 -0.3em 0 var(--color-save);
}
.strike {
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}
@media (min-width: 1024px) {
  .savings__amount {
    font-size: var(--text-amount-size);
    line-height: var(--text-amount-lh);
  }
}

.calc-rows {
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}
.calc-rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 11px 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.calc-rows dd {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.how {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.how summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  padding: 0 14px;
  font-size: 15px;
  font-weight: var(--weight-bold);
  list-style: none;
  cursor: pointer;
}
.how summary::-webkit-details-marker {
  display: none;
}
.how summary svg {
  transition: transform var(--duration-base) var(--ease-standard);
}
.how[open] summary svg {
  transform: rotate(180deg);
}
.how__body {
  padding: 0 14px 14px;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-secondary);
}

.disclaimer {
  padding: 10px 12px;
  border: var(--border-width) solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  color: var(--color-text-secondary);
}

/* ResultCard — заключение на экране результата: старая сумма → итог → дисклеймер → чек-лист.
   На < 600 пункты --wide скрыты (SP-24: primary на первом экране); на ≥ 1024 — 880 px в две колонки. */
.result-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
}
.result-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.result-card__top .pill {
  white-space: nowrap;
}
.result-card__overline {
  display: none;
}
.result-card__title {
  margin-top: var(--space-2);
}
.result-card__was {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.result-card__was-sum {
  font-size: var(--text-amount-was-size);
  line-height: var(--text-amount-was-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-card__was-label {
  font-size: var(--text-caption-size);
  line-height: var(--text-micro-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.result-card__hero {
  margin-top: var(--space-1);
}
.result-card__amount {
  font-size: var(--text-amount-hero-size);
  line-height: var(--text-amount-hero-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-hero);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* line-height: 1 — иначе «до» в 0,5 em сдвигает базовую линию и раздувает строку итога */
.result-card__amount small {
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0;
}
.result-card__unit {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--weight-semibold);
}
.result-card__unit-sub {
  display: block;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-secondary);
}
.result-card__main > .t-body-sm,
.result-card__main > .disclaimer {
  margin-top: var(--space-3);
}
.result-card__checks {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-width) solid var(--color-border);
  display: grid;
  gap: var(--space-2);
}
.result-card__checks li {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-2);
  align-items: start;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}
.result-card__checks b {
  font-weight: var(--weight-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.result-card__checks--wide,
.result-card__checks > .result-card__check--wide {
  display: none;
}
.result-card__tick {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.result-card__tick svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.result-card__tick--ok {
  background: var(--color-save);
}
.result-card__tick--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
@media (min-width: 600px) {
  .result-card {
    padding: var(--space-4);
  }
  .result-card__overline {
    display: block;
  }
  .result-card__checks--wide {
    display: grid;
  }
  .result-card__checks > .result-card__check--wide {
    display: grid;
  }
}
@media (min-width: 1024px) {
  .result-card {
    padding: var(--space-8);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: var(--space-8);
  }
  .result-card__top {
    grid-column: 1 / -1;
  }
  .result-card__checks {
    align-self: end;
    margin: 0;
    padding: 0 0 0 var(--space-8);
    border-top: 0;
    border-left: var(--border-width) solid var(--color-border);
    gap: var(--space-4);
  }
  .result-card__checks li {
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
  }
}

/* Вычерк и маркер, которые рисуются слева направо (ResultCard). .strike и .mark-save — статичные. */
.strike-draw {
  position: relative;
  display: inline-block;
}
.strike-draw::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 0.09em;
  min-height: 2px;
  margin-top: -0.02em;
  background: var(--color-accent);
  border-radius: 2px;
  transform-origin: left center;
}
.mark-draw {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.mark-draw::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.06em;
  height: 0.32em;
  background: var(--color-save);
  z-index: -1;
  transform-origin: left center;
}

/* Появление ResultCard — один раз, на первый показ результата (класс .result--play).
   Только opacity и transform; суммы не «накручиваются». Тайминги — foundations.md, §7. */
.result--play
  :is(
    .result-card,
    .result-card__was,
    .result-card__hero,
    .result-card__main > .t-body-sm,
    .result-card__main > .disclaimer,
    .result-card__checks li
  ),
.result--play > :not(.result-card) {
  opacity: 0;
  transform: translateY(8px);
  animation: result-rise var(--rise-d, var(--duration-base))
    var(--ease-standard) forwards;
  animation-delay: var(--rise-t, 0ms);
}
.result--play .result-card__was {
  --rise-t: 120ms;
}
.result--play .result-card__hero {
  --rise-t: 760ms;
  --rise-d: var(--duration-slow);
}
.result--play .result-card__main > :is(.t-body-sm, .disclaimer) {
  --rise-t: 760ms;
}
.result--play .result-card__checks li:nth-child(1) {
  --rise-t: 1050ms;
  --tick-t: 1150ms;
}
.result--play .result-card__checks li:nth-child(2) {
  --rise-t: 1170ms;
  --tick-t: 1270ms;
}
.result--play .result-card__checks li:nth-child(3) {
  --rise-t: 1290ms;
  --tick-t: 1390ms;
}
.result--play > .quiz__actions {
  --rise-t: 1050ms;
}
.result--play > :not(.result-card, .quiz__actions) {
  --rise-t: 1400ms;
}
.result--play .result-card__tick svg {
  transform: scale(0);
  animation: result-pop var(--duration-base) var(--ease-standard) forwards;
  animation-delay: var(--tick-t, 0ms);
}
.result--play .strike-draw::after {
  transform: scaleX(0);
  animation: result-draw var(--duration-strike) var(--ease-standard) 380ms
    forwards;
}
.result--play .mark-draw::before {
  transform: scaleX(0);
  animation: result-draw var(--duration-slow) var(--ease-standard) 920ms
    forwards;
}
@keyframes result-rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes result-draw {
  to {
    transform: scaleX(1);
  }
}
@keyframes result-pop {
  to {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .result--play
    :is(
      .result-card,
      .result-card__was,
      .result-card__hero,
      .result-card__main > .t-body-sm,
      .result-card__main > .disclaimer,
      .result-card__checks li,
      .result-card__tick svg
    ),
  .result--play > :not(.result-card),
  .result--play .strike-draw::after,
  .result--play .mark-draw::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- checkbox ---------- */
.check {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  cursor: pointer;
}
.check__input {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check__box {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.check__box svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-inverse-text);
  stroke-width: 3;
  opacity: 0;
}
.check__input:checked + .check__box {
  background: var(--color-text);
  border-color: var(--color-text);
}
.check__input:checked + .check__box svg {
  opacity: 1;
}
.check__input:focus-visible + .check__box {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.check__input[aria-invalid='true'] + .check__box {
  border-color: var(--color-error-text);
}
.check a {
  text-decoration: underline;
}
.check + .field__error {
  padding-left: 36px;
}

/* ---------- sheet (waitlist) ---------- */
.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 90dvh;
  margin: auto 0 0;
  padding: var(--space-3) var(--space-5) var(--space-6);
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sheet);
  overflow-y: auto;
}
.sheet::backdrop {
  background: var(--color-overlay);
}
.sheet[open] {
  animation: sheet-in var(--duration-slow) var(--ease-standard);
}
.sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.sheet__close {
  width: 44px;
  height: 44px;
  flex: none;
  margin: -8px -10px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@media (min-width: 600px) {
  .sheet {
    max-width: 480px;
    margin: auto;
    border-radius: var(--radius-xl);
  }
  .sheet__handle {
    display: none;
  }
  @keyframes sheet-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ---------- category card ---------- */
.cat-cards {
  display: grid;
  gap: var(--space-3);
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: 18px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.cat-card:hover {
  border-color: var(--color-border-strong);
}
.cat-card:active {
  transform: scale(0.99);
}
.cat-card__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h3);
}
.cat-card__text {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-secondary);
}
.cat-card__go {
  margin-top: var(--space-1);
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.cat-card--soon {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  background: var(--color-bg);
  border-style: dashed;
  border-color: var(--color-border-strong);
}
.cat-card--soon:hover {
  background: var(--color-surface);
  border-color: var(--color-text);
}
.cat-card--soon .cat-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-card--soon .cat-card__title {
  font-size: 16px;
  line-height: 22px;
}
.cat-card--soon .cat-card__text {
  font-size: 13px;
  line-height: 18px;
}

/* Карточка из объявления (?card=). Вторая линия рамки — inset-тенью, чтобы не сдвигать содержимое. */
.cat-card--featured,
.cat-card--featured:hover {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.icon-circle {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-soft);
}
.icon-circle svg {
  width: 20px;
  height: 20px;
}
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tag-soon {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .cat-cards--active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
  .cat-cards--soon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
  /* Статус в DOM — сразу после тапнутой карточки; на десктопе — строкой под группой */
  .cat-cards--active .card-status,
  .cat-cards--soon .card-status {
    grid-column: 1 / -1;
    order: 1;
  }
  .cat-card:not(.cat-card--soon) {
    padding: 28px;
  }
}

/* ---------- notice ---------- */
.notice {
  display: flex;
  gap: 10px;
  padding: var(--space-4) 18px;
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}
.notice > svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.notice__title {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--weight-bold);
}
.notice--honest {
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface-soft);
}
.notice--warning {
  background: var(--color-warning-bg);
}
.notice--warning .notice__title {
  color: var(--color-warning-text);
}
.notice--error {
  background: var(--color-error-bg);
}
.notice--error .notice__title {
  color: var(--color-error-text);
}
.notice--info {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}

/* ---------- cookie (SP-43) ---------- */
/* Отступ баннера от краёв: на узких телефонах 8, иначе на 360 × 640 баннер касается первой карточки */
body {
  --cookie-offset: var(--space-3);
}
@media (max-width: 400px) {
  body {
    --cookie-offset: var(--space-2);
  }
}
.cookie {
  position: fixed;
  left: var(--cookie-offset);
  right: var(--cookie-offset);
  bottom: var(--cookie-offset);
  z-index: 10;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-regular);
}
.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cookie__actions .btn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
/* Пока баннер виден, страница прокручивается до конца из-под него: cookie-banner.js
   пишет высоту баннера в --cookie-reserve. Отступ снизу не сдвигает то, что уже на экране. */
body.cookie-open {
  padding-bottom: calc(var(--cookie-reserve, 0px) + 2 * var(--cookie-offset));
}

/* ---------- legal page (SP-43) ---------- */
.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--section-gap);
}
.legal__meta {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.legal h2 {
  margin-top: var(--space-4);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h3);
}
.legal ul {
  margin: 0;
  padding-left: var(--space-5);
}
.legal li + li {
  margin-top: var(--space-1);
}
.legal code {
  font: inherit;
}
.legal a {
  overflow-wrap: anywhere;
}
.legal__table {
  overflow-x: auto;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}
.legal__table--wide table {
  min-width: 640px;
}
.legal th,
.legal td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.legal thead th {
  font-weight: var(--weight-bold);
  border-bottom-color: var(--color-border-strong);
}
.legal tbody th {
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

/* ---------- header / footer ---------- */
.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block: 14px;
}
.site-header__logo {
  height: 17px;
  width: auto;
}
.site-header__descriptor {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  color: var(--color-text-secondary);
}
@media (min-width: 1024px) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
  }
  .site-header__logo {
    height: 22px;
  }
  .site-header__descriptor {
    font-size: 14px;
    line-height: 20px;
  }
}

.site-footer {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text-secondary);
  font-size: var(--text-micro-size);
  line-height: 17px;
}
.site-footer__inner {
  display: grid;
  gap: var(--space-4);
  padding-block: 28px 32px;
}
.site-footer a,
.site-footer button {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-inverse-text);
  font-size: inherit;
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
}
.site-footer__slogan {
  font-family: var(--font-human);
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-inverse-text);
}
@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    padding-block: var(--space-10);
  }
}

/* ---------- screen: main (SP-36) ---------- */
/* display у компонентов (flex у кнопок подвала, grid у блоков) иначе перебивает атрибут hidden */
[hidden] {
  display: none !important;
}

/* Подвал прижат к низу и на коротком экране (заглушка вместо квиза) */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main {
  flex: 1;
}

.site-header__home {
  align-self: flex-start;
}

.home {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--section-gap);
}
.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.trust {
  color: var(--color-text-secondary);
}

/* ---------- screen: quiz (SP-37, SP-38) ---------- */
/* На экранах квиза и результата в шапке только логотип (components.md, Header) */
[data-screen='quiz'] .site-header__descriptor {
  display: none;
}
/* Подвал всегда ниже первого экрана: высота шага меняется (4–10 ответов),
   и без этого подвал прыгает при каждом переходе (CLS) */
[data-screen='quiz'] main {
  min-height: 100dvh;
}
.quiz-screen {
  padding-block: var(--space-6) var(--section-gap);
}
.quiz {
  --stack-gap: var(--space-5);
}
.quiz__question {
  --stack-gap: var(--space-2);
}
.quiz__subtitle {
  font-weight: var(--weight-semibold);
}
/* Заголовок оффера над вопросом шага 1 при входе по ссылке (patterns.md §2) */
.quiz__offer {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.quiz__group {
  --stack-gap: var(--space-2);
}
.quiz__group-label {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  font-weight: var(--weight-semibold);
}
.quiz__actions {
  --stack-gap: var(--space-2);
  align-items: stretch;
}
.quiz-head__spacer {
  width: var(--space-8);
}
@media (min-width: 600px) {
  .quiz__actions {
    align-items: flex-start;
  }
}

/* ---------- screen: result, form (SP-39) ---------- */
/* ResultCard на десктопе — 880 px, блоки под ней — 560 (foundations.md, §4).
   Без поддержки :has() карточка остаётся в колонке 560 px. */
@media (min-width: 1024px) {
  .quiz-screen:has(.result-card) {
    max-width: calc(var(--container-result) + 2 * var(--page-gutter));
  }
  .result > :not(.result-card) {
    max-width: var(--container-narrow);
  }
}
.how__body {
  --stack-gap: var(--space-2);
}
.lead-form__checks {
  --stack-gap: var(--space-2);
}
/* Honeypot: вне экрана, но не display: none — боты пропускают скрытые поля */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Статус загрузки квиза под карточкой (app.js) */
.card-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-secondary);
}

/* ---------- screen: waitlist sheet (SP-40) ---------- */
/* Под открытой шторкой страница не прокручивается (components.md, BottomSheet) */
body.sheet-open {
  overflow: hidden;
}
.sheet__body {
  --stack-gap: var(--space-4);
}
.sheet__head .t-h3 {
  margin: 0;
}

@media (min-width: 1024px) {
  .home {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-10);
    padding-block: var(--space-12) var(--section-gap);
  }
  .home > * {
    grid-column: 1 / -1;
  }
  .home-hero {
    grid-column: 1 / span 7;
    gap: var(--space-4);
  }
  .home-cards {
    gap: var(--grid-gap);
  }
  .cat-card:not(.cat-card--soon) .icon-circle {
    width: var(--space-12);
    height: var(--space-12);
  }
  .cat-card:not(.cat-card--soon) .icon-circle svg {
    width: var(--space-6);
    height: var(--space-6);
  }
}