/* Cars with Ryan — design system
   Ground #FFFFFF · Ink #202020 · Accent tangerine #E8791A
   Bento-grid layout, monospace odometer specs, mobile-first responsive.
   Ported from the 2026-07-13 article-page prototype: dark-mode tokens,
   avatar byline, verdict/author-card blocks. */

:root {
  --ground: #FFFFFF;
  --panel-2: #EFEFEF;
  --ink: #202020;
  --ink-soft: #55524E;
  --line: #E8E4DF;
  --panel: #F7F5F2;
  --accent: #E8791A;
  --accent-dark: #A9540B; /* 5.3:1 on white — passes WCAG AA for text; #E8791A reserved for backgrounds/large elements */
  /* Label colour for anything sitting ON --accent. White was 2.92:1 here and
     failed AA on every primary CTA; #202020 is 5.57:1. Buttons are ~15px bold,
     which is NOT WCAG "large text", so the 4.5:1 bar applies. */
  --accent-ink: #202020;
  /* Accent buttons LIGHTEN on hover. Darkening (the old --accent-dark hover)
     would drop the dark label back under AA. */
  --accent-hover: #F08A2E;
  /* Label for the tinted outline button's hover state. --accent-dark at a 12–16%
     tint over --panel fell to 4.18:1; this is 5.64:1 there. */
  --accent-ink-strong: #8F460A;
  --on-ink: #FFFFFF;
  --ink-fixed: #202020; /* brand chrome (chat FAB, active chip, inverted tile) — stays dark in both themes */
  --on-ink-fixed: #FFFFFF;
  --radius: 14px;
  /* One control system. Buttons were five different heights and three radii;
     mismatched heights are the cheapest-looking thing on a page. Chips and the
     chat FAB stay pills because the shape is semantic (filter / floating). */
  /* 2026-09-18: radius moved 10px → full pill, and the primary scale up to 52px,
     to match the reference the user supplied. The single-control-system rule
     below still holds — one radius token, one height ramp, everything follows. */
  --ctl-h: 52px;
  --ctl-h-sm: 42px;
  --ctl-radius: 999px;
  /* Shadows are tinted to the surface's own hue, never pure black. Small blur:
     these read as machined edges, not as the soft "ghost card" drop shadow. */
  --shadow-accent: 0 1px 1px rgba(122,60,8,.16), 0 3px 8px rgba(122,60,8,.18);
  --shadow-accent-lift: 0 2px 3px rgba(122,60,8,.18), 0 8px 18px rgba(122,60,8,.24);
  --shadow-ink: 0 1px 1px rgba(32,32,32,.10), 0 3px 8px rgba(32,32,32,.14);
  --shadow-ink-lift: 0 2px 3px rgba(32,32,32,.12), 0 8px 18px rgba(32,32,32,.20);
  /* Bottom inner edge — gives the fill physical thickness. */
  --edge: inset 0 -1px 0 rgba(0,0,0,.20);
  /* Archivo: sturdy grotesque, real presence at 800 for display, utilitarian
     rather than startup-neutral. JetBrains Mono carries the spec/price/odometer
     strips, which are the site's one strong visual idea — it has true tabular
     figures so price and km columns line up. System stack stays as fallback so
     text paints immediately if the webfont is slow or blocked. */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-action: "Space Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #202020; --panel: #2E2E2E; --panel-2: #262626;
    --ink: #F5F5F5; --ink-soft: #A3A3A3;
    --accent: #F2954A; --accent-dark: #F2954A; --accent-ink: #202020; --accent-hover: #F7A461; --accent-ink-strong: #FFC490; --on-ink: #202020;
    --line: rgba(245,245,245,.13);
    --shadow-accent: 0 1px 1px rgba(0,0,0,.30), 0 3px 8px rgba(0,0,0,.34); --shadow-accent-lift: 0 2px 3px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.42); --shadow-ink: 0 1px 1px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.40); --shadow-ink-lift: 0 2px 3px rgba(0,0,0,.38), 0 8px 18px rgba(0,0,0,.48); --edge: inset 0 -1px 0 rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --ground: #202020; --panel: #2E2E2E; --panel-2: #262626;
  --ink: #F5F5F5; --ink-soft: #A3A3A3;
  --accent: #F2954A; --accent-dark: #F2954A; --accent-ink: #202020; --accent-hover: #F7A461; --accent-ink-strong: #FFC490; --on-ink: #202020;
  --line: rgba(245,245,245,.13);
    --shadow-accent: 0 1px 1px rgba(0,0,0,.30), 0 3px 8px rgba(0,0,0,.34); --shadow-accent-lift: 0 2px 3px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.42); --shadow-ink: 0 1px 1px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.40); --shadow-ink-lift: 0 2px 3px rgba(0,0,0,.38), 0 8px 18px rgba(0,0,0,.48); --edge: inset 0 -1px 0 rgba(0,0,0,.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--ground);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-fixed); color: var(--on-ink-fixed); padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.logo span { color: var(--accent); }
