/* ==========================================================================
   Steven Sells Cars — dark premium
   One accent, lots of black, photos do the talking.
   ========================================================================== */

:root {
  --bg:        #0a0b0e;
  --bg-deep:   #060709;   /* the page bottoms out here */
  --bg-elev:   #121520;
  --bg-elev-2: #181c28;
  --wash-warm: rgba(232, 35, 43, .10);
  --wash-cool: rgba(56, 96, 190, .085);
  --line:      #262a32;
  --line-soft: #1c1f26;
  --ink:       #f5f6f8;
  --ink-mid:   #b9c0cb;
  --ink-dim:   #7b8391;
  --accent:    #e8232b;
  --accent-hi: #ff3b43;
  --accent-dim:#7a1418;
  --ok:        #22c55e;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow: 0 18px 50px -12px rgba(0,0,0,.75);
  --maxw: 1200px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #101219 0%, var(--bg) 34%,
                                    var(--bg) 72%, var(--bg-deep) 100%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* --- type ---------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.03; }
h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.032em; }
h3 { font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.25; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px;
}

.lede { font-size: 1.14rem; color: var(--ink-mid); max-width: 56ch; }
.accent { color: var(--accent); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 100px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px -8px rgba(232,35,43,.55);
}
.btn-primary:hover {
  background: var(--accent-hi);
  box-shadow: 0 14px 38px -8px rgba(232,35,43,.7);
  transform: translateY(-2px);
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-dim); background: rgba(255,255,255,.04); transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .9rem; }
.btn-block { width: 100%; }

/* --- header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(10,11,13,.72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.hdr.scrolled { border-bottom-color: var(--line-soft); background: rgba(10,11,13,.92); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

.brand { display: flex; align-items: baseline; gap: 8px; font-weight: 800; letter-spacing: -.035em; font-size: 1.2rem; }
.brand .b-sub { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); }

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: .95rem; font-weight: 550; color: var(--ink-mid); transition: color .15s; }
.nav a:hover { color: var(--ink); }

.hdr-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); padding: 8px; cursor: pointer; }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(60px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 40% 40% -20%;
  background: radial-gradient(ellipse at center, rgba(232,35,43,.16), transparent 62%);
  pointer-events: none;
}
.hero-grid {
  position: relative; display: grid; gap: clamp(40px, 5vw, 72px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
}
.hero h1 { margin-bottom: 26px; }
.hero h1 .line { display: block; }
.hero h1 .muted { color: var(--ink-dim); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

.hero-media { position: relative; }

/* Slideshow: every slide stacked in one box so there is no reflow on change.
   The container owns the aspect ratio; slides just cross-fade inside it. */
.hero-slides {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--bg-elev);
}
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.on { opacity: 1; }

.hero-dots {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; gap: 7px; padding: 7px 10px; border-radius: 100px;
  background: rgba(10,11,13,.55); backdrop-filter: blur(8px);
}
.hero-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255,255,255,.36);
  transition: background .25s ease, width .25s ease;
}
.hero-dot.on { background: var(--accent); width: 20px; border-radius: 100px; }
.hero-dot:hover { background: rgba(255,255,255,.7); }
.hero-tag {
  position: absolute; left: -14px; bottom: -18px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; max-width: 78%;
}
.hero-tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none;
                 box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
.hero-tag span { font-size: .88rem; font-weight: 650; letter-spacing: -.01em; }

/* --- stats --------------------------------------------------------------- */
.stats { border-block: 1px solid var(--line-soft); background: var(--bg-elev); }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 24px; text-align: center; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.035em; }
.stat span { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }

/* --- sections ------------------------------------------------------------ */
.sec { padding: clamp(64px, 9vw, 116px) 0; }
.sec-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { margin-top: 18px; }

/* --- steps --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 32px 28px;
  transition: border-color .2s ease, transform .2s ease;
}
.step:hover { border-color: var(--line); transform: translateY(-3px); }
.step-n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(232,35,43,.12); color: var(--accent);
  font-weight: 800; font-size: 1rem; margin-bottom: 20px;
  border: 1px solid rgba(232,35,43,.25);
}
.step p { color: var(--ink-mid); font-size: .98rem; margin: 12px 0 0; }

/* --- gallery ------------------------------------------------------------- */
.gallery { columns: 4; column-gap: 14px; }
.gallery figure {
  margin: 0 0 14px; break-inside: avoid; position: relative;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-soft);
  background: var(--bg-elev); cursor: zoom-in;
}
.gallery img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.gallery figure:hover img { transform: scale(1.045); }
.gallery figure::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(232,35,43,.22), transparent 55%);
  transition: opacity .3s;
}
.gallery figure:hover::after { opacity: 1; }

/* --- lightbox ------------------------------------------------------------ */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(5,6,8,.94); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 28px;
}
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: var(--r); box-shadow: var(--shadow); }
.lb-close, .lb-nav {
  position: absolute; background: rgba(255,255,255,.07); border: 1px solid var(--line);
  color: var(--ink); width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.16); }
.lb-close { top: 22px; right: 22px; }
.lb-nav.prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 22px; top: 50%; transform: translateY(-50%); }

/* --- story --------------------------------------------------------------- */
.story-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.story-media { position: relative; }
.story-media img {
  width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; object-position: center 22%;
}
.story-quote {
  border-left: 3px solid var(--accent); padding-left: 22px; margin: 30px 0 0;
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.45;
}

/* --- socials ------------------------------------------------------------- */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.social {
  display: flex; align-items: center; gap: 18px; padding: 26px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); transition: border-color .2s, transform .2s, background .2s;
}
.social:hover { border-color: var(--line); transform: translateY(-3px); background: var(--bg-elev-2); }
.social svg { width: 30px; height: 30px; flex: none; }
.social b { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.social span { font-size: .88rem; color: var(--ink-dim); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; background: var(--bg-elev); border-block: 1px solid var(--line-soft); }
.cta-band::before {
  content: ""; position: absolute; inset: -60% 20% 20% -10%;
  background: radial-gradient(ellipse at center, rgba(232,35,43,.2), transparent 60%);
}
.cta-in { position: relative; text-align: center; padding: clamp(60px, 8vw, 104px) 0; }
.cta-in h2 { margin-bottom: 18px; }
.cta-in .lede { margin: 0 auto; }
.cta-in .hero-actions { justify-content: center; }

/* --- forms --------------------------------------------------------------- */
.form-card {
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 42px);
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .84rem; font-weight: 650; letter-spacing: .01em; margin-bottom: 8px; color: var(--ink-mid); }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,35,43,.16);
}
.field .hint { font-size: .8rem; color: var(--ink-dim); margin-top: 7px; }
.row { display: grid; gap: 20px; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 2fr 1fr 1fr; }
.hp { position: absolute; left: -9999px; opacity: 0; }

