/* ============================================================
   RIVER ROCK NØRD — одноэкранный лендинг с квизом
   Дизайн-система: слейт + медь. Тёмная тема по умолчанию,
   светлая — через class="theme-cream" на body.
   ============================================================ */

:root {
  /* палитра */
  --slate: #26323C;
  --slate-mid: #3A4A57;
  --copper: #B58363;
  --copper-dim: #8C6650;
  --cream: #F4F1EC;
  --cream-deeper: #DAD2C6;
  --ink: #26323C;
  --ink-mid: #46555F;
  --ink-light: #7A8790;
  --white: #FDFCFA;
  --gold-light: #F2ECE6;

  /* шрифты */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* движение */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-norm: 250ms;
  --dur-view: 400ms;
  --dur-step: 170ms;   /* затухание при смене вопроса квиза */

  /* радиусы */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 20px;
}

/* ---------- темы ---------- */

.theme-dark {
  --bg: var(--slate);
  --fg: var(--gold-light);
  --fg-strong: var(--white);
  --fg-dim: var(--copper-dim);
  --accent: var(--copper);
  --hairline: rgba(200, 169, 110, .28);
  --hairline-soft: rgba(181, 131, 99, .25);
  --surface: rgba(255, 255, 255, .03);
  --surface-active: rgba(200, 169, 110, .14);
  --track: rgba(200, 169, 110, .16);
}

.theme-cream {
  --bg: var(--cream);
  --fg: var(--ink-mid);
  --fg-strong: var(--ink);
  --fg-dim: var(--ink-light);
  --accent: var(--copper-dim);
  --hairline: var(--cream-deeper);
  --hairline-soft: var(--cream-deeper);
  --surface: var(--white);
  --surface-active: rgba(181, 131, 99, .07);
  --track: var(--cream-deeper);
}

/* ---------- база ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.theme-dark body,
body.theme-dark {
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 59px,
    rgba(255, 255, 255, .02) 59px, rgba(255, 255, 255, .02) 60px);
}

img, video { display: block; max-width: 100%; }
button, input { font-family: inherit; }
::placeholder { color: currentColor; opacity: .45; }

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

@keyframes rrFadeUp {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rrPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0; }
}

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

/* ---------- state machine ---------- */