.logo:hover { text-decoration: none; }

.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a { color: var(--ink-soft); font-size: .92rem; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }
/* Selector carries .nav-links because `.nav-links a` outranks a bare .nav-cta
   and was overriding the type scale back to the plain nav-link size. */
.nav-cta, .nav-links .nav-cta {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  color: var(--accent-ink) !important;
  min-height: var(--ctl-h-sm); padding: 0 24px;
  font-family: var(--font-action); font-weight: 650; font-size: .89rem;
  letter-spacing: -.012em; text-transform: none;
  box-shadow: 0 2px 5px rgba(122,60,8,.18), 0 8px 18px -10px rgba(122,60,8,.4),
              inset 0 1px 0 rgba(255,255,255,.30);
}
.nav-cta:hover {
  background: var(--accent-hover); transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 3px 8px rgba(122,60,8,.20), 0 14px 26px -10px rgba(122,60,8,.5), inset 0 1px 0 rgba(255,255,255,.36);
}
.nav-cta:active { background: var(--accent); box-shadow: inset 0 1px 2px rgba(122,60,8,.34); transform: translateY(1px); }

/* mobile nav */
.nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--ink); padding: 10px; margin: -10px; line-height: 1; }
/* 900, not 760: the eighth nav item (Questions) pushes the inline row to 847px,
   which overflowed the viewport at tablet width. The hamburger now takes over
   before the row can run off the edge. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 10px 0; }
  .nav-cta { display: inline-block; margin-top: 6px; }
}

/* ---------- Type ---------- */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
/* h1 used as a section heading (index/listing pages) keeps h2 visual scale */
.section-head h1 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; font-weight: 750; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
p { text-wrap: pretty; }
/* Prices, km, dates and spec values sit in columns across cards and tables —
   tabular figures keep them from jittering when digits change width. */
.specs, .price, .stat-big, .updated, .comparison-table { font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent-dark); font-weight: 600;
  display: block; margin-bottom: 10px;
}
.muted { color: var(--ink-soft); }
.updated {
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
/* Shared control surface: same height, radius and motion for every button-like
   thing on the site, so a CTA in the nav and a CTA in a tile are the same object.
   inline-flex (not inline-block) is what lets min-height actually centre a label. */
.btn, .nav-cta, .cta-inline {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ctl-radius); border: 0; cursor: pointer;
  font-family: var(--font-action);
  text-align: center; text-decoration: none; white-space: nowrap;
  transition: background .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s cubic-bezier(.22,1,.36,1),
              transform .12s cubic-bezier(.22,1,.36,1),
              color .18s cubic-bezier(.22,1,.36,1);
}
/* Space Grotesk gives action labels a distinctive contemporary shape while the
   main site typography remains Archivo. Slightly tightened tracking keeps
   longer CTAs compact without sacrificing readability. */
.btn {
  min-height: var(--ctl-h); padding: 0 34px;
  border-radius: var(--ctl-radius);
  font-weight: 650;
  font-size: 1rem; letter-spacing: -.012em; text-transform: none;
}
.btn:hover { text-decoration: none; }

/* Arrow is CSS-only so no markup changes are needed to add or drop it.
   Now on every .btn variant, not just the filled one — the reference shows
   all three carrying it, and an arrow that appears only on the primary reads
   as an inconsistency once the three sit in the same row. */
.btn::after {
  content: "→"; margin-left: 14px; display: inline-block;
  transition: transform .18s ease;
}
.btn:hover::after { transform: translateX(3px); }

.btn:focus-visible, .nav-cta:focus-visible {
  outline: 2px solid var(--accent-dark); outline-offset: 3px;
}

/* Press physics: hover lifts and the shadow spreads, :active drops past rest and
   the shadow collapses, so the control reads as pushed into the page. */
/* The reference's fill is a soft top-to-bottom warm gradient, not a flat plate,
   and its shadow is a wide diffused pool rather than the machined 1px edge the
   buttons used before. Blur stays tinted to the surface's own hue — never black. */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  color: var(--accent-ink);
  box-shadow: 0 2px 6px rgba(122,60,8,.20), 0 10px 22px -8px rgba(122,60,8,.45),
              inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(122,60,8,.22), 0 16px 30px -10px rgba(122,60,8,.55),
              inset 0 1px 0 rgba(255,255,255,.36);
}
.btn-primary:active {
  background: var(--accent); transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(122,60,8,.38);
}

