/* ================================================================
   DEALERSHIP FINANCE APPLICATION — white-label template
   Direction: refined minimalism · deep navy accent · near-black on white
   Typeface: Manrope · One question per screen · Auto-advance
   Re-skin via CSS variables + CONFIG in script.js.
   ================================================================ */

:root {
  /* ---- Accent (re-skin per brand if desired) ---- */
  --accent:        #15315c;
  --accent-press:  #0f2545;
  --accent-soft:   #eef2f8;
  --accent-ring:   rgba(21, 49, 92, 0.16);

  /* Surfaces */
  --bg:        #ffffff;
  --row:       #f4f5f7;
  --row-hover: #eceef2;
  --field:     #f6f7f9;
  --media:     #14171c;   /* dark well behind vehicle photos */
  --hairline:  #e8eaef;
  --hairline-2:#d9dde4;

  /* Ink */
  --ink:   #14171c;
  --ink-2: #3c4350;
  --ink-3: #69707e;
  --ink-4: #99a0ac;

  --danger: #c0392b;
  --ok:     #1f7a4d;
  --ok-bg:  #ecf6f0;

  /* Radius */
  --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Spacing rhythm (the key to consistent, premium spacing) ---- */
  --gap-q-to-help: 0.85rem;   /* question -> helper */
  --gap-help-to-body: 2.5rem; /* helper/question -> options/inputs  (generous, consistent) */
  --gap-option: 0.9rem;       /* between option rows */
  --gap-body-to-nav: 2.5rem;  /* options/inputs -> back/continue */

  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;

  --sh-1: 0 1px 2px rgba(20,23,28,.05), 0 1px 3px rgba(20,23,28,.06);
  --sh-2: 0 6px 22px rgba(20,23,28,.10);
  --sh-focus: 0 0 0 4px var(--accent-ring);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: 200ms var(--ease);
  --t-slow: 400ms var(--ease);

  --w-wide: 920px;
  --w-form: 620px;
  --topbar-h: 64px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bg);
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------- Layout ---------------- */
.portal { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  max-width: var(--w-wide); margin: 0 auto; height: var(--topbar-h);
  padding: 0 var(--s5); display:flex; align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; gap:var(--s3); }
.brand__mark { flex-shrink:0; height:34px; width:auto; max-width:180px; display:flex; align-items:center; justify-content:center; }
.brand__mark img { height:100%; width:auto; max-width:180px; object-fit:contain; }
.brand__text { display:flex; flex-direction:column; line-height:1.12; }
.brand__name { font-weight:800; font-size:1.05rem; color:var(--ink); letter-spacing:-0.02em; }
.brand__sub  { font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); }
.secure { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; color:var(--ink-3); }
.secure svg { color:var(--accent); }