.radio-set { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-set label {
  flex: 1; min-width: 120px; margin: 0; padding: 13px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  font-size: .95rem; color: var(--ink); transition: all .15s;
}
.radio-set input { position: absolute; opacity: 0; width: 0; }
.radio-set input:checked + span { color: #fff; }
.radio-set label:has(input:checked) { border-color: var(--accent); background: rgba(232,35,43,.13); }

.secure-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.22);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 26px;
}
.secure-note svg { flex: none; width: 20px; height: 20px; color: var(--ok); margin-top: 2px; }
.secure-note p { margin: 0; font-size: .88rem; color: var(--ink-mid); }

.alert {
  background: rgba(232,35,43,.1); border: 1px solid rgba(232,35,43,.3);
  border-radius: var(--r-sm); padding: 14px 18px; margin-bottom: 24px; font-size: .95rem;
}
.legal { font-size: .78rem; color: var(--ink-dim); line-height: 1.65; margin-top: 26px; }

/* --- footer -------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line-soft); padding: 54px 0 40px; color: var(--ink-dim); font-size: .9rem; }
.ftr-in { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.ftr a:hover { color: var(--ink); }
.ftr-links { display: flex; gap: 26px; flex-wrap: wrap; }

/* --- mobile sticky CTA --------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,11,13,.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft); gap: 10px;
}
/* Both children are .btn-block (width:100%), which in a flex row wants 200% of
   the bar plus the gap and pushes the second button off-screen. Share the row
   instead. min-width:0 lets them shrink below their nowrap text width, and the
   slightly tighter padding keeps "Get Pre-Approved" on one line next to a
   longer label like "Text Steven". */
.mobile-cta .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }

/* --- reveal on scroll ---------------------------------------------------- */
/* Scroll reveal. Content is VISIBLE by default and only hidden once the inline
   script in base.html has put .js on <html> — so if site.js fails to load, is
   blocked, or throws before the observer is wired, every section still renders
   instead of the page coming up blank. Never style .rv without the .js gate. */
.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in { opacity: 1; transform: none; }

/* Anyone who asked not to be moved gets the content, not the animation. */
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .gallery { columns: 3; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-slides { aspect-ratio: 16/9; }
  .story-grid { grid-template-columns: 1fr; }
  .story-media { max-width: 340px; }
  .steps, .social-grid { grid-template-columns: 1fr; }
  .stats-in { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* Header collapses at 900, not 720: brand + nav + the two buttons need ~816px,
   so a 768-wide tablet overflowed the page before this breakpoint existed. */
@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: 8px 0;
    z-index: 91;
  }
  .nav.open a { padding: 15px 24px; }
  .mobile-cta { display: flex; }
  /* Must clear the fixed bar, which measures ~85px plus whatever the device's
     home indicator adds. The old 76px was 9px short — harmless while a stray
     rule was resetting the bar to position:relative (it took up flow space
     then), but it hid the bottom of the footer the moment the bar became
     genuinely fixed again. Keep this in step with .mobile-cta's padding. */
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .gallery { columns: 2; column-gap: 10px; }
  .gallery figure { margin-bottom: 10px; }
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .hero-tag { left: 0; max-width: 92%; }
  .lb-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Inventory
   ========================================================================== */
.inv-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 16px; background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.inv-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.inv-search svg { position: absolute; left: 14px; color: var(--ink-dim); pointer-events: none; }
.inv-search input {
  width: 100%; padding: 12px 14px 12px 42px; font-size: .95rem; font-family: inherit;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 100px;
}
.inv-filters select {
  padding: 12px 14px; font-size: .92rem; font-family: inherit; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 100px;
}
.inv-search input:focus, .inv-filters select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,35,43,.16);
}
.inv-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 18px; font-size: .9rem; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 100px;
  transition: border-color .15s, background .15s, color .15s;
}
.inv-chip input { accent-color: var(--accent); margin: 0; }
.inv-chip:hover { border-color: var(--ink-dim); }
.inv-chip.on { border-color: var(--accent); background: rgba(232,35,43,.12); }
.inv-count { margin: 18px 0 0; font-size: .88rem; color: var(--ink-dim); }

.inv-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.veh {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.veh:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow); }

.veh-media { position: relative; aspect-ratio: 4/3; background: var(--bg); overflow: hidden; }
.veh-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.veh:hover .veh-media img { transform: scale(1.05); }
.veh-noimg {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--ink-dim); font-size: .85rem; background: var(--bg-elev-2);
}
.veh-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 100px; font-size: .73rem; font-weight: 700;
  letter-spacing: .01em; backdrop-filter: blur(6px);
}
.badge-drop { background: var(--accent); color: #fff; }
.badge-vid  { background: rgba(10,11,13,.78); color: var(--ink); border: 1px solid var(--line); }

.veh-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.veh-title { font-size: 1.06rem; letter-spacing: -.025em; }
.veh-trim { font-size: .86rem; color: var(--ink-dim); margin-top: 3px; }
.veh-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font-size: .82rem; color: var(--ink-dim);
}
/* margin-top:auto pins price+actions to the card bottom so the CTAs
   line up across a row even when the meta line wraps. */
.veh-price { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; gap: 10px; }
.veh-price b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; }
.veh-price s { color: var(--ink-dim); font-size: .92rem; }
.veh-price .veh-call { font-size: 1.1rem; color: var(--ink-mid); }
.veh-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px;
               border-top: 1px solid var(--line-soft); }
.veh-actions .btn { flex: 1; padding: 11px 14px; font-size: .86rem; }

.inv-more { margin-top: 30px; text-align: center; color: var(--ink-dim); font-size: .92rem; }
.inv-more a { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .inv-filters { padding: 12px; }
  .inv-filters select, .inv-chip { flex: 1 1 calc(50% - 5px); }
  .inv-grid { grid-template-columns: 1fr; gap: 16px; }
}

