/* ==========================================================================
   bCarwale — public site
   Design system taken from the blueprint. Hand-written CSS, no framework,
   no build step.

   Dark UI on near-black with a single lime accent. The theme is expressed
   entirely through the tokens below: components reference them and never
   hardcode a colour, so the whole site can be re-skinned from this block.
   ========================================================================== */

/* Poppins, self-hosted. The CSP allows no external hosts, and serving four
   subsetted woff2 files (~8KB each) from our own origin beats a round trip to
   a font CDN anyway. */
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* Accent — one colour carries every call to action. */
  --lime:         #A6E22E;
  --lime-dark:    #8FC61F;
  --lime-soft:    rgba(166, 226, 46, .12);
  --on-accent:    #141414;   /* text on a lime fill */

  /* Surfaces, darkest first */
  --bg:           #141414;   /* page */
  --bg-grey:      #101010;   /* listing pages sit a shade deeper */
  --surface:      #1E1E1E;   /* cards, header, panels */
  --surface-2:    #2A2A2A;   /* inputs, hover, media wells */
  --surface-3:    #333333;

  /* Ink */
  --text:         #FFFFFF;
  --text-2:       #C7C7C7;
  --muted:        #A0A0A0;
  /* Both lifted for contrast. #919191 is the darkest grey that clears 4.5:1
     on --surface-2 (the lightest ground secondary ink sits on); the old
     #6E6E6E read at 2.81:1 there, which is what made placeholders illegible. */
  --faint:        #949494;
  --on-dark-mute: #A0A0A0;

  /* Lines */
  --border:       #2E2E2E;
  --border-2:     #3A3A3A;

  /* Status */
  --star:         #F5A623;
  --green:        #A6E22E;   /* inspection scores read as the accent */
  --danger:       #FF5C5C;
  --link:         #A6E22E;

  /* Legacy aliases: older rules still say --red for "the accent colour".
     Kept pointing at the lime so nothing silently reverts to the old brand. */
  --red:          #A6E22E;
  --red-dark:     #8FC61F;
  --navy:         #1E1E1E;

  /* Veils — translucent fills and hairlines laid over a coloured panel (hero
     tabs, social buttons, the footer rule). They were literal
     rgba(255,255,255,…), which is invisible once the panel turns light, so the
     polarity lives in a token and flips with the theme. */
  --veil:         rgba(255, 255, 255, .12);
  --veil-strong:  rgba(255, 255, 255, .14);
  --veil-line:    rgba(255, 255, 255, .22);
  --veil-rule:    rgba(255, 255, 255, .10);
  --veil-ink:     rgba(255, 255, 255, .90);

  /* Brand marks are dark-on-transparent PNGs and always need a light plate. */
  --logo-plate:   #FFFFFF;

  /* Hero composition. The scrim is a whole gradient rather than a colour
     because its stops carry the panel tint, which flips with the theme. */
  --hero-scrim:   linear-gradient(90deg, var(--bg) 0%, rgba(20,20,20,.92) 38%,
                                  rgba(20,20,20,.35) 56%, transparent 72%);
  --hero-car-shadow: 0 26px 34px rgba(0, 0, 0, .55);
  --chip-scrim:   rgba(20, 20, 20, .72);

  /* Shape */
  --r:            8px;
  --r-lg:         12px;
  --r-pill:       999px;

  /* Elevation — shadows on a dark ground must be deeper to register at all. */
  --shadow:       0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, .55);

  /* Metrics */
  --container:    1200px;
  --header-h:     64px;

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

/* ==========================================================================
   Light theme

   Dark is the brand and stays the default, so this overrides only the tokens
   whose *role* changes — nothing here introduces a new colour name. The one
   place the palette cannot simply invert is the accent: #A6E22E reads at
   1.7:1 on white, so anything lime that carries **text** switches to a darker
   green (5.1:1 on white), while lime as a *fill* under dark ink is unchanged.

   Opt-in only: assets/js/theme.js stamps data-theme="light" on <html>.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  /* The accent has to change, and it has to change *everywhere at once*.
     --lime and its alias --red are used both as text (30-odd hover, active and
     error rules) and as button fills. #A6E22E reads 1.7:1 on white, so as text
     it is simply unusable; darkening it only for text would leave the two
     drifting apart. #4C7A0B is the one value that satisfies both roles —
     5.1:1 as ink on white, and 5.1:1 against white ink when used as a fill —
     so the fill flips to white ink to match. The lime survives untouched in
     the dark theme and in the hero artwork, which is drawn, not themed. */
  --lime:         #4C7A0B;
  --lime-dark:    #3E6309;
  --lime-soft:    rgba(76, 122, 11, .12);
  --on-accent:    #FFFFFF;   /* white ink on the darker green fill */

  --bg:           #F7F8F6;
  --bg-grey:      #EFF1EC;
  --surface:      #FFFFFF;
  --surface-2:    #F0F1EE;
  --surface-3:    #E4E6E1;

  --text:         #141414;
  --text-2:       #3D3D3D;
  --muted:        #5C5C5C;
  /* #666 is the darkest grey still clearing 4.5:1 on --surface-2, the
     lightest ground secondary ink sits on — the mirror of the dark theme's
     #919191 floor. Do not darken the surface or lighten these without
     rechecking the pair. */
  --faint:        #666666;
  --on-dark-mute: #5C5C5C;   /* now ink on a *light* panel, despite the name */

  --border:       #E2E4DF;
  --border-2:     #CED1C9;

  /* Lime as text fails on white; this green clears 5.1:1. */
  --green:        #4C7A0B;
  --link:         #4C7A0B;

  /* Legacy aliases must track --lime exactly: older rules say --red where they
     mean "the accent", for both text and fills.
     --navy is the tinted panel behind the hero, footer and trust strip. */
  --red:          #4C7A0B;
  --red-dark:     #3E6309;
  --navy:         #EDEFEA;

  /* The hero scrim keeps the headline legible over the artwork. It was a
     hardcoded near-black gradient, which painted a dark smear across the light
     hero — the panel colour has to flip with the theme. */
  --hero-scrim:   linear-gradient(90deg, var(--navy) 0%, rgba(237,239,234,.94) 38%,
                                  rgba(237,239,234,.42) 56%, transparent 72%);
  --hero-car-shadow: 0 22px 30px rgba(20, 30, 10, .22);
  --chip-scrim:   rgba(255, 255, 255, .78);

  --veil:         rgba(0, 0, 0, .06);
  --veil-strong:  rgba(0, 0, 0, .07);
  --veil-line:    rgba(0, 0, 0, .14);
  --veil-rule:    rgba(0, 0, 0, .09);
  --veil-ink:     rgba(20, 20, 20, .82);

  --shadow:       0 1px 3px rgba(16, 20, 12, .10);
  --shadow-md:    0 8px 24px rgba(16, 20, 12, .14);
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win over any component that sets `display`.
   Without this, a rule such as `.hero-search { display: flex }` beats the UA's
   `[hidden] { display: none }` on specificity and the element stays visible. */
[hidden] { display: none !important; }


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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--red); color: var(--on-accent);
  padding: 10px 16px; z-index: 200; border-radius: var(--r);
}
.skip-link:focus { left: 12px; top: 12px; }

.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;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
}

/* Logo: the CarSearchKaro brand lockup as one transparent PNG. Height is
   capped and the width follows, which keeps the mark on one line at every
   header size.

   Two files, not one. The artwork was drawn for a white page and two of its
   three inks fail on the dark surface -- the #666 tagline lands at 2.4:1 and
   the #0055CC blue at 2.6:1, which is what "not visible at some points"
   was. bin/make-logo-dark.php derives a variant that lifts exactly those two
   and leaves the orange alone. Both ship in the markup and CSS picks one, so
   the swap costs no request and cannot flash -- the same arrangement the
   theme toggle icons use. The dark variant is the default because the dark
   theme is: [data-theme="light"] is opt-in and absent until theme.js runs. */
.logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.logo-img {
  display: block;
  width: auto; height: 40px;
}
.logo-img--light { display: none; }
:root[data-theme="light"] .logo-img--dark  { display: none; }
:root[data-theme="light"] .logo-img--light { display: block; }

.main-nav { flex: 1 1 auto; }
.main-nav ul {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav a {
  display: block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2);
  padding: 4px 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--red); }
.main-nav a.is-active { color: var(--red); border-bottom-color: var(--red); }

.header-actions {
  display: flex; align-items: center; gap: 20px; flex: 0 0 auto; margin-left: auto;
}
.header-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2);
}
.header-btn:hover { color: var(--red); }
.header-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.nav-toggle { display: none; }

/* Slide-down search panel */
.header-search {
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: none;
  padding: 14px 0;
}
.header-search.is-open { display: block; }
.header-search form { display: flex; gap: 8px; }
.header-search input {
  flex: 1 1 auto; height: 42px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  font: inherit; font-size: 14px;
}
.header-search input:focus { border-color: var(--red); outline: none; }

/* Mobile drawer */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 0; }
.mobile-menu a {
  display: block; padding: 12px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-2);
  border-bottom: 1px solid var(--surface-2);
}
.mobile-menu a:hover, .mobile-menu a.is-active { color: var(--red); background: var(--surface-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary { background: var(--red); color: var(--on-accent); border-color: var(--red); text-transform: uppercase; }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn--outline { background: transparent; color: var(--lime); border-color: var(--lime); text-transform: uppercase; }
.btn--outline:hover { background: var(--lime-soft); }

.btn--sm { height: 32px; padding: 0 14px; font-size: 11.5px; }
.btn--block { width: 100%; }

/* "View All" section link */
.view-all {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--link);
}
.view-all:hover { text-decoration: underline; }
.view-all::after { content: "\203A"; font-size: 15px; line-height: 1; }

/* ==========================================================================
   Section shell
   ========================================================================== */

.section { padding: 30px 0; }
.section + .section { padding-top: 4px; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.section-title {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center;
  background: var(--navy);
  overflow: hidden;
}
/* The car sits inside a lime arc on the right, headline on the left. The
   arc is clipped by the hero, which is what gives it the swept look.

   Not the brand logo. The logo was tried here and reads as a placeholder:
   the header already carries it eight pixels above, so the hero repeated the
   name instead of showing a car, and a homepage whose only image is its own
   wordmark says nothing about what the site is for. */
.hero-media { position: absolute; inset: 0; pointer-events: none; }
/* Anchored to the car, not the viewport edge, so the two stay composed
   together as the hero widens. An arc taller than its container is clipped
   top and bottom and reads as two stray wedges rather than a curve. */
.hero-media::before {
  content: "";
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  width: min(46%, 590px); height: 78%;
  border: 1px solid rgba(166, 226, 46, .18);
  border-radius: 48% 52% 42% 58% / 56% 42% 58% 44%;
  background:
    radial-gradient(ellipse at 58% 82%, rgba(0, 0, 0, .5) 0 13%, transparent 48%),
    radial-gradient(circle at 62% 38%, rgba(166, 226, 46, .3), transparent 47%),
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(166, 226, 46, .025));
  box-shadow: inset 0 0 55px rgba(166, 226, 46, .08), 0 28px 75px rgba(0, 0, 0, .22);
}
.hero-arc {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: min(34%, 430px); height: auto; aspect-ratio: 1; opacity: .42;
}
/* The car floats on the arc -- no frame, no rounded box. Any background the
   image brings with it would land on the arc as an opaque rectangle, which
   is exactly the seam this layout exists to avoid, so heroCar() only ever
   returns something with a transparent ground. */
.hero-car {
  /* Sized to the gap: the search card ends around 820px on a 1280 viewport,
     so the car starts just clear of it and stops short of the right edge. */
  position: absolute; right: .8%; top: 52%; transform: translateY(-50%);
  width: min(39%, 500px); height: auto; object-fit: contain;
  filter: drop-shadow(var(--hero-car-shadow));
}
/* Left-weighted scrim keeps the headline legible over the artwork. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-scrim);
}
/* padding-block, not the shorthand: this element is also .container, whose
   16px side padding the shorthand would reset to zero. On desktop the centred
   max-width hides that; on a phone the headline lands flat against the edge. */
.hero-inner {
  position: relative; z-index: 1; width: 100%;
  padding-block: 36px 30px;
}

.hero-title {
  margin: 0 0 10px;
  font-size: 44px; line-height: 1.14; font-weight: 700;
  letter-spacing: -.02em; color: var(--text); max-width: 520px;
}
.hero-sub {
  margin: 0 0 22px; font-size: 14px; color: var(--text-2); max-width: 520px;
}

/* Tabs sit on the search card's top edge; the active tab merges into it. */
.hero-tabs { display: flex; gap: 2px; }
.hero-tab {
  padding: 11px 26px;
  background: var(--veil-strong); color: var(--veil-ink);
  border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--r) var(--r) 0 0;
}
.hero-tab.is-active { background: var(--surface); color: var(--text); }

