/* Frosty Detailing — The Frost Check
 * Icy blue / white / graphite. Mobile-first; single dark "midnight ice" theme by design.
 */
:root {
  --bg: #061423;
  --bg-2: #0a1d31;
  --surface: rgba(186, 230, 253, 0.06);
  --surface-2: rgba(186, 230, 253, 0.1);
  --surface-solid: #0e253c;
  --border: rgba(186, 230, 253, 0.16);
  --border-strong: rgba(186, 230, 253, 0.42);
  --text: #eaf6ff;
  --text-muted: #a9c3d8;
  --ice: #7dd3fc;
  --ice-strong: #38bdf8;
  --ice-deep: #0b7fbf;
  --on-ice: #04223a;
  --star: #fcd34d;
  --success: #5eead4;
  --danger: #fda4af;

  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 260ms;

  --topbar-h: 60px;
  --cta-h: 88px;
  --z-bar: 40;
  --z-toast: 100;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -10%, #12395c 0%, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, #0b2a45 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
h1, h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 var(--s-3); text-wrap: balance; }
h1 { font-size: clamp(30px, 8.4vw, 44px); }
h2 { font-size: clamp(26px, 7vw, 34px); }
h1:focus, h2:focus { outline: none; }
p { margin: 0; }
a { color: var(--ice); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ice); color: var(--on-ice); padding: 10px 14px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.demo-strip {
  background: repeating-linear-gradient(-45deg, #3b2f0a 0 10px, #2e2508 10px 20px);
  color: #fde68a; font-size: 13px; text-align: center; padding: 6px 12px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2);
  min-height: var(--topbar-h);
  padding: max(env(safe-area-inset-top), 8px) 16px 8px;
  background: rgba(6, 20, 35, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.icon-btn {
  width: 44px; height: 44px; margin-left: -10px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--text);
  transition: background var(--t-fast);
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn[hidden] { display: none; }
.icon-btn[hidden] + .brand { grid-column: 1 / 3; }
.brand { display: flex; align-items: center; gap: 8px; font: 700 18px/1 var(--font-head); letter-spacing: -0.01em; }
.brand-flake { color: var(--ice); animation: spin 18s linear infinite; }
.brand-light { font-weight: 500; color: var(--text-muted); }
.rating-pill {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.rating-pill svg { fill: var(--star); }
.rating-count { color: var(--text-muted); }
.progress { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.progress-fill {
  height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ice-deep), var(--ice), #e0f4ff);
  transition: transform 480ms var(--ease-out);
}

/* ---------- Stage & steps ---------- */
.stage {
  display: grid; max-width: 520px; margin: 0 auto;
  padding: var(--s-5) 16px calc(var(--cta-h) + env(safe-area-inset-bottom) + var(--s-6));
}
.step { grid-area: 1 / 1; min-width: 0; }
.step[hidden] { display: none; }
.quote-chip { grid-row: 2; }
.eyebrow, .step-count {
  font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ice); margin-bottom: var(--s-3);
}
.step-count { color: var(--text-muted); }
.lede { color: var(--text-muted); font-size: 17px; margin-bottom: var(--s-5); max-width: 46ch; }
.ice-text {
  background: linear-gradient(100deg, #e0f4ff 10%, var(--ice) 45%, #e0f4ff 60%, var(--ice-strong) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}

/* ---------- Hero ---------- */
.hero-glass {
  position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--s-5);
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 70% at 50% 120%, rgba(56, 189, 248, 0.35), transparent 70%),
    linear-gradient(180deg, #0e2c49 0%, #071a2c 100%);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-car {
  position: absolute; left: 8%; right: 8%; bottom: 14%; width: 84%; height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
  animation: drive-in 1100ms var(--ease-out) both;
}
.hero-reflection {
  position: absolute; left: 10%; right: 10%; bottom: 6%; height: 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(125, 211, 252, 0.45), transparent 70%);
  filter: blur(6px);
}
.hero-sheen {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 48%, transparent 56%);
  transform: translateX(-60%);
  animation: sheen 5.5s var(--ease-out) 900ms infinite;
}
.beads { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bead {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 14%, rgba(224, 244, 255, 0.35) 30%, rgba(125, 211, 252, 0.08) 62%, rgba(255, 255, 255, 0.28) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation: bead-in 600ms var(--ease-spring) forwards, bead-slide var(--dur, 9s) ease-in var(--delay, 2s) infinite;
}
.proof-card {
  display: grid; gap: 4px; padding: var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
}
.stars { display: flex; gap: 2px; }
.stars svg { fill: var(--star); }
.stars.sm { margin-bottom: 6px; }
.proof-line { font-size: 16px; }
.proof-line a { color: var(--text); text-underline-offset: 3px; }
.proof-sub { color: var(--text-muted); font-size: 14px; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.perks li { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 15px; }
.perks svg { color: var(--ice); flex: none; }

/* ---------- Tiles (vehicle, need) ---------- */
.tiles { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.tiles-vehicle { grid-template-columns: 1fr 1fr; }
.tile { position: relative; display: block; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 116px; padding: var(--s-3);
  border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--border);
  text-align: center; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
  opacity: 0; transform: translateY(10px);
  animation: rise 420ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.tiles-vehicle .tile-face svg { width: 100%; max-width: 120px; height: 46px; overflow: visible; }
.tile-label { font: 600 15px/1.2 var(--font-head); }
.tile-hint { font-size: 12.5px; color: var(--text-muted); }
.tile input:hover + .tile-face { background: var(--surface-2); }
.tile input:active + .tile-face { transform: scale(0.97); }
.tile input:focus-visible + .tile-face { outline: 3px solid var(--ice); outline-offset: 2px; }
.tile input:checked + .tile-face {
  border-color: var(--ice); background: rgba(125, 211, 252, 0.14);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.14), 0 14px 30px -18px var(--ice);
}
.tile input:checked + .tile-face .body { filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.6)); }

.tiles-need .tile-face { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 84px; gap: var(--s-4); padding: var(--s-4); }
.need-icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(125, 211, 252, 0.28), rgba(11, 127, 191, 0.18)); color: var(--ice);
}
.need-icon svg { width: 26px; height: 26px; }
.need-copy { display: grid; gap: 2px; }
.need-copy .tile-hint { font-size: 14px; }
.tile-check {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: var(--on-ice);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tile-check svg { width: 16px; height: 16px; transform: scale(0); transition: transform var(--t-med) var(--ease-spring); }
.tile input:checked + .tile-face .tile-check { background: var(--ice); border-color: var(--ice); }
.tile input:checked + .tile-face .tile-check svg { transform: scale(1); }

/* Vehicle silhouette parts */
.body { fill: url(#gloss); }
.glass { fill: #0b2338; opacity: 0.9; }
.wheel { fill: #0a1622; stroke: #9adaf7; stroke-width: 2.2; }
.wheel.ring { fill: none; stroke-width: 3; }
.line { fill: none; stroke: #0b2338; stroke-width: 1.2; stroke-linecap: round; }
.line.thick { stroke: #9adaf7; stroke-width: 3; }
.line.water { stroke: var(--ice); stroke-width: 1.5; opacity: 0.6; }

/* ---------- Dirt slider ---------- */
.dirt-stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 2.1 / 1;
  border-radius: var(--r-lg); background: radial-gradient(70% 60% at 50% 100%, rgba(125, 211, 252, 0.18), transparent 70%), var(--surface);
  border: 1px solid var(--border); margin-bottom: var(--s-4); overflow: hidden;
}
.dirt-car { width: 86%; height: auto; overflow: visible; }
.dirt-layer { transition: opacity 120ms linear; }
.sparkle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: twinkle 1.6s ease-in-out infinite; }
.fly { fill: none; stroke: #c7b08f; stroke-width: 0.8; stroke-linecap: round; }
.dirt-readout { text-align: center; min-height: 64px; margin-bottom: var(--s-3); }
.dirt-label { font: 700 24px/1.2 var(--font-head); }
.dirt-label.pop { animation: pop 320ms var(--ease-spring); }
.dirt-sub { color: var(--text-muted); }
.dirt-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0;
  --pct: 15%;
}
.dirt-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 10px;
  background: linear-gradient(90deg, var(--ice) 0, #c9a46a var(--pct), var(--surface-2) var(--pct));
}
.dirt-range::-moz-range-track { height: 10px; border-radius: 10px; background: var(--surface-2); }
.dirt-range::-moz-range-progress { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ice), #c9a46a); }
.dirt-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ice); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.dirt-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--ice); }
.dirt-scale { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: 6px; }
.field label, .label-like { font-weight: 600; font-size: 15px; }
.req { color: var(--ice); }
.opt { font-weight: 400; color: var(--text-muted); font-size: 13px; margin-left: 4px; }
.field input:not([type=file]), .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; font-size: 17px;
  border-radius: var(--r-sm); background: rgba(3, 12, 22, 0.55); border: 1.5px solid var(--border);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.2); }