.veh-pill {
  display: flex; align-items: center; gap: 11px; margin-bottom: 24px;
  padding: 0; color: var(--ok);
  font-size: .92rem;
}
.veh-pill svg { color: var(--ok); flex: none; }
.veh-pill span { flex: 1; }
.veh-pill a { color: var(--ink-dim); font-size: 1.3rem; line-height: 1; padding: 0 4px; }
.veh-pill a:hover { color: var(--ink); }

/* Conditional sub-forms (previous address / previous employer).
   Visible by default; site.js collapses them unless the "under 2 years"
   answer is picked, so the form is complete with JavaScript disabled. */
.subform {
  border: 1px solid rgba(232,35,43,.28); background: rgba(232,35,43,.05);
  border-radius: var(--r); padding: 20px 20px 4px; margin: 0 0 22px;
}
.subform legend {
  padding: 0 10px; font-size: .84rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.subform .sub-why { font-size: .82rem; color: var(--ink-dim); margin: 0 0 16px; }
.subform[hidden] { display: none !important; }

.ftr-eml, .privacy-eml { color: var(--accent); }
.ftr-eml:hover, .privacy-eml:hover { text-decoration: underline; }

/* Step-1 reassurance strip under the short form */
.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 26px; text-align: center;
}
.trust-row div { padding: 14px 8px; border: 1px solid var(--line-soft); border-radius: var(--r); }
.trust-row b { display: block; font-size: .98rem; letter-spacing: -.02em; }
.trust-row span { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }

/* Funnel stage badge in the leads table */
.stage {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.stage-full { background: rgba(34,197,94,.14); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.stage-part { background: rgba(232,35,43,.12); color: #ff7b80; border: 1px solid rgba(232,35,43,.28); }

/* ==========================================================================
   Depth pass — grain, lit surfaces, soft rules
   Flat #000 reads cheap and bands badly on large panels. These three things
   fix that without touching layout: a film grain over the whole page, a top
   highlight on every raised surface, and hairlines that fade at their ends.
   ========================================================================== */

/* Ambient colour washes, locked to the viewport so the page always feels lit
   from the same direction no matter how far you have scrolled. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(940px 640px at 84% -6%, var(--wash-warm), transparent 66%),
    radial-gradient(800px 580px at 2% 40%,  var(--wash-cool), transparent 64%);
}

/* Film grain. Also genuinely useful: it dithers the big background gradients
   so they don't show banding on 8-bit panels. Fixed + pointer-events:none so
   it never intercepts a click or scrolls out of alignment. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Everything real sits above the grain.
   NOTE: .hdr (sticky), .mobile-cta (fixed) and .lb (fixed) are deliberately
   NOT in this list. They are positioned by their own rules above and already
   carry z-index 90/95/200, so they clear the grain (z-index 1) on their own.
   Including them here reset them to position:relative — which silently killed
   the sticky header, dropped the mobile bar into the page flow, and cost the
   lightbox its full-screen overlay. Add new selectors here only if the element
   is static. */
.hero, .stats, .sec, .cta-band, .ftr { position: relative; z-index: 2; }

/* Raised surfaces get a light top edge and a faint internal gradient, so they
   read as lit from above rather than as flat grey rectangles. */
.step, .social, .veh, .form-card, .subform, .trust-row div {
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.step:hover, .social:hover, .veh:hover {
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 48%);
}
.veh:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow); }

/* Bands lift off the page instead of being a different flat black. */
.stats, .cta-band, #story {
  background-image: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 60%);
}

/* Hard 1px borders across a full-width band look like a seam. Fade the ends. */
.stats, .cta-band, #story, .ftr { border-color: transparent !important; }
.stats::before, .stats::after,
.cta-band::before, .ftr::before, #story::before, #story::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.stats::before, .cta-band::before, .ftr::before, #story::before { top: 0; }
.stats::after, #story::after { bottom: 0; }
/* .cta-band already paints a red glow in ::before — keep that, add the rule via a child. */
.cta-band::before { background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); }
.cta-band .cta-in::before {
  content: ""; position: absolute; inset: -70% 15% 25% -12%;
  background: radial-gradient(ellipse at center, rgba(232,35,43,.20), transparent 62%);
  pointer-events: none; z-index: -1;
}

/* A faint grid behind the hero only — gives the empty left half some structure
   at large sizes, and is invisible on a phone. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(680px 460px at 22% 42%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(680px 460px at 22% 42%, #000, transparent 74%);
}
@media (max-width: 900px) { .hero::after { display: none; } }

/* Inputs sit *into* the surface rather than floating on it. */
.field input, .field select, .field textarea,
.inv-search input, .inv-filters select {
  background-color: rgba(0,0,0,.34);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

/* The sticky header needs to be darker than the page top, not lighter. */
.hdr { background: rgba(8,9,12,.66); }
.hdr.scrolled { background: rgba(8,9,12,.9); }

@media (prefers-reduced-motion: reduce) { body::after { opacity: .03; } }

/* Grid was too faint to register at .021 — nudge it and widen the mask. */
.hero::after {
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  mask-image: radial-gradient(760px 520px at 24% 44%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 520px at 24% 44%, #000, transparent 78%);
}

/* Halo behind the hero photo so it reads as the lit object on the page rather
   than a rectangle pasted onto the dark. Sits under the image, never over it. */
.hero-media::before {
  content: ""; position: absolute; inset: -12% -8% -16% -8%;
  background: radial-gradient(closest-side, rgba(232,35,43,.20), transparent 76%);
  filter: blur(28px); pointer-events: none; z-index: 0;
}
.hero-slides, .hero-dots, .hero-tag { position: relative; z-index: 1; }
.hero-dots { position: absolute; }
.hero-tag  { position: absolute; }

/* Give the photo edge a lit rim rather than a flat grey stroke. */
.hero-slides {
  border-color: rgba(255,255,255,.09);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
}

/* ==========================================================================
   Vehicle detail modal — photos, walkaround video, specs
   ========================================================================== */
.veh { cursor: pointer; }
.veh:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.vd {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,5,7,.9); backdrop-filter: blur(10px);
}
.vd.open { display: flex; }

.vd-box {
  position: relative; display: grid; grid-template-columns: 1.55fr 1fr;
  width: min(1180px, 96vw); height: min(720px, 92vh);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
}

.vd-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(10,11,13,.72); border: 1px solid var(--line);
  color: var(--ink); font-size: 1.3rem; line-height: 1;
}
.vd-close:hover { background: rgba(255,255,255,.16); }

