/* DEALR — shared styles. Premium fintech/auto aesthetic. */
:root {
  --ink: #0b1422;
  --ink-2: #16233b;
  --slate: #45536a;
  --muted: #64718a;              /* darkened for WCAG AA on white (~4.9:1) */
  --line: #e4e9f1;
  --line-2: #eef2f8;             /* softer hairline for inner dividers */
  --bg: #f5f7fb;
  --card: #ffffff;
  --brand: #1f6feb;
  --brand-2: #12b3a6;
  --brand-ink: #0b4bb5;
  --good: #0e9a56;
  --good-ink: #0a7a44;
  --warn: #e08a1e;
  --gold: #c9911d;
  /* layered, premium shadow ramp */
  --shadow-xs: 0 1px 2px rgba(12,21,36,.06);
  --shadow: 0 1px 2px rgba(12,21,36,.05), 0 6px 16px -6px rgba(12,21,36,.12);
  --shadow-md: 0 2px 4px rgba(12,21,36,.05), 0 14px 30px -10px rgba(12,21,36,.16);
  --shadow-lg: 0 8px 18px -8px rgba(12,21,36,.16), 0 32px 64px -20px rgba(12,21,36,.28);
  --ring: 0 0 0 3px rgba(31,111,235,.32);   /* focus-visible ring */
  --r: 14px;
  --r-sm: 10px;
  --r-lg: 20px;
  --maxw: 1120px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; color: var(--slate); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); }
img, svg { display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink); background: rgba(31,111,235,.09);
  padding: 6px 12px; border-radius: 999px;
}
.lead { font-size: 1.15rem; color: var(--slate); max-width: 60ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
section { padding: 68px 0; }
.section-tight { padding: 44px 0; }

/* Buttons */
.btn {
  --pad: 13px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 700; font-size: .98rem;
  padding: var(--pad); border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(31,111,235,.28); }
.btn-primary:hover { background: var(--brand-ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-lg { --pad: 16px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Top nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,248,251,.82); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: var(--ink); letter-spacing: -.03em; }
.brand:hover { color: var(--ink); }
.brand .logo { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a.link {
  color: var(--slate); font-weight: 600; font-size: .96rem;
  padding: 8px 14px; border-radius: 8px;
}
.nav-links a.link:hover { color: var(--ink); background: rgba(12,21,36,.05); }
.nav-links a.link.active { color: var(--brand-ink); }
.nav-cta { margin-left: 8px; }
.hamburger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center;
}
.hamburger svg { width: 22px; height: 22px; color: var(--ink); }

@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 66px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 14px 22px 22px; box-shadow: var(--shadow);
    transform: translateY(-140%); transition: transform .28s ease; visibility: hidden;
  }
  .nav-links.open { transform: translateY(0); visibility: visible; }
  .nav-links a.link { padding: 13px 12px; font-size: 1.05rem; border-radius: 10px; }
  .nav-links a.link:not(.active):hover { background: rgba(12,21,36,.05); }
  .nav-cta { margin: 8px 0 0; }
  .hamburger { display: inline-flex; }
}

/* Hero */
.hero {
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(31,111,235,.16), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgba(20,184,166,.14), transparent 55%),
    linear-gradient(180deg, #0c1524 0%, #12203a 100%);
  color: #eaf1fb; position: relative; overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 74px 0 84px; }
.hero h1 { color: #fff; }
.hero .lead { color: #b8c6dd; font-size: 1.2rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; color: #cdd9ec; font-size: .92rem; font-weight: 600; }
.hero-badge svg { width: 18px; height: 18px; color: var(--brand-2); flex: none; }
.hero .eyebrow { color: #bfe9e1; background: rgba(20,184,166,.16); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 52px 0 60px; }
}

/* Deal form card */
.form-card {
  background: var(--card); color: var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 26px; border: 1px solid rgba(255,255,255,.5);
}
.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-head h3 { margin: 0; font-size: 1.15rem; }
.steps-dots { display: flex; gap: 6px; }
.steps-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: background .2s, width .2s; }
.steps-dots i.on { background: var(--brand); width: 22px; }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.progress > i { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .35s ease; }

.step { display: none; }
.step.active { display: block; animation: fade .3s ease; }
.step h4 { font-size: 1.05rem; margin-bottom: 14px; color: var(--ink); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }
input.invalid, select.invalid { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.13); }
.field .err { display: none; color: #c23636; font-size: .78rem; margin-top: 5px; font-weight: 600; }
.field.show-err .err { display: block; }

/* ---------- custom on-brand dropdown (replaces native <select>) ---------- */
.dd { position: relative; }
/* the real <select> stays in the DOM for form semantics/value, visually hidden
   but still targetable by label[for] focus (which we forward to the trigger) */
.dd-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dd-ic { width: 18px; height: 18px; flex: none; }
.dd-trigger {
  position: relative; width: 100%; font: inherit; color: var(--ink);
  text-align: left; padding: 12px 40px 12px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.dd-trigger .dd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-trigger.is-placeholder .dd-val { color: var(--muted); }
.dd-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; transition: transform .2s ease, color .15s;
}
.dd-trigger:hover { border-color: var(--brand); }
.dd-trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }
.dd.open .dd-trigger { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }
.dd.open .dd-caret { transform: translateY(-50%) rotate(180deg); color: var(--brand); }
/* invalid state mirrored from the hidden native select (set by form validation) */
.dd-native.invalid ~ .dd-trigger { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.13); }

.dd-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center;
  pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.dd.open .dd-pop { opacity: 1; transform: none; pointer-events: auto; }