.field input[aria-invalid=true] { border-color: var(--danger); }
.field-help { font-size: 14px; color: var(--text-muted); }
.field-err { font-size: 14px; color: var(--danger); display: flex; gap: 6px; }
.field-err::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #3b0712; font: 700 12px/18px var(--font-body); text-align: center; margin-top: 1px; }
.err-summary { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border: 1.5px solid var(--danger); background: rgba(253, 164, 175, 0.08); }
.err-summary ul { margin: 6px 0 0; padding-left: 20px; }
.err-summary a { color: var(--danger); }
.fine { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.fine.center { text-align: center; margin-top: var(--s-4); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
/* Consent + email-a-copy */
.consent-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px var(--s-4); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 15px; line-height: 1.45; cursor: pointer; }
.consent-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ice); cursor: pointer; }
.fine.consent a { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; }
.email-quote { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.email-row { display: flex; gap: var(--s-2); }
.email-row input { flex: 1 1 auto; min-width: 0; }
.email-row .btn { flex: none; min-height: 52px; }
.email-ok { font-size: 15px; color: var(--success); font-weight: 600; }
.ready-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-bottom: var(--s-3);
  border-radius: 999px; background: rgba(94, 234, 212, 0.12); color: var(--success); font-weight: 600; font-size: 14px;
  animation: pop 500ms var(--ease-spring) both;
}