.stage {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* На широких экранах макет не растягиваем колонками, а масштабируем целиком —
   так сохраняются пропорции кадра 1280×800, а не «остров» контента посреди 4K.
   height делим на zoom: dvh не зависит от zoom и иначе даёт переполнение. */
@media (min-width: 2000px) {
  .stage { zoom: 1.35; height: calc(100dvh / 1.35); }
}

@media (min-width: 2800px) {
  .stage { zoom: 1.85; height: calc(100dvh / 1.85); }
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rrFadeUp var(--dur-view) var(--ease) both;
}

.screen[hidden] { display: none; }

/* Макет нарисован под кадр 1280×800. Без потолков на 4K колонки
   растягиваются на всю ширину, а карточка формы раздувается втрое.
   Ограничители ниже ни на что не влияют при ≤1280px. */
.quiz {
  width: 100%;
  max-width: 1280px;
  max-height: 900px;
}

.lead {
  width: 100%;
  max-width: 1440px;
  max-height: 900px;
}

/* ---------- общие атомы ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.accent { color: var(--accent); font-weight: 400; }
.nowrap { white-space: nowrap; }

.btn {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-norm) var(--ease),
              color var(--dur-norm) var(--ease),
              transform var(--dur-norm) var(--ease);
}

.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 30px;
  border: none;
  font-size: 13px;
  background: var(--accent);
  color: var(--slate);
}
.theme-cream .btn--primary { background: var(--slate); color: var(--gold-light); }

.btn--primary:hover { transform: translateY(-2px); }
.theme-dark .btn--primary:hover { background: var(--gold-light); }
.theme-cream .btn--primary:hover { background: var(--slate-mid); }

.btn--ghost {
  padding: 11px 20px;
  border: .5px solid var(--hairline);
  background: transparent;
  color: var(--fg);
  font-size: 11px;
  transition: border-color var(--dur-norm) var(--ease);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--submit {
  width: 100%;
  padding: 17px;
  border: none;
  font-size: 12.5px;
  background: var(--slate);
  color: var(--gold-light);
}
.btn--submit:hover { background: var(--slate-mid); }

/* ---------- бренд ---------- */

.brand { display: grid; }

/* Логотип — инлайновый SVG (#rr-logo), поэтому перекрашивается под тему.
   В брендбуке текст тёмно-синий (#313D47) — на тёмном слейте он совпал бы
   с фоном, поэтому там берём кремовый. Монограмма остаётся медной в обеих
   темах; --logo-knockout — цвет «бумаги», просвечивающей сквозь её выбивку. */
/* Логотип вертикальный (383×276), и на высоте из макета (48–54px) строки
   «RIVER ROCK» и «DOMBAY» вырождаются в 3–6px. Поэтому в шапке даём ему
   заметно больше высоты, чем предполагал макет. */
.brand__logo {
  grid-area: 1 / 1;
  height: 104px;
  width: auto;
  aspect-ratio: 383.879 / 276.11;
}

.theme-dark .brand__logo {
  color: var(--gold-light);
  --logo-accent: var(--copper);
  /* кремовая, а не слейтовая: монограмма должна остаться светлой на меди,
     как в брендбуке, а не сливаться с фоном */
  --logo-knockout: var(--gold-light);
}

.theme-cream .brand__logo {
  color: #313D47;
  --logo-accent: #996A50;
  --logo-knockout: var(--cream);
}

.brand__sub {
  grid-column: 1;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.brand--compact .brand__logo { height: 56px; }

/* ---------- дисклеймер ---------- */

.disclaimer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 9px 56px;
  background: rgba(0, 0, 0, .18);
  pointer-events: none;
  z-index: 3;
}
.theme-cream .disclaimer { background: rgba(0, 0, 0, .05); }

.disclaimer__legal {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--fg-dim);
  opacity: .6;
}

/* кредит агентства — фирменный стиль «Цифра x Девелопмент»:
   ромб и «x» лаймом, начертание Unbounded на родном тёмном фоне бренда,
   чтобы фирстиль одинаково читался и на тёмной, и на светлой теме сайта */
.credit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
}
.credit__label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-norm) var(--ease);
}
.credit:hover .credit__label { color: var(--fg); }

.credit__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 6px;
  border-radius: 4px;
  background: #0C0D10;
  border: .5px solid rgba(236, 231, 218, .16);
  transition: border-color var(--dur-norm) var(--ease);
}
.credit:hover .credit__badge { border-color: rgba(212, 255, 58, .5); }

.credit__mark {
  font-size: 11px;
  line-height: 1;
  color: #D4FF3A;
  transform: translateY(-.5px);
}
.credit__name {
  /* было 'Unbounded' — тянуло целое семейство ради одного слова в футере;
     заменено на уже загруженный display-шрифт, минус один внешний шрифт-запрос */
  font-family: var(--font-display), 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #ECE7DA;
}
.credit__x { color: #D4FF3A; font-weight: 400; }

body[data-view="quiz"] .disclaimer,
body[data-view="form"] .disclaimer { display: none; }

/* ============================================================
   ЭКРАН 1 — INTRO
   ============================================================ */

/* герой остаётся во всю ширину — видео гор во весь экран на 4K выигрышнее,
   чем узкий кадр с пустыми полями по бокам */
.intro {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  width: 100%;
  height: 100%;
}

.intro__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 56px 62px;
  /* держим текстовый блок в рамках макета и центрируем в своей колонке,
     иначе на 4K он размазывается по 2000px и 1900px высоты.
     height:100% обязателен: без него align-self:center ужимает блок
     по контенту и justify-content:space-between перестаёт работать. */
  max-width: 800px;
  height: 100%;
  max-height: 840px;
  margin-inline: auto;
  align-self: center;
}