/* --- media side --- */
.vd-media { position: relative; background: #000; display: flex; flex-direction: column; min-width: 0; }
.vd-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vd-photo { width: 100%; height: 100%; object-fit: contain; }
.vd-frame { width: 100%; height: 100%; border: 0; }
.vd-nophoto { color: var(--ink-dim); font-size: .92rem; padding: 30px; text-align: center; }

.vd-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  animation: vdspin .8s linear infinite;
}
@keyframes vdspin { to { transform: rotate(360deg); } }

.vd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(10,11,13,.62); border: 1px solid var(--line);
  color: var(--ink); font-size: 1.4rem; line-height: 1;
}
.vd-arrow:hover { background: rgba(10,11,13,.9); }
.vd-arrow.prev { left: 12px; }
.vd-arrow.next { right: 12px; }

.vd-counter {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  padding: 5px 11px; border-radius: 100px; font-size: .76rem; font-weight: 650;
  background: rgba(10,11,13,.68); border: 1px solid var(--line);
}

.vd-thumbs {
  flex: none; display: flex; gap: 7px; padding: 10px;
  overflow-x: auto; background: rgba(0,0,0,.45);
  border-top: 1px solid var(--line-soft); scrollbar-width: thin;
}
.vd-thumb {
  flex: none; width: 74px; height: 54px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 7px; overflow: hidden;
  background: var(--bg-elev-2); opacity: .58; transition: opacity .15s, border-color .15s;
}
.vd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vd-thumb:hover { opacity: 1; }
.vd-thumb.on { opacity: 1; border-color: var(--accent); }
.vd-thumb-video { display: grid; place-items: center; color: var(--accent); }
.vd-thumb-video svg { width: 22px; height: 22px; }

/* --- info side --- */
.vd-info { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line-soft); }
.vd-scroll { flex: 1; overflow-y: auto; padding: 30px 26px 20px; }
.vd-info h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.vd-trim { color: var(--ink-dim); font-size: .92rem; margin-top: 4px; }