.hero-search {
  background: var(--surface);
  border-radius: 0 var(--r) var(--r) var(--r);
  padding: 12px;
  display: flex; gap: 8px; align-items: center;
  max-width: 780px;
  box-shadow: var(--shadow-md);
}
.hero-search .select,
.hero-search .btn { flex: 1 1 0; min-width: 0; }
.hero-search .btn { flex: 0 0 118px; }

.select {
  position: relative;
  height: 40px;
}
.select select {
  width: 100%; height: 100%;
  padding: 0 30px 0 12px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.select select:focus { border-color: var(--red); outline: none; }
.select::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}

/* ==========================================================================
   Popular brands
   ========================================================================== */

.brand-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
}
.brand-item {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 6px;
  border: 1px solid transparent; border-radius: var(--r-lg);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.brand-item:hover { border-color: var(--border); box-shadow: var(--shadow); }
.brand-logo {
  height: 34px; width: 100%;
  display: grid; place-items: center;
}
/* Logos keep their natural aspect, so a wide wordmark (Audi, Mercedes-Benz)
   must be capped on both axes or it overflows the tile. */
.brand-logo img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
.brand-logo-fallback {
  width: 42px; height: 34px; border-radius: var(--r);
  background: var(--surface-2); color: var(--text-2);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: -.02em;
}
.brand-name {
  font-size: 11.5px; font-weight: 500; color: var(--text-2); line-height: 1.3;
}

/* ==========================================================================
   Body types
   ========================================================================== */

.bodytype-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.bodytype-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px 4px; text-align: center;
}
.bodytype-icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.bodytype-item:hover .bodytype-icon { border-color: var(--red); background: var(--surface); }
.bodytype-icon svg { width: 34px; height: 22px; fill: var(--text-2); }
.bodytype-icon--accent { background: var(--green); border-color: var(--green); }
.bodytype-icon--accent svg { fill: var(--on-accent); }
.bodytype-item:hover .bodytype-icon--accent { background: var(--green); border-color: var(--green); }
.bodytype-name { font-size: 12px; font-weight: 500; color: var(--text-2); }

/* ==========================================================================
   Review cards
   ========================================================================== */

.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.review-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.review-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.review-card-media img { width: 100%; height: 100%; object-fit: cover; }

.badge-tag {
  position: absolute; top: 8px; left: 8px;
  background: var(--red); color: var(--on-accent);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px;
}

.review-card-body { padding: 11px 12px 13px; }
.review-card-title {
  margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text);
}
.review-card:hover .review-card-title { color: var(--red); }
.review-card-meta { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); }

/* Star rating */
.rating { display: inline-flex; align-items: center; gap: 5px; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 12px; height: 12px; }
.star-on  { fill: var(--star); }
.star-off { fill: var(--surface-3); }
.rating-value { font-size: 11.5px; font-weight: 600; color: var(--text-2); }

/* ==========================================================================
   News row cards (home)
   ========================================================================== */

.news-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px; border: 1px solid transparent; border-radius: var(--r-lg);
  transition: border-color .15s ease, background-color .15s ease;
}
.news-row:hover { border-color: var(--border); background: var(--surface-2); }
.news-row-media {
  flex: 0 0 74px; aspect-ratio: 4 / 3;
  border-radius: var(--r); overflow: hidden; background: var(--surface-2);
}
.news-row-media img { width: 100%; height: 100%; object-fit: cover; }
.news-row-title {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text);
}
.news-row:hover .news-row-title { color: var(--red); }
.news-row-date { font-size: 11px; color: var(--muted); }

/* ==========================================================================
   Feature strip (dark)
   ========================================================================== */

.feature-strip { background: var(--navy); padding: 26px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-item { display: flex; gap: 13px; align-items: flex-start; }
.feature-icon {
  flex: 0 0 38px; height: 38px; border-radius: var(--r);
  border: 1px solid var(--veil-line);
  display: grid; place-items: center;
}
.feature-icon svg { width: 19px; height: 19px; stroke: var(--text); fill: none; stroke-width: 1.6; }
.feature-title { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.feature-text  { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--on-dark-mute); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--navy); color: var(--on-dark-mute); padding: 34px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 26px;
}
/* The footer repeats the brand PNG a step larger. It must also opt out of
   the white plate the manufacturer marks get below — those are dark marks
   drawn for a white card, while the site brand is coloured ink that sits
   straight on the navy panel. The extra class outranks the `.footer-brand
   img` plate rule in both themes. */
.footer-brand .logo-img { height: 46px; background: none; border: 0; border-radius: 0; }
:root[data-theme="light"] .footer-brand .logo-img { border: 0; }
.footer-heading {
  margin: 0 0 13px; font-size: 13px; font-weight: 600; color: var(--text);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-list a { font-size: 12.5px; color: var(--on-dark-mute); }
.footer-list a:hover { color: var(--text); }

.social-row { display: flex; gap: 9px; }
.social-link {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--veil);
  display: grid; place-items: center;
  transition: background-color .15s ease;
}
.social-link svg { width: 14px; height: 14px; fill: var(--text); }
.social-link:hover { background: var(--red); }

.footer-bottom {
  margin-top: 30px; padding: 15px 0;
  border-top: 1px solid var(--veil-rule);
  text-align: center; font-size: 12px; color: var(--on-dark-mute);
}

/* ==========================================================================
   Page shell (listing / blog / internal)
   ========================================================================== */

.page-grey { background: var(--bg-grey); }

.breadcrumb { padding: 11px 0; font-size: 12px; color: var(--muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--link); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--faint); }

/* Page header with a photographic car cut-out on the right. */
.page-hero {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 18px 0 20px;
}
.page-hero-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.page-hero-title { margin: 0 0 7px; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.page-hero-text  { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 520px; }
.page-hero-media { flex: 0 0 290px; }
/* A photograph of a real car from the page's own results. It carries its own
   colour, so none of the inversion below applies to it: it is only rounded,
   fitted and given a shadow that changes with the theme. */
.page-hero-media--photo img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}
:root[data-theme="light"] .page-hero-media--photo img {
  filter: drop-shadow(0 12px 20px rgba(20, 20, 20, .22));
}

.page-hero-media:not(.page-hero-media--photo) img {
  width: 100%; height: auto;
  filter: grayscale(1) invert(1) brightness(1.12) contrast(.92)
          drop-shadow(0 14px 20px rgba(0, 0, 0, .35));
}
:root[data-theme="light"] .page-hero-media:not(.page-hero-media--photo) img {
  filter: drop-shadow(0 14px 20px rgba(20, 20, 20, .18));
}

/* ==========================================================================
   Filter bar (listing)
   ========================================================================== */