.intro__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.intro__geo {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.7;
  color: var(--fg-dim);
}

.intro__title {
  margin-top: 18px;
  font-family: var(--font-display);
  /* При 1280px строка «с доходом от 2,5 млн ₽» (629px) не влезает
     в колонку (566px) → 44px. На широких экранах колонка шире,
     и туда возвращается размер из макета — 52px. */
  font-size: clamp(36px, 3.44vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--fg-strong);
}

.intro__lede {
  max-width: 440px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg);
  opacity: .82;
}
.theme-cream .intro__lede { opacity: 1; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  list-style: none;
}

.chip {
  padding: 6px 13px;
  border: .5px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-active);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
}
.theme-cream .chip { background: var(--white); color: var(--ink-mid); }

.scarcity {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}

.scarcity__dot { position: relative; display: inline-flex; width: 7px; height: 7px; }
.scarcity__dot i,
.scarcity__dot b {
  border-radius: 50%;
  background: var(--accent);
}
.scarcity__dot i {
  position: absolute;
  inset: 0;
  animation: rrPulse 2.4s var(--ease) infinite;
}
.scarcity__dot b { position: relative; width: 7px; height: 7px; }

.intro__actions { display: flex; align-items: center; gap: 22px; }

.price { line-height: 1.15; }
.price__label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.price__value {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--fg-strong);
}

/* ---------- медиа-колонка ---------- */

/* без overflow:hidden — карточка «инвестиционная привлекательность»
   намеренно выступает влево за границу колонки (left:-40px) */
.intro__media { position: relative; min-width: 0; }

.intro__video { width: 100%; height: 100%; object-fit: cover; }

/* рендер фасада вместо видео на первом экране */
.intro__photo { width: 100%; height: 100%; object-fit: cover; }

.intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--bg) 0%, rgba(38, 50, 60, .35) 22%, rgba(38, 50, 60, 0) 55%);
  pointer-events: none;
}
.theme-cream .intro__scrim {
  background: linear-gradient(90deg, var(--cream) 0%, rgba(244, 241, 236, 0) 42%);
}

.invest-card {
  position: absolute;
  left: -40px;
  bottom: 48px;
  width: 368px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 8px 32px rgba(26, 10, 14, .28);
}

.invest-card__label {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-dim);
}

.invest-card__grid { display: flex; justify-content: space-between; text-align: center; }
.invest-card__item { flex: 1; }
.invest-card__rule { width: .5px; background: var(--cream-deeper); }

.invest-card__num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--slate);
}
.invest-card__num--alt { color: var(--copper-dim); }

.invest-card__cap {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--ink-light);
}

/* бейдж поверх фото и строка метрик — только мобильные */
.media-badge { display: none; }
.metrics { display: none; }

/* ============================================================
   ЭКРАН 2 — QUIZ
   ============================================================ */

.quiz {
  height: 100%;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
}

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

.quiz__counter {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.quiz__counter-short { display: none; }

.progress {
  height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .5s var(--ease);
}
.theme-cream .progress__fill { background: var(--slate); }

.quiz__body {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Смена вопроса — плавное затухание.
   Раньше здесь перезапускалась входная анимация rrFadeUp: она стартует
   с opacity:0, поэтому блок мгновенно гас и проявлялся заново — на каждый
   клик выходило два таких моргания подряд. Теперь содержимое подменяется,
   пока блок невидим, а видимыми остаются только плавные фазы. */
.quiz__body {
  transition: opacity var(--dur-step) var(--ease),
              transform var(--dur-step) var(--ease);
}
.quiz__body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.quiz__question {
  margin-bottom: 34px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg-strong);
}

.quiz__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 19px 22px;
  border: .5px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-norm) var(--ease),
              background var(--dur-norm) var(--ease),
              color var(--dur-norm) var(--ease),
              transform var(--dur-norm) var(--ease);
}
.theme-cream .option { color: var(--ink-mid); }