/* Ring is drawn with an inset shadow rather than a border so it costs no layout
   box and the button stays exactly the same size as its filled sibling.
   Now accent-tinted rather than ink, per the reference: a faint warm wash, an
   accent hairline and an accent label, so it reads as the quiet sibling of the
   filled CTA instead of a separate neutral control. Label is --accent-dark
   (5.3:1), not raw --accent (3.9:1) — the tint does not relax the AA bar. */
.btn-outline {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Hover tint stays at 12%, not 16%: at 16% over --panel the --accent-dark label
   measured 4.18:1 and failed AA. The ring going solid carries the hover instead. */
.btn-outline:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink-strong); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1.5px var(--accent),
              0 4px 10px rgba(122,60,8,.14), 0 14px 26px -12px rgba(122,60,8,.35);
}
.btn-outline:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 1px 3px rgba(122,60,8,.20);
}

.chip:active { transform: translateY(1px); }

/* ---------- Bento grid (homepage) ---------- */
.bento {
  display: grid; gap: 14px;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track has an `auto` minimum, so a wide
     image inside a tile floors the track at its intrinsic width and the whole
     page scrolls sideways. Vehicle hero photos did exactly that at phone width. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 28px 0 60px;
}
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 180px;
  /* min-width lets a tile shrink below its content; max-width is the one that
     actually stops the vehicle hero from overflowing. That tile carries an
     inline aspect-ratio and its height comes from the photo, so the box sizes
     its WIDTH from that height (340px x 3/2 = 510px) and ignores the 12-column
     area it was given. Capping at 100% pins it back to the track. */
  min-width: 0; max-width: 100%;
}
.tile-hero { grid-column: span 8; background: var(--ink-fixed); color: var(--on-ink-fixed); min-height: 340px; }
.tile-hero .kicker { color: var(--accent); }
.tile-hero p { color: #CFCAC4; max-width: 44ch; margin: 14px 0 22px; }
.tile-photo { grid-column: span 4; align-items: center; justify-content: center; text-align: center; }
/* Headshot fills the top two thirds of the card, text takes the bottom third. */
.tile-photo:has(.tile-photo-img) { padding: 0; overflow: hidden; justify-content: stretch; }
.tile-photo-img { flex: 0 0 66.667%; width: 100%; min-height: 220px; object-fit: cover; object-position: 50% 30%; display: block; }
.tile-photo-body { flex: 1 1 0; padding: 10px 20px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tile-photo-body h3 { margin: 0; }
.tile-photo-body p { margin: 2px 0 4px; line-height: 1.4; }
.photo-placeholder {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); margin: 0 auto 12px;
}
.tile-wide { grid-column: span 6; }
.tile-full { grid-column: span 12; }
/* Half the width of a .tile-wide, pinned to the right edge of the grid. */
/* Trade-in sits left, reviews right; explicit columns, so source order
   does not decide which is which. */
.tile-quarter { grid-column: 7 / span 3; }
.tile-reviews { grid-column: 10 / span 3; }
/* The pill is wider than this narrow tile, so it fills the width instead of
   overflowing, and the label shrinks rather than wrapping. */
.tile-quarter .btn {
  /* Fills the narrow card, but capped so it does not become a 650px slab when
     the tile goes full width on a tablet. */
  width: 100%; max-width: 300px; justify-content: center; align-self: center; margin-inline: auto;
  padding-left: 16px; padding-right: 16px;
  font-size: .9rem; white-space: nowrap;
}
.tile-third { grid-column: span 4; }
.tile-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Full opacity, not rgba(...,.85) — at 85% the blended kicker fell to 4.25:1. */
.tile-accent .kicker { color: var(--accent-ink); }
/* Background is hard-coded white in BOTH themes, so the label must be too:
   --accent-dark lightens to #F2954A in dark mode and was 2.29:1 on white.
   Shadow is deeper here than elsewhere because it falls on a saturated fill. */
/* Ink label rather than orange-on-white: the orange-on-orange-tile pairing read
   washed out, and #202020 on #fff is the same label colour used on the accent
   buttons, so the two CTAs finally look related. */
.tile-accent a.btn {
  background: #fff; color: var(--ink-fixed); margin-top: 14px; align-self: flex-start;
  box-shadow: 0 2px 6px rgba(92,44,4,.22), 0 10px 22px -10px rgba(52,24,2,.5);
}
.tile-accent a.btn:hover {
  background: #fff; color: var(--ink-fixed); transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(92,44,4,.24), 0 16px 30px -12px rgba(52,24,2,.6);
}
.tile-accent a.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(92,44,4,.22); }
.tile-accent a.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.stat-big { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .tile-hero { grid-column: span 12; }
  .tile-photo { grid-column: span 12; }
  .tile-wide { grid-column: span 12; }
  .tile-quarter { grid-column: span 12; }
  .tile-third { grid-column: span 6; }
}
@media (max-width: 560px) {
  .tile-third { grid-column: span 12; }
}