.vd-price { margin: 18px 0 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vd-price b { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.vd-price s { color: var(--ink-dim); font-size: 1rem; }
.vd-drop {
  padding: 4px 10px; border-radius: 100px; font-size: .74rem; font-weight: 700;
  background: var(--accent); color: #fff;
}

.vd-specs { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0 0 22px; font-size: .9rem; }
.vd-specs dt { color: var(--ink-dim); }
.vd-specs dd { margin: 0; text-align: right; word-break: break-all; }

.vd-desc { font-size: .89rem; color: var(--ink-mid); line-height: 1.65; margin: 0; }

.vd-cta {
  flex: none; padding: 18px 26px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: var(--bg-elev-2);
  display: grid; gap: 9px;
}

@media (max-width: 900px) {
  .vd { padding: 0; }
  .vd-box {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    width: 100vw; height: 100dvh; border-radius: 0; border: 0;
  }
  .vd-media { height: 46dvh; }
  .vd-info { border-left: 0; border-top: 1px solid var(--line-soft); }
  .vd-scroll { padding: 22px 18px 14px; }
  .vd-cta { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .vd-thumb { width: 60px; height: 44px; }
  .vd-arrow { width: 36px; height: 36px; }
}

/* A grid/flex child defaults to min-height:auto, so .vd-info grew to fit its
   content instead of being clamped to its track — which pushed the CTA below
   the fold on phones. min-height:0 lets .vd-scroll actually scroll and keeps
   the buttons pinned in view. */
.vd-info, .vd-scroll { min-height: 0; }
.vd-media { min-height: 0; }

/* New / Used segmented control on the inventory filter bar */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 100px;
       background: rgba(0,0,0,.34); border: 1px solid var(--line); }
.seg-btn {
  padding: 9px 16px; border: 0; border-radius: 100px; cursor: pointer;
  background: transparent; color: var(--ink-mid);
  font-family: inherit; font-size: .89rem; font-weight: 650; white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg-btn i { font-style: normal; opacity: .6; font-size: .82em; margin-left: 3px; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { background: var(--accent); color: #fff; }
.seg-btn.on i { opacity: .8; }

.badge-new { background: #2563eb; color: #fff; }
@media (max-width: 720px) { .seg { width: 100%; } .seg-btn { flex: 1; } }

/* ==========================================================================
   HERO v2 — full bleed
   The photo IS the hero now, not a thumbnail beside it. Everything below is
   overridden deliberately; earlier .hero rules are superseded.
   ========================================================================== */

/* Warmer darks. Blue-black reads cold and cheap; a hint of brown reads like
   leather and sits better under photographs of cars. */
:root {
  --bg:        #0c0b0c;
  --bg-deep:   #070607;
  --bg-elev:   #16151a;
  --bg-elev-2: #1d1b22;
  --line:      #2b2830;
  --line-soft: #201e25;
}

.hero {
  position: relative;
  min-height: min(880px, 92vh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; overflow: hidden;
  isolation: isolate;
}
.hero::before, .hero::after { display: none; }   /* kill the old glow + grid */

.hero-bg { position: absolute; inset: 0; z-index: -2; background: #000; }
.hero-bg .hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.4s ease-in-out, transform 8s linear;
  border: 0; border-radius: 0; box-shadow: none;
}
.hero-bg .hero-slide.on { opacity: 1; transform: scale(1); }

/* Scrim: dark from the left so the type always has something to sit on, plus
   a bottom fade into the page so the section has no visible seam. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,6,8,.94) 0%, rgba(6,6,8,.82) 34%,
                    rgba(6,6,8,.42) 58%, rgba(6,6,8,.12) 78%, transparent 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(12,11,12,.55) 16%, transparent 42%),
    linear-gradient(to bottom, rgba(6,6,8,.72) 0%, transparent 22%);
}

.hero-inner {
  position: relative; z-index: 2;
  padding-top: clamp(120px, 20vh, 220px);
  padding-bottom: clamp(38px, 6vh, 70px);
  max-width: var(--maxw);
}
.hero-inner h1 {
  font-size: clamp(2.9rem, 8vw, 6rem);
  margin-bottom: 26px;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.hero-inner .lede {
  max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: #dfe3ea; text-shadow: 0 1px 20px rgba(0,0,0,.6);
}
.hero-inner .hero-actions { margin-top: 34px; }

.btn-lg { padding: 18px 34px; font-size: 1.04rem; }
.btn-glass {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.22); backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }

/* dots move to the right edge, above the stat bar */
.hero-dots {
  position: absolute; right: 28px; bottom: 132px; z-index: 3;
  display: flex; gap: 8px; padding: 0; background: none; backdrop-filter: none;
}
.hero-dot { width: 8px; height: 8px; background: rgba(255,255,255,.4); }
.hero-dot.on { background: #fff; width: 26px; }

/* stat bar welded to the bottom of the hero */
.hero-bar {
  position: relative; z-index: 2;
  background: rgba(10,9,11,.5);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.09);
}
.hero-bar-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-bar div {
  padding: 22px 18px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.hero-bar div:last-child { border-right: 0; }
.hero-bar b {
  display: block; font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 800; letter-spacing: -.035em;
}
.hero-bar span {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

@media (max-width: 900px) {
  .hero { min-height: 88vh; }
  .hero-bg .hero-slide { object-position: center 38%; }
  /* The phone hero puts type over the busiest part of the photo (faces, a white
     car, a lit building), where the old .3-.55 scrim left the muted headline
     line and the lede barely legible. Hold the band the text occupies darker. */
  .hero-scrim {
    background:
      linear-gradient(to top, var(--bg) 2%, rgba(8,7,9,.92) 30%, rgba(8,7,9,.78) 58%, rgba(8,7,9,.6) 100%),
      linear-gradient(to bottom, rgba(6,6,8,.78) 0%, transparent 30%);
  }
  /* #7b8391 is fine behind the desktop scrim (.94 alpha) but not over the photo. */
  .hero-inner h1 .muted { color: rgba(255,255,255,.68); }
  .hero-inner { padding-top: clamp(90px, 16vh, 150px); }
  .hero-dots { right: 18px; bottom: 168px; }
  .hero-bar-in { grid-template-columns: repeat(2, 1fr); }
  .hero-bar div:nth-child(2) { border-right: 0; }
  .hero-bar div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 560px) {
  .hero-inner h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .btn-lg { padding: 16px 26px; font-size: .98rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-dots { bottom: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-slide { transition: opacity .4s ease; transform: none; }
  .hero-bg .hero-slide.on { transform: none; }
}

/* Hero sizing correction.
   First pass ran the hero to 1061px tall, which pushed "Get Pre-Approved"
   below the fold on a 900px desktop and a 760px laptop — the exact button the
   page exists to show. Tighter type, less top padding, and an extra clamp on
   short viewports so the CTA and the stat bar stay in view. */
.hero { min-height: min(720px, 86svh); }
.hero-inner {
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(26px, 3.5vh, 46px);
}
.hero-inner h1 {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: .97;
  margin-bottom: 20px;
}
.hero-inner .lede { max-width: 44ch; }
.hero-inner .hero-actions { margin-top: 26px; }
.hero-dots { bottom: 118px; }

@media (max-height: 820px) and (min-width: 901px) {
  .hero-inner { padding-top: clamp(48px, 7vh, 84px); }
  .hero-inner h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); }
  .hero-inner .lede { font-size: 1rem; }
  .hero-bar div { padding: 16px 14px; }
}

/* Delivery ribbon between the hero copy and the stat bar */
.hero-ribbon {
  position: relative; z-index: 2;
  background: linear-gradient(90deg, rgba(232,35,43,.22), rgba(232,35,43,.10) 60%, transparent);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.hero-ribbon-in {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 24px; font-size: .9rem; color: #fff;
}
.rib { display: inline-flex; align-items: center; gap: 9px; }
.rib svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.rib b { font-weight: 700; }
.rib-sep { width: 1px; height: 16px; background: rgba(255,255,255,.22); }
@media (max-width: 640px) {
  .hero-ribbon-in { gap: 6px 14px; padding: 10px 18px; font-size: .82rem; }
  .rib-sep { display: none; }
}

/* Delivery note in the vehicle modal, right above the CTA */
.vd-ship {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 26px; font-size: .84rem; color: var(--ink-mid);
  background: rgba(34,197,94,.07); border-top: 1px solid rgba(34,197,94,.2);
}
.vd-ship svg { width: 17px; height: 17px; flex: none; color: var(--ok); }
@media (max-width: 900px) { .vd-ship { padding: 10px 18px; font-size: .8rem; } }

/* ==========================================================================
   Blog
   ========================================================================== */
.posts { display: grid; gap: 14px; }
.post-card {
  display: block; padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: border-color .2s, transform .2s;
}
.post-card:hover { border-color: var(--line); transform: translateY(-3px); }
.post-card h3 { margin: 8px 0 0; font-size: 1.28rem; }
.post-card p { margin: 10px 0 0; color: var(--ink-mid); font-size: .95rem; }
.post-date {
  font-size: .74rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent);
}
.post-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .88rem; font-weight: 650; color: var(--ink);
}
.post-card:hover .post-more { color: var(--accent); }

.post-back { display: inline-block; margin-bottom: 22px; color: var(--ink-dim); font-size: .9rem; }
.post-back:hover { color: var(--ink); }
.post-title { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.035em; line-height: 1.06; }
.post-meta { margin: 16px 0 34px; color: var(--ink-dim); font-size: .86rem; }

/* Long-form reading column */
.prose { font-size: 1.06rem; line-height: 1.78; color: #d7dce4; }
.prose h2 { font-size: 1.6rem; margin: 40px 0 14px; letter-spacing: -.03em; }
.prose h3 { font-size: 1.24rem; margin: 32px 0 12px; }
.prose h4 { font-size: 1.06rem; margin: 26px 0 10px; }
.prose p { margin: 0 0 1.15em; }
.prose ul { margin: 0 0 1.3em; padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

.post-cta {
  margin: 52px 0 0; padding: 30px; border-radius: var(--r-lg);
  background: rgba(232,35,43,.08); border: 1px solid rgba(232,35,43,.26);
}
.post-cta h3 { font-size: 1.24rem; }
.post-cta p { margin: 12px 0 20px; color: var(--ink-mid); font-size: .95rem; }

/* ==========================================================================
   Short answer / areas served / FAQ  (SEO + AEO blocks, added 2026-09-09)
   ========================================================================== */

/* The answer card is deliberately plain and high-contrast: it is the passage
   an answer engine is most likely to quote, and the one a skimming buyer
   reads first. */
.answer-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 40px);
  max-width: 900px;
}
.answer-card h2 { margin: 10px 0 16px; font-size: clamp(1.5rem, 3.1vw, 2.1rem); }
.answer-lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.68; color: var(--ink-mid); }
.answer-facts {
  list-style: none; margin: 26px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 26px;
}
.answer-facts li { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.answer-facts strong {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.answer-facts span { font-size: .95rem; color: var(--ink); font-weight: 600; }

.area-list {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.area-list li {
  padding: 8px 15px; border-radius: 100px; font-size: .9rem; font-weight: 600;
  background: var(--bg-elev); border: 1px solid var(--line-soft); color: var(--ink-mid);
}

.faq-list { max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.faq-list details {
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden;
}
.faq-list details[open] { border-color: var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--accent);
}
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list summary:hover { color: var(--accent-hi); }
.faq-list details > p {
  margin: 0; padding: 0 20px 20px; color: var(--ink-mid); line-height: 1.65; max-width: 68ch;
}

@media (max-width: 560px) {
  .faq-list summary { font-size: .96rem; padding: 16px 44px 16px 16px; }
  .faq-list details > p { padding: 0 16px 16px; }
  .answer-facts { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
}

/* ==========================================================================
   Homepage: featured vehicles + progressive gallery   (added 2026-09-10)
   ========================================================================== */

/* The homepage reuses the .veh card, but as a whole-card link rather than a
   modal opener. Kill the inherited link styling so it still reads as a card. */
.veh-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.veh-link:hover { text-decoration: none; }

/* "Show all photos" / "See all vehicles" row. */
.gallery-more { margin-top: 26px; text-align: center; }

/* Delivery photos past the first six are in the DOM but hidden, so the button
   reveals them with no request. [hidden] alone is not enough here — .gallery
   is a CSS columns layout and its children are display:block, which beats the
   UA's [hidden] rule in the cascade. Same class of bug as GameTools' author
   display:flex overriding [hidden]. */
.gallery figure[hidden] { display: none !important; }

/* ==========================================================================
   Vehicle detail page  /vehicle/<stock>          (added 2026-09-10)
   Shareable twin of the inventory modal. Deliberately its own block so the
   modal's .vd-* rules above are untouched.
   ========================================================================== */
.vp-page { padding-top: clamp(32px, 5vw, 56px); }

.vp-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-dim); font-size: .92rem; font-weight: 600;
  margin-bottom: 26px; transition: color .15s;
}
.vp-back:hover { color: var(--ink); }

.vp-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: start; }

.vp-gal img.vp-hero-img,
.vp-video {
  width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line);
  overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow);
}
.vp-gal img.vp-hero-img { aspect-ratio: 4/3; object-fit: cover; }
.vp-video { aspect-ratio: 16/9; }
.vp-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.vp-video-cap { margin: 8px 0 0; font-size: .85rem; color: var(--ink-dim); }

.vp-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-top: 12px;
}
.vp-thumbs img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft);
}

.vp-side {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 26px 28px;
  position: sticky; top: 96px;   /* clears the 72px sticky header */
}
.vp-badges { position: static; margin-bottom: 16px; }
.vp-title { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; }
.vp-price { margin: 18px 0 22px; display: flex; align-items: baseline; gap: 12px; }
.vp-price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; }
.vp-price s { color: var(--ink-dim); font-size: 1rem; }

.vp-specs { margin: 0 0 24px; padding: 20px 0 4px; border-top: 1px solid var(--line-soft); }
.vp-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
/* dt must not shrink and dd must be allowed to, with min-width:0 — without it
   a long value like a full paint name gets squeezed to one character per line. */
.vp-specs dt { flex: none; color: var(--ink-dim); font-size: .92rem; }
.vp-specs dd {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-weight: 650; font-size: .95rem; text-align: right;
  overflow-wrap: break-word; word-break: normal;
}
.vp-vin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem !important; letter-spacing: -.01em; }

.vp-actions { display: grid; gap: 10px; }
.vp-note { margin: 18px 0 0; font-size: .88rem; color: var(--ink-dim); line-height: 1.55; }

.vp-desc { margin-top: clamp(40px, 5vw, 64px); max-width: 72ch; }
.vp-desc h2 { font-size: 1.5rem; margin-bottom: 14px; }
.vp-desc p { color: var(--ink-mid); white-space: pre-line; }

@media (max-width: 900px) {
  .vp-grid { grid-template-columns: 1fr; }
  /* Sticky inside a single column just makes the panel hover over the photos. */
  .vp-side { position: static; }
}
@media (max-width: 560px) {
  .vp-side { padding: 20px; }
  .vp-thumbs { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}

/* Inventory: title is now a link, and the modal has a permalink out to the
   vehicle's own page.                             (added 2026-09-10) */
.veh-title a { color: inherit; text-decoration: none; }
.veh-title a:hover { color: var(--accent); }

.vd-perma {
  display: block; text-align: center; margin-top: 12px;
  font-size: .88rem; font-weight: 600; color: var(--ink-dim);
  transition: color .15s;
}
.vd-perma:hover { color: var(--ink); }

/* "Load more" row under the inventory grid. */
.inv-more { margin-top: 34px; text-align: center; }
.inv-more p { margin: 14px 0 0; font-size: .9rem; color: var(--ink-dim); }
.inv-more p a { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; }
.inv-more p a:hover { color: var(--ink); }

/* Credit application: step headings.               (added 2026-09-10)
   The form was one undifferentiated wall from name to SSN. Four labelled
   groups make it obvious how much is left and what each part is for. */
.form-sec {
  display: flex; align-items: center; flex-wrap: wrap; gap: 11px;
  margin: 34px 0 18px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.form-sec:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.form-sec h3 { font-size: 1.06rem; letter-spacing: -.022em; }
.form-sec-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 800;
}
/* The note sits on its own line under the heading, not beside the number. */
.form-sec p {
  flex-basis: 100%; margin: 0; font-size: .87rem;
  color: var(--ink-dim); line-height: 1.5;
}

/* ===========================================================================
   Industry articles (/articles) — a weekly roundup a bot fills in.
   Cards are built so a missing graphic, takeaway or link still looks
   deliberate: the figure falls back to a branded blank, and the footer keeps
   its height whether or not there is an outbound link.
   =========================================================================== */

.art-filters {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 0 0 26px;
}
.art-pill {
  font: inherit; font-size: .84rem; font-weight: 600;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  color: var(--ink-mid); background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  transition: color .18s, border-color .18s, background .18s;
}
.art-pill:hover { color: var(--ink); border-color: var(--line); }
.art-pill.is-on {
  color: #fff; background: var(--accent); border-color: var(--accent);
}

.art-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
}

.art-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  transition: border-color .2s, transform .2s;
}
.art-card:hover { border-color: var(--line); transform: translateY(-3px); }