.filter-bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.filter-bar-inner { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.filter-bar .select { flex: 1 1 0; min-width: 128px; }
.filter-bar .select select { height: 38px; }
.sort-group { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.sort-group .select { flex: 0 0 148px; }

/* Mobile filter trigger */
.filter-toggle { display: none; }

/* ==========================================================================
   Listing layout
   ========================================================================== */

.listing-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px;
  padding: 20px 0 34px; align-items: start;
}

/* The off-canvas backdrop is inert until the drawer opens. Declared here, outside
   any media query, so it never becomes a stray grid item on desktop. */
.filter-backdrop { display: none; }
.filter-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px;
  position: sticky; top: calc(var(--header-h) + 12px);
  /* Cap the rail to the visible area and let it scroll inside itself; without
     this a rail taller than the viewport scrolls away and stops being sticky. */
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Slim scrollbar so the rail does not gain a heavy native gutter. */
.filter-panel::-webkit-scrollbar { width: 8px; }
.filter-panel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.filter-panel { scrollbar-width: thin; }
.filter-panel-head {
  /* Clear All sits alone at the top of the rail, as in the blueprint. */
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.clear-all { font-size: 12px; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.clear-all:hover { text-decoration: underline; }

.filter-group { padding: 12px 0; border-top: 1px solid var(--border); }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group-title {
  margin: 0 0 9px; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.filter-options { display: grid; gap: 7px; }

.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; line-height: 1.4;
}
.check input { width: 14px; height: 14px; accent-color: var(--red); flex: 0 0 auto; cursor: pointer; margin: 0; }
.check:hover { color: var(--text); }
.check-count { color: var(--faint); }

.filter-search {
  width: 100%; height: 32px; padding: 0 10px; margin-bottom: 9px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  font: inherit; font-size: 12.5px;
}
.filter-search:focus { border-color: var(--red); outline: none; }

.show-more {
  margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--link);
}
.show-more:hover { text-decoration: underline; }

.result-count { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 12px; }

/* ==========================================================================
   Car card (listing row)
   ========================================================================== */

.car-list { display: grid; gap: 12px; }

.car-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px; display: grid; grid-template-columns: 168px minmax(0, 1fr);
  gap: 15px; align-items: center;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.car-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

.car-card-media {
  aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2);
}
.car-card-media img { width: 100%; height: 100%; object-fit: cover; }

.car-card-body { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.car-card-info { min-width: 0; }

.car-card-title { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.car-card:hover .car-card-title { color: var(--red); }

.car-card-price { font-size: 14px; font-weight: 700; color: var(--text); }
.car-card-price-note { font-size: 10.5px; color: var(--muted); margin: 1px 0 7px; }
.car-card-specs { font-size: 11.5px; color: var(--text-2); margin: 0 0 8px; }
.car-card-reviews { font-size: 11.5px; color: var(--link); font-weight: 500; }

.car-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.car-card-actions .btn { min-width: 96px; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; padding: 26px 0 6px;
}
.page-link {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r);
  font-size: 12.5px; color: var(--text-2);
}
.page-link:hover { border-color: var(--red); color: var(--red); }
.page-link.is-active {
  background: var(--red); border-color: var(--red); color: var(--on-accent); font-weight: 600;
}
.page-gap { border: 0; background: none; color: var(--faint); }
.page-gap:hover { border: 0; color: var(--faint); }

/* ==========================================================================
   Blog
   ========================================================================== */

.tab-bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.tab-bar-inner { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.tab-bar-inner::-webkit-scrollbar { display: none; }
.tab-link {
  padding: 13px 0; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent;
}
.tab-link:hover { color: var(--red); }
.tab-link.is-active { color: var(--red); border-bottom-color: var(--red); }

.article-list { display: grid; gap: 0; padding: 6px 0 0; }

.article-row {
  display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.article-row:last-child { border-bottom: 0; }
.article-row-media {
  aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--surface-2);
}
.article-row-media img { width: 100%; height: 100%; object-fit: cover; }

.article-kicker {
  display: inline-block; margin-bottom: 5px;
  font-size: 11px; font-weight: 700; color: var(--red);
}
.article-row-title {
  margin: 0 0 7px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text);
}
.article-row:hover .article-row-title { color: var(--red); }
.article-row-excerpt { margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.article-row-date { font-size: 11.5px; color: var(--muted); }

/* ==========================================================================
   Article detail
   ========================================================================== */

.article-page { background: var(--surface); padding: 22px 0 40px; }
.article-head { max-width: 760px; margin: 0 auto 20px; }
.article-title { margin: 8px 0 12px; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); }
.article-cover { max-width: 900px; margin: 0 auto 24px; border-radius: var(--r-lg); overflow: hidden; }

.prose { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.prose h2 { margin: 30px 0 10px; font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.3; }
.prose h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 15px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose img { border-radius: var(--r-lg); margin: 18px 0; }
.prose a { color: var(--link); text-decoration: underline; }
/* A button is not a prose link: the link colour equals the primary
   button's fill in both themes, which painted the label invisible on
   its own background. */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary { color: var(--on-accent); }
.prose blockquote {
  margin: 18px 0; padding: 12px 18px;
  border-left: 3px solid var(--red); background: var(--surface-2);
  color: var(--text); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 600; color: var(--text); }

/* ==========================================================================
   Model detail
   ========================================================================== */

.model-hero { background: var(--surface); padding: 20px 0 26px; border-bottom: 1px solid var(--border); overflow: hidden; }
.model-hero-grid {
  display: grid;
  /* The information column is sized first and the gallery takes the rest:
     a price and four spec tiles have a minimum width below which they wrap
     into nonsense, whereas a photograph just gets smaller. */
  grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 430px);
  gap: clamp(22px, 2.4vw, 36px);
  align-items: start;
}
.model-hero-grid > * { min-width: 0; }
.model-gallery {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2); aspect-ratio: 16 / 9;
}
.model-gallery img { width: 100%; height: 100%; object-fit: contain; display: block; }
.model-title { margin: 0 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.model-tagline { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); }
.model-price { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.model-price-note { font-size: 12px; color: var(--muted); margin: 2px 0 16px; }

.keyspec-grid {
  display: grid;
  /* 2x2 in the hero rail, 4-across when there is room. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  margin: 18px 0;
}
.keyspec { background: var(--surface); padding: 12px; text-align: center; }
.keyspec-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.keyspec-value {
  font-size: 14px; font-weight: 700; color: var(--text); margin-top: 3px;
  /* keyspec-value--tight: "310 Nm" must not break between number and unit. */
  text-wrap: balance; overflow-wrap: break-word;
}
.keyspec-label { text-wrap: balance; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table th {
  background: var(--surface-2); text-align: left; padding: 10px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.spec-table td:first-child { color: var(--text); width: 42%; }

.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; margin-bottom: 16px;
}
.panel-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

/* Variant table */
.variant-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.variant-table th {
  text-align: left; padding: 9px 10px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-2); border-bottom: 1px solid var(--border);
}
.variant-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.variant-table tr:last-child td { border-bottom: 0; }
.variant-name { font-weight: 600; color: var(--text); }
.variant-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 13px 28px 13px 0; position: relative;
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4;
}
.faq-q::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq-item.is-open .faq-q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { display: none; padding: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.faq-item.is-open .faq-a { display: block; }

/* ==========================================================================
   Compare
   ========================================================================== */

.compare-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.compare-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.compare-table th, .compare-table td {
  padding: 11px 13px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left;
}
.compare-table thead th { background: var(--surface-2); vertical-align: bottom; }
.compare-table .row-label {
  position: sticky; left: 0; background: var(--surface); font-weight: 600; color: var(--text);
  min-width: 180px; border-right: 1px solid var(--border);
}
.compare-table thead .row-label { background: var(--surface-2); }
.compare-group td {
  background: var(--surface-2); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.field-required { color: var(--red); }
.input {
  width: 100%; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface);
}
.input:focus { border-color: var(--red); outline: none; }
.input::placeholder { color: var(--faint); }
textarea.input { resize: vertical; min-height: 108px; }
.field-help { font-size: 11.5px; color: var(--muted); margin: 0; }
.field-error { font-size: 11.5px; color: var(--red); font-weight: 500; margin: 0; }

.alert {
  padding: 11px 14px; border-radius: var(--r); font-size: 13px;
  border: 1px solid; margin-bottom: 16px;
}
.alert--success { background: rgba(166,226,46,.12); border-color: rgba(166,226,46,.38); color: var(--lime); }
.alert--error   { background: rgba(255,92,92,.12); border-color: rgba(255,92,92,.38); color: var(--danger); }
.alert--info    { background: var(--veil); border-color: var(--border-2); color: var(--text-2); }

/* ==========================================================================
   Empty state / misc
   ========================================================================== */

.empty-state { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.empty-state-title { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.empty-state-text  { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-2);
  font-size: 12.5px; color: var(--text-2);
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.is-active { background: var(--red); border-color: var(--red); color: var(--on-accent); }

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */

@media (max-width: 1024px) {
  .brand-grid    { grid-template-columns: repeat(4, 1fr); }
  .bodytype-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid-4   { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3   { grid-template-columns: repeat(2, 1fr); }
  .feature-grid  { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .footer-grid   { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions { gap: 14px; }

  .listing-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel {
    position: fixed; inset: 0 auto 0 0; z-index: 150;
    width: 300px; max-width: 86vw; border-radius: 0;
    /* The drawer owns the full viewport height, so drop the desktop cap. */
    max-height: none;
    overflow-y: auto; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-md);
  }
  .filter-panel.is-open { transform: translateX(0); }
  .filter-backdrop {
    position: fixed; inset: 0; background: rgba(15,24,33,.5); z-index: 140; display: none;
  }
  .filter-backdrop.is-open { display: block; }
  .filter-toggle { display: inline-flex; }

  .model-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .keyspec-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-title { font-size: 32px; }
  .page-hero-media { flex: 0 0 190px; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */

@media (max-width: 640px) {
  /* ---- Hero, rebuilt for a phone ----
     The desktop composition puts the car beside the headline, which cannot
     work at 390px: the old rules laid a 92%-opaque scrim over the whole hero,
     so the car — the only image on the page — was invisible and the section
     was a flat slab of text. (That scrim was also still the pre-rebrand navy,
     which no longer matched either theme.)

     Stacked instead: the artwork takes a band across the top and fades into
     the page, with the headline and search below it on solid ground. */
  .hero { min-height: 0; }

  /* overflow:hidden matters: both children are sized in their own right and
     would otherwise spill past the band — the arc is a square as wide as the
     screen, and it reappeared as a green blob behind the headline. */
  .hero-media { inset: 0 0 auto 0; height: 200px; overflow: hidden; }
  .hero-media::before {
    right: -18%; top: 48%;
    width: 106%; height: 176px;
    border-radius: 50%;
  }

  /* Sized by *height* rather than width. A percentage width makes the car's
     height depend on the viewport, so on a narrow phone it grew taller than
     the band and lost its roof to the crop. Fixing the height fits it to the
     band and lets the width follow the aspect ratio. */
  .hero-arc {
    right: -14%; top: 50%;
    width: auto; height: 184px; opacity: .5;
  }
  .hero-car {
    right: -2%; top: 50%;
    width: auto; height: 156px;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45));
  }
  /* Vertical, and transparent where the car sits: the point is to dissolve the
     band into the hero, not to hide what is behind it. */
  .hero-media::after {
    background: linear-gradient(180deg, transparent 0%, transparent 46%, var(--bg) 96%);
  }

  /* Clears the artwork band. */
  .hero-inner { padding-block: 208px 22px; }
  .hero-title { font-size: 27px; line-height: 1.15; }
  .hero-sub { font-size: 13px; margin-bottom: 16px; }

  /* Two short fields share a row, the wider one and the button span it, so the
     card is three rows instead of four full-width slabs. */
  .hero-search {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px; border-radius: var(--r-lg);
  }
  .hero-search .select { flex: none; min-width: 0; }
  .hero-search .select:nth-of-type(3),
  .hero-search .btn { grid-column: 1 / -1; }
  .hero-search .btn { flex: none; width: 100%; }

  /* One swipeable line rather than three wrapped rows of chips. */
  .hero-chips {
    flex-wrap: nowrap; overflow-x: auto;
    margin-top: 12px; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chips-label, .hero-chips .chip { flex: 0 0 auto; }

  .hero-tab { flex: 1 1 0; padding: 10px 12px; text-align: center; }

  .brand-grid    { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bodytype-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .card-grid-4, .card-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feature-grid  { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .footer-grid   { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .section { padding: 22px 0; }
  .section-title { font-size: 17px; }

  /* Listing card collapses to a stacked layout on phones. */
  .car-card { grid-template-columns: 108px minmax(0, 1fr); gap: 11px; padding: 11px; }
  .car-card-body { flex-direction: column; align-items: stretch; gap: 10px; }
  .car-card-actions { width: 100%; }
  .car-card-actions .btn { flex: 1 1 0; min-width: 0; }
  .car-card-title { font-size: 14px; }

  .article-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  .article-row-title { font-size: 14.5px; }
  .article-row-excerpt { display: none; }

  .page-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-hero-media { flex: 0 0 auto; width: 62%; align-self: flex-end; margin-top: -8px; }
  .page-hero-title { font-size: 22px; }

  .filter-bar-inner > .select { flex: 1 1 44%; }
  .sort-group { width: 100%; margin-left: 0; }
  .sort-group .select { flex: 1 1 auto; }

  .article-title { font-size: 24px; }
  .prose { font-size: 14.5px; }
  .keyspec-grid { grid-template-columns: repeat(2, 1fr); }
  .model-title { font-size: 22px; }
  .model-price { font-size: 22px; }

  .news-row-media { flex: 0 0 64px; }
}

@media (max-width: 380px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4, .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .site-header, .site-footer, .feature-strip, .filter-panel, .pagination { display: none !important; }
  body { background: #FFFFFF; color: #000; }
}

/* Photographer credit under a catalog image. Small and quiet — it satisfies the
   CC BY / CC BY-SA attribution requirement without competing with the car. */
.img-credit {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.img-credit a { color: var(--muted); text-decoration: underline; }
.img-credit a:hover { color: var(--link); }

/* A filter option with no stock under the current selection. Kept visible but
   inert, so the rail does not reflow as counts change between loads. */
.check--empty { opacity: .42; cursor: not-allowed; }
.check--empty input { cursor: not-allowed; }
.check-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- city picker
   The chosen city sits in the header because every price, listing and
   availability claim on the site is scoped to it. */
.city-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 18px; padding: 6px 10px;
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
  white-space: nowrap;
}
.city-trigger:hover { border-color: var(--red); color: var(--red); }
.city-trigger svg { width: 15px; height: 15px; flex: none; }
.city-trigger-name { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.city-modal { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.city-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 18, 26, .55); }
.city-modal-panel {
  position: relative; width: min(640px, 100%); max-height: min(80vh, 640px);
  overflow-y: auto; background: var(--surface); border-radius: var(--r-lg);
  padding: 20px; box-shadow: 0 24px 60px rgba(12, 18, 26, .28);
}
.city-modal-head { display: flex; align-items: center; justify-content: space-between; }
.city-modal-title { margin: 0; font-size: 18px; font-weight: 700; }
.city-modal-close { background: none; border: 0; font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; }
.city-modal-close:hover { color: var(--text); }

.city-search { width: 100%; margin: 14px 0 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r); font: inherit; font-size: 14px; }
.city-search:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }

.city-all { display: block; padding: 10px 12px; margin-bottom: 6px;
  border: 1px dashed var(--border); border-radius: var(--r);
  font-size: 13px; font-weight: 600; color: var(--link); text-decoration: none; }
.city-all:hover, .city-all.is-current { border-color: var(--red); color: var(--red); }

.city-group-title { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.city-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  text-decoration: none; color: var(--text); }
.city-tile:hover, .city-tile.is-current { border-color: var(--red); background: var(--surface-2); }
.city-tile-name { font-size: 13.5px; font-weight: 600; }
.city-tile-count { font-size: 11.5px; color: var(--muted); }

.city-list { display: flex; flex-direction: column; }
.city-row { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text); text-decoration: none; }
.city-row:hover, .city-row.is-current { color: var(--red); }
.city-row-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.city-empty { padding: 14px 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .city-trigger { margin-left: 8px; padding: 5px 7px; }
  .city-trigger-name { max-width: 74px; }
  .city-modal { padding: 0; align-items: flex-end; }
  .city-modal-panel { max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* Indicative monthly payment on a listing card. Buyers in this market shop by
   monthly outgo, so it sits with the price rather than in the detail page. */
.car-card-emi { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--green); }

/* Homepage browse tiles. */
.budget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.budget-tile { display: flex; flex-direction: column; gap: 3px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  text-decoration: none; color: var(--text); }
.budget-tile:hover { border-color: var(--red); box-shadow: 0 6px 18px rgba(12,18,26,.07); }
.budget-tile-label { font-size: 15px; font-weight: 700; }
.budget-tile-count { font-size: 12.5px; color: var(--muted); }

.browse-count, .brand-count { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.city-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip { display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.city-chip:hover { border-color: var(--red); color: var(--red); }
.city-chip-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.footer-bottom p { margin: 0; }

/* ------------------------------------------------------- body-type showcase
   Photo cards instead of icons. At tile size an SUV and a hatchback silhouette
   read almost identically; a photograph of a real car of that type does not. */
.bodycard-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.bodycard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bodycard:hover {
  border-color: var(--red);
  box-shadow: 0 10px 26px rgba(12, 18, 26, .10);
  transform: translateY(-2px);
}
.bodycard-media { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); }
.bodycard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bodycard-body { display: flex; align-items: center; gap: 11px; padding: 13px 14px; }
.bodycard-icon {
  flex: none; width: 40px; height: 26px;
  display: grid; place-items: center;
}
.bodycard-icon svg { width: 38px; height: 22px; fill: var(--text-2); }
.bodycard-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bodycard-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.bodycard-count { font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) { .bodycard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .bodycard-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 400px)  { .bodycard-grid { grid-template-columns: 1fr; } }

/* The same section as a horizontal rail: one row that scrolls, with
   the arrow component the brand rail uses. Overrides the grid above. */
.bodycard-grid--rail {
  display: flex; grid-template-columns: none;
  gap: 16px; overflow-x: auto;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding: 2px 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bodycard-grid--rail::-webkit-scrollbar { display: none; }
.bodycard-grid--rail .bodycard {
  flex: 0 0 auto; width: 300px; scroll-snap-align: start;
}
/* The body rail's photo is taller than a brand logo, so its arrows
   centre on the image rather than the 42px the brand rail uses. */
.rail:has(.bodycard-grid--rail) .rail-btn { top: 100px; }
@media (max-width: 720px) {
  .bodycard-grid--rail { gap: 12px; }
  .bodycard-grid--rail .bodycard { width: 260px; }
}
@media (max-width: 400px) {
  .bodycard-grid--rail .bodycard { width: 82vw; }
}

/* ------------------------------------------------------------- mega menu
   Each nav item is a link plus a disclosure. The panel is plain markup and
   plain anchors, so it doubles as a crawl path into the landing pages. */
.nav-item { position: relative; }
.nav-link-row { display: inline-flex; align-items: center; gap: 2px; }

.nav-caret {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--text-2);
  border-radius: 4px;
}
.nav-caret svg { width: 13px; height: 13px; transition: transform .18s ease; }
.nav-caret:hover { color: var(--red); }
.nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-caret:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 90;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(12, 18, 26, .16);
  padding: 18px 20px;
}
/* Wide panels would run off the right edge from a nav item near the end. */
.nav-item:nth-last-child(-n+2) .nav-panel { left: auto; right: 0; }

.nav-panel-inner { display: flex; gap: 26px; }
.nav-col { min-width: 0; }
.nav-col--cards { flex: 1 1 auto; }
.nav-col-title {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}

.nav-cards { display: grid; grid-template-columns: repeat(3, 132px); gap: 10px; }
.nav-card {
  display: block; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: var(--text);
}
.nav-card:hover { border-color: var(--red); }
.nav-card-media { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); }
.nav-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-card-label { display: block; padding: 7px 8px 0; font-size: 12.5px; font-weight: 600; }
.nav-card-count { display: block; padding: 0 8px 7px; font-size: 11px; color: var(--muted); }

.nav-logos { display: grid; grid-template-columns: repeat(4, 116px); gap: 8px; }
.nav-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; color: var(--text); text-align: center;
}
.nav-logo:hover { border-color: var(--border); background: var(--surface-2); }
.nav-logo img { max-height: 24px; max-width: 84px; width: auto; object-fit: contain; }
.nav-logo-label { font-size: 11.5px; font-weight: 500; color: var(--text-2); }

.nav-links { list-style: none; margin: 0; padding: 0; min-width: 190px; }
.nav-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: 13.5px; color: var(--text); text-decoration: none;
}
.nav-links a:hover { color: var(--red); }
.nav-link-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Mobile: a hover panel is meaningless on touch, so sections list inline. */
.mobile-group { padding: 10px 0; border-bottom: 1px solid var(--border); }
.mobile-group-head { display: block; font-size: 15px; font-weight: 700; padding: 4px 0; }
.mobile-col-title {
  margin: 10px 0 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 13.5px;
}

@media (max-width: 1180px) {
  .nav-cards { grid-template-columns: repeat(2, 128px); }
  .nav-logos { grid-template-columns: repeat(3, 108px); }
}

/* The panel lives inside .main-nav, so the top-level nav's own rules cascade
   into it: `.main-nav ul {display:flex}` laid the budget list out horizontally
   and pushed the third column off-screen, and `.main-nav a` forced uppercase
   11.5px on every link in the panel. Reset both inside the panel. */
.nav-panel ul { display: block; gap: 0; }
.nav-panel a {
  display: flex; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--text);
  padding: 6px 0; border-bottom: 0;
}
.nav-panel a:hover { color: var(--red); }
.nav-panel .nav-card,
.nav-panel .nav-logo { display: block; padding: 0; }
.nav-panel .nav-logo { display: flex; flex-direction: column; padding: 10px 6px; }
.nav-panel .nav-card-label,
.nav-panel .nav-card-count { display: block; }
.nav-panel .nav-logo-label {
  font-size: 11.5px; font-weight: 500; color: var(--text-2);
  text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   Dark-theme form controls

   Native controls default to the platform's light chrome, so on a dark ground
   every input, select and checkbox has to be restyled explicitly or it sits
   there as a white rectangle. `color-scheme: dark` additionally tells the
   browser to draw the scrollbars, the select popup and the date picker dark.
   ========================================================================== */
:root { color-scheme: dark; }

/* Inherit rather than restate "dark": the light theme sets color-scheme on
   :root, and a hardcoded value here would leave every native control — select
   popups, date pickers, scrollbars — drawn dark on a light page. */
input, select, textarea { color-scheme: inherit; }

.select select,
.input,
.filter-search,
.city-search,
.header-search input,
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
}
.select select:focus,
.input:focus,
.filter-search:focus,
.city-search:focus,
input:focus, textarea:focus {
  border-color: var(--lime);
  outline: none;
}
::placeholder { color: var(--faint); opacity: 1; }

/* The caret drawn over the native select arrow. */
.select::after { border-color: var(--muted); }

/* Checkboxes and radios: the accent colour drives the checked state, and the
   lime needs dark ink on top of it to stay legible. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--lime);
  width: 15px; height: 15px;
}

/* Images and logos drawn for a light ground: brand marks are dark-on-white
   PNGs, so on a dark card they need their own light plate to sit on. The
   plate stays white in both themes — the marks are drawn for white — but in
   the light theme it needs a hairline, or it dissolves into the card. */
.brand-logo, .nav-logo img, .footer-brand img {
  background: var(--logo-plate);
  border-radius: var(--r);
}
:root[data-theme="light"] .brand-logo,
:root[data-theme="light"] .nav-logo img,
:root[data-theme="light"] .footer-brand img {
  border: 1px solid var(--border);
}
/* Every plate is the same box, whatever shape the mark inside it is.
   Letting the plate size itself to its logo made the row ragged: a compact
   badge (Kia) filled its box while a wide wordmark (Maruti Suzuki) hit the
   width cap first and sat in a shorter one. Fixed height plus a centred,
   contained image means the boxes match and only the artwork differs. */
.brand-logo {
  height: 58px; width: 100%;
  padding: 8px 10px;
  display: grid; place-items: center;
}
/* Capped on both axes: max-height alone lets a wide wordmark overflow, and
   max-width alone lets a tall mark (Renault, Citroen) get clipped. */
.brand-logo img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; }
.nav-logo img { padding: 4px 6px; }

/* The accented word in a headline. */
.accent { color: var(--lime); }

/* "Popular Searches:" chips beneath the hero search. */
.hero-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0; max-width: 720px;
}
.hero-chips-label { font-size: 12.5px; color: var(--muted); }
.hero-chips .chip {
  padding: 5px 12px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-pill); color: var(--text-2);
}
.hero-chips .chip:hover { border-color: var(--lime); color: var(--lime); }

/* The hero search card sits on the dark ground as a raised panel. */
.hero-search {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 10px; gap: 10px;
  box-shadow: var(--shadow-md);
}

/* Tablets only. Below 900px the side-by-side composition stops working — the
   car lands on top of the headline — so the artwork is dropped. Phones are
   excluded because they get their own stacked treatment at the end of this
   file, which puts the car back as a band above the text. Without the lower
   bound this rule would silently win there too, since it sits later in the
   file at equal specificity. */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-car, .hero-arc, .hero-media::before { display: none; }
  .hero-media::after { background: none; }
}

/* ---------------------------------------------------- card badge + shortlist */
.car-card { position: relative; }

.card-badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--on-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.card-badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }

.card-save {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--chip-scrim); border: 1px solid var(--border-2);
  border-radius: 50%; color: var(--text-2);
  backdrop-filter: blur(2px);
}
.card-save svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.card-save:hover { color: var(--lime); border-color: var(--lime); }
.card-save[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
.card-save[aria-pressed="true"] svg { fill: var(--lime); stroke: var(--lime); }

/* ==========================================================================
   Homepage — blueprint sections
   ========================================================================== */

/* --- Handpicked cars: five stacked tiles across ------------------------- */
.car-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

/* The tile inverts the row card: media on top, detail beneath, no side button.
   Overriding the grid rather than duplicating the component keeps one card. */
.car-card--tile {
  display: block; padding: 0; overflow: hidden;
}
/* The media is an <a>. In the row variant it is a grid item and so gets
   blockified; in the tile it is not, and an inline element ignores
   aspect-ratio entirely — the image then renders at its natural height. */
.car-card--tile .car-card-media {
  display: block; aspect-ratio: 3 / 2; border-radius: 0; width: 100%;
}
.car-card--tile .car-card-body { display: block; padding: 12px 13px 14px; }
.car-card--tile .car-card-title {
  font-size: 14px; line-height: 1.3;
  /* Two lines then ellipsis: titles vary from "Kia EV6" to
     "2018 Maruti Suzuki Grand Vitara" and a ragged grid looks broken. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.car-card--tile .car-card-price { font-size: 16px; }
.car-card--tile .car-card-specs { font-size: 11px; margin: 6px 0 2px; }
.car-card--tile .car-card-price-note { margin: 0 0 7px; }

/* The whole tile is one target, sitting under the badge and save button. */
.car-card-overlay { position: absolute; inset: 0; z-index: 1; }
.car-card--tile .card-save { z-index: 2; }

/* --- Budget tiles ------------------------------------------------------- */
.budget-tile { position: relative; gap: 4px; }
.budget-tile-icon {
  width: 34px; height: 34px; margin-bottom: 6px;
  display: grid; place-items: center;
  border-radius: var(--r); background: var(--surface-2);
}
.budget-tile-icon svg { width: 18px; height: 18px; }

/* Six tints so a row of tiles reads as distinct choices, not one repeated box.
   Hue only — every tint keeps the same weight so none dominates. */
.icon-tint-0 { color: #A6E22E; }
.icon-tint-1 { color: #FFB84D; }
.icon-tint-2 { color: #4ECDC4; }
.icon-tint-3 { color: #FF8A65; }
.icon-tint-4 { color: #7BD389; }
.icon-tint-5 { color: #FF6B8A; }

/* --- City tiles --------------------------------------------------------- */
.city-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.city-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.city-tile:hover { border-color: var(--lime); }
.city-tile-icon {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r); background: var(--surface-2);
}
.city-tile-icon svg { width: 17px; height: 17px; }
.city-tile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.city-tile-name { font-size: 13px; font-weight: 600; }
.city-tile-count { font-size: 11px; color: var(--muted); }
.city-tile--more .city-tile-icon { color: var(--lime); }

/* --- Footer ------------------------------------------------------------- */
.footer-tagline {
  margin: 12px 0 16px; max-width: 34ch;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.footer-col { min-width: 0; }
.footer-heading {
  margin: 0 0 13px; font-size: 13px; font-weight: 600; color: var(--text);
}

/* --- Trust strip -------------------------------------------------------- */
.feature-icon {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--lime);
  color: var(--lime); background: var(--lime-soft);
}
.feature-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }

@media (max-width: 1180px) {
  .car-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .city-grid     { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px) {
  .car-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .city-grid     { grid-template-columns: repeat(2, 1fr); }
  .budget-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .car-tile-grid { grid-template-columns: 1fr; }
}

/* The bottom bar is a single centred line. */
.footer-bottom .container { text-align: center; }

/* ==========================================================================
   Theme toggle

   One button, two icons: the moon shows what you would switch *to* while the
   sun is hidden, and they swap on [data-theme="light"]. Both are always in the
   DOM so the swap costs no layout and needs no JS beyond the attribute.
   ========================================================================== */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.theme-toggle:hover { color: var(--lime); border-color: var(--lime); background: var(--lime-soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Both icons occupy the same grid cell, so nothing shifts when they swap. */
.theme-toggle .icon-moon,
.theme-toggle .icon-sun { grid-area: 1 / 1; display: grid; place-items: center; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: grid; }

/* Before theme.js runs there is no data-theme attribute and the moon is
   correct, so there is nothing to hide and no flash to suppress. */

/* ==========================================================================
   Horizontal rail (brand carousel)

   Used where a set is too long to grid without orphans — twelve brands in an
   eight-column grid left four stranded on a second row, which is what made
   the section read as broken rather than full. One row that scrolls keeps the
   set legible at any width.

   The rail scrolls natively, so it works with a trackpad, a touch swipe, the
   keyboard and a screen reader before any JavaScript loads. The arrows are a
   convenience for mouse users and are hidden until site.js confirms there is
   actually something to scroll to.
   ========================================================================== */
.rail { position: relative; }

.brand-grid--rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* The arrows overlay the ends, so the first and last tile need room to
     clear them rather than sitting under one. */
  padding: 2px 4px;
  /* A visible scrollbar under a single row of logos reads as a defect. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.brand-grid--rail::-webkit-scrollbar { display: none; }

.brand-grid--rail .brand-item {
  flex: 0 0 auto;
  width: 136px;
  scroll-snap-align: start;
  background: var(--surface);
  border-color: var(--border);
}

/* Arrows sit outside the tiles, centred on the logo plate rather than the
   whole item, so they do not drift as the caption wraps. */
.rail-btn {
  position: absolute; top: 42px; transform: translateY(-50%);
  z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: none; place-items: center;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.rail.is-scrollable .rail-btn { display: grid; }
.rail-btn:hover { color: var(--lime); border-color: var(--lime); }
.rail-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Disabled rather than removed: a button that vanishes at the end of the rail
   shifts the layout and loses keyboard focus mid-interaction. */
.rail-btn[disabled] { opacity: .3; cursor: default; }
.rail-btn[disabled]:hover { color: var(--text); border-color: var(--border-2); }

.rail-btn--prev { left: -14px; }
.rail-btn--next { right: -14px; }
.rail-btn--prev svg { transform: rotate(180deg); }

@media (max-width: 700px) {
  /* Swiping is the natural gesture here and the arrows would crowd the tiles. */
  .rail.is-scrollable .rail-btn { display: none; }
  .brand-grid--rail .brand-item { width: 118px; }
}

/* ==========================================================================
   Phone hero — final overrides

   These live at the end of the file on purpose. The hero's own component
   rules (.hero-search, .hero-chips) are declared *after* the main responsive
   block, so identical selectors inside that earlier @media lose to them on
   source order — media queries add no specificity. Anything here that a later
   base rule would otherwise win is restated once, in the last word.
   ========================================================================== */
@media (max-width: 640px) {
  /* One swipeable line rather than three wrapped rows. */
  .hero-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 12px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chips-label,
  .hero-chips .chip { flex: 0 0 auto; }

  /* Two short fields share a row; the wider field and the button span it. */
  .hero-search {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: var(--r-lg);
  }
  .hero-search .select { flex: none; min-width: 0; }
  .hero-search .select:nth-of-type(3),
  .hero-search .btn { grid-column: 1 / -1; }
  .hero-search .btn { flex: none; width: 100%; }
}

/* ==========================================================================
   Phone header

   Measured at a 375px viewport, the header row ran 112px past the edge and
   took the whole page with it — the logo was cut off and every page scrolled
   sideways. The row is logo + city + actions, and at desktop sizes it carries
   a 28px gap and two text labels it cannot afford on a phone.

   At the end of the file on purpose: .city-trigger and .header-btn are
   declared further down than the main responsive block, so overrides placed
   there lose on source order. Media queries add no specificity.
   ========================================================================== */
@media (max-width: 640px) {
  .header-inner { gap: 10px; }

  /* Let the middle of the row give way rather than push the ends out. */
  .logo { min-width: 0; }
  .logo-img { height: 32px; }

  .city-trigger { margin-left: 0; min-width: 0; padding: 5px 8px; }
  .city-trigger-name { max-width: 68px; }

  .header-actions { gap: 8px; margin-left: auto; flex: 0 0 auto; }
  .header-btn { padding: 6px; }

  /* Icon-only, but the labels stay in the accessibility tree — a bare icon
     button reads as "button" to a screen reader otherwise. Same technique as
     .sr-only, restated because the utility is not on these spans. */
  .header-btn > span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .theme-toggle { width: 30px; height: 30px; }
}

/* Smallest phones: the lockup steps down a size rather than disappearing —
   the mark still identifies the site and links home. */
@media (max-width: 360px) {
  .logo-img { height: 28px; }
  .city-trigger-name { max-width: 56px; }
}

/* ==========================================================================
   Mobile menu — accordion

   Replaces the flat inline listing. Every row here carries the same 16px side
   padding as the rest of the shell: the previous rules used `padding: 6px 0`
   and `4px 0`, which stripped the horizontal padding inherited from
   `.mobile-menu a` and left labels flat against both screen edges.

   At the end of the file because the rules it supersedes sit below the main
   responsive block — media queries add no specificity, and later wins.
   ========================================================================== */
.mobile-menu {
  /* The menu can outgrow the screen; scroll it rather than the page, so the
     header stays put and the last item is always reachable. */
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- top-level rows ---- */
.mobile-group { border-bottom: 1px solid var(--border); padding: 0; }
.mobile-link  { border-bottom: 1px solid var(--border); }

.mobile-group-head,
.mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text);
  cursor: pointer;
  list-style: none;               /* hides the default disclosure triangle */
}
.mobile-group-head::-webkit-details-marker { display: none; }

/* The caret is drawn rather than an icon so it can rotate on open. */
.mobile-group-head::after {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: 2px;
}
.mobile-group[open] > .mobile-group-head::after {
  transform: rotate(-135deg);
}
.mobile-group[open] > .mobile-group-head { color: var(--lime); }
.mobile-group-head.is-active, .mobile-link.is-active { color: var(--lime); }

/* ---- expanded contents ---- */
.mobile-group-body { padding: 2px 0 12px; background: var(--bg); }

.mobile-viewall {
  display: block;
  padding: 10px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lime);
}

.mobile-col-title {
  margin: 10px 0 2px;
  padding: 0 16px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}

.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* 44px minimum target: these are the rows people actually tap. */
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-2);
  border-bottom: 0;
}
.mobile-menu li a:hover,
.mobile-menu li a:active { color: var(--lime); background: var(--surface-2); }
.mobile-menu li a .nav-link-count { color: var(--faint); font-size: 12px; flex: 0 0 auto; }

/* ==========================================================================
   City picker — states, then cities

   Replaces the popular-cities grid plus a flat 50-row list. The old list
   printed used-listing counts ("14 cars", and "0 cars" for most), which stopped
   meaning anything when the used-car frontend was withdrawn.

   At the end of the file because .city-row and .city-search are declared below
   the main responsive block; media queries add no specificity and later wins.
   ========================================================================== */

/* Location button, revealed by site.js only when geolocation exists. */
.city-locate {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 8px; padding: 10px 12px;
  background: none; border: 1px dashed var(--border-2); border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--lime);
  cursor: pointer; text-align: left;
}
.city-locate:hover:not(:disabled) { border-color: var(--lime); background: var(--lime-soft); }
.city-locate:disabled { opacity: .65; cursor: default; }
.city-locate svg { flex: 0 0 auto; }

/* ---- state tiles ---- */
.city-state-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.city-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.city-state:hover { border-color: var(--lime); background: var(--surface-3); }
.city-state:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.city-state-name { font-size: 13.5px; font-weight: 600; }
.city-state-count { font-size: 11.5px; color: var(--muted); }

/* ---- results header ---- */
.city-results-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.city-back {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lime);
  cursor: pointer;
}
.city-back:hover { text-decoration: underline; }
.city-results-head .city-group-title { margin: 16px 0 8px; }

/* ---- city rows ---- */
.city-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  /* A comfortable tap target; these rows are the whole point of the dialog. */
  min-height: 42px; padding: 9px 4px;
}
.city-row-name { font-size: 13.5px; }
/* The state, not a count: it disambiguates similar names and is actually true. */
.city-row-meta { font-size: 11.5px; color: var(--faint); flex: 0 0 auto; }

@media (max-width: 640px) {
  .city-state-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
  .city-state { padding: 10px; }
}

/* Within a single state the row's state label only repeats the heading. */
.city-list.is-within-state .city-row-meta { display: none; }

/* ==========================================================================
   State picker — PIN box and state tiles

   Supersedes the state/city drill-down. A visitor knows their PIN exactly,
   whereas "which state is Gurgaon in" is the question the dialog exists to
   stop asking, so the PIN box is the primary control and the tiles are the
   fallback. No counts on the tiles: the old ones tallied cities, which told
   nobody anything about the price they would get.
   ========================================================================== */
.pin-form { display: flex; gap: 8px; margin: 14px 0 4px; }
.pin-form .city-search { margin: 0; flex: 1 1 auto; min-width: 0; }
.pin-submit { flex: 0 0 auto; height: auto; padding: 0 18px; }

.pin-hint {
  margin: 0 0 8px; font-size: 12px; color: var(--danger);
}

/* Tiles are links now, not buttons — each one navigates straight to
   /set-state/{slug}, so the dialog works with scripting off. */
.city-state {
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.city-state:hover { border-color: var(--lime); background: var(--surface-3); color: var(--lime); }
.city-state.is-current { border-color: var(--lime); color: var(--lime); }
.city-state:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ==========================================================================
   Model detail page — sections added for the CarWale-shaped layout
   ========================================================================== */

/* Sticky jump bar. Only lists sections that actually rendered, so it can never
   point at a missing anchor. */
.model-jump {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.model-jump-inner {
  display: flex; gap: 18px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.model-jump-inner::-webkit-scrollbar { display: none; }
.model-jump a {
  flex: 0 0 auto; padding: 12px 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.model-jump a:hover { color: var(--lime); border-bottom-color: var(--lime); }

.panel-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); }

/* ---- top things to know ---- */
.highlight-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.highlight {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2);
}
.highlight-label { font-size: 11.5px; color: var(--muted); }
.highlight-value { font-size: 14px; font-weight: 700; }

/* ---- variant fuel filter ---- */
.variant-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.variant-filters .chip { cursor: pointer; font: inherit; font-size: 12.5px; }
.variant-filters .chip.is-active {
  background: var(--lime); border-color: var(--lime); color: var(--on-accent); font-weight: 600;
}
.variant-empty { padding: 14px 2px; font-size: 13px; color: var(--muted); }

/* ---- folded spec groups ---- */
.spec-group { border-bottom: 1px solid var(--border); }
.spec-group > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 2px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700;
}
.spec-group > summary::-webkit-details-marker { display: none; }
.spec-group-count {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.spec-group-head::before {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.spec-group[open] > .spec-group-head::before { transform: rotate(45deg); }

/* ---- specification corrections ---- */
.spec-report { margin-top: 16px; border-top: 1px solid var(--border); }
.spec-report-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 2px 2px; list-style: none; cursor: pointer;
  color: var(--red); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px;
}
.spec-report-trigger::-webkit-details-marker { display: none; }
.spec-report-trigger:hover { color: var(--text); }
.spec-report-body {
  max-width: 760px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.spec-report-car { margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.spec-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spec-report-grid .field { min-width: 0; }
@media (max-width: 640px) {
  .spec-report-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec-report-body { padding: 13px; }
}

/* ---- rating breakdown ---- */
.rating-summary {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px;
  align-items: center;
  padding: 4px 0 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rating-overall { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rating-score { font-size: 34px; font-weight: 700; line-height: 1; }
.rating-count { font-size: 12px; color: var(--muted); }
.rating-bars { display: grid; gap: 8px; }
.rating-bar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 32px; gap: 10px; align-items: center; }
.rating-bar-label { font-size: 12.5px; color: var(--text-2); }
.rating-bar-track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rating-bar-fill  { display: block; height: 100%; background: var(--lime); }
.rating-bar-score { font-size: 12.5px; font-weight: 700; text-align: right; }

.review-row { padding: 13px 0; border-bottom: 1px solid var(--border); }

/* ---- colours ---- */
.colour-row { display: flex; flex-wrap: wrap; gap: 14px; }
.colour { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; }
.colour-chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-2);
}
.colour-name { font-size: 11.5px; color: var(--text-2); text-align: center; }

/* ---- comparison table ---- */
.compare-table .is-current { background: var(--lime-soft); }

@media (max-width: 640px) {
  .rating-summary { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rating-bar { grid-template-columns: 96px minmax(0, 1fr) 28px; }
  .highlight-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   EMI calculator + offers
   ========================================================================== */
.emi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; }
.emi-controls { display: grid; gap: 18px; align-content: start; }

.emi-field-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 7px;
}
.emi-field-head label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.emi-out { font-size: 13px; font-weight: 700; color: var(--lime); }
.emi-sub { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

/* The native track and thumb both need styling or the control renders as the
   platform default, which is a light grey slab on this ground. */
.emi-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 99px;
  background: var(--surface-3); outline: none; cursor: pointer;
}
.emi-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lime); border: 0; cursor: pointer;
}
.emi-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lime); border: 0; cursor: pointer;
}
.emi-range:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.emi-result {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px;
}
.emi-result-label { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
.emi-result-value {
  margin: 0 0 14px; font-size: 30px; font-weight: 700; line-height: 1.1;
  color: var(--lime);
}
.emi-breakdown { margin: 0; display: grid; gap: 8px; }
.emi-breakdown > div {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px;
}
.emi-breakdown dt { color: var(--muted); }
.emi-breakdown dd { margin: 0; font-weight: 700; }
.emi-disclaimer { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--faint); }

/* ---- offers ---- */
.offer-list { display: grid; gap: 8px; margin-bottom: 14px; }
.offer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2);
}
.offer-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.offer-meta { margin: 0; font-size: 11.5px; color: var(--muted); }
.offer-amount { font-size: 15px; font-weight: 700; color: var(--lime); white-space: nowrap; }