.upload {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  border-radius: var(--r-sm); border: 1.5px dashed var(--border-strong); color: var(--ice); font-weight: 600; cursor: pointer;
}
#photos:focus-visible + .thumbs, .upload:focus-within { outline: 3px solid var(--ice); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); animation: pop 300ms var(--ease-spring) both; }

/* Switches */
.switch-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); cursor: pointer; position: relative; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; position: relative; width: 48px; height: 28px; border-radius: 28px; background: var(--surface-2); border: 1.5px solid var(--border-strong); transition: background var(--t-med); margin-top: 1px; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--text-muted); transition: transform var(--t-med) var(--ease-spring), background var(--t-med); }
.switch-input:checked + .switch { background: var(--ice-strong); border-color: var(--ice-strong); }
.switch-input:checked + .switch::after { transform: translateX(20px); background: #fff; }
.switch-input:focus-visible + .switch { outline: 3px solid var(--ice); outline-offset: 3px; }
.switch-text { display: grid; gap: 2px; font-size: 15px; }
.switch-text > span { color: var(--text-muted); font-size: 14px; }
.addon-price { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.addon-price.quote { color: var(--text-muted); font-weight: 400; font-size: 14px; }

/* ---------- Quote ---------- */
.price-hero {
  text-align: center; padding: var(--s-5) var(--s-4); margin-bottom: var(--s-5); border-radius: var(--r-lg);
  background: radial-gradient(80% 90% at 50% 0%, rgba(125, 211, 252, 0.22), transparent 70%), var(--surface);
  border: 1px solid var(--border); position: relative; overflow: hidden;
}
.price-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.1) 50%, transparent 65%);
  transform: translateX(-100%); animation: sheen 3.8s var(--ease-out) 600ms infinite;
}
.price-caption { color: var(--text-muted); font-size: 14px; }
.price-big { font: 700 64px/1 var(--font-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.price-big .cur { font-size: 0.5em; vertical-align: 0.6em; margin-right: 2px; color: var(--ice); }
.price-meta { color: var(--text-muted); font-size: 14px; }

.pkg-list { border: 0; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.pkg { position: relative; display: block; }
.pkg > input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pkg-face {
  display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
  opacity: 0; transform: translateY(14px); animation: rise 480ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
.pkg > input:checked + .pkg-face { border-color: var(--ice); background: rgba(125, 211, 252, 0.12); box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.14); }
.pkg > input:focus-visible + .pkg-face { outline: 3px solid var(--ice); outline-offset: 2px; }
.pkg > input:active + .pkg-face { transform: scale(0.985); }
.pkg-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.pkg-tier { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pkg-name { font: 600 19px/1.2 var(--font-head); }
.pkg-level { font-size: 14px; color: var(--text-muted); }
.pkg-price { margin-left: auto; font: 700 24px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.pkg-flag {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ice), #e0f4ff); color: var(--on-ice); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.pkg details { position: relative; z-index: 1; }
.pkg summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ice); font-size: 14px; font-weight: 600; cursor: pointer; }
.pkg summary::-webkit-details-marker { display: none; }
.pkg summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-med) var(--ease-out); }
.pkg details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pkg ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--text-muted); }
.pkg li { display: flex; gap: 8px; }
.pkg li svg { flex: none; color: var(--success); margin-top: 2px; }
.pkg details[open] ul { animation: rise 260ms var(--ease-out); }