.option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.option.is-selected {
  border-color: var(--accent);
  background: var(--surface-active);
  color: var(--fg-strong);
}
.theme-cream .option.is-selected { color: var(--ink); }

.option__check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--slate);
  font-size: 12px;
  transform: scale(0);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.theme-cream .option__check { background: var(--slate); color: var(--gold-light); }

.option.is-selected .option__check { transform: scale(1); opacity: 1; }

/* мини-УТП */
.usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
  list-style: none;
}

.usp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: .5px solid var(--hairline-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.usp__img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  opacity: .9;
}
.theme-cream .usp__img { opacity: 1; }

.usp__text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg);
  opacity: .75;
}
.theme-cream .usp__text { color: var(--ink-light); opacity: 1; }

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

.quiz__hint {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--fg-dim);
}

/* ============================================================
   ЭКРАН 3 — FORM
   ============================================================ */

.lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.lead__pitch {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
}

/* в светлой теме левая колонка остаётся тёмной */
.theme-cream .lead__pitch {
  background: var(--slate);
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 59px,
    rgba(255, 255, 255, .02) 59px, rgba(255, 255, 255, .02) 60px);
}
.theme-cream .lead__pitch .eyebrow { color: var(--copper-dim); }
.theme-cream .lead__pitch .lead__title { color: var(--white); }
.theme-cream .lead__pitch .accent { color: var(--copper); }
.theme-cream .lead__pitch .lead__lede { color: var(--gold-light); opacity: .82; }
/* список УТП переехал на экран формы из start (тёмная тема). в кремовой
   --fg тёмный, а панель слева тёмная — без этой строки текст пропадает */
.theme-cream .lead__pitch .lead__usps li { color: var(--gold-light); opacity: .92; }
.theme-cream .lead__pitch .lead__stat-num { color: var(--copper); }
.theme-cream .lead__pitch .lead__stat-cap { color: var(--copper-dim); }

.lead__title {
  font-family: var(--font-display);
  /* как и в h1: при 1280px 46px не влезает в колонку (535px против 520px)
     и рвёт «Забронируйте номер» — 42px. Шире 1400px возвращаем 46px. */
  font-size: clamp(30px, 3.28vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--fg-strong);
}

.lead__lede {
  max-width: 400px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg);
  opacity: .82;
}

.lead__stats { display: flex; gap: 40px; margin-top: 34px; }

.lead__stat-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--accent);
}