/* ---- variant filter rows ---- */
.variant-filters { display: grid; gap: 8px; margin-bottom: 14px; }
.variant-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.variant-filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); min-width: 92px;
}

@media (max-width: 760px) {
  .emi { grid-template-columns: minmax(0, 1fr); }
  .variant-filter-label { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Model image gallery
   ========================================================================== */
.model-gallery { position: relative; }

.gallery-count {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--chip-scrim); color: #fff;
  font-size: 11.5px; font-weight: 600;
}

/* Arrows sit inside the frame; the frame clips, so they cannot escape it. */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--chip-scrim); color: #fff;
  cursor: pointer; opacity: .85;
}
.gallery-nav:hover { opacity: 1; }
.gallery-nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gallery-nav--prev { left: 10px; }
.gallery-nav--next { right: 10px; }
.gallery-nav--prev svg { transform: rotate(180deg); }

.gallery-thumbs-shell {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center; gap: 8px; min-width: 0; margin-top: 9px;
}
.gallery-thumbs {
  display: flex; gap: 8px; min-width: 0;
  overflow-x: auto; padding: 1px 0 3px;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs-nav {
  display: grid; place-items: center;
  width: 34px; height: 54px; padding: 0;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.gallery-thumbs-nav:hover:not(:disabled) { color: var(--lime); border-color: var(--lime); }
.gallery-thumbs-nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gallery-thumbs-nav:disabled { opacity: .28; cursor: default; }
.gallery-thumbs-nav--prev svg { transform: rotate(180deg); }

.gallery-thumb {
  flex: 0 0 auto; padding: 0; cursor: pointer;
  width: 78px; height: 54px;
  border: 2px solid transparent; border-radius: var(--r);
  background: var(--surface-2); overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .15s ease, opacity .15s ease;
  opacity: .7;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--lime); opacity: 1; }
.gallery-thumb:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

@media (max-width: 640px) {
  .model-hero { padding-top: 12px; }
  .model-gallery { border-radius: var(--r); }
  .gallery-thumbs-shell { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }
  .gallery-thumbs-nav { width: 30px; height: 50px; }
  .gallery-thumb { width: 72px; height: 50px; }
}

/* Images section: a plain grid, each cell carrying its own credit because
   every shot is a separate Commons file with its own photographer. */
.image-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.image-cell { margin: 0; }
.image-cell img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r); background: var(--surface-2); display: block;
}
.image-cell figcaption { margin-top: 4px; }
.image-cell .img-credit { margin: 0; font-size: 10.5px; }