/* --- the graphic ------------------------------------------------------- */
.art-fig {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.art-fig > img {
  width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; display: block;
}
/* The blank state. Deliberately quiet — it should read as "no photo on this
   one", never as a failed image. */
.art-fig-blank {
  display: grid; place-items: center;
  color: rgba(232,35,43,.42);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--wash-warm), transparent 62%),
    var(--bg-elev-2);
}
.art-fig-blank::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
}
.art-fig-blank > svg {
  position: relative; width: 42px; height: 42px;
}

/* --- body -------------------------------------------------------------- */
.art-body { padding: 20px 22px 4px; flex: 1 1 auto; }

.art-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 10px;
}
.art-topic {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  padding: 4px 9px; border-radius: 999px;
  background: rgba(232,35,43,.1); border: 1px solid rgba(232,35,43,.26);
}
.art-date {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-dim);
}

.art-title {
  margin: 0; font-size: 1.13rem; line-height: 1.3; letter-spacing: -.02em;
}
.art-sum {
  margin: 10px 0 0; color: var(--ink-mid);
  font-size: .93rem; line-height: 1.62;
}
.art-take {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  font-size: .89rem; line-height: 1.58; color: #d7dce4;
  background: var(--wash-cool);
  border-left: 2px solid var(--accent);
}
.art-take strong { color: var(--ink); }