.lead__stat-cap {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.lead__panel {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 60px 60px 60px 20px;
}
.theme-cream .lead__panel { padding: 60px 56px; background: var(--cream); }

.form-card {
  width: 100%;
  /* без потолка карточка растягивалась на всю половину экрана (~1750px на 4K) */
  max-width: 560px;
  padding: 40px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 8px 32px rgba(26, 10, 14, .3);
}
.theme-cream .form-card { padding: 0; background: none; box-shadow: none; }

.form__title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.field { display: block; margin-bottom: 16px; }

.field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.field__input {
  width: 100%;
  min-height: 44px;
  padding: 15px 16px;
  border: .5px solid var(--cream-deeper);
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  transition: border-color var(--dur-norm) var(--ease);
}
.theme-cream .field__input { background: var(--white); }

.field__input:focus { border-color: var(--copper); outline: none; }
.field__input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.field.is-invalid .field__input { border-color: #C2564B; }

.field__err {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #C2564B;
}
.field__err[hidden] { display: none; }

/* ошибка отправки заявки в CRM — на всю форму, не на поле */
.form__senderr {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #C2564B;
}
.form__senderr[hidden] { display: none; }

/* ---------- согласия (152-ФЗ + закон о рекламе) ---------- */

.consents {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 4px;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--fg-dim);
}
.theme-cream .check { color: var(--ink-light); }

/* Свой квадратик вместо системного: системный чекбокс не перекрашивается
   под медь и в тёмной теме выглядит инородно. */
.check input {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.check input:hover { border-color: var(--accent); }

.check input:checked {
  border-color: var(--accent);
  background: var(--accent);
  /* галочка рисуется фоном, чтобы не тащить лишний элемент в разметку */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3 4.8-5' fill='none' stroke='%2326323C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.theme-cream .check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3 4.8-5' fill='none' stroke='%23FDFCFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* незаполненное обязательное согласие подсвечиваем как ошибку поля */
.consents.is-invalid input:not(:checked) { border-color: #C2564B; }

.form .btn--submit { margin-top: 6px; }

.form__consent {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-light);
}

/* успех */
.success {
  padding: 24px 0;
  text-align: center;
  animation: rrFadeUp .5s var(--ease) both;
}
.success[hidden] { display: none; }

.success__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--slate);
  color: var(--copper);
  font-size: 28px;
}

.success__title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.success__text { font-size: 16px; font-weight: 400; color: var(--ink-mid); }

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* планшет / узкий десктоп */
@media (max-width: 1100px) {
  .intro__content { padding: 40px 36px 56px; }
  .intro__title { font-size: 42px; }
  .quiz { padding: 40px 36px; }
  .quiz__question { font-size: 34px; }
  .lead__pitch, .lead__panel { padding: 40px 36px; }
  .lead__title { font-size: 36px; }
  .invest-card { left: -24px; width: 300px; }
  .invest-card__cap { font-size: 8.5px; letter-spacing: .03em; }
  .disclaimer { padding: 9px 36px; }
}

/* ---------- mobile ≤ 900px: одна колонка ---------- */
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 1fr; }
  .intro__scrim, .invest-card { display: none; }
}