.addons { border: 0; padding: 0; margin: 0; }
.addons legend { font: 600 18px/1.2 var(--font-head); margin-bottom: var(--s-3); padding: 0; }
#addonList { display: grid; gap: var(--s-2); }
.addons .switch-row { align-items: center; padding: 12px var(--s-4); min-height: 60px; }

/* ---------- Time ---------- */
.scarcity { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(252, 211, 77, 0.12); color: var(--star); font-size: 14px; font-weight: 600; margin-bottom: var(--s-4); }
.scarcity::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.chips { border: 0; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.chips legend { font: 600 16px/1.2 var(--font-head); margin-bottom: var(--s-3); padding: 0; }
.chips-days { grid-template-columns: repeat(3, 1fr); }
.chips-times { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; text-align: center; min-height: 52px; padding: 8px; border-radius: var(--r-sm);
  background: var(--surface); border: 1.5px solid var(--border); font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  opacity: 0; animation: rise 360ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 35ms);
}
.chips-days .chip span { min-height: 76px; line-height: 1.2; }
.chip small { display: block; color: var(--text-muted); font-size: 12.5px; }
.chip b { font: 700 22px/1.1 var(--font-head); }
.chip input:checked + span { border-color: var(--ice); background: var(--ice); color: var(--on-ice); }
.chip input:checked + span small { color: var(--on-ice); }
.chip input:focus-visible + span { outline: 3px solid var(--ice); outline-offset: 2px; }
.chip input:active + span { transform: scale(0.96); }
.skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
.skel { height: 76px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skel.sm { height: 52px; }
.empty { padding: var(--s-5); text-align: center; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.empty p { margin-bottom: var(--s-3); color: var(--text-muted); }

/* ---------- Summary & trust ---------- */
.summary { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-solid); border: 1px solid var(--border); display: grid; gap: 8px; font-size: 15px; }
.summary h3 { font: 600 17px/1.2 var(--font-head); margin: 0 0 4px; }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-3); }
.sum-row span:first-child { color: var(--text-muted); }
.sum-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sum-row.total { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; font-weight: 600; }
.sum-row.deposit span:last-child { color: var(--ice); font-weight: 700; }
.guarantee { display: flex; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid rgba(94, 234, 212, 0.35); background: rgba(94, 234, 212, 0.07); }
.guarantee svg { flex: none; color: var(--success); }
.guarantee p { color: var(--text-muted); font-size: 14px; }