/* --- footer ------------------------------------------------------------ */
.art-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 15px 22px 19px;
  border-top: 1px solid var(--line-soft);
}
.art-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 650; color: var(--ink);
}
.art-link:hover { color: var(--accent); }
.art-src {
  font-size: .76rem; color: var(--ink-dim);
  max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- empty state ------------------------------------------------------- */
.art-empty { text-align: center; padding: 40px 30px 44px; }
.art-empty .art-fig {
  aspect-ratio: auto; height: 128px; width: min(320px, 100%);
  margin: 0 auto 24px; border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.art-empty h3 { margin: 0; font-size: 1.3rem; }
.art-empty > p { margin: 12px auto 0; max-width: 46ch; color: var(--ink-dim); }

@media (max-width: 560px) {
  .art-grid { grid-template-columns: 1fr; gap: 14px; }
  .art-body { padding: 18px 18px 4px; }
  .art-foot { padding: 14px 18px 17px; }
  .art-src { max-width: 100%; }
}

/* Bio aside in the story section — a quieter register than .lede so it reads
   as a footnote about Steven, not another sales pitch. */
.story-aside {
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-dim); font-size: .93rem; line-height: 1.66;
}
.story-aside a { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; }
.story-aside a:hover { color: var(--accent); }

/* ===========================================================================
   2026-09-14 — SEO pass + Spanish site (/es/)
   =========================================================================== */
/* A page's main heading is an h1 now (it used to be an h2 on most pages), but
   it keeps the section-heading size — only the hero headline is poster-sized. */
h1.h1-sec { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.032em; }

.lang-switch {
  font-size: .84rem; font-weight: 650; color: var(--ink-mid); white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink-dim); }
/* Nav labels and the logo never wrap ("How it / works", "SELLS / CARS"). */
.nav a { white-space: nowrap; }
.brand { white-space: nowrap; flex: none; }
/* Grid items default to min-width:auto, so the widest unbreakable thing in the
   aside (Spanish badges/specs) set the column to 343px inside a 324px track on
   a 360px phone. min-width:0 lets the track win. */
.vp-grid > * { min-width: 0; }
/* Brand + six nav links + language pill + two buttons need ~1,220px (more in
   Spanish), so below 1280 the links move into the menu while the language pill
   and both buttons stay in the bar. Below 900 the mobile rules above take over
   and the buttons move to the fixed bottom bar. */
@media (max-width: 1280px) and (min-width: 901px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: 8px 0;
    z-index: 91;
  }
  .nav.open a { padding: 15px 24px; }
}
a.rib:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0 0 22px; padding: 0;
  font-size: .86rem; color: var(--ink-dim);
}
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-dim); }
.crumbs a { color: var(--ink-mid); }
.crumbs a:hover { color: var(--ink); }

.vp-summary, .vp-faq { margin-top: clamp(40px, 5vw, 64px); max-width: 72ch; }
.vp-summary h2, .vp-faq h2, .vp-similar h2 { font-size: 1.5rem; margin-bottom: 14px; }
.vp-summary p { color: var(--ink-mid); margin: 0; }
.vp-faq h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.vp-faq p { color: var(--ink-mid); margin: 0; }
.vp-similar { margin-top: clamp(44px, 6vw, 72px); }
/* "Ver todos los Mercedes-Benz disponibles" is wider than a 390px column; .btn
   is nowrap, so this one is allowed to wrap instead of widening the page. */
.vp-similar .inv-more .btn { white-space: normal; max-width: 100%; text-align: center; }

/* Blog cross-links under a vehicle. Plain list on purpose — it sits below the
   similar-vehicle cards and must not compete with them for attention. */