/* ---------- mobile ≤ 480px ---------- */
@media (max-width: 480px) {

  /* --- intro: контент распределён, фото поглощает свободное место --- */
  .intro {
    display: flex;
    flex-direction: column;
    /* нижний отступ увеличен, чтобы CTA не сталкивался
       с закреплённым внизу кредитом агентства */
    padding: 26px 22px 34px;
    gap: 0;
  }

  .intro__content {
    display: contents;
  }

  .intro__head { order: 1; align-items: center; }
  .intro__geo { display: none; }

  .brand__logo { height: 52px; }
  .brand__sub {
    font-size: 8.5px;
    letter-spacing: .12em;
    margin-top: 2px;
  }

  .intro__media {
    order: 2;
    flex: 1;
    min-height: 150px;
    margin-top: 16px;
    border-radius: var(--radius-md);
  }
  .intro__video { border-radius: var(--radius-md); }

  .media-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(26, 10, 14, .7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--font-display);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-light);
  }
  .theme-cream .media-badge {
    background: rgba(255, 253, 249, .9);
    color: var(--copper-dim);
  }
  .media-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  .intro__pitch { order: 3; }
  .intro__pitch .eyebrow {
    display: block;
    margin-top: 18px;
    font-size: 9.5px;
    letter-spacing: .16em;
  }

  .intro__title { margin-top: 8px; font-size: 30px; line-height: 1.1; }
  .intro__title br { display: none; }
  .intro__lede { display: none; }

  .chips { gap: 6px; margin-top: 16px; }
  .chip { padding: 5px 10px; font-size: 9px; letter-spacing: .06em; }

  .metrics {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 18px;
    padding: 14px 16px;
    border: .5px solid rgba(200, 169, 110, .2);
    border-radius: var(--radius-md);
    background: rgba(200, 169, 110, .08);
  }
  .theme-cream .metrics {
    border-color: var(--cream-deeper);
    background: var(--white);
  }

  .metrics__item { flex: 1; }

  .metrics__num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent);
  }
  .metrics__num--alt { color: var(--fg-strong); }
  .theme-cream .metrics__num { color: var(--slate); }
  .theme-cream .metrics__num--alt { color: var(--copper-dim); }

  .metrics__cap {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 400;
    color: var(--fg-dim);
  }

  .intro__cta { order: 4; margin-top: 20px; }
  .scarcity { display: none; }

  .intro__actions { gap: 12px; }
  .price__label { font-size: 8.5px; letter-spacing: .08em; }
  .price__value { font-size: 22px; }

  .btn--primary {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    padding: 16px;
    font-size: 12px;
    letter-spacing: .06em;
  }

  /* на мобильном юротказ прячем (нет места), но кредит агентства
     оставляем слим-строкой по центру */
  .disclaimer {
    justify-content: center;
    padding: 6px 22px;
    background: none;
  }
  .disclaimer__legal { display: none; }
  .credit__label { display: none; }
  .credit__badge { padding: 4px 9px 5px; }
  .credit__mark { font-size: 10px; }
  .credit__name { font-size: 10px; }

  /* --- quiz --- */
  .quiz { padding: 26px 22px 22px; }
  .brand--compact .brand__logo { height: 44px; }
  .brand--compact .brand__sub { display: none; }

  .quiz__counter-full { display: none; }
  .quiz__counter-short { display: inline; font-size: 9px; letter-spacing: .1em; }

  .progress { margin-top: 16px; }

  .quiz__question { margin-bottom: 22px; font-size: 26px; line-height: 1.15; }

  .quiz__options { grid-template-columns: 1fr; gap: 10px; }
  .option { padding: 15px 18px; font-size: 16px; }

  .usps { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .usp { padding: 8px 10px; gap: 10px; }
  .usp__img { width: 36px; height: 36px; }
  .usp__text { font-size: 12px; line-height: 1.35; }
  .usp:nth-child(3) { display: none; }

  .quiz__foot { justify-content: flex-start; }
  .quiz__hint { display: none; }
  .btn--ghost { min-height: 44px; padding: 10px 18px; font-size: 10.5px; }

  /* --- form: одна колонка, тёмный фон, поля полупрозрачные --- */
  .lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 24px;
  }

  .lead__pitch {
    padding: 0;
    background: none;
    background-image: none;
  }
  .theme-cream .lead__pitch { background: none; background-image: none; }

  .lead__pitch .eyebrow {
    font-size: 9.5px;
    letter-spacing: .16em;
    margin-bottom: 12px;
  }
  .theme-cream .lead__pitch .eyebrow { color: var(--copper-dim); }

  .lead__title { margin-bottom: 10px; font-size: 30px; line-height: 1.1; }
  .theme-cream .lead__pitch .lead__title { color: var(--ink); }
  .theme-cream .lead__pitch .accent { color: var(--copper-dim); }

  .lead__lede { display: none; }

  .lead__stats { gap: 26px; margin-top: 0; margin-bottom: 24px; }
  .lead__stat-num { font-size: 22px; }
  .lead__stat-cap { font-size: 8px; letter-spacing: .06em; }
  .theme-cream .lead__pitch .lead__stat-num { color: var(--slate); }
  .theme-cream .lead__pitch .lead__stat-cap { color: var(--ink-light); }
  /* на мобиле кремовая тема гасит тёмный фон левой колонки (см. выше), поэтому
     список УТП и оговорку надо перекрашивать в тёмное — как и старый блок статов */
  .theme-cream .lead__pitch .lead__usps li { color: var(--slate); opacity: .9; }

  .lead__panel { padding: 0; }
  .theme-cream .lead__panel { padding: 0; background: none; }

  .form-card { padding: 0; background: none; box-shadow: none; }
  .form__title { display: none; }

  .field { margin-bottom: 12px; }
  .field__label { display: none; }

  .field__input {
    border: .5px solid var(--hairline);
    background: rgba(255, 255, 255, .05);
    color: var(--fg-strong);
  }
  .theme-cream .field__input {
    border-color: var(--cream-deeper);
    background: var(--white);
    color: var(--ink);
  }

  .btn--submit {
    min-height: 44px;
    padding: 16px;
    font-size: 12px;
    letter-spacing: .06em;
    background: var(--accent);
    color: var(--slate);
  }
  .theme-cream .btn--submit { background: var(--slate); color: var(--gold-light); }

  .form__consent { margin-top: 12px; font-size: 8.5px; color: var(--fg-dim); }
  .theme-cream .form__consent { color: var(--ink-light); }

  .success__mark {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    background: var(--accent);
    color: var(--slate);
  }
  .theme-cream .success__mark { background: var(--slate); color: var(--copper); }

  .success__title { font-size: 26px; color: var(--fg-strong); }
  .theme-cream .success__title { color: var(--ink); }

  .success__text { font-size: 15px; color: var(--fg); opacity: .85; }
  .theme-cream .success__text { color: var(--ink-mid); opacity: 1; }
}