.dd-search-wrap { position: relative; margin-bottom: 6px; }
.dd-search-wrap .dd-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.dd-search {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  padding: 10px 12px 10px 34px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fbfcfe;
}
.dd-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.15); background: #fff; }
.dd-list {
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #cfd7e3 transparent;
}
.dd-list::-webkit-scrollbar { width: 10px; }
.dd-list::-webkit-scrollbar-track { background: transparent; }
.dd-list::-webkit-scrollbar-thumb { background: #cfd7e3; border-radius: 999px; border: 3px solid #fff; }
.dd-list::-webkit-scrollbar-thumb:hover { background: #b4c0d4; }
.dd-opt {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px;
  border-radius: 8px; cursor: pointer; color: var(--ink); font-size: .96rem;
  line-height: 1.2; user-select: none;
}
.dd-opt .dd-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt.active { background: rgba(31,111,235,.09); }
.dd-opt.selected { color: var(--brand-ink); font-weight: 700; }
.dd-opt .dd-check { width: 16px; height: 16px; color: var(--brand); opacity: 0; }
.dd-opt.selected .dd-check { opacity: 1; }
.dd-empty { padding: 14px 11px; color: var(--muted); font-size: .9rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .dd-pop, .dd-caret { transition: none; }
}
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  padding: 12px 14px; cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s;
}
.chip b { font-weight: 700; }
.chip span { font-size: .8rem; color: var(--muted); }
.chip:hover { border-color: var(--brand); }
.chip.sel { border-color: var(--brand); background: rgba(31,111,235,.06); box-shadow: 0 0 0 2px rgba(31,111,235,.12) inset; }
.form-nav { display: flex; gap: 10px; margin-top: 18px; }
.form-nav .btn { flex: 1; }
.form-foot { margin-top: 14px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 7px; justify-content: center; }
.form-foot svg { width: 15px; height: 15px; color: var(--good); }

/* Offer result */
.offer-result { text-align: center; padding: 4px 2px 2px; animation: fade .35s ease; }
.offer-result .tag { color: var(--muted); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.offer-amount { font-size: clamp(2.7rem, 11vw, 3.4rem); font-weight: 850; letter-spacing: -.035em; margin: 2px 0 6px; color: var(--ink); line-height: 1; }
.offer-amount .cur { font-size: .5em; vertical-align: super; color: var(--slate); font-weight: 700; }
.offer-car { color: var(--slate); font-weight: 650; font-size: .88rem; line-height: 1.35; margin: 0 auto 8px; max-width: 24ch; }
.offer-note { font-size: .82rem; color: var(--muted); line-height: 1.45; margin: 0 auto 16px; max-width: 30ch; }

/* The two routes a seller has: dealer vs private sale. Sits under the headline figure,
   deliberately quieter than .offer-amount so it informs without competing with it. */
.offer-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px auto 14px; max-width: 30ch; }
/* Same trap as .df-field above: this class's `display:grid` outranks the UA's
   [hidden]{display:none}, so `rEl.hidden = true` did NOTHING. The routes block stayed on
   screen through the whole loading state showing two dashes — and, on a SERVICE, the
   labels "SELL TO A DEALER / PRIVATE SALE / More money, more work", because reveal()
   only relabels them once a number lands. Owner caught it on a wedding-photography quote. */
.offer-routes[hidden]{display:none}
.offer-routes .or-col { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(148,163,184,.06); }
.offer-routes .or-label { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.offer-routes .or-val { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.offer-routes .or-sub { font-size: .7rem; color: var(--muted); line-height: 1.3; }
.offer-cta { display: grid; gap: 10px; }

/* Generic layout helpers */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; box-shadow: var(--shadow);
}
.card .ic {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(31,111,235,.1); color: var(--brand); margin-bottom: 16px;
}
.card .ic svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: .96rem; }

.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head p { margin: 0; }

/* Steps (how it works) */
.stepline { display: grid; gap: 20px; }
.stepline .row { display: grid; grid-template-columns: 62px 1fr; gap: 20px; align-items: start; }
.stepnum {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-ink)); box-shadow: 0 8px 18px rgba(31,111,235,.3);
}
.stepline .row h3 { margin-bottom: 6px; }
.stepline .row p { margin: 0; }

/* Stats band */
.band { background: var(--ink); color: #fff; }
.band h2 { color: #fff; }
.band p { color: #b8c6dd; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 8px; }
.stat b { display: block; font-size: 2.2rem; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.stat span { color: #9fb0c9; font-size: .92rem; font-weight: 600; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }

/* Social proof — testimonials + buyer network */
.quote {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
}
.quote .stars { display: inline-flex; gap: 3px; color: var(--gold); }
.quote .stars svg { width: 17px; height: 17px; }
.quote blockquote { margin: 0; font-size: 1.02rem; color: var(--ink-2); line-height: 1.5; }
.quote blockquote b { color: var(--brand-ink); font-weight: 750; }
.quote figcaption { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; }
.quote .who { font-weight: 700; color: var(--ink); font-size: .96rem; }
.quote .what { font-size: .84rem; color: var(--muted); }

.buyer-net { margin-top: 46px; text-align: center; }
.buyer-label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.buyer-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px;
}
.buyer-logo {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--slate);
  opacity: .72; filter: grayscale(1); transition: opacity .2s, color .2s;
}
.buyer-logo:hover { opacity: 1; color: var(--ink); }
.proof-note { margin: 26px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }

/* Offers page — agent working */
.agent-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 26px; margin-bottom: 26px;
}
.agent-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.agent-orb {
  width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--brand-2), var(--brand)); box-shadow: 0 0 0 6px rgba(31,111,235,.12);
}
.agent-orb::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(31,111,235,.4); border-top-color: transparent; animation: spin 1s linear infinite;
}
.agent-done .agent-orb::after { animation: none; border-color: transparent; }
.agent-head h3 { margin: 0; }
.agent-head .sub { margin: 0; font-size: .9rem; color: var(--muted); }
.agent-progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.agent-progress > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .4s ease; }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .sources { grid-template-columns: 1fr; } }
.source {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fbfcfe;
  opacity: .5; transition: opacity .3s, border-color .3s, background .3s;
}
.source.scanning { opacity: 1; border-color: var(--brand); background: rgba(31,111,235,.05); }
.source.done { opacity: 1; }
.source .dot { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; }
.source .dot svg { width: 20px; height: 20px; }
.source .nm { font-weight: 650; font-size: .92rem; }
.source .st { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); }
.source.scanning .st { color: var(--brand); }
.source.done .st { color: var(--good); }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(31,111,235,.3); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }

/* Results */
.results { animation: fade .4s ease; }
.results-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (max-width: 700px) { .results-summary { grid-template-columns: 1fr; } }
.rs-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.rs-card .k { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rs-card .v { font-size: 1.8rem; font-weight: 850; letter-spacing: -.02em; margin-top: 3px; }
.rs-card.best { border-color: var(--good); background: linear-gradient(180deg, rgba(15,157,88,.06), #fff); }
.rs-card.best .v { color: var(--good); }

.offer-list { display: grid; gap: 12px; }
.offer-row {
  display: grid; grid-template-columns: 44px 1fr auto auto; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.offer-row .rank { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(12,21,36,.05); color: var(--slate); }
.offer-row .who { min-width: 0; }
.offer-row .who b { font-size: 1.05rem; font-weight: 700; display: block; }
.offer-row .who span { font-size: .84rem; color: var(--muted); }
.offer-row .terms { text-align: right; font-size: .82rem; color: var(--muted); }
.offer-row .amt { text-align: right; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.offer-row.best { border-color: var(--good); box-shadow: 0 0 0 2px rgba(15,157,88,.25), var(--shadow); }
.offer-row.best .rank { background: var(--good); color: #fff; }
.offer-row.best .amt { color: var(--good); }
.best-flag {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--good); background: rgba(15,157,88,.12);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 4px;
}
.best-flag svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .offer-row { grid-template-columns: 40px 1fr auto; }
  .offer-row .terms { display: none; }
}

/* share / refer growth hook */
.share-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 26px; padding: 22px 24px; border-radius: var(--r);
  border: 1px solid rgba(15,157,88,.28);
  background: linear-gradient(180deg, rgba(15,157,88,.06), var(--card));
  box-shadow: var(--shadow);
}
.share-card h3 { font-size: 1.15rem; }
.share-card .eyebrow { color: var(--good); background: rgba(15,157,88,.12); }
.share-copy { min-width: 240px; flex: 1 1 320px; }
.share-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-links { display: inline-flex; gap: 8px; }
.share-ico {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, color .2s, transform .1s;
}
.share-ico:hover { border-color: var(--good); color: var(--good); }
.share-ico:active { transform: translateY(1px); }
.share-ico svg { width: 19px; height: 19px; }
@media (max-width: 640px) {
  .share-card { flex-direction: column; align-items: flex-start; }
  .share-actions { width: 100%; }
}

/* transient copy/share toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  background: var(--ink); color: #fff; font-weight: 600; font-size: .92rem;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state svg { width: 54px; height: 54px; color: var(--muted); margin: 0 auto 16px; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--brand-ink), #123a86);
  color: #fff; border-radius: 20px; padding: 46px; text-align: center; box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c9d8f2; max-width: 52ch; margin: 0 auto 22px; }

/* Trust / about */
.trust-list { display: grid; gap: 14px; }
.trust-item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.trust-item svg { width: 24px; height: 24px; color: var(--good); margin-top: 2px; }
.trust-item b { display: block; margin-bottom: 2px; }
.trust-item p { margin: 0; font-size: .95rem; }

.money-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 10px; }
@media (max-width: 760px) { .money-flow { grid-template-columns: 1fr; } }
.money-step { position: relative; padding: 22px; text-align: center; }
.money-step .n { font-weight: 800; color: var(--brand); font-size: .8rem; letter-spacing: .08em; }
.money-step h3 { margin: 8px 0 6px; font-size: 1.1rem; }
.money-step p { margin: 0; font-size: .92rem; }

.faq { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
details.qa { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 20px; box-shadow: var(--shadow); }
details.qa summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .plus { font-size: 1.4rem; color: var(--brand); transition: transform .2s; flex: none; }
details.qa[open] summary .plus { transform: rotate(45deg); }
details.qa p { padding: 0 0 16px; margin: 0; }

/* Footer */
.footer { background: var(--ink); color: #9fb0c9; padding: 54px 0 30px; margin-top: 20px; }
.footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 760px) { .footer .top { grid-template-columns: 1fr 1fr; gap: 26px; } }
.footer .brand { color: #fff; margin-bottom: 12px; }
.footer .tag { font-size: .92rem; color: #8496b0; max-width: 34ch; }
.footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.footer a { color: #9fb0c9; display: block; padding: 5px 0; font-size: .94rem; }
.footer a:hover { color: #fff; }
.footer .bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; font-size: .85rem; color: #6f8098; }

/* Legal prose (privacy / terms) */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { margin-top: 2em; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: 1.5em; }
.legal p, .legal li { color: var(--slate); }
.legal ul { margin: 0 0 1rem; padding-left: 1.2em; }
.legal li { margin-bottom: .4em; }
.legal .updated { color: var(--muted); font-size: .95rem; margin-bottom: 2em; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(9,15,26,.6);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--card); border-radius: var(--r); width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg); max-height: 92vh; overflow-y: auto; position: relative;
  transform: translateY(14px) scale(.98); transition: transform .22s ease;
}
.modal-overlay.open .modal { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; z-index: 2;
  border: 1px solid var(--line); background: #fff; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--slate);
}
.modal-close:hover { color: var(--ink); border-color: var(--slate); }
.modal-close svg { width: 18px; height: 18px; }
.modal .form-card { box-shadow: none; border: none; padding: 28px 24px 24px; }

@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .agent-orb::after { display: none; }
}

/* ===== REBUILT DEAL FORM — Cars/Items/Services → sub → details ===== */
.df{padding:22px}
.df-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.df-head h3{font-size:1.05rem;font-weight:700;margin:0;color:var(--ink)}
.df-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px}
.df-back:hover{color:var(--ink);background:var(--bg)}
.df-back svg{width:15px;height:15px}
.df-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:18px}
.df-bar>i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.df-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.df-grid-sm{grid-template-columns:1fr 1fr}
.df-grid-sm .df-card:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:480px){.df-grid,.df-grid-sm{grid-template-columns:1fr 1fr}}
.df-card{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:14px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.15s;font-family:var(--font)}
.df-card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(31,111,235,.12);transform:translateY(-1px)}
.df-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(31,111,235,.12),rgba(20,184,166,.14));color:var(--brand)}
.df-ic svg{width:20px;height:20px}
.df-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.df-tx b{font-size:.95rem;color:var(--ink);font-weight:700}
.df-tx span{font-size:.78rem;color:var(--muted);line-height:1.35}
.df-grid-sm .df-card{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px}
.df-grid-sm .df-tx{align-items:center}
.df-fields{display:flex;flex-direction:column;gap:13px;margin-bottom:18px}
.df-field{display:flex;flex-direction:column;gap:6px}
/* .df-field's own display beats the UA's [hidden]{display:none}, so a field the JS
   marked hidden (trim, when the car is a halo variant or has no real trims) stayed
   on screen as a dead empty dropdown reading "Pick model first". Same [hidden]
   override every other component here already has. */
