/* KeyPhone landing v3 — горизонтальная business-card визитка.
   Только: #FF6600 / #000000 / #FFFFFF (плюс #555555 для "Coming soon").
   Никаких opacity на бэкграундах, никаких градиентов в палитре. */

:root {
  --orange: #FF6600;
  --black:  #000000;
  --white:  #FFFFFF;
  --grey-soon: #555555;   /* строго один — для "Coming soon" под dl кнопкой */
}

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

html, body {
  background: var(--orange);
  color: var(--black);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: 0; font: inherit; cursor: pointer; color: inherit; }
::selection { background: var(--black); color: var(--orange); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

.page {
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ─── Top nav ───────────────────────────────── */
.topnav {
  min-height: 64px;
  padding: 8px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* лого слева | заголовок центр | языки справа */
  align-items: center;
  flex-shrink: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.topnav > .brand        { justify-self: start; }
.topnav > .topnav-title { justify-self: center; }
.topnav > .lang-switch  { justify-self: end; }
.topnav-title {
  color: var(--black);
  font-weight: 300;
  font-size: 36px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 540px) {
  .topnav-title { font-size: 26px; }
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--black);
}
.brand-logo {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 9px;   /* пропорционально rounded-rect логотипа */
  transition: transform 0.12s;
}
.brand:hover .brand-logo { transform: translateY(-1px); }
/* Текстовый логотип (Key/Phone в italic 900 оранжевыми буквами на чёрном
   фоне). Заменяет PNG-логотип, который был оранжевый-на-оранжевом и сливался
   с фоном страницы (.body { background: var(--orange) }). */
.brand-logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  line-height: 1;
  padding: 0 4px;
  overflow: hidden;
}
.brand-logo-text .bl-row {
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0.01em;
}
@media (max-width: 540px) {
  .brand-logo { width: 48px; height: 48px; border-radius: 8px; }
  .brand-logo-text .bl-row { font-size: 14px; }
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-btn {
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  padding: 4px 2px;
  transition: font-weight 0.1s;
}
.lang-btn.active { font-weight: 900; }
.lang-sep { color: var(--black); font-size: 14px; }

/* ─── Hero ──────────────────────────────────────────── */
.hero {
  padding: 12px 24px 6px;
  text-align: center;
  flex-shrink: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.hero-main { font-size: clamp(32px, 7vw, 48px); }
.hero-sub  { margin-top: 6px; font-size: 14px; }
/* Hero видим всегда — на всех 3 шагах pager'а и в no-token marketing.
   На раскрытом коде (.kp-expanded) тоже остаётся виден (брендовый якорь). */
.hero-main {
  font-size: clamp(40px, 8vw, 56px);
  font-style: italic;
  font-weight: 900;
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-main .line { display: block; }
.hero-sub {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
}

/* ─── Card (horizontal business-card — реальный физический размер кредитки
       85.6mm × 53.98mm, ISO/IEC 7810 ID-1). На узких экранах пропорционально
       уменьшается через min(физ, viewport-32px). ─────────────────────────── */
.card,
.card-bake {
  position: relative;
  margin: 0;
  width: min(85.6mm, calc(100vw - 32px));
  aspect-ratio: 85.6 / 53.98;
  background: var(--black);
  color: var(--white);
  border-radius: 4.5%;     /* пропорционально, как у реальной карты */
  overflow: hidden;
}
.card-bake {
  display: block;
  background: transparent;  /* чтобы на момент load img не было чёрной плашки */
}
.card-bake-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* На /c/CODE показываем динамическую CSS-карту, baked PNG скрываем. */
body.kp-has-code .card-bake { display: none; }
/* На главной (без has-code) скрываем динамическую CSS-карту, показываем PNG. */
body:not(.kp-has-code) .card { display: none; }
/* Fallback: если PNG ещё не запечён (404) — возвращаем CSS-карту. */
body.kp-bake-fail .card-bake { display: none; }
body.kp-bake-fail:not(.kp-has-code) .card { display: block !important; }

/* ─── Card row: только карта, центрировано. Внутри .step-node убираем
   padding/margin чтобы card-row совпадал с card-size парента. */
.card-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  width: 100%;
  max-width: 720px;
  padding: 0 16px;
  box-sizing: border-box;
}
.card-row .card,
.card-row .card-bake,
.card-row .flip-stage {
  margin: 0 !important;
}
/* Card-row внутри .kp-step — убираем 720px-обёртку, оставляем
   только flex-центрирование .flip-stage в card-size. */
.kp-step > .card-row {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* ─── Flip stage: 3D-обёртка над .card-bake + .card в token-режиме ───────
   В non-token modes — passthrough (display: contents), дочерние элементы
   ведут себя как прямые дети .card-row. В token-режиме — позиционированный
   контейнер с perspective, обе грани absolute-stacked. */
.flip-stage,
.flip-stage-inner {
  display: contents;
}
body.kp-has-token .flip-stage {
  display: block;
  position: relative;
  width: min(85.6mm, calc(100vw - 32px));
  aspect-ratio: 85.6 / 53.98;
  perspective: 1400px;
  cursor: pointer;
}
body.kp-has-token .flip-stage-inner {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.kp-has-token.kp-expanded .flip-stage-inner {
  transform: rotateY(180deg);
}
body.kp-has-token .flip-stage-inner > .card-bake,
body.kp-has-token .flip-stage-inner > .card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.kp-has-token .flip-stage-inner > .card {
  transform: rotateY(180deg);
  /* До flip'а .card на back-side и невидима, но в DOM позже card-bake'а —
     и в некоторых браузерах перехватывает клики. Отключаем pointer-events
     пока не повёрнута лицом. После flip — включаем (для back-btn etc). */
  pointer-events: none;
}
body.kp-has-token.kp-expanded .flip-stage-inner > .card {
  pointer-events: auto;
}
body.kp-has-token.kp-expanded .flip-stage-inner > .card-bake {
  pointer-events: none;
}
/* В token-режиме CSS-карта используется ТОЛЬКО как back-side для big-code.
   Её .card-normal (label+value+QR) скрываем. */
body.kp-has-token .flip-stage-inner > .card .card-normal { display: none !important; }
body.kp-has-token .flip-stage-inner > .card .card-expanded {
  /* На back-side .card-expanded по умолчанию opacity:0; в token-режиме
     показываем сразу при rotateY (back-side виден только когда грань
     повёрнута). Анимация opacity мешает 3D-эффекту. */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
  padding: 4cqw !important;
}
/* Big-code и кнопки в token-режиме масштабируются по ширине карты (cqw),
   а не по viewport — иначе 12vw переполняет карту. */
body.kp-has-token .flip-stage-inner > .card .big-code-wrap {
  gap: 2cqw;
  padding: 0;
  width: 100%;
}
body.kp-has-token .flip-stage-inner > .card .big-code {
  font-size: 16cqw;          /* 6 цифр умещаются с запасом */
  letter-spacing: 0.02em;
  word-break: normal;
}
body.kp-has-token .flip-stage-inner > .card .big-code.long {
  font-size: 11cqw;
  letter-spacing: 0;
}
body.kp-has-token .flip-stage-inner > .card .drive-hint {
  font-size: 3cqw;
  margin-top: 0;
}
body.kp-has-token .flip-stage-inner > .card .big-copy-btn {
  font-size: 3cqw;
  padding: 1.5cqw 4cqw;
  border-radius: 1.5cqw;
  margin-top: 1cqw;
}
body.kp-has-token .flip-stage-inner > .card .back-btn {
  top: 2cqw;
  left: 2cqw;
  width: 7cqw;
  height: 7cqw;
  font-size: 5cqw;
  border-radius: 3.5cqw;
}
/* Countdown MM:SS — рендерится только в token-режиме после flip'а. По
   умолчанию белый, при <30s оранжевый, на 00:00 — красный + заменяется
   на «Link expired». */
.kp-countdown { display: none; }
body.kp-has-token .flip-stage-inner > .card .kp-countdown {
  display: block;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 4.5cqw;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-top: 0;
  opacity: 0.85;
}
body.kp-has-token .flip-stage-inner > .card .kp-countdown.warn {
  color: var(--orange);
  opacity: 1;
}
body.kp-has-token .flip-stage-inner > .card .kp-countdown.expired {
  color: #FF383C;
  opacity: 1;
}
@media (max-width: 540px) {
  body.kp-has-token .flip-stage {
    width: min(85.6mm, calc(100vw - 24px));
  }
}

/* ─── Tap hint (только в token-режиме до flip'а) ───────────────────
   Жирный акцент: чёрная пилюля + белый текст + ↑ стрелка вверх к карте.
   Стрелка пульсирует (translateY) — глаз цепляет движение. */
.tap-hint {
  display: none;
  margin: 0 auto;
  padding: 12px 22px;
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 540px) {
  .tap-hint { font-size: 16px; padding: 10px 18px; }
}
.tap-arrow {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
  animation: kpArrowBounce 1.2s ease-in-out infinite;
}
@keyframes kpArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
body.kp-has-token:not(.kp-expanded) .tap-hint { display: flex; }

/* ── Two-state container: normal (initial) / expanded (after delay or click) ── */
.card-normal,
.card-expanded {
  position: absolute;
  inset: 0;
  padding: 5.5%;           /* пропорционально размеру карты */
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.card-normal {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 4%;
  opacity: 1;
  pointer-events: auto;
}
.card-expanded {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.card.expanded .card-normal {
  opacity: 0;
  pointer-events: none;
}
.card.expanded .card-expanded {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0.2s;
}

/* ── Left column ── */
.card-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}
.card-top {
  display: flex;
  flex-direction: column;
  gap: 4%;
  min-width: 0;
}
/* На главной (без кода) показываем слоган italic 900, как hero. */
.card-slogan {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
}
.card-slogan .line {
  display: block;
  font-style: italic;
  font-weight: 900;
  /* размер пропорционально ширине карты (cqw — % от ширины контейнера .card) */
  font-size: 13.5cqw;
}
.card.has-code .card-slogan { display: none; }

/* На /c/CODE — лейбл + сам код. */
.card-share { display: none; }
.card.has-code .card-share { display: flex; flex-direction: column; gap: 8%; min-width: 0; }
.card-label {
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}
.card-value {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 9cqw;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.08em;
  word-break: break-all;
  line-height: 1;
}

/* container query unit cqw работает только если у родителя задан container */
.card { container-type: inline-size; }

/* Brand logos row — отдельные элементы, прозрачный фон, без обводок.
   Каждый логотип "дышит" сам, gap 24px по бриф'у. */
.brand-logos {
  display: flex;
  align-items: flex-end;
  gap: 5cqw;
}
.brand-img {
  display: inline-flex;
  align-items: center;
  height: 6cqw;
  flex-shrink: 0;
  transition: transform 0.12s;
}
.brand-img:hover { transform: translateY(-2px); }
.brand-img img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── Right column ── */
.card-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* QR — квадрат шириной 100% правой колонки (= ~50% карты), центрирован
   по вертикали. */
.qr-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-radius: 3cqw;
  padding: 2.4cqw;
}
.qr {
  width: 100%;
  height: 100%;
  display: block;
}
/* В центре QR: фирменный лого без рамки/обводки — оранжевый прямоугольник
   просто закрывает пиксели QR (level H выдерживает 30% потери), сверху
   слова Key/Phone италик 900 чёрным. */
.qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--orange);
  padding: 1cqw 1.4cqw;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
}
.qr-logo .qr-line {
  font-style: italic;
  font-weight: 900;
  font-size: 2.4cqw;
  color: var(--black);
  letter-spacing: -0.01em;
}

/* ─── Expanded view (на /c/CODE#expanded) ─────────── */
.back-btn {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  border-radius: 18px;
  transition: background 0.12s;
}
.back-btn:hover { background: rgba(255,255,255,0.1); }

.big-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 20px;
  width: 100%;
}
.big-code {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: clamp(48px, 12vw, 140px);
  font-style: italic;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1;
  word-break: break-all;
  width: 100%;
}
.big-code.long {
  font-size: clamp(36px, 8vw, 84px);
  letter-spacing: 0;
}
.drive-hint {
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  opacity: 0.7;
}
.big-copy-btn {
  margin-top: 6px;
  padding: 14px 36px;
  background: var(--orange);
  color: var(--black);
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  border-radius: 28px;
  letter-spacing: 0.02em;
  transition: transform 0.12s, background 0.12s;
}
.big-copy-btn:hover { transform: translateY(-2px); }
.big-copy-btn.ok { background: var(--white); }

/* ─── Pager: 3 шага в token-режиме ─────────────────────────────────────
   .kp-pages — горизонтальная лента. Каждый .kp-step = 100% ширины.
   Переключение через transform на --kp-step (1..3). */
.kp-flow {
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;       /* прячет соседние steps в горизонтальной ленте */
  overflow-y: hidden;       /* запрещаем внутренний vertical scroll */
}
.kp-pages {
  --kp-step: 1;
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform: translateX(calc((var(--kp-step) - 1) * -100%));
}
body.kp-has-token .kp-pages { --kp-step: 1; }
body.kp-has-token[data-step="2"] .kp-pages { --kp-step: 2; }
body.kp-has-token[data-step="3"] .kp-pages { --kp-step: 3; }

.kp-step {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 16px;
  box-sizing: border-box;
  gap: 14px;
  min-height: 0;
}
/* Под-нодой meta-блок фиксированной высоты — чтобы layout не скакал
   при свайпе между шагами. */
.step-meta {
  width: 100%;
  max-width: min(85.6mm, calc(100vw - 32px));
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
/* Без токена pager скрыт, marketing-блок виден. */
body:not(.kp-has-token) #kp-flow      { display: none; }
body.kp-has-token       #kp-marketing { display: none; }

/* Прогресс-точки (token-mode) */
.kp-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 4px;
  flex-shrink: 0;
}
.kp-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--black);
  opacity: 0.25;
  transition: opacity 0.25s, width 0.25s;
}
body.kp-has-token[data-step="1"] .kp-dot[data-step="1"],
body.kp-has-token[data-step="2"] .kp-dot[data-step="2"],
body.kp-has-token[data-step="3"] .kp-dot[data-step="3"] {
  opacity: 1;
  width: 24px;
}