/* ---------- Vehicle / guide cards ---------- */
.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 26px;
}

/* ---------- Vehicle photo gallery ---------- */
.photo-gallery {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-top: 12px;
}
.photo-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  cursor: zoom-in;
}

/* ---------- Photo lightbox ---------- */
.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: #0a0a0a;
  align-items: center; justify-content: center;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  width: 92vw; height: 84vh;
  max-width: 92vw; max-height: 84vh; object-fit: contain;
  border-radius: 6px;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  width: 44px; height: 44px; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-family: var(--font-mono); font-size: .8rem;
  background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 99px;
}
@media (max-width: 560px) {
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 1.1rem; }
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--ground);
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card[hidden] { display: none; }
.card:hover { box-shadow: 0 8px 28px rgba(32,32,32,.09); transform: translateY(-2px); }
.card-media {
  aspect-ratio: 16/10; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-soft);
  position: relative;
}
.sold-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: #C4291C; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 6px;
}
.card-media .sold-badge { top: 12px; left: 12px; font-size: .95rem; padding: 7px 16px; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 a { color: var(--ink); }
.card-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--panel); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 99px; color: var(--ink-soft);
}
.card p { font-size: .92rem; color: var(--ink-soft); }

/* odometer-style spec strip */
.specs {
  font-family: var(--font-mono); font-size: .78rem;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  color: var(--ink); margin-top: auto; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.specs b { color: var(--accent-dark); font-weight: 600; }
.price { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
/* Full border, not a coloured left stripe. The finance price is already the
   loudest thing in the box; a stripe was decoration doing no work. */
.price-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px; margin-top: 2px;
}
.price-box .price-main { display: flex; flex-direction: column; }
.price-box .price-main .price { margin: 0; }
.price-box .price-caption { font-size: .7rem; color: var(--ink-soft); margin-top: 2px; }
.price-box .price-divider { width: 1px; align-self: stretch; background: var(--line); }
.price-box .price-cash { text-align: right; flex: 1; }
.price-box .price-cash .label { display: block; font-size: .64rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; }
.price-box .price-cash .value { font-size: .85rem; font-weight: 400; color: var(--ink-soft); }

/* ---------- Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* Pill shape is kept deliberately — it reads as a removable filter token, which
   a 10px-radius rectangle would not. Height still matches the control scale. */
.chip {
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: .85rem; font-weight: 550; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 99px;
  min-height: 36px; padding: 0 16px; background: var(--ground); cursor: pointer;
  transition: background .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1),
              color .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1),
              transform .12s cubic-bezier(.22,1,.36,1);
}
.chip:hover { border-color: var(--ink); color: var(--ink); background: var(--panel); text-decoration: none; }
/* inline-flex beats the UA [hidden] rule, same trap as .card */
.chip[hidden] { display: none; }
.chip.active {
  background: var(--ink-fixed); color: var(--on-ink-fixed); border-color: var(--ink-fixed);
  box-shadow: var(--shadow-ink), inset 0 -1px 0 rgba(0,0,0,.28);
}

.filter-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 14px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter-panel .filter-group { display: flex; align-items: center; gap: 8px; }
.filter-panel label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
/* Same 36px as the chips directly above them — these read as one control band. */
.filter-panel select,
.filter-panel input[type="number"] {
  font-family: inherit; font-size: .85rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 99px;
  height: 36px; padding: 0 14px; background: var(--ground); cursor: pointer;
}
.filter-panel input[type="number"] { cursor: text; -moz-appearance: textfield; font-size: 16px; }
.filter-panel input[type="number"]::-webkit-outer-spin-button,
.filter-panel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-panel select:hover, .filter-panel input[type="number"]:hover { border-color: var(--ink); }
.filter-panel select:focus, .filter-panel input[type="number"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,121,26,.15);
}
.filter-panel .range-sep { color: var(--ink-soft); }