.progress { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--s5) var(--s3); }
.progress__track { height:8px; background:var(--hairline); border-radius:var(--r-pill); overflow:hidden; }
.progress__fill { height:100%; width:6%; background:var(--accent); border-radius:var(--r-pill); transition:width var(--t-slow); }
.progress__meta { display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.progress__step { font-size:.72rem; font-weight:700; color:var(--accent); }
.progress__label { font-size:.72rem; font-weight:600; color:var(--ink-4); }
.progress__label:not(:empty)::before { content:"· "; }

/* ---------------- Stage / step ---------------- */
.stage { flex:1; width:100%; display:flex; justify-content:center; padding: var(--s8) var(--s5); }

.step {
  width:100%; max-width:var(--w-form); text-align:center;
  opacity:1; animation: rise var(--t-slow);
  display:flex; flex-direction:column; align-items:center;
}
.step--wide { max-width: var(--w-wide); }
@keyframes rise { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

/* Typography — balanced, designer-grade. text-wrap:balance prevents orphan words. */
.step__q {
  font-size: clamp(1.55rem, 3.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
  max-width: 30ch;            /* wide enough that short Qs stay on one line */
  margin: 0;
}
.step__sub {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.5;
  text-wrap: balance;
  max-width: 46ch;
  margin: var(--gap-q-to-help) 0 0;
}
.step__sub:empty { display:none; }

/* The body holds options/inputs. One consistent gap from the header block. */
.step__body { width:100%; margin-top: var(--gap-help-to-body); display:flex; flex-direction:column; align-items:center; }

/* ---------------- Option rows ---------------- */
.options { display:flex; flex-direction:column; gap:var(--gap-option); width:100%; max-width:520px; }

.opt {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:74px; padding: 1rem 62px;
  background:var(--row); border:1.5px solid transparent; border-radius:var(--r-lg);
  cursor:pointer; user-select:none;
  font-size:1.14rem; font-weight:700; color:var(--ink); text-align:center; line-height:1.3;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.opt:hover { background:var(--row-hover); }
.opt:active { transform: scale(.99); }
.opt:focus-visible { outline:none; box-shadow:var(--sh-focus); }
.opt.is-selected { background:var(--accent-soft); border-color:var(--accent); box-shadow:var(--sh-focus); color:var(--accent); }

.opt__check {
  position:absolute; right:18px; top:50%; transform:translateY(-50%) scale(.4);
  width:28px; height:28px; border-radius:var(--r-pill); background:var(--accent);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition: opacity var(--t), transform var(--t);
}
.opt.is-selected .opt__check { opacity:1; transform:translateY(-50%) scale(1); }
.opt__check svg { stroke:#fff; }

/* ---------------- Vehicle cards ---------------- */
.vehicles { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); width:100%; max-width:var(--w-wide); }

.vcard {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:0;
  padding:0; background:var(--row); border:1.5px solid transparent; border-radius:var(--r-xl);
  cursor:pointer; user-select:none; overflow:hidden;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.vcard:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.vcard:focus-visible { outline:none; box-shadow:var(--sh-focus); }
.vcard.is-selected { border-color:var(--accent); box-shadow:var(--sh-focus); background:var(--accent-soft); }

/* clean light tile — white-bg car photos sit directly on it */
.vcard__media {
  width:100%; aspect-ratio: 16 / 10;
  background: #fff;
  display:flex; align-items:center; justify-content:center; padding:6px;
}
.vcard__media img { width:100%; height:100%; object-fit:contain; }
.vcard.is-selected .vcard__media { background:#fff; }

.vcard__label { padding: 1.1rem 1rem 1.25rem; font-size:1.05rem; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.vcard.is-selected .vcard__label { color:var(--accent); }

.vcard__check {
  position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:opacity var(--t), transform var(--t);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.vcard.is-selected .vcard__check { opacity:1; transform:scale(1); }
.vcard__check svg { stroke:#fff; }

@media (max-width: 840px) { .vehicles { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) {
  .vehicles { grid-template-columns:1fr; gap:var(--s4); }
  .vcard { flex-direction:row; align-items:stretch; }
  .vcard__media { width:128px; flex-shrink:0; aspect-ratio:auto; }
  .vcard__label { display:flex; align-items:center; padding:0 1.1rem; }
}

/* ---------------- Inputs ---------------- */
.fields { display:flex; flex-direction:column; gap:var(--s5); width:100%; max-width:480px; text-align:left; }

.field { display:flex; flex-direction:column; }
.field__label { font-size:.9rem; font-weight:700; color:var(--ink-2); margin-bottom:9px; }
.field__opt { font-weight:500; color:var(--ink-4); }

.input {
  width:100%; height:60px; padding:0 18px;
  font: inherit; font-size:1.05rem; font-weight:600; color:var(--ink);
  background:var(--field); border:1.5px solid var(--hairline-2); border-radius:var(--r-md);
  outline:none; transition:border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance:none; appearance:none;
}
.input::placeholder { color:var(--ink-4); font-weight:500; }
.input:hover { border-color:#c6ccd5; }
.input:focus { border-color:var(--accent); background:#fff; box-shadow:var(--sh-focus); }
.input.is-bad { border-color:var(--danger); box-shadow:0 0 0 4px rgba(192,57,43,.12); }

select.input {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2369707e' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:46px;
}

.row3 { display:grid; grid-template-columns:1.3fr 1fr 1.1fr; gap:var(--s3); }
@media (max-width:420px){ .row3{ grid-template-columns:1fr 1fr; } .row3 .field:last-child{ grid-column:1/-1; } }

/* Google legacy Autocomplete dropdown (.pac-container) — match the funnel */
.pac-container {
  margin-top:6px; border:1.5px solid var(--hairline-2); border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(15,23,42,.12); background:#fff;
  font-family:'Manrope', inherit; overflow:hidden;
}
.pac-container:after { display:none; } /* hide Google logo row spacing */
.pac-item {
  padding:11px 16px; font-size:.98rem; color:var(--ink-2);
  border-top:1px solid var(--hairline); cursor:pointer; line-height:1.4;
}
.pac-item:first-child { border-top:0; }
.pac-item:hover, .pac-item-selected { background:var(--field); }
.pac-item-query { font-size:.98rem; font-weight:700; color:var(--ink); }
.pac-matched { font-weight:800; }
.pac-icon { margin-right:10px; }

.err { font-size:.85rem; font-weight:600; color:var(--danger); margin-top:10px; text-align:left; width:100%; max-width:480px; }
.err:empty { display:none; }

.linkline {
  display:inline-block; margin:0 0 var(--s5); font-size:.9rem; font-weight:700; color:var(--accent);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; background:none; border:none; font-family:inherit;
}
.linkline:hover { color:var(--accent-press); }

/* ---------------- OTP ---------------- */
.otp { display:flex; gap:var(--s2); justify-content:center; width:100%; max-width:300px; }
.otp__box {
  flex:1; max-width:44px; height:52px; text-align:center; font-size:1.25rem; font-weight:800; color:var(--ink);
  background:var(--field); border:1.5px solid var(--hairline-2); border-radius:var(--r-md); outline:none;
  transition:border-color var(--t), box-shadow var(--t), background var(--t); -webkit-appearance:none; appearance:none;
}
.otp__box:focus { border-color:var(--accent); background:#fff; box-shadow:var(--sh-focus); }
.otp__box.is-filled { border-color:var(--accent); }
.otp.is-bad .otp__box { border-color:var(--danger); }
@media (max-width:380px){ .otp__box{ height:46px; font-size:1.1rem; max-width:40px; } }

.resend { background:none; border:none; font-family:inherit; font-size:.9rem; font-weight:700; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.resend:disabled { color:var(--ink-4); cursor:default; text-decoration:none; }
.verifying { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--ink-3); }
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid var(--hairline-2); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------- Summary ---------------- */
.summary { text-align:left; background:var(--field); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s5); width:100%; max-width:480px; }
.summary__title { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--s4); }
.summary__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); }
@media (max-width:440px){ .summary__grid{ grid-template-columns:1fr; } }
.summary__k { font-size:.72rem; color:var(--ink-4); margin-bottom:3px; }
.summary__v { font-size:.95rem; font-weight:700; color:var(--ink); word-break:break-word; }

.consent { display:flex; gap:var(--s3); align-items:flex-start; width:100%; max-width:480px; text-align:left; cursor:pointer; margin-top:var(--s5); }
.consent input { width:20px; height:20px; min-width:20px; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.consent__text { font-size:.84rem; color:var(--ink-3); line-height:1.55; }
.consent__text a { text-decoration:underline; text-underline-offset:2px; }

/* ---------------- Buttons / nav ---------------- */
.nav { display:flex; align-items:center; justify-content:center; gap:var(--s3); margin-top:var(--gap-body-to-nav); width:100%; }
.nav--split { justify-content:space-between; max-width:480px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:58px; padding:0 38px; font:inherit; font-size:1.02rem; font-weight:700;
  border:none; border-radius:var(--r-md); cursor:pointer;
  transition:background var(--t), transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background:var(--accent); color:#fff; box-shadow:var(--sh-1); min-width:190px; }
.btn--primary:hover { background:var(--accent-press); }
.btn--primary:active { transform:translateY(1px); }
.btn--primary:disabled { opacity:.55; cursor:default; transform:none; }
.btn--ghost { background:transparent; color:var(--ink-3); border:1.5px solid var(--hairline-2); height:54px; padding:0 22px; min-width:0; }
.btn--ghost:hover { color:var(--ink); border-color:#c6ccd5; background:var(--field); }
.btn.is-loading { color:transparent; pointer-events:none; position:relative; }
.btn.is-loading::after { content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite; }

.backlink { display:inline-flex; align-items:center; gap:7px; margin-top:var(--gap-body-to-nav); background:none; border:none; font-family:inherit; font-size:1rem; font-weight:700; color:var(--ink-3); cursor:pointer; padding:10px 16px; border-radius:var(--r-md); transition:color var(--t), background var(--t); }
.backlink:hover { color:var(--ink); background:var(--field); }
.backlink svg { width:18px; height:18px; }

.trustnote { display:flex; align-items:center; justify-content:center; gap:6px; font-size:.76rem; color:var(--ink-4); margin-top:var(--s4); }
.trustnote svg { color:var(--ok); }

/* ---------------- Success ---------------- */
.done { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s8) var(--s5); }
.done__inner { max-width:var(--w-form); width:100%; text-align:center; animation:rise var(--t-slow); }
.done__check { width:78px; height:78px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:flex; align-items:center; justify-content:center; margin:0 auto var(--s5); }
.done__logo { margin:0 auto var(--s5); max-width:200px; }
.done__logo img { max-height:64px; width:auto; margin:0 auto; object-fit:contain; }
.done__title { font-size:clamp(1.7rem,5vw,2.2rem); font-weight:800; letter-spacing:-0.03em; color:var(--ink); margin-bottom:var(--s3); text-wrap:balance; }
.done__body { color:var(--ink-3); max-width:44ch; margin:0 auto var(--s6); text-wrap:balance; }
.done__next { text-align:left; background:var(--field); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s5); }
.done__next-label { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--s4); }
.done__steps { list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:var(--s3); }
.done__steps li { counter-increment:s; display:flex; align-items:center; gap:var(--s4); font-size:.96rem; color:var(--ink); font-weight:600; }
.done__steps li::before { content:counter(s); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; }

.foot { padding:var(--s5); text-align:center; font-size:.74rem; color:var(--ink-4); border-top:1px solid var(--hairline); }
.foot a { color:var(--ink-4); text-decoration:underline; text-underline-offset:2px; }

/* ---------------- Mobile ---------------- */
@media (max-width: 520px) {
  :root { --gap-help-to-body: 2rem; --gap-body-to-nav: 2rem; --s8: 2.75rem; }
  .topbar__inner { padding:0 var(--s4); }
  .progress { padding:0 var(--s4) var(--s3); }
  .stage { padding: var(--s7) var(--s4); }
  .opt { min-height:68px; font-size:1.06rem; padding:1rem 56px; }
  .btn--primary { width:100%; }
  .nav { flex-direction:column-reverse; }
  .nav--split { flex-direction:row; }
  .secure { font-size:.68rem; }
  .secure span { display:inline; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ================= Trust strip (intro + above submit) ================= */
.truststrip {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px;
  margin: 0 auto var(--s2); padding: 0;
}
.truststrip--intro { margin-top: var(--s3); margin-bottom: 0; }
.trustitem {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:700; color:var(--ink-3); white-space:nowrap;
}
.trustitem svg { width:15px; height:15px; flex-shrink:0; }
.trustitem .star { color:#e8a200; }
.trustitem .lock { color:var(--ok); }
.trustitem .badge { color:var(--accent); }
.trustitem b { color:var(--ink-2); font-weight:800; }

/* sub-line under intro headline */
.subline {
  font-size:.95rem; font-weight:600; color:var(--ink-3); margin-top:var(--s3); text-wrap:balance;
}

/* reassurance near submit */
.reassure {
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:.82rem; font-weight:600; color:var(--ink-4); margin-top:var(--s4);
}
.reassure svg { width:14px; height:14px; color:var(--ok); }

/* ================= Footer: trust + powered-by ================= */
.foot { display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.foot__trust {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px;
}
.foot__legal { order:2; }
.poweredby {
  order:3; display:inline-flex; align-items:center; gap:7px; opacity:.6;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4);
  transition:opacity var(--t);
}
.poweredby:hover { opacity:1; }
.poweredby img { height:18px; width:auto; }