/* Attribution is a licence condition on the CC BY / CC BY-SA gallery files, so
   it stays — but it is a footnote, not a caption. One consolidated line under
   the grid, set quietly, instead of a credit under every cell. */
.img-credit--grid {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--faint);
}
.img-credit--grid a { color: var(--faint); text-decoration: underline; }
.img-credit--grid a:hover { color: var(--text-2); }

/* The hero credit sits directly under the main image; same treatment. */
.model-gallery + .img-credit,
[data-gallery-credit] { font-size: 10.5px; color: var(--faint); margin: 6px 0 0; }
[data-gallery-credit] a { color: var(--faint); text-decoration: underline; }
[data-gallery-credit] a:hover { color: var(--text-2); }

/* Image credits: closed by default, and set as a footnote. The CC BY / CC BY-SA
   files on this page require their photographers to be named — collecting that
   here keeps the obligation met without putting names beside the pictures. */
.credits { margin-top: 18px; }
.credits-head {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  font-size: 11px; color: var(--faint);
}
.credits-head::-webkit-details-marker { display: none; }
.credits-head::after {
  content: ''; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.credits[open] > .credits-head::after { transform: rotate(-135deg); }
.credits-head:hover { color: var(--text-2); }
.credits-list {
  margin: 8px 0 0; padding: 0 0 0 16px;
  font-size: 10.5px; line-height: 1.7; color: var(--faint);
}
.credits-list a { color: var(--faint); text-decoration: underline; }
.credits-list a:hover { color: var(--text-2); }

/* ==========================================================================
   Variant specification dialog
   ========================================================================== */
.variant-link { color: var(--text); border-bottom: 1px dotted var(--border-2); }
.variant-link:hover { color: var(--lime); border-bottom-color: var(--lime); }
[data-variant-row] { cursor: pointer; }
[data-variant-row]:hover { background: var(--surface-2); }

.variant-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); }

.var-modal {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.var-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 10, 4, .6); }

.var-modal-panel {
  position: relative;
  width: min(680px, 100%);
  /* The sheet can run to 84 rows, so the panel scrolls rather than the page
     behind it — which is locked while this is open. */
  max-height: min(84vh, 900px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  outline: none;
}

.var-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.var-modal-title { margin: 0; font-size: 16px; font-weight: 700; }
.var-modal-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.var-modal-body { overflow-y: auto; padding: 4px 18px 18px; flex: 1 1 auto; }
.var-modal-status { padding: 22px 2px; font-size: 13px; color: var(--muted); text-align: center; }

/* The grouped sheet inside the dialog reuses the page's own spec styling. */
.var-modal-body .spec-group:last-of-type { border-bottom: 0; }

@media (max-width: 640px) {
  .var-modal { padding: 0; }
  .var-modal-panel { max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
}

/* Variant row action: the eye is the visible cue that a row opens its own
   specification. The row itself is the large target; this is what says so. */
.variant-col-action { width: 44px; text-align: right; }

.variant-eye {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border-2); border-radius: 50%;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.variant-eye:hover { color: var(--lime); border-color: var(--lime); background: var(--lime-soft); }
.variant-eye:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* The eye lights up with the row, so hovering anywhere on the row shows it is
   a single target rather than one small button inside an inert strip. */
[data-variant-row]:hover .variant-eye { color: var(--lime); border-color: var(--lime); }

/* ==========================================================================
   Wide tables on narrow screens

   .tbl-scroll was only ever defined in admin.css, so the four tables on the
   model page that use it had no scroll container on the public site and simply
   pushed the page sideways — 312px of overflow at 345px wide. The wrapper, not
   the table, is what scrolls.
   ========================================================================== */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Thin, out of the way, but present: a table that scrolls with no visible
     scrollbar reads as a table with missing columns. */
  scrollbar-width: thin;
}
.tbl-scroll::-webkit-scrollbar { height: 6px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }

/* Below these widths the columns would crush into unreadable slivers, so the
   table keeps its shape and the wrapper scrolls instead. */
.variant-table { min-width: 620px; }
.compare-table { min-width: 560px; }
.mileage-table { min-width: 460px; }

/* The specification sheet is two columns and reads fine at any width, so it is
   exempt — only the tables inside a .tbl-scroll get a floor. */
.spec-group .spec-table { min-width: 0; }

/* A visually-hidden label is position:absolute, so it resolves against the
   nearest positioned ancestor — and if there is none, against the viewport, at
   its static position. Inside a 620px-wide table on a 360px screen that put a
   1px span at x=596 and stretched the whole document by 237px, with nothing
   visible to show for it. The cell has to be its own containing block.
   Any future .sr-only inside a wide scroller needs the same. */
.variant-col-action { position: relative; }

/* ==========================================================================
   Blog archive

   A photographic hero, a sidebar of ways into the archive, and the article
   list rendered either as a card grid or as rows.

   Every colour here is a token. The category badges are the one place the page
   introduces hues of its own: a badge has to be identifiable at a glance from
   across a grid, which one accent cannot do on its own, so each article type
   gets a tint. They are declared as tokens in this block and flipped for the
   light theme at the bottom, exactly like the rest of the system.
   ========================================================================== */

:root {
  /* Category badge tints — a translucent fill under fully opaque ink, so a
     badge sits on any cover photo without a hard plate behind it. */
  --tag-news:       #4DA3FF;
  --tag-review:     #FF9F43;
  --tag-comparison: #C792EA;
  --tag-feature:    #4DD4C4;
  --tag-guide:      #FF6B8A;
  --tag-launch:     #A6E22E;
  --tag-industry:   #7FB2FF;
}

/* --------------------------------------------------------------- hero */

.blog-hero {
  position: relative;
  overflow: hidden;
  /* --navy, not --surface: the scrim gradient above fades to the panel tint,
     and in the light theme that tint is not the same value as a card. */
  background: var(--navy);
  border-bottom: 1px solid var(--border);
  padding: 4px 0 30px;
}

.blog-hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(58%, 720px);
  pointer-events: none;
}
.blog-hero-media img {
  width: 100%; height: 100%;
  /* contain, not cover: the artwork is a car on a transparent ground, so
     cropping it to fill the box cuts the roof and the wheels off. */
  object-fit: contain; object-position: right center;
  filter: drop-shadow(var(--hero-car-shadow));
}
/* The scrim carries the panel tint, so it flips with the theme along with it. */
.blog-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-scrim);
}