/* Универсальная Next-кнопка (одинаковая на всех шагах). */
.step-next {
  padding: 14px 36px;
  background: var(--black);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  border-radius: 28px;
  letter-spacing: 0.02em;
  transition: transform 0.12s;
  flex-shrink: 0;
}
.step-next:hover { transform: translateY(-2px); }

/* Back-кнопка на step-3 — outline-стиль для контраста с primary Next. */
.step-back {
  padding: 14px 22px;
  background: transparent;
  color: var(--black);
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--black);
  border-radius: 28px;
  letter-spacing: 0.02em;
  transition: transform 0.12s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.step-back:hover {
  transform: translateY(-2px);
  background: var(--black);
  color: var(--white);
}

/* Actions row — двухкнопочная панель Back + Reveal на step-3. */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Step 1: Vehicle panel (нода card-size, фото + overlay снизу). */
.vehicle-panel {
  position: relative;
  width: min(85.6mm, calc(100vw - 32px));
  aspect-ratio: 85.6 / 53.98;
  background: var(--black);
  color: var(--white);
  border-radius: 4.5%;
  overflow: hidden;
  flex: 0 0 auto;
}
.vehicle-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vehicle-photo:not([src]),
.vehicle-photo[src=""] { visibility: hidden; }

/* Overlay: «Toyota Tundra / 2025 · White» — белый italic 900 (шрифт hero),
   снизу-слева, gradient под текстом для читаемости поверх любого фото. */