/* ---------- Article layout ---------- */
.article { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
.article header { margin-bottom: 30px; }
.article h1 { margin: 10px 0 14px; }
.article h2 { margin: 40px 0 12px; }
.article h3 { margin: 26px 0 8px; }
.article p, .article li { font-size: 1.02rem; color: var(--ink); margin-bottom: 14px; }
.article ul, .article ol { padding-left: 22px; }

/* article byline row: avatar + name + meta dots (ported from prototype) */
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }
.meta .byline { display: flex; align-items: center; gap: 9px; }
.meta .byline b { color: var(--ink); font-weight: 600; }
.meta .dot { opacity: .5; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-fixed); color: var(--on-ink-fixed);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem;
}

/* GEO answer block: 40–60 word direct answer, first thing under any H2 */
/* The "Quick answer" block carries the site's GEO strategy, so it has to read
   as distinct from body prose. That distinction now comes from the panel fill,
   a full border and the accent tag — not a coloured left stripe. */
.answer-block {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 20px; margin: 14px 0 20px;
}
.answer-block .tag {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent-dark);
  font-weight: 600; margin-bottom: 6px;
}
.answer-block p { margin: 0; font-size: .98rem; }

/* verdict callout: always-dark card regardless of theme */
.verdict { background: var(--ink-fixed); color: var(--on-ink-fixed); border-radius: var(--radius); padding: 22px 24px; margin: 24px 0; }
.verdict .tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.verdict p { color: var(--on-ink-fixed); opacity: .9; font-size: 1rem; line-height: 1.6; margin: 8px 0 0; }

/* faq entries styled as expandable-looking rows */
.faq-item { border-top: 1px solid var(--line); padding: 16px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item .q { font-weight: 700; font-size: 1rem; margin: 0 0 6px; color: var(--ink); }
.faq-item .a { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; margin: 0; }

/* author card footer */
.author-card { display: flex; gap: 16px; align-items: center; background: var(--panel); border-radius: var(--radius); padding: 20px; margin-top: 36px; flex-wrap: wrap; }
.author-card .avatar { width: 48px; height: 48px; font-size: 1rem; }
.author-card .name { font-weight: 800; font-size: .98rem; color: var(--ink); }
.author-card .role { font-size: .84rem; color: var(--ink-soft); margin-top: 3px; }
.author-card .cta-inline { margin-left: auto; }
.cta-inline {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  color: var(--accent-ink);
  font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
  min-height: var(--ctl-h-sm); padding: 0 22px;
  box-shadow: var(--shadow-accent), var(--edge);
}
.cta-inline:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent-lift), var(--edge); transform: translateY(-1px); text-decoration: none; }
.cta-inline:active { background: var(--accent); box-shadow: 0 1px 1px rgba(122,60,8,.18), var(--edge); transform: translateY(1px); }

.comparison-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
.comparison-table th, .comparison-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.comparison-table th { background: var(--panel); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.comparison-table td:first-child { font-weight: 600; }
.comparison-table td:not(:first-child), .comparison-table th:not(:first-child) { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: .88rem; }
.comparison-table td.win { color: var(--accent-dark); font-weight: 700; }
.table-scroll { overflow-x: auto; }

.breadcrumbs { font-size: .82rem; color: var(--ink-soft); }
.breadcrumbs a { color: var(--ink-soft); }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 14px; max-width: 560px; }
.form-grid label { font-size: .88rem; font-weight: 600; display: block; margin-bottom: 5px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 11px 13px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--ground); color: var(--ink);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--accent);
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* honeypot */

/* ---------- Test-drive scheduler (compact, horizontal) ---------- */
/* Overrides .tile's 28px padding and 180px min-height, which otherwise pad
   this short form out to more than twice its own height. */
.td-tile { padding: 14px 20px; min-height: 0; }
.test-drive-form { display: flex; flex-direction: column; gap: 6px; }
.test-drive-form > .kicker { display: block; margin-bottom: 4px; }
.td-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.td-fields { flex: 1 1 340px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.td-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
/* Width floors keep a field on its own line rather than squeezing its input
   unusably narrow; the date row needs more room for the native picker. */
.td-field { flex: 1 1 120px; display: flex; align-items: center; gap: 8px; min-width: 130px; }
.td-row:first-child .td-field { flex-basis: 200px; min-width: 200px; }
.td-field label {
  flex: 0 0 auto; white-space: nowrap; font-size: .78rem; font-weight: 600;
  margin: 0; color: var(--ink-soft);
}
.td-field input, .td-field select {
  flex: 1 1 60px; min-width: 0; box-sizing: border-box; height: 40px; padding: 0 10px;
  font-size: .88rem; font-family: inherit; border: 1.5px solid var(--line);
  border-radius: 8px; background: var(--ground); color: var(--ink);
}
.td-field input:focus, .td-field select:focus { outline: none; border-color: var(--accent); }
.td-action { flex: 0 1 170px; display: flex; flex-direction: column; align-items: stretch; }
/* Compact variant: matches the 40px inputs in this row, not the 44px page scale. */
.td-action .btn {
  height: 40px; min-height: 0; padding: 0 20px;
  white-space: nowrap; margin: 0;
}
.td-status:not(:empty) { font-size: .72rem; margin: 2px 0 0; }
.td-note { font-size: .72rem; margin: 2px 0 0; }
@media (max-width: 560px) {
  .td-row:last-child .td-field { min-width: 160px; }
  .td-action { flex: 1 1 100%; }
}

/* ---------- Sections / footer ---------- */
.section { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 8px; }
.alt { background: var(--panel); }

.site-footer {
  border-top: 1px solid var(--line); padding: 40px 0 50px;
  font-size: .88rem; color: var(--ink-soft);
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-soft); }