/* низкие экраны — подрезаем вертикальные отступы */
/* Экран формы вырос после того, как 03.08.2026 в него добавили список УТП и
   оговорку к звёздочкам: на 360×640 заголовок уезжал за верх кадра, а body с
   overflow:hidden не давал до него добраться. Разрешаем прокрутку внутри экрана
   и снимаем центрирование — оно обрезает контент сразу с двух сторон. */
@media (max-width: 480px) {
  .screen--form { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .screen--form .lead { height: auto; min-height: 100%; }
}

/* ============================================================
   Низкие мобильные кадры (04.08.2026)

   iPhone с показанной адресной строкой Safari даёт не 844px, а ~664px и ниже.
   `.stage` жёстко равен 100dvh с overflow:hidden, поэтому лишний контент просто
   срезался: на dombai-start при 664px кнопка «Подобрать номер» уходила за кромку
   на 14px, «цена входа» на 8px, а кредит агентства ложился на кнопку.

   A. Поджимаем ритм, чтобы первый экран остался одноэкранником.
   ============================================================ */
@media (max-width: 480px) and (max-height: 720px) {
  /* низ увеличен намеренно: под бейджем внизу не должно оказаться кнопки */
  .intro { padding: 16px 22px 46px; }

  .brand__logo { height: 42px; }
  .brand--compact .brand__logo { height: 38px; }

  .intro__media { min-height: 96px; margin-top: 10px; }

  .intro__pitch .eyebrow { margin-top: 10px; }
  .intro__title { margin-top: 6px; font-size: 25px; }

  .chips { margin-top: 10px; gap: 5px; }
  .chip { padding: 4px 9px; }

  .metrics { margin-top: 11px; padding: 9px 14px; }
  .metrics__num { font-size: 18px; }

  .intro__cta { margin-top: 12px; }

  /* квиз: вопрос и варианты тоже не должны упираться в кромку */
  .quiz { padding: 18px 20px 16px; }
  .quiz__question { font-size: 22px; margin-bottom: 14px; }
}

/* B. Страховка на совсем низкие кадры и крупный системный шрифт: контент,
      который не влез, должен прокручиваться, а не пропадать. На обычном
      iPhone (844px) ничего не меняется — прокрутка просто не появляется. */
@media (max-width: 480px) {
  body { overflow-y: auto; }
  .stage { height: auto; min-height: 100dvh; overflow: visible; }
  .screen { position: relative; min-height: 100dvh; }
  .screen[hidden] { display: none; }
}

@media (max-height: 700px) and (min-width: 481px) {
  .intro__content { padding: 32px 56px 48px; }
  .intro__title { font-size: 40px; }
  .quiz { padding: 32px 64px; }
  .quiz__question { font-size: 32px; margin-bottom: 24px; }
  .usps { margin-top: 20px; }
}

/* ============================================================
   УТП-список в блоке формы вместо метрик «15 мин / 0 ₽»
   + выбор канала доставки подборки (Телефон/WhatsApp/Telegram/Max).
   С 03.08.2026 список УТП на всех 6 страницах; выбор канала — только на
   четырёх одноэкранниках, у /grey/ и /white/ этой разметки нет.
   ============================================================ */

.lead__usps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 420px;
}
.lead__usps li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--fg);
  opacity: .92;
}
.lead__usps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 15px;
  height: 15px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3 4.8-5' fill='none' stroke='%23B58363' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ниже 900px колонки встают друг под друга, и список УТП упирался бы прямо в
   карточку формы — зазор ровно 0px. Возвращаем тот же отступ, что был у блока
   .lead__stats, на месте которого список стоит. Правило обязано идти ПОСЛЕ
   базового `.lead__usps { margin: 26px 0 0 }` — иначе шорткат его обнулит. */