.vehicle-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  color: var(--white);
  text-align: left;
  /* Тёмная плашка снизу — линейный градиент чёрного с alpha (палитра не
     меняется: только black/white/orange; alpha разрешён для читаемости). */
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.0) 100%);
  pointer-events: none;
}
.vehicle-overlay-l1 {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(24px, 9cqw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.vehicle-overlay-l2 {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(15px, 5cqw, 22px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-top: 6px;
  opacity: 0.9;
}
/* Скрываем пустые строки overlay, чтобы padding не «висел» в воздухе. */
.vehicle-overlay-l1:empty,
.vehicle-overlay-l2:empty { display: none; }
.vehicle-panel { container-type: inline-size; }

/* Expired-overlay: показывается на step-1 чёрной ноде когда токен expired
   (body.kp-link-expired) — вместо обычного vehicle-overlay. По центру:
   крупный «Code expired» + подсказка + кнопка-ссылка на /c/{nickname}. */
.vehicle-expired {
  display: none;
  position: absolute;
  inset: 0;
  padding: 6cqw 6cqw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3cqw;
  color: var(--white);
}
body.kp-link-expired .vehicle-overlay { display: none; }
body.kp-link-expired .vehicle-expired { display: flex; }
.vehicle-expired-title {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(20px, 8cqw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.vehicle-expired-sub {
  font-size: clamp(13px, 4cqw, 17px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  opacity: 0.85;
}
.vehicle-expired-link {
  margin-top: 2cqw;
  padding: 2.5cqw 5cqw;
  background: var(--orange);
  color: var(--black);
  font-size: clamp(13px, 3.5cqw, 16px);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.12s;
}
.vehicle-expired-link:hover { transform: translateY(-2px); }
.vehicle-expired-link:empty { display: none; }

/* Текст ПОД нодой — на оранжевом фоне (страница), белый только на чёрном
   (внутри ноды). Под-нодой используем чёрный для контраста с оранжевым page-bg. */
.vehicle-greeting {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--black);
}
.vehicle-greeting strong {
  font-weight: 700;
  color: var(--black);
}
.vehicle-window {
  font-size: 17px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.4;
  opacity: 0.85;
}
@media (max-width: 540px) {
  .vehicle-greeting { font-size: 17px; }
  .vehicle-window   { font-size: 15px; }
}

/* ─── Step 2: store-badges. Контейнер высотой = card-size, чтобы шаг
   не «прыгал» по высоте при свайпе между Step-1 и Step-2. */
.store-badges {
  width: min(85.6mm, calc(100vw - 32px));
  min-height: calc(min(85.6mm, calc(100vw - 32px)) / 1.586);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* Все 3 бейджа (Apple / KeyPhone direct / Google) — общая высота, общий
   look-and-feel. Width фиксирован, image внутри scales contain. */
.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 44px;
  border-radius: 8px;
  transition: transform 0.12s;
  flex: 0 0 auto;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* KeyPhone direct-download badge — мимикрия под Apple/Google badge: чёрный
   фон, скруглённые края, белый текст внутри. Кликом скачивается APK с
   нашего сервера. */
.store-badge-direct {
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  gap: 10px;
  text-decoration: none;
}
.store-badge-direct .direct-arrow {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.store-badge-direct .direct-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.store-badge-direct .direct-tiny {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--white);
}
.store-badge-direct .direct-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
}
@media (max-width: 540px) {
  .store-badge { width: 120px; height: 40px; }
  .store-badge-direct .direct-arrow { font-size: 19px; }
  .store-badge-direct .direct-name  { font-size: 14px; }
}

/* ─── No-token marketing: explainer + BC + badges ────────────────────────
   Виден на голом keyphone.io (без #t=). Объясняет flow для тех, кто впервые. */
.kp-marketing {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
}
.how-it-works {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: min(85.6mm, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.how-it-works li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.35;
}
.how-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.how-text { flex: 1 1 auto; }

.kp-marketing-bc {
  width: min(85.6mm, calc(100vw - 32px));
  aspect-ratio: 85.6 / 53.98;
  background: var(--black);
  border-radius: 4.5%;
  overflow: hidden;
}
.kp-marketing-bc-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.kp-marketing-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ─── Footer ─ симметрично topnav (padding 8px 24px, авто-высота под лого). */
footer {
  margin-top: auto;
  padding: 8px 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.foot-links {
  font-size: 13px;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.foot-links a:hover { text-decoration: underline; }
.dot { color: var(--black); }
.foot-mdbd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1;
  transition: transform 0.12s, background 0.12s;
}
.foot-mdbd:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.06);
}
.foot-mdbd-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--black);
  letter-spacing: 0.01em;
}
.foot-mdbd-logo {
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 540px) {
  .foot-mdbd-text { font-size: 13px; }
  .foot-mdbd-logo { height: 48px; }
}

/* ─── Mobile fallback (<540px) ─ карточка вертикально ── */
@media (max-width: 540px) {
  html, body { overflow-x: hidden; }
  .topnav { padding: 0 16px; height: 52px; }
  .brand .brand-line { font-size: 18px; }
  .lang-btn { font-size: 13px; }
  .hero { padding: 20px 16px 10px; }
  .hero-main { font-size: clamp(30px, 9vw, 40px); }
  .hero-sub { font-size: 14px; margin-top: 12px; }
  /* Карта в .card-row сжимается через flex; собственная ширина уменьшается
     до calc(100vw - 32px - 2 иконки). */
  .card,
  .card-bake {
    width: 100%;
    margin: 0 auto;
  }
  .downloads { margin: 14px auto 0; }
  footer { min-height: 64px; padding: 8px 16px; flex-wrap: wrap; gap: 8px; }
  .foot-links { font-size: 12px; }
}

/* ─── Privacy / Terms ─────────────────────────────── */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  text-align: left;
  font-weight: 400;
  line-height: 1.7;
  color: var(--black);
}
.legal h1 {
  font-size: 44px;
  font-style: italic;
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.legal h2 {
  font-weight: 700;
  font-size: 17px;
  margin: 28px 0 10px;
}
.legal p, .legal li {
  font-size: 13px;
  margin-bottom: 8px;
}
.legal a { text-decoration: underline; }
.legal .back {
  display: inline-block;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--black);
  padding: 8px 20px;
  border-radius: 22px;
}