.df-field[hidden]{display:none}
.df-field>label{font-size:.8rem;font-weight:600;color:var(--slate)}
.df-field input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:.95rem;font-family:var(--font);color:var(--ink);background:var(--card);transition:.15s}
.df-field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.df-field input::placeholder{color:#9aa7bd}
.df-err{display:none;font-size:.75rem;color:#dc2626}
.df-field.show-err .df-err{display:block}
.df-field.show-err input,.df-field.show-err .dd-trigger{border-color:#dc2626}
.dd{position:relative}
.dd-trigger{width:100%;height:46px;padding:0 12px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card);cursor:pointer;font-size:.95rem;font-family:var(--font);color:var(--ink);transition:.15s}
.dd-trigger:hover{border-color:#c3ccdb}
.dd.open .dd-trigger{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-val.ph{color:#9aa7bd}
.dd-caret{width:18px;height:18px;color:var(--muted);flex:none;transition:transform .2s}
.dd.open .dd-caret{transform:rotate(180deg)}
.dd-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;display:none}
.dd.open .dd-pop{display:block;animation:ddpop .14s ease}
@keyframes ddpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-search{width:100%;height:38px;padding:0 12px;margin-bottom:6px;border:1.5px solid var(--line);border-radius:8px;font-size:.9rem;font-family:var(--font)}
.dd-search:focus{outline:0;border-color:var(--brand)}
.dd-list{max-height:230px;overflow:auto;display:flex;flex-direction:column}
.dd-opt{text-align:left;padding:10px 12px;border:0;background:none;border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink);font-family:var(--font)}
.dd-opt:hover{background:var(--bg)}
.dd-opt.has-logo{display:flex;align-items:center;gap:10px}
.dd-logo{width:22px;height:22px;object-fit:contain;flex:none;border-radius:4px}
.dd-val{display:inline-flex;align-items:center;gap:8px;min-width:0}
.dd-val span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-val .dd-logo{width:20px;height:20px}
.dd-opt.sel{background:rgba(31,111,235,.1);color:var(--brand-ink);font-weight:600}
.dd-empty{padding:12px;text-align:center;color:var(--muted);font-size:.85rem}
.df-finalizing{font-size:1.25rem;font-weight:700;color:var(--brand)}
/* animated "getting your number" — always shows motion, never a silent wait */
.df-working{display:inline-flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:600;color:var(--ink)}
/* .offer-amount is typeset for a big FIGURE — weight 850, letter-spacing -.035em,
   line-height 1. While the quote loads it holds a SENTENCE instead, and that tight
   negative tracking crushed "Dex is checking 100s of buyers…" into itself while
   line-height:1 stacked it against the tag above and the car below. Running copy
   gets normal tracking and real vertical rhythm. */
.df-working{letter-spacing:normal;line-height:1.45;margin:14px 0 12px;max-width:26ch;text-align:left}
.df-step-txt{letter-spacing:normal;font-weight:650}
.offer-amount:has(.df-working){font-size:1.05rem;line-height:1.45;letter-spacing:normal;margin:0}
.offer-amount:has(.df-working)+.offer-car{margin-top:4px;line-height:1.5}
.df-spin{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid rgba(31,111,235,.18);border-top-color:var(--brand);animation:dfspin .7s linear infinite}
.df-step-txt{animation:dffade .5s ease}
@keyframes dfspin{to{transform:rotate(360deg)}}
@keyframes dffade{from{opacity:.2}to{opacity:1}}
.offer-amount .cur{animation:none}
.offer-result:not([hidden]) .offer-amount{animation:dfpop .4s cubic-bezier(.2,.8,.2,1)}
@keyframes dfpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* fixes: footer icon size + hide Back on first step */
.df-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:.78rem;color:var(--muted);text-align:center}
.df-foot svg{width:15px;height:15px;flex:none;color:var(--good)}
.df-back[hidden]{display:none}
.df-step[hidden],.offer-result[hidden]{display:none}
.offer-note svg{width:15px;height:15px}

/* ===== HERO REDESIGN v2 — light, centered, big headline (matches Perch bar) ===== */
.hero{background:radial-gradient(900px 520px at 50% -14%,rgba(31,111,235,.10),transparent 62%),radial-gradient(760px 420px at 88% -6%,rgba(20,184,166,.09),transparent 60%),var(--bg);color:var(--ink)}
.hero-center{max-width:640px;margin:0 auto;text-align:center;padding:60px 0 76px}
.hero .eyebrow{color:var(--brand-ink);background:rgba(31,111,235,.09);margin-bottom:22px}
.hero h1{color:var(--ink);font-size:clamp(2.6rem,6vw,4.2rem);font-weight:850;letter-spacing:-.035em;line-height:1.03;margin:0 0 18px}
.hero h1 .grad{background:linear-gradient(100deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--slate);font-size:1.18rem;max-width:52ch;margin:0 auto 30px}
.hero .form-card{max-width:560px;margin:0 auto;text-align:left;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 24px;margin-top:26px;color:var(--muted)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600}
.hero-trust svg{width:16px;height:16px;color:var(--brand-2);flex:none}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;box-shadow:0 3px 9px rgba(31,111,235,.32);flex:none}
.brand-mark svg{width:17px;height:17px}
.brand-name{font-weight:800;letter-spacing:-.02em}

/* ===== hero fixes v3: even 3-across mains, wordmark logo, kill top gap ===== */
.hero{padding:0}
.hero-center{padding:46px 0 72px}
/* 2x2 since the buy lane ("Find a deal") made this four cards — three-across left a lone
   orphan on the second row. Mobile still stacks to one column below. */
.df-grid-3{grid-template-columns:repeat(2,1fr)}
.df-grid-3 .df-card{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px}
.df-grid-3 .df-tx{align-items:center}
.df-grid-3 .df-tx b{font-size:.95rem}
.df-grid-3 .df-tx span{font-size:.76rem;white-space:nowrap;color:var(--muted)}
.brand-mark{display:none}
.brand-name{font-size:1.55rem;font-weight:850;letter-spacing:-.045em;color:var(--ink);line-height:1}
.brand-dot{background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== MOBILE fixes: stack main cards, 2-col subs, no overflow ===== */
@media (max-width: 560px){
  .df-grid-3{grid-template-columns:1fr}
  .df-grid-3 .df-card{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:14px}
  .df-grid-3 .df-tx{align-items:flex-start}
  .df-grid-3 .df-tx span{white-space:normal}
  .df-grid-sm{grid-template-columns:1fr 1fr}
  .hero-center{padding:34px 0 56px}
  .df{padding:18px}
}
@media (max-width: 380px){
  .df-grid-sm{grid-template-columns:1fr}
  .df-grid-sm .df-card{flex-direction:row;text-align:left}
  .df-grid-sm .df-tx{align-items:flex-start}
}
/* perfect the 2-col sub grid: a lone last card spans full width (no orphan) */
@media (max-width: 560px){
  .df-grid-sm .df-card:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ===== iOS TAP-ZOOM FIX ===== */
/* Mobile Safari auto-zooms into any focused input whose font-size is < 16px. Several
   of our inputs were ~14-15px, so tapping a field zoomed the page in. Force >=16px on
   every text-entry control on touch/mobile widths to kill the zoom (desktop unchanged). */
@media (max-width: 820px) {
  input, select, textarea,
  .dd-search, .df-field input, .field input, .field select,
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"] {
    font-size: 16px !important;
  }
}

/* ===== LOCK MOBILE ZOOM ===== */
/* Kill the double-tap-to-zoom gesture (the "weird zoom") site-wide while keeping
   normal scroll. Pairs with the viewport meta (maximum-scale=1, user-scalable=no)
   and the 16px inputs so nothing on mobile zooms unexpectedly. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ===== LIVE STATS BAND ===== */
.statband{background:var(--ink);color:#fff;padding:32px 0}
.statband-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,4vw,60px);align-items:start;text-align:center}
.sb b{display:block;font-size:clamp(1.9rem,6vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1;background:linear-gradient(90deg,#5ea0ff,#33d9b2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sb span{display:block;margin-top:7px;font-size:.82rem;color:#9fb0c8;font-weight:500;max-width:16ch}

/* Make the lone full-width "Other" sub-card a compact button, not a big block */
.df-grid-sm .df-card:last-child:nth-child(odd){flex-direction:row;justify-content:center;align-items:center;padding:11px 16px;gap:10px;min-height:0}
.df-grid-sm .df-card:last-child:nth-child(odd) .df-ic{width:26px;height:26px;border-radius:7px;flex:none}
.df-grid-sm .df-card:last-child:nth-child(odd) .df-ic svg{width:15px;height:15px}
.df-grid-sm .df-card:last-child:nth-child(odd) .df-tx{flex-direction:row;align-items:center;gap:0}
.df-grid-sm .df-card:last-child:nth-child(odd) .df-tx span{display:none}
.df-grid-sm .df-card:last-child:nth-child(odd) .df-tx b{font-size:.92rem}

/* ===== CONSIGNMENT OFFER (goods only) ===== */
.consign{margin:14px 0 4px;padding:14px;border:1.5px solid rgba(31,111,235,.25);background:linear-gradient(180deg,rgba(31,111,235,.05),rgba(20,184,166,.05));border-radius:var(--r-sm);text-align:left}
.consign[hidden]{display:none}
.consign-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.consign-head svg{width:19px;height:19px;flex:none;color:var(--brand)}
.consign-head b{font-size:.95rem;color:var(--ink);line-height:1.3}
.consign-pts{list-style:none;margin:0 0 13px;padding:0;display:flex;flex-direction:column;gap:6px}
.consign-pts li{font-size:.85rem;color:var(--slate);padding-left:20px;position:relative;line-height:1.45}
.consign-pts li:before{content:"";position:absolute;left:3px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--brand-2)}
.consign-pts li b{color:var(--ink);font-weight:750}

/* ===== OFFER: real product photo + brand logo ===== */
.offer-pic{position:relative;display:inline-block;margin:8px 0 14px;line-height:0}
.offer-pic[hidden]{display:none}
.offer-img{width:150px;height:150px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--line);padding:8px;box-shadow:0 8px 22px rgba(12,21,36,.10)}
.offer-img[hidden]{display:none}
.offer-brand{position:absolute;right:-9px;bottom:-9px;width:40px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px;box-shadow:0 4px 14px rgba(12,21,36,.16)}
.offer-brand[hidden]{display:none}

/* ===== FIXES ===== */
/* Footer brand was invisible: .brand-name is var(--ink) (dark) on the dark footer,
   so only the teal dot showed. Force the wordmark white inside the footer. */
.footer .brand-name{color:#fff}
.footer .brand:hover .brand-name{color:#fff}
/* stats labels were wrapping mid-phrase ("buyers checked per / deal") */
.sb span{max-width:18ch;margin-left:auto;margin-right:auto}

/* consignment: the actual maths the seller cares about */
.offer-pic{margin:4px 0 10px}
.offer-brand{position:static;right:auto;bottom:auto;width:44px;height:44px;box-shadow:none;border-radius:12px;padding:7px}
.consign-net{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.cn-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--slate);padding:4px 0}
.cn-row b{font-weight:750;color:var(--ink);white-space:nowrap}
.cn-row i{font-style:normal;color:var(--muted)}
.cn-row em{font-style:normal;font-size:.76rem;color:var(--muted);display:block}
.cn-take{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px}
.cn-take span{font-weight:700;color:var(--ink)}
.cn-take b{font-size:1.15rem;color:var(--good)}

/* consignment intake */
.consign-form{margin-top:12px;display:grid;gap:8px}
.consign-form[hidden]{display:none}
.cf-row input{width:100%;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:9px;font-family:var(--font);color:var(--ink);background:#fff}
.cf-row input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.cf-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-err{font-size:.78rem;color:#dc2626;font-weight:600}
.cf-err[hidden]{display:none}
.cf-note{font-size:.75rem;color:var(--muted);margin:2px 0 0;text-align:center}
.consign-done{text-align:center;padding:6px 2px}
.consign-done[hidden]{display:none}
.consign-done b{display:block;font-size:1.15rem;color:var(--good);margin-bottom:6px}
.consign-done p{font-size:.85rem;color:var(--slate);margin:0;line-height:1.5}
.consign-done i{font-style:normal;font-weight:750;color:var(--good)}
.consign-pts[hidden],.consign-net[hidden]{display:none}

/* ===== MY ITEMS — net worth + square tile grid ===== */
.networth{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;margin-bottom:16px}
.nw-label{font-size:.76rem;color:#9fb0c8;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.nw-val{font-size:clamp(2.2rem,9vw,3rem);font-weight:850;letter-spacing:-.035em;line-height:1.05;margin:4px 0 2px;background:linear-gradient(90deg,#5ea0ff,#33d9b2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nw-chg{margin-bottom:8px}
.nw-spark{margin:6px 0 8px;opacity:.95}
.nw-sub{font-size:.8rem;color:#9fb0c8}

/* square grid — 2-up on phones, fills out on wider screens */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:860px){.tiles{grid-template-columns:repeat(4,1fr)}}

.tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s}
.tile:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,18,32,.09)}
.tile-c{border-color:rgba(15,157,88,.34)}
/* sparkline bleeds across the bottom third, behind the numbers */
.t-spark{position:absolute;left:0;right:0;bottom:0;height:38%;opacity:.16;pointer-events:none}
.t-spark svg{width:100%;height:100%}
.t-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.t-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.t-head{margin-bottom:6px}
.t-title{font-weight:750;font-size:.84rem;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-foot{margin-top:auto;position:relative}
.t-cap{font-size:.64rem;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.t-val{font-size:clamp(1.05rem,4.4vw,1.3rem);font-weight:850;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.t-val-g{color:var(--good)}
.t-rcpt{font-size:.66rem;color:var(--muted);font-weight:600;margin-top:1px}
.t-chg{font-size:.7rem;font-weight:750;margin-top:1px}
.t-up{color:var(--good)}
.t-dn{color:#dc2626}
.t-flat{color:var(--muted);font-weight:600}

.pill{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(31,111,235,.1);color:var(--brand-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill-c{background:rgba(15,157,88,.12);color:#0f7a45}

/* ===== ACCOUNT — bank payout ===== */
.acct{margin-top:22px;border:1.5px solid var(--line);border-radius:var(--r);padding:18px;background:#fff}
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.acct-h{font-size:1.05rem;font-weight:800;margin:0 0 3px;letter-spacing:-.01em}
.acct-sub{font-size:.82rem;color:var(--muted);margin:0;line-height:1.45}
.pay-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
@media(min-width:560px){.pay-grid{grid-template-columns:1fr 1fr}}
.pay-f{display:flex;flex-direction:column}
.pay-lab{font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.pay-opt-tag{font-weight:600;opacity:.7}
.pay-in{width:100%;height:46px;padding:0 13px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--font);font-size:16px;color:var(--ink);background:#fff}
.pay-in:focus{outline:none;border-color:var(--brand)}
.pay-note{font-size:.76rem;color:var(--muted);background:#f6f8fb;border-radius:9px;padding:10px 12px;margin:0 0 14px;line-height:1.45}
.pay-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pay-msg{font-size:.8rem;font-weight:650}

/* segmented control — custom, no native select */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#f0f3f8;border-radius:10px;padding:4px;height:46px}
.seg-b{border:0;background:transparent;border-radius:7px;font-family:var(--font);font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:#fff;color:var(--brand-ink);box-shadow:0 1px 3px rgba(11,18,32,.14)}

/* =======================================================================
   POLISH LAYER v4 — cohesive premium refinement (enhancement, not teardown)
   Retunes rhythm, depth, focus/hover states & contrast. No class renames.
   Cascades last so it layers on top of the existing system.
   ======================================================================= */

/* --- Global text rendering & selection --- */
body { text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(31,111,235,.18); color: var(--ink); }
h2, h3, h4 { color: var(--ink); }

/* --- Accessibility: a single, consistent keyboard focus ring everywhere --- */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .chip:focus-visible, .df-card:focus-visible,
.dd-trigger:focus-visible, .buyer-logo:focus-visible, .share-ico:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}
.btn:focus-visible { box-shadow: var(--ring), var(--shadow); }
/* mouse users never see the ring; keyboard users always do */
:focus:not(:focus-visible) { outline: none; }

/* --- Eyebrow: crisper pill with a hairline --- */
.eyebrow {
  border: 1px solid rgba(31,111,235,.16);
  box-shadow: 0 1px 2px rgba(31,111,235,.06);
}

/* --- Lead & section rhythm --- */
.lead { text-wrap: pretty; }
.section-head { margin-bottom: 44px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 12px; }

/* --- Buttons: subtle depth gradient + a real hover lift --- */
.btn { transition: transform .16s var(--ease), box-shadow .22s var(--ease), background .18s ease, border-color .18s ease, color .18s ease; }
.btn-primary {
  background: linear-gradient(180deg, #2b78ee, var(--brand));
  box-shadow: 0 1px 2px rgba(11,45,110,.28), 0 8px 20px -6px rgba(31,111,235,.5);
}
.btn-primary:hover { background: linear-gradient(180deg, #2f7bf0, var(--brand-ink)); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(11,45,110,.3), 0 14px 30px -8px rgba(31,111,235,.6); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(11,45,110,.3); }
.btn-ghost { box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: rgba(31,111,235,.05); border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-light:hover { transform: translateY(-1px); }

/* --- Nav: refined blur, hover, and an active underline indicator --- */
.nav { background: rgba(245,247,251,.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.nav-links a.link { position: relative; transition: color .18s ease, background .18s ease; }
.nav-links a.link.active { background: rgba(31,111,235,.08); }
.nav-links a.link.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
@media (max-width: 860px) { .nav-links a.link.active::after { display: none; } }
.hamburger { transition: border-color .18s ease, background .18s ease; }
.hamburger:hover { border-color: var(--brand); }

/* --- Cards: gentle hover elevation + border warm-up --- */
.card { transition: transform .2s var(--ease), box-shadow .24s var(--ease), border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d4ddec; }
/* dark-band cards keep their treatment but still respond */
.band .card:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }
.card .ic { transition: transform .2s var(--ease); }
.card:hover .ic { transform: scale(1.06); }

/* --- Feature icon chips: richer, on-brand gradient fill --- */
.card .ic { background: linear-gradient(135deg, rgba(31,111,235,.12), rgba(18,179,166,.14)); box-shadow: inset 0 0 0 1px rgba(31,111,235,.08); }

/* --- Testimonial cards --- */
.quote { transition: transform .2s var(--ease), box-shadow .24s var(--ease); }
.quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --- Step numbers: a touch more depth --- */
.stepnum { box-shadow: 0 6px 16px -4px rgba(31,111,235,.45), inset 0 1px 0 rgba(255,255,255,.25); }

/* --- Hero: softer, layered ambient wash + tighter gradient headline --- */
.hero { background:
  radial-gradient(900px 520px at 50% -16%, rgba(31,111,235,.12), transparent 60%),
  radial-gradient(720px 420px at 90% -8%, rgba(18,179,166,.10), transparent 58%),
  linear-gradient(180deg, #fbfcfe, var(--bg) 40%);
}
.hero h1 .grad { background: linear-gradient(96deg, var(--brand) 10%, var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-trust span { transition: color .18s ease; }
/* hero-badge color (#cdd9ec) was built for the OLD dark hero; the hero is now light,
   so that light-gray text failed contrast on how-it-works / sell-my-car. Reseat it. */
.hero .hero-badge { color: var(--slate); font-weight: 650; }
.hero .hero-badge svg { color: var(--brand-2); }

/* --- Form card: crisper elevation --- */
.form-card { box-shadow: var(--shadow-lg); border: 1px solid var(--line); }

/* --- Detail selector cards inside the deal form --- */
.df-card { transition: border-color .16s ease, box-shadow .2s var(--ease), transform .16s var(--ease); }
.df-card:hover { box-shadow: 0 8px 22px -8px rgba(31,111,235,.28); }

/* --- Inputs & dropdowns: consistent focus ring token --- */
input:focus, select:focus, .df-field input:focus, .dd-search:focus, .cf-row input:focus { box-shadow: var(--ring); }

/* --- Stat bands: seat them with hairline separators --- */
.band { border-top: 1px solid rgba(255,255,255,.04); }
.statband { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05); }

/* --- Offer rows: hover feedback --- */
.offer-row:hover { border-color: #cdd8ea; box-shadow: var(--shadow-md); }
.rs-card { transition: box-shadow .2s var(--ease); }

/* --- FAQ: smoother, more tactile --- */
details.qa { transition: box-shadow .2s var(--ease), border-color .2s ease; }
details.qa:hover { border-color: #d4ddec; }
details.qa[open] { box-shadow: var(--shadow-md); border-color: #cdd8ea; }

/* --- CTA band: rounder, deeper, with an inner sheen --- */
.cta-band {
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(18,179,166,.28), transparent 55%),
    linear-gradient(135deg, var(--brand-ink), #123a86);
  box-shadow: 0 20px 50px -20px rgba(11,45,110,.7);
}
.cta-band .btn-light { border-color: rgba(255,255,255,.4); }

/* --- Footer: link hover slide + brighter dividers --- */
.footer a { transition: color .16s ease, padding-left .16s var(--ease); }
.footer .top a:hover { padding-left: 4px; }
.footer .brand:hover .brand-name { color: #fff; }

/* --- Empty state: friendlier --- */
.empty-state svg { opacity: .7; }

/* --- Toast: match shadow ramp --- */
.toast { box-shadow: var(--shadow-lg); }

/* --- Respect reduced motion for the new transforms --- */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .quote:hover, .btn:hover, .df-card:hover, .footer .top a:hover { transform: none; }
}

/* ── Sub-header ─────────────────────────────────────────────────────────────
   A slim bar that sticks directly under the main nav (66px) to hold page
   context (the eyebrow/label). Gives pages a defined secondary header instead
   of a pill jammed against the nav. Light, bordered, theme-consistent. */
.subhead {
  position: sticky; top: 66px; z-index: 40;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.subhead .wrap { display: flex; align-items: center; gap: 12px; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.subhead .eyebrow { margin: 0; }
.subhead .subhead-note { font-size: .86rem; color: var(--muted); font-weight: 600; }
@media (max-width: 720px) {
  .subhead { top: 66px; }
  .subhead .wrap { min-height: 42px; }
  .subhead .subhead-note { display: none; }
}


/* ============================================================
   FLOW STEP INDICATOR — lives in the sticky .subhead bar so the
   seller always knows where they are. Shared by Quick Sell and the
   car flow (sell-my-car -> offers). Sticks directly under .nav.
   ============================================================ */
.qs-steps { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 560px; margin-inline: auto; }
.qs-step { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.qs-step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--muted);
  font-size: .72rem; font-weight: 800; transition: background .15s, border-color .15s, color .15s;
}
.qs-step-dot svg { width: 12px; height: 12px; }
.qs-step-line { flex: 1 1 auto; height: 2px; min-width: 8px; background: var(--line); border-radius: 2px; transition: background .15s; }
.qs-step.is-current { color: var(--brand-ink); }
.qs-step.is-current .qs-step-dot { background: rgba(31,111,235,.10); border-color: var(--brand); color: var(--brand-ink); }
.qs-step.is-done { color: var(--ink); }
.qs-step.is-done .qs-step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.qs-step.is-done + .qs-step-line { background: var(--brand); }
@media (max-width: 720px) {
  .qs-steps { gap: 4px; }
  .qs-step { font-size: .74rem; gap: 5px; }
  .qs-step-dot { width: 19px; height: 19px; font-size: .66rem; }
}
@media (max-width: 380px) { .qs-step { font-size: .68rem; } }

/* ============================================================
   QUICK SELL CTA — "Option 1: Bold gradient CTA bar".
   Full-width sub-header that sits directly under the sticky nav
   (non-sticky, so it scrolls away). The WHOLE bar links to
   /quick-sell.html. Identical markup on every page.
   ============================================================ */
.qs-cta {
  display: block; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff; text-decoration: none; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.qs-cta:hover, .qs-cta:focus-visible { color: #fff; }
.qs-cta:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.qs-cta-inner {
  display: flex; align-items: center; gap: 13px;
  min-height: 52px; padding-top: 9px; padding-bottom: 9px;
}
.qs-cta-ic { width: 26px; height: 26px; color: #fff; flex: none; }
.qs-cta-txt { font-weight: 650; font-size: .96rem; line-height: 1.3; min-width: 0; }
.qs-cta-txt b { font-weight: 800; }
.qs-cta-btn {
  margin-left: auto; flex: none; white-space: nowrap;
  background: #fff; color: var(--brand-ink); font-weight: 700;
  border-radius: 999px; padding: 9px 17px; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.qs-cta:hover .qs-cta-btn { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
@media (max-width: 720px) {
  .qs-cta-inner { gap: 10px; }
  .qs-cta-txt { font-size: .9rem; }
  .qs-cta-sub { display: none; }      /* drop the sub-line on mobile, keep it clean */
  .qs-cta-btn-lead { display: none; } /* "Start Quick Sell →" -> "Quick Sell →" */
  .qs-cta-btn { padding: 8px 14px; font-size: .84rem; }
}

/* ── ACCOUNT: top-right profile circle + the shared sign-in form ───────────── */
/* Injected by assets/app.js into .nav-inner, so every page with the shared header
   gets it from one place. It sits between the nav links and the hamburger, which is
   why it is ordered explicitly rather than left to source order on mobile. */
.navacct { position: relative; display: flex; align-items: center; margin-left: 10px; }
.navacct-signin {
  font-size: .92rem; font-weight: 650; color: var(--slate); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; transition: background .16s var(--ease), color .16s var(--ease);
}
.navacct-signin:hover { color: var(--ink); background: rgba(12,21,36,.05); }
.navacct-btn {
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 999px; line-height: 0;
}
.navacct-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.navacct-av {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  box-shadow: var(--shadow-xs); user-select: none;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.navacct-btn:hover .navacct-av { transform: translateY(-1px); box-shadow: var(--shadow); }
.navacct-av.sm { width: 28px; height: 28px; font-size: .8rem; }
.navacct-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 232px; padding: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  /* Opens from the circle it belongs to rather than appearing fully formed. The global
     prefers-reduced-motion rule already collapses this to ~0s. */
  transform-origin: top right;
  animation: navacct-in .16s var(--ease);
}
@keyframes navacct-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* The avatar stays visibly "pressed" while its menu is open. */
.navacct.open .navacct-av { transform: translateY(-1px); box-shadow: var(--shadow); }
.navacct-who {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px 11px;
  border-bottom: 1px solid var(--line-2); margin-bottom: 5px;
}
/* The address is the one thing here that can be arbitrarily long — clip it rather than
   letting one long inbox stretch the whole menu off the edge of a phone. */
.navacct-em { font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navacct-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none;
  font: inherit; font-size: .92rem; color: var(--ink); text-decoration: none;
  border-radius: var(--r-sm); cursor: pointer;
}
.navacct-item:hover { background: rgba(12,21,36,.05); }
/* Keyboard focus has to be as obvious as hover — arrow keys move through these. */
.navacct-item:focus-visible { outline: none; background: rgba(12,21,36,.05); box-shadow: var(--ring); }
.navacct-out { color: #b42318; }
.navacct-out:hover, .navacct-out:focus-visible { background: rgba(180,35,24,.07); }
@media (max-width: 900px) {
  /* Beside the hamburger, not swallowed by the collapsing nav — signing in is exactly
     what someone needs when the menu is closed. */
  .navacct { order: 2; margin-left: auto; margin-right: 6px; }
  .hamburger { order: 3; }
}

.si { display: grid; gap: 10px; max-width: 340px; margin: 0 auto; text-align: left; }
.si-step { display: grid; gap: 10px; }
/* `display:grid` above outranks the hidden attribute's UA `display:none`, which showed the
   email step and the code step stacked on top of each other. */
.si-step[hidden] { display: none; }
.si-lab { font-size: .82rem; font-weight: 650; color: var(--slate); }
.si input {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.si input { transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.si input:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* A rejected code should be visible on the field, not only in the line underneath. */
.si input.bad { border-color: #b42318; }
.si input.bad:focus-visible { box-shadow: 0 0 0 3px rgba(180,35,24,.24); }
.si-step[data-step="code"] { animation: navacct-in .18s var(--ease); }
.si-alt { display: flex; align-items: center; justify-content: center; gap: 8px; }
.si-dot { color: var(--line); }
/* Wide tracking so six digits read as six digits, not a number. */
.si-code { text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .34em; text-indent: .34em; }
.si-link { border: 0; background: none; font: inherit; font-size: .84rem; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 4px 2px; border-radius: 6px; }
.si-link:hover { color: var(--ink); }
.si-link:focus-visible { outline: none; color: var(--ink); box-shadow: var(--ring); }
/* Disabled = the resend cooldown. Keep it readable, not ghosted out of existence. */
.si-link:disabled { color: var(--muted); opacity: .6; cursor: default; text-decoration: none; }
.si-msg { font-size: .84rem; color: var(--muted); margin: 2px 0 0; min-height: 1.2em; }
.si-msg.bad { color: #b42318; }