/* ================================================================
   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) ---- */
  /* Cardora's own logo green, sampled from the real logo file — #00AB66 */
  --accent:        #00ab66;
  --accent-press:  #008952;
  --accent-soft:   #e5f7ee;
  --accent-ring:   rgba(0, 171, 102, 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: static;
  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; min-height: var(--topbar-h);
  padding: 0 var(--s5); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s3) 0;
}
.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); }
/* Desktop only (≥521px) — a little breathing room between "Cardora" and "Brampton, ON" below
   it. Scoped above the 520px mobile breakpoint so it can't touch the mobile layout, which the
   client asked to leave exactly as is. */
@media (min-width: 521px) {
  .brand__text { gap: 3px; }
}
.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); will-change: width; }
.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); }

/* Logo — large, centred, with a subtle light halo behind it */
.done__logo {
  margin:0 auto var(--s6); max-width:320px;
  background:var(--accent-soft); border-radius:var(--r-xl);
  padding:var(--s5) var(--s6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(21,49,92,.10);
}
.done__logo img { max-height:120px; width:auto; margin:0 auto; object-fit:contain; display:block; }

/* Celebratory headline */
.done__title {
  font-size:clamp(1.85rem,5.5vw,2.5rem); font-weight:800;
  letter-spacing:-0.035em; color:var(--ink);
  margin-bottom:var(--s3); text-wrap:balance;
  line-height:1.1;
}
/* Accent line under headline */
.done__title-accent {
  display:block; font-size:clamp(1rem,3vw,1.2rem); font-weight:700;
  color:var(--accent); letter-spacing:-0.01em; margin-top:6px;
}
.done__body { color:var(--ink-3); max-width:44ch; margin:0 auto var(--s6); text-wrap:balance; font-size:1.05rem; }
.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; }
.done__ref { margin-top:var(--s5); font-size:.82rem; color:var(--ink-4); }
.done__ref strong { color:var(--ink-3); font-weight:700; letter-spacing:.02em; user-select:all; }

/* ---------------- Post-submit: document upload (licence + paystub) ---------------- */
.docpromo { margin:0 0 var(--s5); padding:var(--s5); border:1.5px solid var(--accent); border-radius:var(--r-lg); background:var(--accent-soft); text-align:center; }
.docpromo__head { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.docpromo__title { font-size:1.15rem; font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.docpromo__tag { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:#fff; border-radius:var(--r-pill); padding:4px 10px; }
.docpromo__body { font-size:.95rem; color:var(--ink-3); max-width:40ch; margin:0 auto var(--s4); }
.docpromo .btn { width:100%; max-width:340px; }
.docpromo .backlink { margin-top:var(--s3); font-size:.9rem; }

.doctiles { display:flex; flex-direction:column; gap:12px; margin:var(--s5) auto var(--s4); max-width:440px; text-align:left; }
.doctile { border:1.5px dashed var(--hairline-2); border-radius:var(--r-lg); background:var(--field); transition:border-color var(--t), background var(--t); }
.doctile:hover { border-color:var(--accent); }
.doctile.has-file { border-style:solid; border-color:var(--accent); background:#fff; }
.doctile__pick { display:flex; align-items:center; gap:14px; width:100%; padding:16px; background:none; border:none; font:inherit; cursor:pointer; text-align:left; }
.doctile__icon { flex:none; width:46px; height:46px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.doctile__text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.doctile__title { font-size:1rem; font-weight:700; color:var(--ink); }
.doctile__hint { font-size:.82rem; color:var(--ink-4); }
.doctile__cta { flex:none; font-size:.85rem; font-weight:700; color:#fff; background:var(--accent); border-radius:var(--r-pill); padding:8px 16px; }
.doctile__file { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.doctile__file[hidden] { display:none; }
.doctile__thumb { flex:none; width:52px; height:52px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.doctile__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.doctile__meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.doctile__name { font-size:.92rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doctile__status { font-size:.8rem; color:var(--ink-4); }
.doctile__status.is-ok { color:var(--ok); font-weight:700; }
.doctile__status.is-bad { color:var(--danger); font-weight:700; }
.doctile__remove { flex:none; background:none; border:none; font:inherit; font-size:.85rem; font-weight:700; color:var(--ink-3); cursor:pointer; padding:8px; border-radius:var(--r-md); }
.doctile__remove:hover { color:var(--danger); background:var(--field); }

.docupload__err { color:var(--danger,#c0392b); font-size:.9rem; font-weight:600; margin:.4rem 0 var(--s3); min-height:1.2em; }
.docupload__note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:var(--s4); font-size:.78rem; color:var(--ink-4); }
.docupload__note svg { color:var(--ok); flex:none; }
#docUploadBtn { width:100%; max-width:340px; }

.done__logo--sm { max-width:220px; margin-bottom:var(--s5); padding:var(--s4) var(--s5); }
.done__logo--sm img { max-height:64px; }

.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); row-gap:2px; }
  .progress { padding:var(--s3) 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; order:2; margin-left:auto; }
  .secure span { display:inline; }
  /* Logo + "Secure & Encrypted" share the top row; the city text wraps to its own full-width
     row underneath (with a little padding above the progress bar), then the progress bar —
     same treatment as the other portals, so this doesn't feel like a different product on
     mobile. Cardora's "Cardora" name line is hidden here — on the narrow layout the logo
     (which already reads as "Cardora") plus the city is enough; the full name + city pairing
     is restored on desktop below, matching every other funnel. */
  .brand { display:contents; }
  .brand .brand__mark { order:1; }
  .brand .brand__text { order:3; flex-basis:100%; width:100%; margin-top:0; }
  .brand__name { display:none; }
  .brand__sub { font-size:.92rem; font-weight:800; letter-spacing:-0.01em; text-transform:none; color:var(--ink); }
}
@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; }
/* The TRUST.MODE:'secure' line ("Secure application · Your information is encrypted") is one
   long string with no shorter badges around it to wrap between — nowrap let it run off the
   edge on the narrowest phones (~320px). Placed after the base .trustitem rule above (same
   specificity, source order decides) so it actually wins on mobile — the earlier attempt lived
   inside the top mobile media query, which sits BEFORE this base rule in the file and so lost
   the cascade. Letting it wrap is harmless for the normal multi-badge case too, so this isn't
   scoped to just the secure-only variant. */
@media (max-width: 520px) {
  .trustitem { white-space:normal; text-align:center; }
}

/* optional real storefront photo — intro (first) screen only */
.intro-hero {
  position:relative; width:100%; max-width:560px; margin:0 auto var(--s5);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:16/9;
}
.intro-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.intro-hero__caption {
  position:absolute; left:var(--s4); bottom:var(--s4); display:inline-flex; align-items:center;
  padding:6px 12px; border-radius:var(--r-pill); background:rgba(20,23,28,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.01em;
}

/* 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; }

/* ================= Confetti burst (success screen) ================= */
.confetti-host {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:min(620px,100vw); height:0; pointer-events:none; z-index:9999; overflow:visible;
}
.confetti-piece {
  position:absolute; top:0; opacity:0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { opacity:1; transform:translateY(-20px) rotate(0deg); }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateY(520px) rotate(var(--rot)); }
}