/* ---------- Social links (brand colors, not site palette) ---------- */
.social-links { display: flex; gap: 10px; }
.social-icon {
  width: 36px; height: 36px; border-radius: 22%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s ease, transform .15s ease;
}
.social-icon:hover { filter: brightness(1.12); transform: translateY(-2px); text-decoration: none; }
.social-icon svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.social-icon.youtube { background: #FF0000; }
.social-icon.x { background: #000000; }
.social-icon.tiktok { background: #000000; }
.social-icon.threads { background: #000000; }
.social-icon.instagram { background: radial-gradient(circle at 30% 110%, #FFDD55 0%, #FF543E 45%, #C837AB 75%, #5158D9 100%); }
.social-icon.facebook { background: #1877F2; }

/* floating chatbot stub — replace with real widget embed */
/* The pill is --ink-fixed in both themes by design, which made it vanish into
   the --ground of dark mode (both #202020) — the drop shadow doesn't register
   there either. The hairline ring is what separates it from the page in dark,
   and reads as a soft edge on light. */
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink-fixed); color: var(--on-ink-fixed);
  border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
  min-height: var(--ctl-h); padding: 0 22px; font-weight: 650; font-size: .9rem; cursor: pointer;
  box-shadow: var(--shadow-ink-lift), inset 0 -1px 0 rgba(0,0,0,.30);
  transition: background .18s cubic-bezier(.22,1,.36,1), color .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s cubic-bezier(.22,1,.36,1), transform .12s cubic-bezier(.22,1,.36,1);
}
.chat-fab:active { transform: translateY(1px); }
.chat-fab:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
a.chat-fab { color: var(--on-ink-fixed); }
a.chat-fab:hover { color: var(--accent-ink); }
.chat-fab .wa-ico { width: 18px; height: 18px; flex: none; }
/* WhatsApp buttons keep the site's own button styles; only the glyph wears WhatsApp green
   (8.1:1 on the ink pill). On the orange hover it follows the label colour instead. */
.wa-ico { color: #25D366; }
a.chat-fab:hover .wa-ico { color: inherit; }
.btn .wa-ico { width: 18px; height: 18px; flex: none; margin-right: 2px; }
/* Floating WhatsApp button: slides in, pulses a ring every few seconds, lifts on hover,
   presses on tap. All of it is switched off under prefers-reduced-motion below. */
a.chat-fab[data-wa] { animation: wa-in .5s cubic-bezier(.22,1,.36,1) .6s backwards; /* not "both": a held end frame would override the hover transform */ }
a.chat-fab[data-wa]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: wa-pulse 2.8s ease-out 1.6s infinite;
}
a.chat-fab[data-wa]:hover { transform: translateY(-3px); }
a.chat-fab[data-wa]:hover::after { animation: none; }
a.chat-fab[data-wa]:hover .wa-ico { transform: rotate(-12deg) scale(1.12); }
a.chat-fab[data-wa]:active { transform: translateY(1px) scale(.97); }
.chat-fab .wa-ico { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
/* Chat menu opened by the floating button (built by whatsapp.js). */
.chat-menu {
  position: fixed; right: 18px; bottom: calc(18px + var(--ctl-h) + 12px); z-index: 61;
  min-width: 220px; padding: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
  animation: chat-menu-in .18s cubic-bezier(.22,1,.36,1);
}
.chat-menu[hidden] { display: none; }
.chat-menu--inline { position: absolute; right: auto; bottom: auto; }
.chat-menu a, .chat-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px;
  background: none; border: 0; border-radius: 10px; font: inherit; font-weight: 650; font-size: .95rem;
  color: var(--ink); text-decoration: none; cursor: pointer; text-align: left;
}
.chat-menu a:hover, .chat-menu button:hover, .chat-menu a:focus-visible, .chat-menu button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent); text-decoration: none;
}
.chat-menu svg { width: 20px; height: 20px; flex: none; }
a.chat-fab.open::after { animation: none; }
@keyframes chat-menu-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wa-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Every transition/transform on the site collapses here. This block previously
   covered only .card and left the button, chip and social-icon motion running. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card:hover,
  .btn, .btn:hover, .btn:active,
  /* The arrow is a pseudo-element, so it needs its own entry — a rule on .btn
     does not reach ::after. This block has now been under-scoped three times;
     any new :hover/:active transform belongs here in the same edit. */
  .btn::after, .btn:hover::after,
  .btn-primary:hover, .btn-primary:active,
  .btn-outline:hover, .btn-outline:active,
  .tile-accent a.btn:hover, .tile-accent a.btn:active,
  .nav-cta, .nav-cta:hover, .nav-cta:active,
  .cta-inline, .cta-inline:hover, .cta-inline:active,
  .chip, .chip:hover, .chip:active,
  .chat-fab, .chat-fab:hover, .chat-fab:active,
  .social-icon, .social-icon:hover,
  .featured-arrow, .featured-arrow:hover,
  .featured-dot::after, .featured-dot.active::after,
  a.chat-fab[data-wa], a.chat-fab[data-wa]::after, .chat-fab .wa-ico,
  a.chat-fab[data-wa]:hover .wa-ico, a.chat-fab[data-wa]:active, .chat-menu {
    transition: none; transform: none; animation: none;
  }
}

/* ---- Featured-article carousel (guides hub) -------------------------------
   Slides are ordinary .card markup; JS in featured.js adds the flipping and
   injects the controls, so with JS dead every slide simply renders stacked.
   Controls stay hidden until there are at least two slides. */
.featured-carousel { position: relative; }
.featured-slide { display: none; }
.featured-slide.active { display: flex; }

.featured-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 16px;
}
.featured-arrow {
  width: var(--ctl-h-sm); height: var(--ctl-h-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--ground); color: var(--ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.featured-arrow:hover { background: var(--panel); border-color: var(--ink-soft); }
.featured-dots { display: flex; gap: 4px; }
/* 28px hit area around a 9px dot — the dot alone is far below a usable tap target */
.featured-dot {
  width: 28px; height: 28px; padding: 0;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.featured-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
  transition: background .18s ease, transform .18s ease;
}
.featured-dot.active::after { background: var(--accent); transform: scale(1.3); }
.featured-dot:hover::after { background: var(--ink-soft); }
.featured-arrow:focus-visible, .featured-dot:focus-visible {
  outline: 2px solid var(--accent-dark); outline-offset: 2px;
}

/* Homepage inventory tile: full-bleed carousel of 5 random live listings
   (featured-inventory.js + featured.js), with the CTA overlaid on top. */
.tile-inventory, .tile-media { position: relative; padding: 0; overflow: hidden; }
.fi-carousel, .fv-carousel { position: absolute; inset: 0; margin: 0; }
.fi-slide, .fv-slide { display: none; position: absolute; inset: 0; text-decoration: none; }
.fi-slide.active, .fv-slide.active { display: block; }
.fi-slide img, .fv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--panel); }
/* Scrim: keeps the CTA legible over a bright hood or a dark grille alike. */
.fi-slide::after, .fv-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,.62) 0%, rgba(20,20,20,.20) 46%, rgba(20,20,20,.68) 100%);
}
.fi-slide .fi-name, .fv-slide .fi-name {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  max-width: calc(100% - 178px);
  color: #fff; font-size: .92rem; font-weight: 650; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 620px) {
  /* Controls need the whole bottom line at this width, so the name moves up
     under the CTA rather than colliding with the dots. */
  .fi-slide .fi-name, .fv-slide .fi-name { top: 56px; bottom: auto; max-width: calc(100% - 40px); }
}
.fi-cta {
  position: absolute; top: 18px; left: 20px; z-index: 3;
  font-size: 1.8rem; font-weight: 750; line-height: 1.15;
  color: #fff; text-decoration: none; text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.fi-cta:hover { color: var(--accent); }
.fi-carousel .featured-controls, .fv-carousel .featured-controls {
  position: absolute; right: 16px; bottom: 12px; z-index: 3; margin: 0; gap: 8px;
}
.fi-carousel .featured-arrow, .fv-carousel .featured-arrow {
  width: 28px; height: 28px; min-height: 0; font-size: .9rem;
  background: rgba(255,255,255,.92); border-color: transparent; color: #202020;
}
.fi-carousel .featured-dot, .fv-carousel .featured-dot { background: rgba(255,255,255,.5); }
.fi-carousel .featured-dot.active, .fv-carousel .featured-dot.active { background: var(--accent); }

/* Homepage media tile: YouTube uploads (featured-videos.js). Thumbnails only,
   no embedded player, so the homepage sets no third-party cookies. */
.fv-placeholder { padding: 22px 24px; }
.fv-placeholder h3 { margin: 0 0 6px; }
.fv-cta { position: absolute; }
.tile-media:has(.fv-placeholder:not([hidden])) .fv-cta {
  position: static; display: inline-block; margin: 0 24px 22px;
  color: var(--accent-dark); text-shadow: none; font-size: 1.8rem;
}
.fv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 44px; border-radius: 11px; z-index: 2;
  background: rgba(0,0,0,.72); box-shadow: 0 2px 14px rgba(0,0,0,.35);
  transition: background .18s ease;
}
.fv-play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-42%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.fv-slide:hover .fv-play { background: #FF0033; }
@media (prefers-reduced-motion: reduce) { .fv-play { transition: none; } }

/* Homepage reviews tile: real 5-star Google reviews that name Ryan, rolling
   upward continuously. The track holds the list twice and travels exactly half
   its height, so the loop never shows a seam. */
.tile-reviews { position: relative; overflow: hidden; }
.fr-roll {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.fr-track {
  display: flex; flex-direction: column;
  padding: 0 20px;
  animation: fr-roll 480s linear infinite;
}
.fr-roll:hover .fr-track { animation-play-state: paused; }
@keyframes fr-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.fr-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.fr-placeholder h3 { margin: 0 0 6px; }
.fr-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.fr-g { flex: none; display: block; }
.fr-src { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.fr-stars { color: #F5A623; font-size: .9rem; letter-spacing: 1.5px; line-height: 1; }
.fr-quote { margin: 0 0 5px; font-size: .84rem; line-height: 1.42; color: var(--ink); }
.fr-who {
  font-family: var(--font-mono); font-size: .64rem;
  color: var(--ink-soft); letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .fr-roll { overflow-y: auto; }
  .fr-track { animation: none; }
}

/* Hero call-to-action pair. A margin on the second button indented it whenever
   the row wrapped; a flex row keeps both left-aligned and evenly spaced. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-actions .btn { margin: 0; }
@media (max-width: 420px) { .hero-actions .btn { width: 100%; } }

/* At tablet width the nav still shows every link, and it was butting into the
   logo with a 1px gap. */
.site-header .container { gap: 20px; }
.site-header .logo, .nav-links a { white-space: nowrap; }
/* Model names break at their hyphen ("CR-" / "V") when a heading wraps, which
   reads as a typo. Applied to the model token only, never a whole heading, so
   long headings still wrap normally everywhere else. */
.nb { white-space: nowrap; }

/* On phone and tablet the reviews tile spans the full width, so give it the
   height to show a whole review instead of two half ones. */
@media (max-width: 900px) {
  .tile-reviews { min-height: 240px; }
}

/* The chat button is fixed, so it sat on top of whatever happened to be in the
   bottom-right: guide cards, the trade-in button, footer links. Reserving room
   below the footer keeps it clear of real content, and on a phone it drops to
   the bubble alone so it covers far less of a narrow screen. */
.site-footer { padding-bottom: calc(var(--ctl-h) + 34px); }
@media (max-width: 560px) {
  /* Icon only: the label collapses to font-size 0 and the WhatsApp glyph stays. */
  .chat-fab { right: 14px; bottom: 14px; width: 52px; padding: 0; gap: 0; font-size: 0; justify-content: center; }
  .chat-fab .wa-ico { width: 24px; height: 24px; }
  .chat-menu { right: 14px; bottom: 78px; }
}

/* ---------- Recently sold: horizontal carousel (inventory page) ---------- */
.sold-wrap { position: relative; }
.sold-arrow {
  position: absolute; top: calc(50% - 6px); z-index: 2; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #F08A2E, var(--accent)); color: var(--accent-ink);
  box-shadow: 0 8px 22px -6px rgba(232,121,26,.55);
  font: inherit; font-size: 1.7rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.sold-prev { left: 0; }
.sold-next { left: 100%; }
.sold-arrow:hover:not(:disabled) { filter: brightness(1.06); }
.sold-arrow:disabled { opacity: .35; cursor: default; }
.sold-arrow[hidden] { display: none; }
@media (max-width: 900px) {
  .sold-prev { left: 23px; }
  .sold-next { left: calc(100% - 23px); }
}
#soldGrid {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 12px; scrollbar-width: none;
}
#soldGrid > .card { scroll-snap-align: start; min-width: 0; }
#soldGrid::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { #soldGrid { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { #soldGrid { grid-auto-columns: 82%; } }