.blog-hero-inner { position: relative; }

/* The breadcrumb partial brings its own .container; inside the hero's it would
   indent twice and cap the width a second time. */
.blog-hero .breadcrumb { padding: 12px 0 6px; }
.blog-hero .breadcrumb .container { width: auto; max-width: none; padding: 0; }

.blog-hero-title {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.blog-hero-title span { color: var(--link); }

.blog-hero-text {
  margin: 0;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ------------------------------------------------------------- layout */

.blog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 22px 0 44px;
}

/* ------------------------------------------------------------ sidebar */

.blog-side { display: grid; gap: 14px; }

.side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}

.side-title {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.side-title--flush { margin-bottom: 4px; }

/* Search */

.side-search { display: flex; gap: 8px; }
.side-search .input { flex: 1 1 auto; min-width: 0; }
.side-search-btn {
  flex: 0 0 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r);
  background: var(--red); color: var(--on-accent);
  cursor: pointer;
}
.side-search-btn:hover { background: var(--red-dark); }

.side-search-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.side-search-note a { color: var(--link); }

/* Categories */

.side-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }

.side-cat {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r);
  font-size: 12.5px; font-weight: 500;
  color: var(--text-2);
}
.side-cat svg { flex: 0 0 16px; color: var(--muted); }
.side-cat-label { flex: 1 1 auto; min-width: 0; }

.side-cat-count {
  flex: 0 0 auto;
  min-width: 22px; padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 11px; font-weight: 600;
  text-align: center;
  color: var(--muted);
}

.side-cat:hover { background: var(--surface-2); color: var(--text); }
.side-cat:hover svg { color: var(--text); }

.side-cat.is-active { background: var(--red); color: var(--on-accent); }
.side-cat.is-active svg { color: var(--on-accent); }
.side-cat.is-active .side-cat-count {
  background: rgba(0, 0, 0, .18);
  color: var(--on-accent);
}

/* Popular posts */