@media (max-width: 900px) {
  .lead__usps { margin-bottom: 24px; }
}

/* Оговорка к звёздочкам УТП. Общий футер .disclaimer на экране формы скрыт
   (см. body[data-view="form"] выше), поэтому звёздочки раскрываем своей полосой
   в самом низу экрана — под обеими колонками, повторяя вид того же футера.
   Цвет темонезависим: --fg светлый в тёмной теме и тёмный в кремовой, а полоса
   лежит на фоне экрана, а не на тёмной левой колонке. */
.lead__legal {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  padding: 10px 56px 12px;
  background: rgba(0, 0, 0, .18);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--fg);
  /* --fg-dim при .62 давал 1,78:1 — юр. текст был нечитаем */
  opacity: .72;
}

.theme-cream .lead__legal {
  background: rgba(0, 0, 0, .05);
  /* на кремовой подложке --fg при .72 даёт всего 3,35:1 — берём slate */
  color: var(--slate);
  opacity: .8;
}

/* полоса — вторая строка сетки; первая забирает всю оставшуюся высоту,
   иначе колонки со своими фонами перестают доходить до низа экрана */
@media (min-width: 901px) {
  .lead { grid-template-rows: 1fr auto; }
}

/* ---- выбор канала подборки ---- */
.channels {
  border: 0;
  margin: 2px 0 16px;
  padding: 0;
  min-width: 0;
}
.channels__legend {
  padding: 0;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.channels__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: .5px solid var(--cream-deeper);
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-norm) var(--ease),
              background var(--dur-norm) var(--ease),
              box-shadow var(--dur-norm) var(--ease);
}
.theme-cream .channel { background: var(--white); }
.channel input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.channel__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.channel__ic svg { width: 18px; height: 18px; display: block; }
.channel:hover { border-color: var(--copper); }
.channel:focus-within { outline: 2px solid var(--copper); outline-offset: 2px; }

/* иконка в фирменном цвете мессенджера */
.channel--phone .channel__ic { color: #C79A3E; }
.channel--wa .channel__ic { color: #25936A; }
.channel--tg .channel__ic { color: #3A7FB5; }
.channel--max .channel__ic { color: #7A5CC0; }

/* выбранный канал — мягкая заливка в цвет бренда, без пестроты */
.channel--phone:has(input:checked) { border-color: #C79A3E; background: rgba(199,154,62,.12); }
.channel--wa:has(input:checked)    { border-color: #25936A; background: rgba(37,147,106,.12); }
.channel--tg:has(input:checked)    { border-color: #3A7FB5; background: rgba(58,127,181,.12); }
.channel--max:has(input:checked)   { border-color: #7A5CC0; background: rgba(122,92,192,.12); }

@media (max-width: 700px) {
  .lead__usps { margin-top: 14px; gap: 7px; }
  .lead__usps li { font-size: 13px; padding-left: 22px; line-height: 1.35; }
  .lead__legal { padding: 9px 22px 11px; font-size: 9px; line-height: 1.45; }
  .channels { margin-bottom: 12px; }
  .channels__grid { gap: 7px; }
  .channel { min-height: 40px; font-size: 12px; padding: 8px 10px; gap: 6px; }
  .channel__ic { width: 18px; height: 18px; }
  .channel__ic svg { width: 16px; height: 16px; }
}