.vp-read { margin-top: clamp(40px, 5vw, 64px); max-width: 72ch; }
.vp-read h2 { font-size: 1.5rem; margin-bottom: 14px; }
.vp-read ul { list-style: none; margin: 0 0 14px; padding: 0; }
.vp-read li { border-top: 1px solid var(--line, rgba(0, 0, 0, .1)); }
.vp-read li a { display: block; padding: 11px 0; color: var(--ink); text-decoration: none; }
.vp-read li a:hover { color: var(--accent, var(--ink)); text-decoration: underline; }
.vp-read-all { color: var(--ink-mid); font-size: .95rem; text-decoration: none; }
.vp-read-all:hover { text-decoration: underline; }

/* Vehicle photos open in a full-screen viewer (2026-09-14). The thumbnails were
   plain images before, so there was no way to see a photo any bigger. */
.vp-zoom { cursor: zoom-in; }
.vp-thumb {
  position: relative; display: block; padding: 0; border: 0; background: none;
  border-radius: var(--r-sm); cursor: zoom-in;
}
.vp-thumb img { display: block; transition: opacity .15s; }
.vp-thumb:hover img { opacity: .8; }
.vp-thumb:focus-visible, .vp-hero-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-more {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  border-radius: var(--r-sm); background: rgba(0,0,0,.58); color: #fff; font-weight: 800; font-size: 1.05rem;
}
#vpLb .lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.5);
  color: var(--ink); font-size: .9rem; font-weight: 650;
}
/* The homepage hides lightbox arrows under 720px; here they stay, smaller and
   tucked to the edges, alongside swipe. */
@media (max-width: 720px) {
  #vpLb { padding: 12px; }
  #vpLb .lb-nav { display: grid; width: 40px; height: 40px; }
  #vpLb .lb-nav.prev { left: 8px; }
  #vpLb .lb-nav.next { right: 8px; }
  #vpLb .lb-close { top: 12px; right: 12px; }
}

.make-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.make-chips a {
  font-size: .84rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  color: var(--ink-mid); background: var(--bg-elev); border: 1px solid var(--line-soft);
  transition: color .15s, border-color .15s;
}
.make-chips a:hover { color: var(--ink); border-color: var(--line); }
.make-chips a.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.make-chips i { font-style: normal; margin-left: 5px; opacity: .6; }

/* Shop-by-budget. Same chip language as the make filters, but the payment row
   carries a label because "$400/mo" alone reads as a price, not a filter. */
.pay-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.pay-chips-label, .pay-credit-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); margin-right: 2px;
}
.pay-chips a {
  font-size: .84rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  color: var(--ink-mid); background: var(--bg-elev); border: 1px solid var(--line-soft);
  transition: color .15s, border-color .15s;
}
.pay-chips a:hover { color: var(--ink); border-color: var(--line); }
.pay-chips a.on { color: #fff; background: var(--accent); border-color: var(--accent); }

.pay-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0; }
.pay-credit a {
  font-size: .8rem; padding: 6px 11px; border-radius: 8px; color: var(--ink-mid);
  border: 1px solid var(--line-soft); transition: color .15s, border-color .15s;
}
.pay-credit a:hover { color: var(--ink); border-color: var(--line); }
.pay-credit a.on { color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-credit i { font-style: normal; opacity: .55; margin-left: 4px; }

/* The Regulation Z disclosure. Quiet, but open by default and never hidden —
   it has to sit in close proximity to the payment it explains. */
.pay-terms { margin: 18px 0 0; max-width: 78ch; font-size: .86rem; color: var(--ink-dim); }
.pay-terms summary { cursor: pointer; font-weight: 600; color: var(--ink-mid); }
.pay-terms p { margin: 9px 0 0; line-height: 1.55; }
.pay-terms b { color: var(--ink-mid); }

/* Estimated payment under the price on a card. */
.veh-mo { display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; color: var(--ink-dim); }

/* Added-equipment note on new vehicles. Sits with the price, quiet but not
   hidden — a disclosure nobody reads protects nobody. */
.vp-mods {
  margin: 14px 0 0; padding: 13px 15px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
}
.vp-mods > b { display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); }
.vp-mods p { margin: 7px 0 11px; font-size: .86rem; line-height: 1.55; color: var(--ink-dim); }
.vp-mods p b { color: var(--ink-mid); font-weight: 600; }

/* One-line accessory note under a used vehicle's price. */
.vp-plus { margin: 9px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-dim); }

/* Visually hidden, still read aloud. */
.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;
}

/* Estimator panel: credit first, then cash down, then the CTA. Numbered
   because it reads as a three-step decision, not a filter bar. */
.est-panel {
  margin: 22px 0 0; padding: 16px 18px; border-radius: 14px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
}
.est-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.est-row + .est-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.est-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); flex: 0 0 auto; min-width: 132px;
}
.est-opts { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 1 260px; }
.est-opts a {
  font-size: .82rem; padding: 7px 12px; border-radius: 9px; color: var(--ink-mid);
  border: 1px solid var(--line-soft); transition: color .15s, border-color .15s;
}
.est-opts a:hover { color: var(--ink); border-color: var(--line); }
.est-opts a.on { color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.est-opts i { font-style: normal; opacity: .55; margin-left: 4px; }

.est-down { display: inline-flex; gap: 5px; }
.est-down input {
  width: 92px; padding: 6px 9px; border-radius: 9px; font: inherit; font-size: .82rem;
  color: var(--ink); background: transparent; border: 1px solid var(--line-soft);
}
.est-down button {
  padding: 6px 11px; border-radius: 9px; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--ink-mid); background: transparent; border: 1px solid var(--line-soft); cursor: pointer;
}
.est-down button:hover { color: var(--ink); border-color: var(--line); }

.est-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.est-cta .btn svg { margin-left: 6px; vertical-align: -3px; }
.est-cta-note { font-size: .8rem; color: var(--ink-dim); flex: 1 1 240px; }
.est-recap svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .est-label { min-width: 100%; }
  .est-panel { padding: 14px; }
}

/* Homepage band. */
.budget-band { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.budget-band-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 0; }
.budget-band h2 { font-size: 1rem; margin: 0 6px 0 0; }
.budget-band a {
  font-size: .88rem; font-weight: 600; padding: 8px 15px; border-radius: 999px;
  color: var(--ink-mid); background: var(--bg-elev); border: 1px solid var(--line-soft);
}
.budget-band a:hover { color: var(--ink); border-color: var(--line); }
.budget-band .band-note { font-size: .78rem; color: var(--ink-dim); flex-basis: 100%; margin: 0; }