/* ---------- Testimonial chip ---------- */
.quote-chip {
  margin: var(--s-6) 0 0; padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.quote-chip.swap { animation: rise 420ms var(--ease-out); }
.quote-chip blockquote { margin: 0; font-size: 15px; line-height: 1.5; }
.quote-chip figcaption { margin-top: 6px; color: var(--text-muted); font-size: 13px; }
.quote-chip figcaption::before { content: '— '; }

/* ---------- Done ---------- */
.done { text-align: center; position: relative; padding-top: var(--s-5); }
.done .lede { margin-left: auto; margin-right: auto; }
.done-check { width: 96px; height: 96px; margin: 0 auto var(--s-4); display: block; }
.done-check circle { fill: rgba(125, 211, 252, 0.14); stroke: var(--ice); stroke-width: 3; stroke-dasharray: 227; stroke-dashoffset: 227; animation: draw 700ms var(--ease-out) 100ms forwards; }
.done-check path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 420ms var(--ease-out) 650ms forwards; }
.burst { position: absolute; left: 50%; top: 72px; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; color: var(--ice); }
.burst i svg { display: block; }
.done-video { width: 100%; border-radius: var(--r-md); margin-bottom: var(--s-4); background: #000; }
.done-actions { display: grid; grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-4); }
.referral { display: flex; align-items: center; gap: var(--s-3); text-align: left; padding: var(--s-4); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(125, 211, 252, 0.18), rgba(11, 127, 191, 0.12)); border: 1px solid var(--border-strong); }
.referral svg { flex: none; color: var(--ice); }
.referral p { font-size: 14px; color: var(--text-muted); }
.referral .btn { margin-left: auto; flex: none; }

/* ---------- Buttons & CTA bar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 14px; border: 1.5px solid transparent; font-weight: 600; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), opacity var(--t-fast);
}
.btn:active { transform: scale(0.97); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); font-size: 15px; }
.btn-small { min-height: 44px; padding: 0 16px; background: var(--ice); color: var(--on-ice); }
.btn-primary {
  position: relative; overflow: hidden; flex: 1; min-height: 56px; font: 700 17px/1 var(--font-head); letter-spacing: 0.01em;
  color: var(--on-ice); background: linear-gradient(180deg, #d4f0ff 0%, var(--ice) 45%, var(--ice-strong) 100%);
  box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 3.2s var(--ease-out) 1.2s infinite;
}
.btn-primary svg { transition: transform var(--t-med) var(--ease-out); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:disabled { cursor: not-allowed; box-shadow: none; background: var(--surface-solid); color: var(--text-muted); border-color: var(--border); }
.btn-primary:disabled::after { display: none; }
.btn-primary.loading { pointer-events: none; }
.btn-primary.loading svg { display: none; }
.btn-primary.loading #ctaLabel::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px; border-radius: 50%; border: 2.5px solid rgba(4, 34, 58, 0.3); border-top-color: var(--on-ice); animation: spin 700ms linear infinite; }

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px var(--s-4);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6, 20, 35, 0) 0%, rgba(6, 20, 35, 0.92) 28%, var(--bg) 100%);
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med);
}
.cta-bar > * { max-width: 520px; }
.cta-bar.gone { transform: translateY(110%); opacity: 0; pointer-events: none; }
.cta-consent { flex: 1 0 100%; max-width: 520px; margin: 0 0 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); text-align: center; }
.cta-consent[hidden] { display: none; }
.cta-consent a { color: var(--ice); text-decoration: underline; }
.cta-total { display: grid; line-height: 1.15; flex: none; }
.cta-total[hidden] { display: none; }
.cta-total-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cta-total-value { font: 700 22px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--cta-h) + env(safe-area-inset-bottom) + 8px); z-index: var(--z-toast);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 12px; background: #e0f4ff; color: var(--on-ice); font-weight: 600; font-size: 14px;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
@keyframes drive-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bead-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes bead-slide { 0%, 70% { translate: 0 0; } 100% { translate: 0 var(--fall, 40px); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .stage { padding-top: var(--s-7); }
  .cta-bar { justify-content: center; }
  .cta-bar .btn-primary { flex: 0 1 380px; }
  .tiles-vehicle { grid-template-columns: repeat(4, 1fr); }
  .stage:has([data-step=vehicle]:not([hidden])) { max-width: 720px; }
}
@media (hover: hover) {
  .pkg > input:hover + .pkg-face, .chip input:hover + span { border-color: var(--border-strong); }
}

/* ---------- Reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .hero-sheen, .btn-primary::after, .price-hero::after, .beads { display: none; }
  .brand-flake, .ice-text { animation: none !important; }
}