.side-popular { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.side-popular li {
  display: grid;
  grid-template-columns: 18px 56px minmax(0, 1fr);
  gap: 9px; align-items: center;
}

.side-rank {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 10.5px; font-weight: 700;
  color: var(--muted);
}

.side-pop-media {
  display: block; width: 56px; height: 42px;
  border-radius: 6px; overflow: hidden; background: var(--surface-2);
}
.side-pop-media img { width: 100%; height: 100%; object-fit: cover; }

.side-pop-body { display: block; min-width: 0; }
.side-pop-title {
  font-size: 12px; font-weight: 500; line-height: 1.35;
  color: var(--text);
  /* Two lines, so a long headline cannot push the row out of alignment. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-pop-title:hover { color: var(--link); }
.side-pop-date { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }

/* Newsletter */

.side-card--news { border-color: var(--border-2); }
.side-news-head { display: flex; gap: 10px; margin-bottom: 12px; }
.side-news-icon {
  flex: 0 0 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--lime-soft); color: var(--link);
}
.side-news-text { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.side-news-form { display: grid; gap: 8px; }

/* The honeypot must be reachable by a bot parsing the HTML but never seen or
   focused by a person, so it is moved off-screen rather than display:none. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tags */

.side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.side-tag {
  padding: 5px 11px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text-2);
}
.side-tag:hover { border-color: var(--red); color: var(--red); }

/* ------------------------------------------------------------ toolbar */

.blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 14px;
  margin-bottom: 16px;
}
.blog-toolbar-title { margin: 0 0 3px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.blog-toolbar-sub   { margin: 0; font-size: 12.5px; color: var(--muted); }

.blog-controls { display: flex; align-items: center; gap: 10px; }

.view-switch {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.view-btn:hover { color: var(--text); }
.view-btn.is-active { background: var(--red); color: var(--on-accent); }

.blog-sort { display: flex; align-items: center; gap: 8px; }
.blog-sort .select { flex: 0 0 150px; }

/* --------------------------------------------------------------- grid */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.post-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.post-card:hover { border-color: var(--border-2); transform: translateY(-2px); }

.post-card-media {
  position: relative; display: block;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px 14px 14px; }

.post-card-title { margin: 0 0 7px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.post-card-title a { color: var(--text); }
.post-card:hover .post-card-title a { color: var(--link); }

.post-card-excerpt {
  margin: 0 0 12px;
  font-size: 12px; line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pushes the meta row and Read More to the bottom, so cards whose excerpts run
   to different lengths still line their footers up across a row. */
.post-card-body .post-meta { margin-top: auto; }

/* --------------------------------------------------------------- badge */

.post-badge {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--tag-news);
  /* Dark ink on the bright dark-theme tints, white ink on the darkened light
     ones — which is exactly what --on-accent already means in each theme. */
  color: var(--on-accent);
  /* Legible over any cover photo without a second plate behind it. */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.post-badge--review     { background: var(--tag-review); }
.post-badge--comparison { background: var(--tag-comparison); }
.post-badge--feature    { background: var(--tag-feature); }
.post-badge--guide      { background: var(--tag-guide); }
.post-badge--launch     { background: var(--tag-launch); }
.post-badge--industry   { background: var(--tag-industry); }

/* ---------------------------------------------------------- meta rows */

.post-meta { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 0; font-size: 11.5px; color: var(--muted); }
.post-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.post-meta-item svg { color: var(--faint); }

.post-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--link);
}
.post-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------- list */

.post-list {
  display: grid; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.post-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.post-row:last-child { border-bottom: 0; }
.post-row:hover { background: var(--surface-2); }

.post-row-media {
  display: block; aspect-ratio: 16 / 10;
  border-radius: var(--r); overflow: hidden; background: var(--surface-2);
}
.post-row-media img { width: 100%; height: 100%; object-fit: cover; }

.post-row-body { min-width: 0; }
.post-row-title { margin: 6px 0 5px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.post-row-title a { color: var(--text); }
.post-row:hover .post-row-title a { color: var(--link); }

.post-row-excerpt {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The badge is absolute inside a card's photo; in a row it sits in the flow. */
.post-row-body .post-badge { position: static; display: inline-block; box-shadow: none; }

.post-row-side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.post-row-side .post-meta { padding: 0; }

.blog-count { margin: 14px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  /* Below the article list on a narrow screen: the archive is what the visitor
     came for, and five widgets ahead of it is a wall to scroll past. */
  .blog-side { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-main { order: 1; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-hero-media { width: 46%; opacity: .55; }
}

@media (max-width: 720px) {
  .blog-side { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .blog-hero-media { display: none; }
  .blog-hero-text { max-width: none; }

  .blog-toolbar { align-items: stretch; }
  .blog-controls { flex-wrap: wrap; }
  .blog-sort, .blog-sort .select { flex: 1 1 100%; }

  /* The thumbnail and the right-hand meta column both go, leaving the text. */
  .post-row { grid-template-columns: 92px minmax(0, 1fr); }
  .post-row-side {
    grid-column: 1 / -1;
    justify-items: start; text-align: left;
    display: flex; align-items: center; gap: 14px;
  }
}

/* -------------------------------------------------------- light theme */

:root[data-theme="light"] {
  /* Darkened to clear 4.5:1 against the dark ink they carry on a white card. */
  --tag-news:       #1F6FD0;
  --tag-review:     #B85700;
  --tag-comparison: #8250C4;
  --tag-feature:    #0F7F72;
  --tag-guide:      #C43757;
  --tag-launch:     #4C7A0B;
  --tag-industry:   #3D6FC0;
}
:root[data-theme="light"] .side-rank,
:root[data-theme="light"] .side-cat-count { color: var(--text-2); }

/* ==========================================================================
   360° spin viewer

   Opens over the page from the still gallery. The stage is a plain <img> whose
   src is swapped per frame — the "rotation" is the frame sequence, so there is
   no transform and nothing to composite.
   ========================================================================== */

.spin-open { margin-top: 10px; gap: 7px; }

.spin {
  position: fixed; inset: 0; z-index: 300;
  /* dvh, not vh: on a phone the URL bar counts towards vh but is not part
     of what the visitor can see, so a 100vh overlay puts its own bottom
     edge below the fold. vh first, as the fallback. */
  height: 100vh;
  height: 100dvh;
  display: grid; place-items: center;
  padding: 16px;
  /* Deliberately near-opaque: a turntable set is shot on a plain sweep, and a
     busy page showing through behind it reads as part of the photograph. */
  background: rgba(0, 0, 0, .82);
}

.spin-panel {
  width: min(980px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  /* Scrolls rather than clips: a short window (a phone in landscape) can
     leave less height than the contents need, and hidden overflow there
     means content that cannot be reached at all. */
  overflow-x: hidden; overflow-y: auto;
  box-shadow: var(--shadow-md);
}

.spin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.spin-title { margin: 0; font-size: 14.5px; font-weight: 700; }

.spin-close {
  flex: 0 0 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  cursor: pointer;
}
.spin-close:hover { border-color: var(--red); color: var(--red); }

/* ---------------------------------------------------------------- stage */

.spin-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  /* grab, not pointer: the affordance is "take hold of this and turn it". */
  cursor: grab;
  touch-action: pan-y;
  outline-offset: -2px;
  overflow: hidden;
}
.spin-stage.is-dragging { cursor: grabbing; }

.spin-stage img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* The frames are swapped, never dragged; without this a slow drag lifts the
     browser's own image-drag ghost instead of spinning the car. */
  user-select: none; -webkit-user-drag: none;
  opacity: 0; transition: opacity .2s;
}
.spin-stage.is-ready img { opacity: 1; }

/* Loading */

.spin-loading {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 20px;
}
.spin-loading-text { font-size: 12.5px; color: var(--muted); }

.spin-progress {
  display: block; width: min(240px, 60vw); height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.spin-progress-bar {
  display: block; width: 0; height: 100%;
  background: var(--red);
  transition: width .12s linear;
}

/* Hint */

.spin-hint {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--chip-scrim);
  font-size: 11.5px; color: var(--text-2);
  pointer-events: none;
}
.spin-stage:not(.is-ready) .spin-hint { display: none; }

/* ----------------------------------------------------------------- foot */

.spin-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.spin-play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.spin-play:hover { border-color: var(--red); color: var(--red); }

/* One button, two labels: which one shows is driven by the pressed state the
   script maintains, so the control and its label can never disagree. */
.spin-play .spin-play-on  { display: none; }
.spin-play.is-playing .spin-play-on  { display: inline-flex; align-items: center; gap: 6px; }
.spin-play.is-playing .spin-play-off { display: none; }
.spin-play .spin-play-off { display: inline-flex; align-items: center; gap: 6px; }

.spin-count { font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px) {
  .spin { padding: 0; }
  .spin-panel { height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .spin-stage { aspect-ratio: auto; flex: 1 1 auto; }

  /* Close has to stay reachable however tall the provider's page is. */
  .spin-head {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface);
  }
}

/* A visitor who has asked for less motion gets the frames and the drag, but
   the viewer does not start turning on its own. */
@media (prefers-reduced-motion: reduce) {
  .spin-stage img { transition: none; }
}

/* The on-road panel's "this is a default, not your city" note. */
.onroad-default-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--red);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-2);
}
/* A button that has to read as a link, because the action is opening the city
   picker rather than navigating anywhere. */
.linkish {
  border: 0; padding: 0; background: none;
  font: inherit; color: var(--link);
  text-decoration: underline; cursor: pointer;
}
.linkish:hover { text-decoration: none; }

/* A provider's own viewer, framed. Fills the panel the same way our stage does,
   so the dialog is the same size whichever source a model uses. */
.spin-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  /* 16/10 derives height from width, which on a short screen produces a box
     taller than the viewport. This caps it; the ratio gives way first. */
  max-height: 76vh;
  max-height: 76dvh;
  background: var(--surface-2);
}
.spin-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .spin-embed {
    aspect-ratio: auto;
    flex: 1 1 auto;
    /* A provider's page is a whole mobile site, often with its own
       bottom sheet. Squeezed into whatever is left of a short screen it
       has nowhere to put any of it, so the frame is given a floor and the
       panel scrolls when the floor is taller than the screen. */
    min-height: 68dvh;
  }

  .spin-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 360° view, on its own page ---------- */

.page-spin { background: var(--bg); }

/* The 360 page is a viewer, not a document: the footer under it is the only
   reason the page scrolls at all, and a viewer that is one screen tall with a
   thousand pixels of links beneath reads as the viewer having overflowed.
   The footer's links are on every other page, including the image credits. */
.page-spin .site-footer { display: none; }
.page-spin { overflow: hidden; }

.spin-screen {
  /* The bar plus the viewer fill the window below the site header, so the
     provider's application gets every pixel that is going. */
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}

.spin-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.spin-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 9px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.spin-back:hover { border-color: var(--red); color: var(--red); }

.spin-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.spin-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.spin-tool:hover { border-color: var(--red); color: var(--red); }

.spin-bar-title {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The viewer itself fills what is left. */
.spin-page { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.spin-page .spin-embed,
.spin-page .spin-stage { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.spin-page .spin-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .spin-bar { gap: 10px; padding: 10px 12px; }
  /* The car name is already in the bar's Back link on a narrow screen. */
  .spin-bar-title { display: none; }

  /* margin-left:auto pins the tools to the right of the row; on a narrow
     bar that pushes them past the edge, behind the Back link. Without it
     they take their own line. */
  .spin-tools { margin-left: 0; width: 100%; }
  .spin-tool  { flex: 1 1 auto; justify-content: center; }

  /* spin-exact: the viewer occupies the screen and not a pixel more.

     dvh rather than vh, because vh on a phone counts the space behind the
     URL bar and would put the bottom of the frame out of sight again.

     The bar is a flex item of its own size and the frame takes the rest,
     so this holds whether the toolbar wraps to one row or two — no height
     is hardcoded and nothing has to be kept in step by hand. */
  .spin-screen {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    min-height: 0;
    overflow: hidden;
  }
  .spin-bar  { flex: 0 0 auto; }
  .spin-page { flex: 1 1 auto; min-height: 0; display: flex; }
  .spin-page .spin-embed {
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  /* The toolbar is the only thing competing with the viewer for height, so
     it is kept tight. */
  .spin-bar  { padding: 8px 12px; gap: 8px; }
  .spin-tool { padding: 6px 10px; font-size: 12px; }
}

/* ---------- video cards ---------- */

.video-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.video-card:hover { border-color: var(--border-2); transform: translateY(-2px); }

.video-card-media {
  position: relative; display: block;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.video-card-media img {
  width: 100%; height: 100%;
  /* cover, not contain: YouTube's hqdefault is a 4:3 image with the black bars
     baked into it, and contain would letterbox those bars a second time. */
  object-fit: cover;
  display: block;
}

.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  border: 2px solid rgba(255, 255, 255, .9);
  transition: transform .15s, background .15s;
}
.video-card:hover .video-play { transform: scale(1.08); background: var(--red); color: var(--on-accent); }

.video-duration {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 11px; font-weight: 600;
}

.video-card-body { padding: 11px 13px 13px; }
.video-card-title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.video-card-title a { color: var(--text); }
.video-card:hover .video-card-title a { color: var(--link); }

/* ---------- lightbox ---------- */

.vid-modal {
  position: fixed; inset: 0; z-index: 320;
  height: 100vh; height: 100dvh;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .86);
}
/* An author-declared display outranks the browser's [hidden], so it is restated. */
.vid-modal[hidden] { display: none !important; }

.vid-modal-panel {
  width: min(980px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-lg);
  overflow: hidden;
}

.vid-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-bottom: 1px solid var(--border);
}
.vid-modal-title {
  margin: 0; font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vid-modal-close {
  flex: 0 0 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.vid-modal-close:hover { border-color: var(--red); color: var(--red); }

.vid-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vid-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .vid-modal { padding: 0; place-items: center; }
  .vid-modal-panel { border-radius: 0; border: 0; }
}

/* ---------- on-road line on a new-car card ---------- */

/* Sits directly under the ex-showroom note, quieter than the headline band:
   ex-showroom is the comparable figure between cars, on-road is the one the
   buyer pays, and both belong on the card without competing. */
.car-card-onroad {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2, #555);
}
.car-card-onroad strong { color: var(--text, #111); font-weight: 650; }

/* "est." marks a total built on the national ex-showroom because no dealer
   price is filed for that city - a real distinction, so it is shown. */
.car-card-onroad-est {
  display: inline-block;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .07);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- price column in the variants table ---------- */

/* The table sits in a horizontal scroller and is 620px at its narrowest, so
   the rightmost columns leave the viewport on a phone. Price is the column
   being scanned, so it is pinned to the right edge and the rest scrolls under
   it. The action column keeps the true right edge, hence the offset. */
.variant-col-price {
  position: sticky;
  right: 46px;
  z-index: 2;
  text-align: right;
  white-space: nowrap;
  background: var(--surface);
  /* A soft edge so a row scrolling underneath visibly passes behind it
     rather than appearing to collide with it. */
  box-shadow: -12px 0 12px -12px rgba(0, 0, 0, .55);
}

.variant-table thead .variant-col-price {
  background: var(--surface-2);
  z-index: 3;
}

.variant-table tbody tr:hover .variant-col-price { background: var(--surface-2); }

/* The figure itself: the accent earns its place here because this is the
   number the whole table exists to communicate. */
.variant-price-ex {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, var(--lime, #A6E22E));
}

.variant-price-onroad {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* The action column is the anchor the price column offsets against, so its
   width has to be fixed rather than content-driven. */
.variant-col-action {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 46px;
  min-width: 46px;
  background: var(--surface);
}
.variant-table thead .variant-col-action { background: var(--surface-2); z-index: 3; }
.variant-table tbody tr:hover .variant-col-action { background: var(--surface-2); }

@media (max-width: 560px) {
  /* Pinning two columns on a small screen leaves too little for the name, so
     the price keeps the edge and the action column gives up its place. */
  .variant-col-price { right: 0; }
  .variant-col-action { position: relative; width: auto; min-width: 0; }
  .variant-price-ex { font-size: 13px; }
}

/* ---------- price block in the variant dialog ---------- */

/* Opposite the title, pushed to the right by the header's flex layout and
   sitting before the close button. Right-aligned so the rupee figures line up
   with the close control rather than drifting mid-header. */
.var-modal-price {
  margin-left: auto;
  padding-right: 12px;
  text-align: right;
  line-height: 1.25;
}
.var-modal-price[hidden] { display: none !important; }

.var-modal-price-ex {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, var(--lime, #A6E22E));
  white-space: nowrap;
}

.var-modal-price-onroad {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 520px) {
  /* The header runs out of room for a third column, so the price drops below
     the title rather than squeezing the variant name to two characters. */
  .var-modal-head { flex-wrap: wrap; }
  .var-modal-price {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-right: 0;
    margin-top: 6px;
    text-align: left;
  }
  .var-modal-price-ex { font-size: 15px; }
}

/* ---------- anchor targets clear the sticky header ---------- */

section[id],
.panel[id],
[data-anchor-target] {
  /* The header plus a little breathing room, so the heading is not flush
     against it. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* The one a variant click lands on. Called out separately because it is the
   busiest target on the site and worth a touch more room: the panel opens
   with four selectors, and landing mid-way down them reads as broken. */
#onroad-price {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* No mobile override: --header-h is 64px at every width, so one offset
   serves all of them. */


/* === Image lightbox (grid click-to-zoom) === */
.image-grid[data-lightbox-grid] img,
[data-gallery] [data-gallery-main] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(6,8,12,.93); padding: 24px;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center; }
.lightbox-img {
  max-width: 100%; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 44px rgba(0,0,0,.55); animation: lb-in .18s ease;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s;
}
.lightbox-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-prev { left: 16px; } .lightbox-next { right: 16px; }
.lightbox-prev svg { transform: rotate(180deg); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; border: 0;
  cursor: pointer; font-size: 26px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; background: rgba(0,0,0,.45);
  padding: 5px 12px; border-radius: 999px;
}
.lightbox-caption {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.82); font-size: 13px; max-width: 80vw; text-align: center;
}
@media (max-width: 640px) {
  .lightbox { padding: 0; }
  .lightbox-img { max-height: 82vh; border-radius: 0; }
  .lightbox-btn { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
}
/* === New-listing notifications (bell + panel + bar) === */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #22c55e; color: #05250f; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; pointer-events: none;
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 324px; max-width: 86vw;
  background: var(--surface, #12151b); color: var(--text, #e8eaed);
  border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 250; overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); font-size: 14px; }
.notif-enable { background: #22c55e; color: #05250f; border: 0; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.notif-enable[hidden] { display: none; }
.notif-list { max-height: 366px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); }
.notif-item:hover { background: rgba(127,127,127,.08); }
.notif-item img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px;
  flex: 0 0 auto; background: rgba(127,127,127,.12); }
.notif-item .nt { flex: 1; min-width: 0; }
.notif-item .nt b { display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item .nt > span { font-size: 12px; color: var(--muted, #9aa0a6); }
.notif-item .is-new { color: #22c55e; font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; font-style: normal; }
.notif-empty { margin: 0; padding: 18px 14px; font-size: 13px; color: var(--muted, #9aa0a6); text-align: center; }
.notif-empty[hidden] { display: none; }

.notif-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 322px; max-width: calc(100vw - 36px);
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  background: var(--surface, #12151b); color: var(--text, #e8eaed);
  border: 1px solid var(--border, rgba(255,255,255,.14)); border-left: 3px solid #22c55e;
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 16px 48px rgba(0,0,0,.5);
  transform: translateY(160%); transition: transform .35s ease;
}
.notif-bar.is-show { transform: none; }
.notif-bar img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; }
.notif-bar .nb { flex: 1; min-width: 0; }
.notif-bar .nb small { color: #22c55e; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.notif-bar .nb b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-bar .nb > span { font-size: 12px; color: var(--muted, #9aa0a6); }
.notif-bar-close { background: none; border: 0; color: var(--muted, #9aa0a6);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; align-self: flex-start; }
@media (max-width: 480px) { .notif-bar { left: 12px; right: 12px; width: auto; bottom: 12px; } }
/* === Social-proof activity popup === */
.social-proof {
  position: fixed; left: 18px; bottom: 18px; z-index: 880; width: 300px; max-width: calc(100vw - 36px);
  display: flex; gap: 11px; align-items: center; text-decoration: none;
  background: var(--surface, #fff); color: var(--text, #10131a);
  border: 1px solid var(--border, rgba(127,127,127,.18)); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.social-proof.is-show { opacity: 1; transform: none; pointer-events: auto; }
.social-proof img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: rgba(127,127,127,.12); }
.social-proof .sp { flex: 1; min-width: 0; }
.social-proof .sp .sp-tag { font-size: 11px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .03em; }
.social-proof .sp b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-proof .sp small { font-size: 11.5px; color: var(--muted, #6b7280); display: flex; align-items: center; gap: 6px; }
.social-proof .sp small .sp-price { margin-left: auto; font-weight: 600; color: var(--text, inherit); }
.social-proof-close { position: absolute; top: 5px; right: 7px; background: none; border: 0;
  color: var(--muted, #9aa0a6); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px; }
@media (max-width: 480px) { .social-proof { left: 12px; right: 12px; width: auto; bottom: 12px; } }
/* === Stop stray horizontal page scroll (mobile) — clip, not hidden, so
   position:sticky and inner horizontal scrollers are preserved. === */
html, body { overflow-x: clip; }
/* === Scroll boxes contain their own absolute children ===
   A positioned .tbl-scroll is the containing block for anything absolute
   inside it (hidden labels, badges), so it scrolls with the table instead of
   stretching the page. Same for the other horizontal scrollers. */
.tbl-scroll, .compare-scroll { position: relative; }
/* A hidden label pinned to the start of its box can never sit past the
   right-hand edge of the page. */
.sr-only { left: 0; }