/* ==========================================================
   True Cars — light editorial automotive.
   Polestar restraint × TrueCar data transparency, executed
   in TruDealer's cream/Fraunces brand system.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700;1,9..144,900&family=Inter+Tight:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&family=Poppins:wght@700;800&display=swap");

:root {
  /* ---------- palette ----------
     Sampled from the TruDealer product brochure (8pp) — these are the real
     brand values, not approximations. The cream is the page ground on every
     spread; the accent is TWO-TONE: deep cyan on cream, bright aqua on navy. */
  --cream:      #F4F0E8;   /* brochure page ground — 40-71% of every spread */
  --paper:      #FBF8F3;   /* raised cards / panels */
  --parchment:  #EDE7DA;
  --sand:       #DED8C9;
  --sage:       #E7ECE5;   /* pale secondary tint */

  --navy-950:   #0E1A26;   /* brochure dark panel */
  --navy-900:   #12202E;
  --navy-800:   #16283A;
  --navy-700:   #1D3348;
  --navy-600:   #274156;
  --navy-500:   #3A5670;
  --navy-400:   #54728C;
  --navy-300:   #7B93A8;
  --navy-200:   #A8BAC8;

  --teal:       #07879A;   /* accent ON CREAM — deep cyan, passes contrast */
  --teal-dark:  #056274;
  --teal-bright:#5DE9D4;   /* accent ON NAVY — bright aqua, the brochure glow */
  --amber:      #D4942A;
  --red:        #B91C1C;

  /* ---------- semantic ---------- */
  --bg:          var(--cream);
  --bg-raised:   var(--paper);
  --bg-inset:    var(--parchment);
  --rule:        rgba(14, 26, 38, 0.12);
  --rule-soft:   rgba(14, 26, 38, 0.07);
  --ink:         var(--navy-950);
  --ink-quiet:   rgba(14, 26, 38, 0.70);
  --ink-mute:    rgba(14, 26, 38, 0.52);
  --accent:      var(--teal);
  --accent-ink:  var(--cream);
  --accent-surf: rgba(7, 135, 154, 0.07);
  --accent-edge: rgba(7, 135, 154, 0.22);

  /* glass */
  --glass:       rgba(251, 248, 243, 0.72);
  --glass-dark:  rgba(14, 26, 38, 0.05);

  /* aliases — backward compat for older selectors */
  --linen:       var(--cream);
  --slate-900:   var(--navy-800);
  --slate-700:   var(--navy-600);
  --slate-500:   var(--navy-400);
  --bone:        var(--cream);
  --obsidian:    var(--navy-950);
  --iron:        var(--parchment);
  --jewel:       var(--teal);

  /* ---------- layout ---------- */
  --page:        1320px;
  --page-tight:  1080px;
  --gutter:      clamp(20px, 3.6vw, 40px);
  --v:           clamp(64px, 9vw, 128px);
  --topbar:      36px;
  --header:      64px;

  /* ---------- type ---------- */
  --serif:  "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans:   "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- motion ---------- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { overflow-x: hidden;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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


/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 {
  font-size: clamp(48px, 8vw, 108px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h2 {
  font-size: clamp(32px, 5.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.025em;
}
h4 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
em { font-style: italic; }
h1 em, h2 em {
  color: var(--accent);
  font-weight: inherit;
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}

p { margin: 0 0 1em; color: var(--ink-quiet); }
.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-quiet);
  max-width: 46ch;
}

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

.wrap        { width: min(100% - calc(var(--gutter) * 2), var(--page));       margin-inline: auto; }
.wrap-tight  { width: min(100% - calc(var(--gutter) * 2), var(--page-tight)); margin-inline: auto; }
.section     { padding: var(--v) 0; }


/* kicker — mono label, editorial section openers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--teal-bright) 0%, var(--accent) 55%, var(--teal-dark) 100%);
  box-shadow: 0 0 6px var(--accent-edge), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* editorial section plate */
.plate {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.plate-no {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 12px;
}
.plate-title h2 { margin: 0 0 12px; }
.plate-title p  { margin: 0; max-width: 58ch; color: var(--ink-quiet); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px 14px 26px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn::after {
  content: "→";
  font-family: var(--serif); font-weight: 400;
  transition: transform 0.35s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(135deg, var(--teal-bright, #5DE9D4) 0%, var(--teal-dark, #07879A) 100%);
  color: var(--navy-950, #0E1A26);
  font-weight: 700;
  box-shadow: 0 4px 16px -4px rgba(7, 135, 154, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover {
  background: linear-gradient(135deg, #7CF0DE 0%, #0A9DB3 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px -6px rgba(7, 135, 154, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

.btn-outline {
  border-color: var(--accent-edge);
  color: var(--accent);
}
.btn-outline:hover {
  border-color: var(--accent);
  background: var(--accent-surf);
}

.btn-ghost {
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--accent); }

.btn-jewel {
  background: transparent;
  border-color: var(--accent-edge);
  color: var(--accent);
}
.btn-jewel:hover { background: var(--accent-surf); border-color: var(--accent); }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 10px 18px; font-size: 12.5px; }
.btn-sm::after { font-size: 14px; }

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link::after {
  content: "→"; font-family: var(--serif);
  transition: transform 0.3s var(--ease);
}
.link:hover { color: var(--accent); border-color: var(--accent); }
.link:hover::after { transform: translateX(4px); }


/* ---------- topbar ---------- */
.topbar {
  background: var(--navy-950);
  color: rgba(244, 240, 232, 0.7);
  font-family: var(--mono);
  font-size: 11px;
}
.topbar a { color: rgba(244, 240, 232, 0.9); }
.topbar a:hover { color: var(--cream); }
.topbar .wrap {
  height: var(--topbar);
  display: flex; align-items: center; gap: 22px;
  letter-spacing: 0.08em;
}
.topbar .live {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(244, 240, 232, 0.85);
}
.topbar .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-edge);
}
.topbar .sep { color: rgba(244, 240, 232, 0.2); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }


/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  /* Nearly opaque on purpose: at 0.72 the bar turned muddy grey wherever it
     crossed the navy CTA band / footer. The cream has to stay cream over any
     background, so the blur is atmosphere, not the surface itself. */
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--paper); }
}
.site-header .wrap { height: var(--header); display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 14px; }
/* Holds the supplied 3D mark. No dark plate behind it: the mark carries its own
   navy + cyan volume, so a filled square fought it. */
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-text {
  font-family: var(--serif);
  line-height: 1.05;
}
.brand-text b {
  display: block; font-size: 20px; font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.brand-text b em {
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.brand-text span {
  display: block;
  font-family: var(--mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ---------- wordmark — solid-ink "True" + per-letter gradient "cars" with
   ball terminals. Original construction in the TrueCar *style* (not their
   mark): cyan / amber / magenta / deep-teal, one hue per letter.
   "True" rides currentColor so the theme toggle re-inks it. ---------- */
/* .brand-text .brand-word — the doubled class beats the .brand-text span
   subline rule that was shrinking the mark to 9px mono */
.brand-text .brand-word {
  display: inline-flex;
  font-family: "Poppins", var(--sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: var(--ink);
  text-transform: none; /* the subline rule above forces uppercase */
}
.brand-word .lw {
  display: inline-block;
  position: relative;
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-word .lw i {
  position: absolute;
  width: 0.28em; height: 0.28em;
  border-radius: 50%;
  background: var(--dot);
}
/* one continuous deep-cyan → bright-aqua sweep across "cars",
   ball terminals in aqua with a single amber wink on the a */
.lw-c { background-image: linear-gradient(150deg, #056274 0%, #07879A 100%); --dot: #5DE9D4; }
.lw-c i { left: -0.04em; top: 52%; }
.lw-a { background-image: linear-gradient(150deg, #07879A 0%, #0AA6BC 100%); --dot: #D4942A; }
.lw-a i { right: -0.1em; top: 48%; }
.lw-r { background-image: linear-gradient(150deg, #0AA6BC 0%, #2CC7C9 100%); --dot: #5DE9D4; }
.lw-r i { right: -0.12em; top: 6%; }
.lw-s { background-image: linear-gradient(150deg, #2CC7C9 0%, #5DE9D4 100%); --dot: #5DE9D4; }
.lw-s i { right: -0.08em; top: 76%; }
.site-footer .brand-word { color: #F4F0E8; }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-quiet);
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.nav-cta { margin-left: 14px; }
.nav-toggle {
  display: none; background: var(--paper); margin-left: auto;
  padding: 10px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink);
}


/* ---------- ribbon ---------- */
.demo-ribbon {
  background: var(--parchment);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-align: center;
  padding: 9px 18px;
}
.demo-ribbon b { color: var(--accent); font-weight: 500; letter-spacing: 0.16em; }


/* ---------- hero ---------- */
/* ==========================================================
   Hero — design 1b.
   Full-bleed real photo, cream L→R scrim, editorial copy on
   the left, four-cell provenance ticker pinned bottom.
   ========================================================== */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.92) brightness(1.02);
}
/* Scrim as its own element (design 1b) so the layered gradients don't fight
   the previous ::after single-layer approach when the browser negotiates
   backdrop-filter with an image behind it. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(244,240,232,0.97) 0%,
      rgba(244,240,232,0.90) 32%,
      rgba(244,240,232,0.45) 58%,
      rgba(244,240,232,0.03) 80%,
      transparent 100%),
    linear-gradient(0deg,
      rgba(244,240,232,0.95) 0%,
      transparent 40%);
}

.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 9vw, 96px) 0 clamp(48px, 6vw, 72px);
  max-width: 700px;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--teal-bright) 0%, var(--accent) 55%, var(--teal-dark) 100%);
  box-shadow: 0 0 6px var(--accent-edge), inset 0 -2px 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7.4vw, 82px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 12ch;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: inherit;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.hero-facts {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink);
}
.hero-facts .hero-sep {
  color: var(--ink-mute); font-size: 15px;
}
.hero-delta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.hero-delta::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--teal-bright), var(--accent) 55%, var(--teal-dark));
}

.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 30px;
}

/* Provenance ticker — replaces the old stat rail. Sits pinned at the bottom
   of the hero as its own frosted band, four evenly spaced cells. */
.hero-ticker {
  position: relative; z-index: 2;
  margin-top: auto;
  display: grid;
  /* minmax(0,1fr) — without the 0 minimum, each column takes its widest word
     as a floor, and "Finance applications" pushed cell 4 past the viewport at
     ≤ ~430px (measured 46px overflow at 375). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(244, 240, 232, 0.85);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid var(--rule);
}
.hero-ticker > div {
  padding: 20px clamp(18px, 2.6vw, 28px);
  border-left: 1px solid rgba(14, 26, 38, 0.08);
}
.hero-ticker > div:first-child { border-left: 0; }
.hero-ticker b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}
.hero-ticker span {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}


/* ---------- price badge — glass pill, TrueCar pattern ---------- */
.price-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1;
}
.price-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}
.price-badge.is-great { color: var(--teal); }
.price-badge.is-great::before {
  background: radial-gradient(circle at 35% 30%, var(--teal-bright) 0%, var(--accent) 55%, var(--teal-dark) 100%);
  box-shadow: 0 0 5px var(--accent-edge), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}
.price-badge.is-fair  { color: var(--amber); }
.price-badge.is-fair::before {
  background: radial-gradient(circle at 35% 30%, #f0c060 0%, #D4942A 50%, #9a6a18 100%);
  box-shadow: 0 0 5px rgba(212, 148, 42, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}
.price-badge.is-above { color: var(--navy-400); }
.price-badge.is-above::before {
  background: radial-gradient(circle at 35% 30%, #94A3B8 0%, #64748B 50%, #475569 100%);
  box-shadow: 0 0 5px rgba(71, 85, 105, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}


/* ---------- filter bar — glass, sticky ---------- */
.filter-bar {
  position: sticky;
  top: calc(var(--topbar) + var(--header));
  z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.filter-bar .wrap {
  display: flex; align-items: center; gap: 16px;
}
.filter-chips {
  display: flex; gap: 6px; flex: 1; flex-wrap: wrap;
}
.filter-chip {
  padding: 8px 14px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet);
  border: 1px solid var(--rule);
  transition: all 0.3s var(--ease);
  cursor: pointer;
  background: transparent;
}
.filter-chip:hover { color: var(--ink); border-color: var(--ink-quiet); }
.filter-chip.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.filter-budget {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.filter-budget input[type="range"] {
  width: 120px;
  accent-color: var(--accent);
  cursor: pointer;
}
.filter-budget .budget-val {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}
.filter-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------- search rail (kept for backward compat) ---------- */
.search-rail {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-raised);
}
.search-rail form {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr) auto;
  gap: 0; align-items: stretch; min-height: 84px;
}
.search-rail .field {
  padding: 18px 22px;
  border-left: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; justify-content: center;
}
.search-rail .field:first-of-type { border-left: 0; }
.search-rail label {
  display: block;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.search-rail select,
.search-rail input {
  width: 100%; background: transparent; border: 0; padding: 0;
  color: var(--ink);
  font-family: var(--sans); font-size: 15px;
  outline: none;
}
.search-rail select { appearance: none; cursor: pointer; }
.search-rail select option { background: #FFFFFF; color: #0E1A26; }
.search-rail .marker {
  display: flex; align-items: center; padding: 0 26px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
  border-right: 1px solid var(--rule-soft);
}
.search-rail .go {
  padding: 0 32px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.3s var(--ease);
}
.search-rail .go:hover { background: var(--navy-800); }
.search-rail .go::after { content: "→"; font-family: var(--serif); }


/* ---------- browse tiles ---------- */
.tile-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tile {
  background: var(--bg);
  padding: 32px 24px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.4s var(--ease),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.tile:hover {
  background: var(--bg-raised);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(14, 26, 38, 0.08);
  z-index: 2;
}
.tile svg {
  width: 52px; height: 30px;
  color: var(--ink-mute); margin-bottom: 16px;
  transition: color 0.3s var(--ease);
}
.tile:hover svg { color: var(--accent); }
.tile b {
  font-family: var(--serif);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tile span {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 4px;
}
.tile::after {
  content: "→"; position: absolute; right: 22px; top: 30px;
  font-family: var(--serif); color: var(--ink-mute);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile:hover::after { opacity: 1; transform: none; color: var(--accent); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet);
  border: 1px solid var(--rule);
  border-radius: 100px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip b { font-family: var(--sans); font-weight: 500; letter-spacing: 0; color: var(--ink-mute); }
a.chip:hover, button.chip:hover { color: var(--ink); border-color: var(--ink-quiet); }
.chip.is-active { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); }

/* ==========================================================
   SHOWROOM & VEHICLE CARDS — ULTRA-LUXURY STUDIO ARCHITECTURE
   ========================================================== */

/* Showroom Hero Status Header */
.showroom-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(7, 135, 154, 0.08);
  border: 1px solid rgba(7, 135, 154, 0.22);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.showroom-status-pill .live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(7, 135, 154, 0.7);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(7, 135, 154, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(7, 135, 154, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(7, 135, 154, 0); }
}

/* Card Grid */
.card-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}
@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Card Container */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(14, 26, 38, 0.08);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
  box-shadow: 0 4px 18px -4px rgba(14, 26, 38, 0.05),
              0 1px 2px rgba(14, 26, 38, 0.03);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 135, 154, 0.38);
  box-shadow: 0 22px 48px -12px rgba(14, 26, 38, 0.14),
              0 6px 20px -2px rgba(7, 135, 154, 0.08);
}

/* Card Media Frame */
.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #090e17;
  display: block;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.card:hover .card-media img {
  transform: scale(1.045);
}
/* Studio Vignette Gradient */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,26,38,0.2) 0%, transparent 40%, rgba(14,26,38,0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

/* VIR Score Badge */
.card-vir-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 26, 38, 0.88);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(93, 233, 212, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(93, 233, 212, 0.15);
  color: #5DE9D4;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.card-vir-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5DE9D4;
  box-shadow: 0 0 6px #5DE9D4;
}

/* Price Badges */
.price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(14, 26, 38, 0.84);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.price-badge.is-great {
  border-color: rgba(93, 233, 212, 0.45);
  color: var(--teal-bright);
}
.price-badge.is-great::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a4f4e7, var(--teal-bright) 60%, var(--teal) 100%);
  box-shadow: 0 0 6px var(--teal-bright);
}
.price-badge.is-fair {
  border-color: rgba(212, 148, 42, 0.45);
  color: #f6c878;
}
.price-badge.is-fair::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde047, #D4942A 60%, #9a6a18 100%);
  box-shadow: 0 0 6px #D4942A;
}

/* Card Tools (Share, Save/Heart) */
.card-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.card:hover .card-tools {
  opacity: 1;
}
.card-tools button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14, 26, 38, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(244, 240, 232, 0.95);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.card-tools button:hover {
  background: var(--accent);
  border-color: var(--teal-bright);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(7, 135, 154, 0.4);
}
.card-tools button.is-on {
  color: #ff5f7e;
  border-color: rgba(255, 95, 126, 0.45);
  background: rgba(14, 26, 38, 0.9);
}
.card-tools svg {
  width: 15px;
  height: 15px;
}

/* Card Body */
.card-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--paper);
}
.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.card-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
.card-compare-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card-compare-chk input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--navy-300);
  border-radius: 3px;
  background: var(--bg-inset);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  margin: 0;
}
.card-compare-chk input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.card-compare-chk input[type="checkbox"]:checked::before {
  content: "✓";
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.card-compare-chk label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}
.card-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  transition: color 0.25s ease;
}
.card:hover .card-title {
  color: var(--accent);
}
.card-trim {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-quiet);
  margin-top: 3px;
  line-height: 1.35;
}
.card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}
.spec {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-quiet);
  background: var(--parchment);
  border: 1px solid rgba(14, 26, 38, 0.07);
  padding: 3px 8px;
  border-radius: 5px;
}
.card-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.price-block {
  display: flex;
  flex-direction: column;
}
.price-was {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-decoration: line-through;
  letter-spacing: 0.02em;
}
.price-now {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-pm {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.price-pm b {
  color: var(--teal);
  font-weight: 700;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* Card CTA button */
.card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-inset);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-cta::after {
  content: "→";
  font-family: var(--serif);
  font-size: 15px;
  transition: transform 0.3s ease;
}
.card:hover .card-cta {
  background: var(--accent);
  color: var(--cream);
}
.card:hover .card-cta::after {
  transform: translateX(5px);
}

/* Feature card (1st / 6th in featured grids) */
.card.is-feature {
  grid-column: span 2;
}
.card.is-feature .card-media {
  aspect-ratio: 21 / 10;
}
.card.is-feature .card-title {
  font-size: 22px;
}
.card.is-feature .price-now {
  font-size: 22px;
}
.card.is-feature .card-callout {
  position: absolute;
  top: 12px;
  right: 56px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 2;
}

/* Compared Card State */
.card.is-compared {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-edge), 0 14px 36px -8px rgba(7, 135, 154, 0.22);
}

/* ---------- SRP (Search & Results Page) ---------- */
.srp {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 960px) {
  .srp { grid-template-columns: 1fr; }
}

.filters {
  position: sticky;
  top: calc(var(--topbar) + var(--header) + 24px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px -12px rgba(14, 26, 38, 0.06);
}
@media (max-width: 960px) {
  .filters {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 320px; max-width: 90vw;
    z-index: 999;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.25);
  }
  .filters.is-open {
    transform: translateX(0);
  }
}
.filters-close {
  display: none;
  font-size: 16px;
  color: var(--ink-mute);
  padding: 4px;
}
@media (max-width: 960px) {
  .filters-close { display: block; }
}

.filter-group {
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
}
.filter-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.filter-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
  display: block;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-options .filter-chip {
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-quiet);
  background: var(--parchment);
  border: 1px solid rgba(14, 26, 38, 0.08);
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-options .filter-chip:hover {
  background: var(--sand);
  color: var(--ink);
}
.filter-options .filter-chip.is-selected {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.filter-options .filter-chip span {
  font-size: 9.5px;
  opacity: 0.65;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 100px;
}
.filter-options .filter-chip.is-selected span {
  background: rgba(255, 255, 255, 0.2);
}

.search-input {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-surf);
}
.filter-range {
  display: flex;
  gap: 8px;
}
.filter-range input {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.filter-range input:focus {
  border-color: var(--accent);
}

/* SRP Bar (Count, Sort, View Toggle) */
.srp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.srp-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.srp-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
}
@media (max-width: 960px) {
  .filter-toggle { display: inline-flex; }
}

.srp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.srp-controls select {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.srp-controls select:focus {
  border-color: var(--accent);
}

.view-toggle {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 2px;
}
.view-btn {
  padding: 6px 9px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  transition: all 0.2s var(--ease);
  cursor: pointer;
}
.view-btn:hover {
  color: var(--ink);
}
.view-btn.is-active {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.view-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* Active Filter Tags */
.active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid rgba(7, 135, 154, 0.3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.active-tag button {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.active-tag button:hover {
  color: var(--red);
}

/* List View for Card Grid */
.card-grid.is-list {
  grid-template-columns: 1fr !important;
  gap: 18px;
}
.card-grid.is-list .card {
  display: grid;
  grid-template-columns: 300px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 0 20px 0 0;
}
.card-grid.is-list .card-media {
  aspect-ratio: 16 / 10;
  width: 100%;
}
.card-grid.is-list .card-body {
  padding: 16px 0;
}
.card-grid.is-list .card-cta {
  border-top: 0;
  background: var(--accent);
  color: var(--cream);
  border-radius: 100px;
  padding: 10px 22px;
  white-space: nowrap;
}
.card-grid.is-list .card-cta:hover {
  background: var(--teal-dark);
}
@media (max-width: 860px) {
  .card-grid.is-list .card {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .card-grid.is-list .card-body {
    padding: 18px 20px;
  }
  .card-grid.is-list .card-cta {
    border-radius: 0;
    border-top: 1px solid var(--rule-soft);
    background: var(--bg-inset);
    color: var(--ink);
  }
}

/* Compare Dock */
.compare-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(14, 26, 38, 0.92);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(93, 233, 212, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 24px rgba(7, 135, 154, 0.2);
  padding: 12px 24px;
  border-radius: 100px;
  color: var(--cream);
  font-family: var(--sans);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-dock.is-visible {
  transform: translateX(-50%) translateY(0);
}
.compare-dock span {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5DE9D4;
}
.btn-comp {
  background: var(--accent);
  color: var(--cream);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--teal-bright);
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-comp:hover {
  background: var(--teal-dark);
  box-shadow: 0 0 12px rgba(93, 233, 212, 0.4);
}
.btn-clear {
  color: rgba(244, 240, 232, 0.6);
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s ease;
}
.btn-clear:hover {
  color: #fff;
}

/* Compare Modal */
.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.compare-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.compare-dialog {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
  position: relative;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.compare-table th, .compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  font-size: 14px;
}
.compare-table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-inset);
}
.compare-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}

/* Collection Tabs (Homepage) */
.collection-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.collection-tab {
  padding: 8px 18px; border-radius: 100px;
  background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet); transition: all 0.2s var(--ease);
}
.collection-tab:hover { color: var(--ink); border-color: var(--ink-mute); }
.collection-tab.is-active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

/* Ecosystem Grid (Homepage) */
.eco-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 36px;
}
.eco-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.eco-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -8px rgba(14,26,38,0.12); border-color: var(--accent-edge); }
.eco-badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-surf); border: 1px solid var(--accent-edge);
  padding: 4px 10px; border-radius: 100px; width: fit-content;
}
.eco-card h3 { font-family: var(--serif); font-size: 22px; margin: 0; color: var(--ink); }
.eco-card p { margin: 0; font-size: 14px; color: var(--ink-quiet); line-height: 1.5; }

/* Trade-In Wizard */
.wiz-container {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 4px 24px -6px rgba(14,26,38,0.08); max-width: 760px; margin: 0 auto;
}
.wiz-bar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;
  position: relative;
}
.wiz-step-pill {
  display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em;
}
.wiz-step-pill.is-active { color: var(--accent); font-weight: 700; }
.wiz-step-num {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center;
}
.wiz-step-pill.is-active .wiz-step-num { background: var(--accent); color: var(--cream); border-color: var(--accent); }
.wiz-val-box {
  background: linear-gradient(135deg, rgba(7,135,154,0.08), rgba(251,248,243,0.9));
  border: 1.5px solid var(--accent); border-radius: 8px; padding: 24px; text-align: center; margin: 24px 0;
}
.wiz-val-number {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: var(--ink); margin: 8px 0;
}

.empty { padding: 96px 20px; text-align: center; color: var(--ink-mute); }
.empty h3 { color: var(--ink); }


/* ---------- VDP ---------- */
.vdp {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.vdp-rail {
  position: sticky; top: calc(var(--header) + var(--topbar) + 20px);
  display: grid; gap: 20px;
}

.gallery {
  background: var(--parchment);
  border-radius: 2px;
  overflow: hidden;
}
.gallery-main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 13, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 28px; color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lightbox-close:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 24px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lightbox-nav:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }
.lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(244, 240, 232, 0.8);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--serif); font-size: 20px;
  border-radius: 50%;
  transition: background 0.3s var(--ease);
}
.gallery-nav:hover { background: var(--cream); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-thumbs {
  display: flex; gap: 4px; padding: 4px;
  overflow-x: auto; background: var(--parchment);
}
.gallery-thumbs button { flex: 0 0 auto; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.gallery-thumbs img {
  width: 88px; height: 62px; object-fit: cover;
  opacity: 0.5; /* flex moved to button */
  border-radius: 2px;
  cursor: pointer; transition: opacity 0.3s var(--ease);
}
.gallery-thumbs button:hover img { opacity: 0.85; }
.gallery-thumbs button.is-active img { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }

.view-switch { display: flex; gap: 24px; padding: 16px 16px 0; }
.view-switch button {
  padding: 8px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.view-switch button.is-active { color: var(--ink); border-color: var(--accent); }

/* ---------- TruOrbit — 360° walkaround, the VDP hero ---------- */
.orbit-hero { margin: 0 0 40px; }
.orbit-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.orbit-count {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}

.orbit {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  box-shadow: 0 20px 50px -24px rgba(14, 26, 38, 0.4);
}
.orbit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.orbit.is-dragging { cursor: grabbing; }
.orbit img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
  opacity: 0;
}
.orbit img.is-active { opacity: 1; }

.orbit-label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px;
  color: var(--ink);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--rule);
  border-radius: 100px;
}

.orbit-reset {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--rule);
  opacity: 0;
  transition: opacity 0.3s var(--ease), color 0.2s var(--ease);
}
.orbit.has-moved .orbit-reset { opacity: 1; }
.orbit-reset:hover { color: var(--accent); }
.orbit-reset svg { width: 15px; height: 15px; }

.orbit-hint {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.orbit-hint b { color: var(--accent); font-weight: 500; }

/* jump chips */
.orbit-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.orbit-chips button {
  padding: 9px 18px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-quiet);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.orbit-chips button:hover { color: var(--ink); border-color: var(--ink-mute); }
.orbit-chips button.is-on {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: var(--accent-surf);
}

/* photographs, demoted below the walkaround */
.gallery.is-secondary { margin-top: 8px; }

/* VDP panels */
.panel { padding: 0; }
.panel + .panel { padding-top: 24px; border-top: 1px solid var(--rule); }
.panel h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 16px; letter-spacing: -0.025em; }

.vdp-meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 14px;
}
.vdp-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.vdp-trim {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink-mute);
  font-variation-settings: "opsz" 30, "SOFT" 100;
  margin-bottom: 24px;
}

.vdp-price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.vdp-price .price-now {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 60;
  color: var(--ink);
}
.vdp-pm {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 8px;
}
.vdp-pm b { color: var(--accent); font-weight: 500; letter-spacing: 0.06em; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td {
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px;
}
.spec-table tr:first-child td { border-top: 0; }
.spec-table td:first-child {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); width: 45%;
}
.spec-table td:last-child {
  text-align: right; font-family: var(--sans);
  font-weight: 500; color: var(--ink);
}

/* VIR */
.vir-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.vir-score {
  width: 70px; height: 70px;
  display: grid; place-items: center;
  border: 1px solid var(--accent-edge);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 900; font-size: 24px;
  letter-spacing: -0.03em;
  flex: 0 0 auto;
}
.vir-meta b {
  display: block; font-family: var(--serif);
  font-size: 18px; margin-bottom: 2px; letter-spacing: -0.02em;
  color: var(--ink);
}
.vir-meta span {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}

.advisories { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.advisories li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--ink-quiet);
}
.advisories li:first-child { border-top: 0; padding-top: 0; }
.advisories .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--amber); }
.advisories b {
  display: block; color: var(--ink);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 3px;
}

.cta-stack { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- Enhanced VDP Interactive Components ---------- */

/* Tech & Certification Pills */
.tru-tech-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(7, 135, 154, 0.08), rgba(251, 248, 243, 0.9));
  border: 1px solid var(--accent-edge);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  box-shadow: 0 2px 8px -2px rgba(7, 135, 154, 0.15);
  cursor: help;
  transition: all 0.2s var(--ease);
}
.tru-tech-badge:hover {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(7, 135, 154, 0.25);
  transform: translateY(-1px);
}
.tru-tech-badge svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.tru-tech-badge span b { font-weight: 700; color: var(--ink); }
.tru-tech-badge .tech-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 280px;
  background: var(--navy-950);
  color: var(--cream);
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 0.2s var(--ease);
  z-index: 100;
}
.tru-tech-badge .tech-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--navy-950) transparent transparent transparent;
}
.tru-tech-badge:hover .tech-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* VDP Media Tabs Switcher */
.media-tabs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
}
.media-tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease);
}
.media-tab-btn:hover { color: var(--ink); }
.media-tab-btn.is-active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: 0 2px 8px rgba(14, 26, 38, 0.06);
}
.media-tab-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.media-tab-btn .badge-num {
  padding: 2px 6px; border-radius: 100px;
  font-size: 9.5px; background: var(--accent-surf);
  color: var(--accent);
}

/* Auto-spin button on 360 Orbit */
.orbit-autospin {
  position: absolute; top: 12px; right: 52px; z-index: 3;
  padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 100px;
  color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.orbit-autospin:hover { color: var(--accent); border-color: var(--accent-edge); }
.orbit-autospin.is-spinning {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}
.orbit-autospin svg { width: 13px; height: 13px; stroke: currentColor; }

/* Highlights spec grid */
.vdp-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.highlight-tile {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.highlight-tile:hover {
  border-color: var(--accent-edge);
  transform: translateY(-2px);
}
.highlight-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.highlight-value {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}

/* Interactive Finance Calculator Card */
.fin-calc-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 20px -6px rgba(14, 26, 38, 0.08);
  margin-top: 28px;
}
.fin-calc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft);
}
.fin-calc-title {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  margin: 0; color: var(--ink);
}
.fin-calc-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-surf); border: 1px solid var(--accent-edge);
  padding: 3px 8px; border-radius: 100px;
}
.fin-slider-group {
  display: grid; gap: 18px; margin-bottom: 24px;
}
.fin-control {
  display: grid; gap: 8px;
}
.fin-control-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.fin-control-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.fin-control-val {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--ink);
}
.fin-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 6px;
  background: var(--parchment);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}
.fin-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(7, 135, 154, 0.4);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.fin-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.fin-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(7, 135, 154, 0.4);
  cursor: pointer;
}
.fin-breakdown {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 16px; background: var(--bg-inset);
  border-radius: 6px; margin-bottom: 20px;
  border: 1px solid var(--rule-soft);
}
.fin-bd-item {
  display: flex; flex-direction: column; gap: 2px;
}
.fin-bd-item.is-main {
  grid-column: span 2;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.fin-bd-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.fin-bd-val {
  font-family: var(--serif); font-size: 26px; font-weight: 900;
  color: var(--ink); line-height: 1;
}
.fin-bd-sub {
  font-size: 12px; color: var(--ink-quiet);
}

/* Enhanced TruInspect VIR Scorecard */
.vir-full-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 20px -6px rgba(14, 26, 38, 0.08);
}
.vir-score-row {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 20px;
}
.vir-big-seal {
  position: relative;
  width: 76px; height: 76px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--paper), var(--parchment));
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(7, 135, 154, 0.15);
}
.vir-big-seal .score-num {
  font-family: var(--serif); font-size: 30px; font-weight: 900;
  color: var(--ink); line-height: 1;
}
.vir-big-seal .score-max {
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute);
  position: absolute; bottom: 6px;
}
.vir-seal-meta h4 { margin: 0 0 4px; font-size: 18px; font-family: var(--serif); text-transform: none; letter-spacing: -0.02em; color: var(--ink); }
.vir-seal-meta p { margin: 0; font-size: 13px; color: var(--ink-quiet); }
.vir-badge-certified {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 100px;
  color: #15803d;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* VIR Category Bars */
.vir-cat-bars {
  display: grid; gap: 12px; margin-bottom: 22px;
}
.vir-cat-item {
  display: grid; gap: 5px;
}
.vir-cat-info {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.vir-cat-info span { font-weight: 500; color: var(--ink); }
.vir-cat-info b { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.vir-progress-track {
  height: 6px; background: var(--bg-inset); border-radius: 100px;
  overflow: hidden; border: 1px solid var(--rule-soft);
}
.vir-progress-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--teal-dark), var(--accent));
  transition: width 0.6s var(--ease-out);
}

/* VIR Trust Guarantee Grid */
.vir-trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.vir-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-quiet);
}
.vir-trust-item svg { width: 16px; height: 16px; stroke: var(--accent); flex-shrink: 0; }

/* Interactive Trade-In Estimator Card */
.trade-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 20px -6px rgba(14, 26, 38, 0.08);
  margin-top: 28px;
}
.trade-form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 16px; margin-bottom: 16px;
}
.trade-input-group {
  display: grid; gap: 6px;
}
.trade-input-group.is-full { grid-column: span 2; }
.trade-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.trade-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--sans); font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease);
}
.trade-input:focus { border-color: var(--accent); background: var(--paper); }
.trade-result {
  padding: 14px 16px;
  background: var(--accent-surf);
  border: 1px solid var(--accent-edge);
  border-radius: 6px;
  display: none;
  animation: cfMenuIn 0.3s var(--ease) both;
}
.trade-result.is-visible { display: block; }
.trade-result-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 13.5px;
}
.trade-result-row:last-child { margin-bottom: 0; }
.trade-result-row b { font-family: var(--sans); font-weight: 700; color: var(--accent); font-size: 16px; }

/* Similar Stock Section */
.similar-stock-section {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* Mobile Sticky Action Bar */
.vdp-mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 68;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px -4px rgba(14, 26, 38, 0.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.vdp-mobile-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.vdp-mobile-price {
  display: flex; flex-direction: column; white-space: nowrap;
}
.vdp-mobile-now {
  font-family: var(--serif); font-size: 19px; font-weight: 900;
  color: var(--ink); line-height: 1;
}
.vdp-mobile-pm {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  letter-spacing: 0.08em;
}
.vdp-mobile-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.vdp-mobile-btn {
  padding: 10px 16px;
  border-radius: 100px;
  font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.vdp-mobile-btn.wa {
  background: #25d366; color: #fff;
}
.vdp-mobile-btn.apply {
  background: var(--ink); color: var(--cream);
}

@media (max-width: 860px) {
  .vdp-mobile-bar { display: block; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}



/* ---------- system band — widgets pitch ---------- */
.module-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.module {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 36px 32px 32px;
  min-height: 260px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.module:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px -8px rgba(26, 26, 46, 0.1);
}
.module-no {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  background: var(--accent-surf);
  border: 1px solid var(--accent-edge);
  border-radius: 100px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.module h3 { font-family: var(--serif); font-size: 26px; letter-spacing: -0.03em; margin: 0; }
.module h3 em { font-weight: 400; font-style: italic; color: var(--ink-quiet); }
.module p { margin: 0; color: var(--ink-quiet); font-size: 14.5px; line-height: 1.55; }
.module .link { margin-top: auto; }

.band {
  background: var(--bg-raised);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}


/* ---------- finance section ---------- */
.fin-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  position: relative;
}
.fin-left .lead { max-width: 44ch; }
.fin-points { margin-top: 28px; display: grid; gap: 18px; }
.fp {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
  transition: padding-left 0.3s var(--ease);
}
.fp:first-child { border-top: 0; }
.fp:hover { padding-left: 8px; }
.fp > b {
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.fp > div b {
  display: block; font-family: var(--serif);
  font-weight: 700; font-size: 19px;
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.fp > div span { font-size: 14.5px; color: var(--ink-quiet); line-height: 1.5; }
.banks {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.banks span {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.banks span + span::before {
  content: "·"; color: var(--sand); margin-right: 20px; margin-left: -10px;
}
/* No card here: TruRepay renders its own glass surface, so a wrapper card
   produced a card-inside-a-card, and its pure #fff read cold against the warm
   cream. The widget IS the surface.

   The calculator is collapsible, so this column swings between an ~80px pill and
   a full panel. Centring it means the collapsed state sits level with the points
   list beside it instead of pinning to the top and leaving a tall void. */
.fin-right {
  background: transparent;
  border: 0;
  padding: 0;
  align-self: center;
  width: 100%;
}
/* Let the open panel grow to match the editorial column beside it rather than
   staying at its intrinsic height. */
.fin-grid { align-items: stretch; }
.fin-left { align-self: start; }
/* TruRepay renders inside a shadow root whose :host sets `all:initial`, which
   resets custom properties from this document — no selector here can reach it.
   Theming is done with data-theme="light" on the tru-loader tag instead. */


/* ---------- glassmorphic FABs — bottom right ---------- */
.glass-fab-dock,
.glass-fabs {
  position: fixed;
  right: 24px;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.glass-fab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  /* fixed height so these line up with each other and with the round chat FAB */
  height: 46px;
  min-width: 46px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  /* real glass: let the page through, then blur and lift it */
  background: linear-gradient(
    145deg, rgba(255, 255, 255, 0.55), rgba(251, 248, 243, 0.34));
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 8px 28px -8px rgba(14, 26, 38, 0.22),
              0 1px 2px rgba(14, 26, 38, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.2s var(--ease);
}
.glass-fab:hover {
  background: linear-gradient(
    145deg, rgba(255, 255, 255, 0.75), rgba(251, 248, 243, 0.55));
  box-shadow: 0 12px 34px -8px rgba(14, 26, 38, 0.3),
              0 1px 4px rgba(14, 26, 38, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}
.glass-fab:active { transform: translateY(0); }
.glass-fab svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: var(--accent);
}
.fab-r {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-style: italic;
  font-size: 15px; line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}

/* Chat launcher shares the FAB rail's baseline (96px) so the two widget
   clusters sit on one line instead of at mismatched heights. The tip bubble
   is suppressed: it is position:fixed at a fixed offset and was landing on
   top of the section heading. */
/* ---------- Direct-contact FAB (SA / UK WhatsApp) ----------
   Bottom-left column, sitting directly above the chat FAB. No launcher —
   both actions always visible. Chat FAB is 46px at bottom:96px; contact
   stack starts at 158px (96 + 46 + 16 gap) so nothing overlaps. */
.contact-fab {
  position: fixed;
  left: 24px;
  /* Chat FAB: bottom 96, height 48, ring extends 7px → visual top at 137.
     +24 breathing = 161 → rounded up to 176 so the stack never crowds the ring. */
  bottom: 176px;
  z-index: 58;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
/* Launcher retired — the .cf-launcher block below is legacy and no-ops when
   the element is not rendered; kept for now in case a nested page still uses it. */
.cf-launcher {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  /* Solid teal so it reads as the primary CTA of the whole page, not one more
     glass pill. Design 1a's concierge card treats the phone action this way. */
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(7, 135, 154, 0.55),
              0 1px 2px rgba(14, 26, 38, 0.08);
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.cf-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px -8px rgba(7, 135, 154, 0.65),
              0 1px 4px rgba(14, 26, 38, 0.1);
}
.cf-launcher svg { width: 20px; height: 20px; stroke: currentColor; transition: transform 0.25s var(--ease); position: relative; z-index: 2; }
.contact-fab.is-open .cf-launcher svg { transform: rotate(45deg); }

/* Ring pulse — draws the eye without shouting. Two concentric rings, offset in
   time, radiating out of the launcher every ~3s. Suppressed while the menu is
   open (a pulsing "Close" button reads as an error) and for reduced-motion. */
.cf-launcher::before,
.cf-launcher::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: cfPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.cf-launcher::after { animation-delay: 1.4s; }
.contact-fab.is-open .cf-launcher::before,
.contact-fab.is-open .cf-launcher::after { animation: none; opacity: 0; }
@keyframes cfPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.9); }
  100% { opacity: 0;    transform: scale(1.9); }
}

/* Glass FAB shimmer — a slow diagonal specular sweep across the pill, so the
   Enquire / Finance stack registers as *live* without a hard pulse. Runs
   forever, but slow enough (~5s) that it never fights the page content. */
.glass-fab { position: relative; overflow: hidden; }
.glass-fab::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 100%);
  transform: skewX(-14deg);
  pointer-events: none;
  animation: glassShimmer 5.2s ease-in-out 1s infinite;
}
.glass-fab:nth-child(2)::before { animation-delay: 2.4s; }
@keyframes glassShimmer {
  0%, 100% { left: -60%; opacity: 0; }
  30%      { opacity: 1; }
  70%      { left: 120%; opacity: 0; }
}

/* Chat FAB (light DOM injection from truchat/widget.js) already ships a
   `has-pulse` animation of its own — do not stack another here or the two
   rings compete. */

@media (prefers-reduced-motion: reduce) {
  .cf-launcher::before,
  .cf-launcher::after,
  .glass-fab::before { animation: none !important; display: none; }
}

.cf-menu {
  display: flex; flex-direction: column; gap: 16px;   /* was 10 — breathe */
  animation: cfMenuIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cfMenuIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
/* Each action is a round 46px FAB — icon-only, matches the chat FAB rhythm. */
.cf-item {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  /* Semi-transparent border + inner highlight → subtle glass edge over the
     solid cyan, so the FAB catches light like the other widget surfaces. */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    var(--accent);
  color: var(--cream);
  backdrop-filter: saturate(1.3);
  -webkit-backdrop-filter: saturate(1.3);
  box-shadow: 0 10px 28px -8px rgba(7, 135, 154, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 rgba(14, 26, 38, 0.10);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
}
.cf-item:hover {
  transform: translateY(-2px);
  background: var(--teal-dark);
  box-shadow: 0 14px 34px -8px rgba(7, 135, 154, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cf-item svg { width: 22px; height: 22px; }
/* Country tag chip on the WhatsApp actions — the ONE piece of text left.
   Sits on the top-right so it doesn't collide with the launcher below. */
.cf-tag {
  position: absolute;
  top: -3px; right: -4px;
  min-width: 22px; height: 17px;
  padding: 0 6px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  line-height: 1;
}

/* Push the stack above the mobile action-bar (62px). Chat FAB moves too — its
   own CSS handles that — but our own bottom needs to clear it. */
/* TruChat FAB visibility & responsive positioning */
#tc-fab {
  z-index: 999990 !important;
}

@media (max-width: 860px) {
  .contact-fab { display: none; }
  #tc-fab {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.tcsa-mab-on #tc-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

#tc-panel {
  z-index: 10000 !important;
}
@media (min-width: 641px) {
  #tc-panel {
    right: 24px !important;
    left: auto !important;
    bottom: 84px !important;
    transform-origin: bottom right !important;
  }
}
@media (max-width: 640px) {
  #tc-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    height: min(75vh, 560px) !important;
    border-radius: 20px !important;
  }
}



/* Two-tone accent, as the brochure uses it: the deep cyan that reads well on
   cream is too dark on navy, so dark sections re-point --accent at the bright
   aqua. Every descendant (em, links, buttons, rules) inherits it — no per-element
   overrides needed. */
.topbar,
.cta-band,
.site-footer,
.on-dark {
  --accent:      var(--teal-bright);
  --accent-ink:  var(--navy-950);
  --accent-surf: rgba(93, 233, 212, 0.10);
  --accent-edge: rgba(93, 233, 212, 0.28);
  --rule:        rgba(244, 240, 232, 0.14);
  --rule-soft:   rgba(244, 240, 232, 0.08);
  --ink:         var(--cream);
  --ink-quiet:   rgba(244, 240, 232, 0.72);
  --ink-mute:    rgba(244, 240, 232, 0.46);
}

/* ---------- dark CTA band — brochure page 8 ---------- */
.cta-band {
  background: var(--navy-950);
  padding: clamp(56px, 8vw, 100px) 0;
  margin-top: clamp(60px, 8vw, 120px);
}
.cta-band .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.cta-band h2 {
  color: var(--cream);
  font-size: clamp(28px, 4.5vw, 52px);
  margin: 0; max-width: 16ch;
}
.cta-band h2 em {
  color: var(--accent);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}
.cta-band .btn-accent {
  background: linear-gradient(135deg, var(--teal-bright, #5DE9D4) 0%, var(--teal-dark, #07879A) 100%);
  color: var(--navy-950);
  padding: 18px 36px;
  font-size: 15px; font-weight: 700;
  border-radius: 100px;
  box-shadow: 0 4px 16px -4px rgba(7, 135, 154, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative; overflow: hidden;
  transition: all 0.35s var(--ease);
}
.cta-band .btn-accent::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.cta-band .btn-accent:hover::before { transform: translateX(100%); }
.cta-band .btn-accent:hover {
  background: linear-gradient(135deg, #7CF0DE 0%, #0A9DB3 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px -6px rgba(7, 135, 154, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cta-band .btn-accent:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.cta-band .btn-accent::after { content: "→"; font-family: var(--serif); margin-left: 10px; }

/* ---------- footer ---------- */
.site-footer {
  /* sampled from the dark lockup's baked ground so the jpg edge never shows */
  background: #131B2A;
  border-top: 1px solid rgba(244, 240, 232, 0.06);
  /* Was clamp(48px, 6vw, 88px) 0 32px — top padding halved so the dark band
     doesn't dominate. Ecosystem lead sits tighter to the CTA band above. */
  padding: clamp(28px, 3.5vw, 48px) 0 32px;
}
.footer-lead {
  display: block;
  font-family: var(--serif);
  /* Was clamp(28px, 4vw, 44px) — reduced so the ecosystem paragraph reads as
     copy, not a slogan; still Fraunces so it holds editorial weight. */
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.45;
  max-width: 62ch;
  color: rgba(244, 240, 232, 0.86);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-lead:hover { color: var(--cream); }
.footer-lead:hover em { color: var(--teal-bright); }
  margin: 0 0 clamp(32px, 5vw, 56px);
  color: var(--cream);
}
.footer-lead em { font-weight: 400; font-style: italic; color: var(--accent); }

.footer-grid {
  display: grid; gap: 30px;
  grid-template-columns: 2fr repeat(3, 1fr);
  padding-top: 40px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}
.footer-grid h4 { margin-bottom: 14px; color: rgba(244, 240, 232, 0.4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { font-size: 14px; color: rgba(244, 240, 232, 0.6); transition: color 0.2s var(--ease); }
.footer-grid a:hover { color: var(--cream); }

.footer-contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}
.footer-contact-card {
  padding: 24px;
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 6px;
}
.footer-contact-card h4 { margin-bottom: 10px; }
.footer-contact-card b {
  display: block;
  font-family: var(--sans); font-size: 20px; font-weight: 600;
  color: var(--cream); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.footer-contact-card span {
  font-size: 13px; color: rgba(244, 240, 232, 0.4);
}

.footer-note {
  border-top: 1px solid rgba(244, 240, 232, 0.08);
  padding-top: 22px; margin-top: 40px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 240, 232, 0.3);
  display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap;
}


/* Integrations Ticker on Cream */
.intg-ticker {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.intg-track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  will-change: transform;
  animation: intgMarquee 35s linear infinite;
}
@keyframes intgMarquee {
  to { transform: translateX(-50%); }
}
.itg-box {
  flex: none;
  display: grid;
  place-items: center;
  height: 48px;
  min-width: 140px;
  padding: 0 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(14,26,38,0.04);
}
.itg-box img {
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .gallery-nav { width: 32px; height: 32px; font-size: 14px; }
  .gallery-nav.prev { left: 8px; }
  .gallery-nav.next { right: 8px; }
  .gallery-thumbs img { width: 72px; height: 50px; }

  .intg-ticker { padding: 14px 0; }
  .intg-track { gap: 24px; animation-duration: 25s; }
  .itg-box { height: 40px; min-width: 110px; padding: 0 16px; border-radius: 8px; }
  .itg-box img { height: 20px; max-width: 85px; }
}

/* ---------- mobile action bar ---------- */
.action-bar { display: none; }


/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1; transform: none;
}
.reveal-1 { transition-delay: 0.05s; }
.reveal-2 { transition-delay: 0.15s; }
.reveal-3 { transition-delay: 0.25s; }
.reveal-4 { transition-delay: 0.35s; }
.reveal-5 { transition-delay: 0.45s; }

/* hero reveals run on load (CSS animation), not IO */
.hero .reveal {
  animation: rise 1s var(--ease-out) forwards;
  transition: none;
}
.hero .reveal-1 { animation-delay: 0.05s; }
.hero .reveal-2 { animation-delay: 0.2s; }
.hero .reveal-3 { animation-delay: 0.35s; }
.hero .reveal-4 { animation-delay: 0.5s; }
.hero .reveal-5 { animation-delay: 0.65s; }
@keyframes rise { to { opacity: 1; transform: none; } }


/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .search-rail form { grid-template-columns: 1fr 1fr; }
  .search-rail .marker { display: none; }
  .search-rail .field { border-left: 0; border-top: 1px solid var(--rule-soft); }
  .search-rail .field:nth-child(2) { border-top: 0; }
  .search-rail .go { grid-column: 1 / -1; padding: 20px; justify-content: center; }
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .card.is-feature { grid-column: span 2; }
  .editorial-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial-grid > .card:first-child { grid-column: span 2; }
  .vdp { grid-template-columns: minmax(0, 1fr); }
  .vdp-rail { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-meta { font-size: 17px; }
  .fin-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-facts { font-size: 17px; }
}

@media (max-width: 860px) {
  .topbar .hide-sm { display: none; }
  .nav {
    display: none; position: absolute; top: var(--header); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 20px 24px 30px;
    background: var(--cream);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 48px -8px rgba(14, 26, 38, 0.18);
  }
  .nav.is-open { display: flex; animation: navSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .nav a {
    padding: 16px 4px; font-size: 18px; font-weight: 600;
    border-bottom: 1px solid var(--rule-soft); color: var(--ink);
    transition: color 0.2s, padding-left 0.2s;
  }
  .nav a:hover, .nav a:active { color: var(--accent); padding-left: 12px; }
  .nav a::after { display: none; }
  .nav .nav-cta { margin-top: 20px; margin-left: 0; align-self: center; text-align: center; }
  .nav-toggle { display: block; }
  .plate { grid-template-columns: 1fr; gap: 8px; }
  .plate-no { padding-top: 0; }
  .theme-toggle { display: none !important; }
  .srp { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0; z-index: 70;
    padding: 30px 24px; overflow-y: auto;
    background: var(--bg); display: none;
  }
  .filters.is-open { display: block; }
  .filters-close { display: block !important; }
  .filter-toggle { display: inline-flex; }
  .module-grid { grid-template-columns: 1fr; gap: 12px; }
  .footer-contact { grid-template-columns: 1fr; }
  .cta-band .wrap { flex-direction: column; text-align: center; }
  .action-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid rgba(26, 26, 46, 0.08);
    box-shadow: 0 -4px 20px -4px rgba(26, 26, 46, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 10px; font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink); border-left: 1px solid rgba(26, 26, 46, 0.08);
  }
  .action-bar a:first-child { border-left: 0; }
  .action-bar a svg { width: 15px; height: 15px; }
  .action-bar .wa { color: #25d366; }
  .action-bar .stock { color: var(--accent); }
  body { padding-bottom: 62px; }
  .filter-bar .wrap { flex-wrap: wrap; }
  .filter-count { width: 100%; text-align: right; margin-left: 0; }
}
@keyframes navSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
  .card.is-feature { grid-column: span 1; }
  .card.is-feature .card-media { aspect-ratio: 16 / 10; }
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-grid > .card:first-child { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .search-rail form { grid-template-columns: 1fr; }
  .search-rail .field { border-top: 1px solid var(--rule-soft); }
  .srp-bar { gap: 12px; }
  .hero { min-height: min(80vh, 700px); }
  .hero-facts { gap: 12px; }
  .hero-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-ticker > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(14, 26, 38, 0.08); }
  .hero-ticker > div:nth-child(4) { border-top: 1px solid rgba(14, 26, 38, 0.08); }
  .glass-fab-dock, .glass-fabs { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); right: 14px; }
}

.filters-close { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Interactive Modals (Reservation, Price Drop Alert, Deal PDF)
   ============================================================ */
.tru-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(6, 8, 13, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.tru-dialog-backdrop.is-open {
  opacity: 1; pointer-events: auto;
}
.tru-dialog-modal {
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--rule, rgba(14,26,38,0.12));
  border-radius: 16px;
  max-width: 540px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 32px 72px -16px rgba(0,0,0,0.36);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 28px; position: relative;
}
.tru-dialog-backdrop.is-open .tru-dialog-modal {
  transform: none;
}
.tru-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.tru-dialog-head h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.02em;
}
.tru-dialog-head p {
  font-size: 13.5px; color: var(--ink-quiet); margin: 0; line-height: 1.45;
}
.tru-dialog-close {
  background: var(--bg, #FAF6EE); border: 1px solid var(--rule);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-quiet); font-size: 18px; flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.tru-dialog-close:hover {
  background: var(--ink); color: var(--paper);
}

.tru-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 500px) {
  .tru-form-row { grid-template-columns: 1fr; }
  .tru-dialog-modal { padding: 20px 16px; }
}
.tru-form-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.tru-form-field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
.tru-form-field input, .tru-form-field select {
  width: 100%; padding: 12px 14px; font-size: 14.5px;
  background: var(--bg, #FAF6EE); border: 1px solid var(--rule);
  border-radius: 8px; color: var(--ink); font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tru-form-field input:focus, .tru-form-field select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(7, 135, 154, 0.14);
}

/* Feature 2: Reserve Button & Guaranteed Holding Badge */
.btn-reserve-hold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px; border-radius: 10px;
  background: linear-gradient(135deg, #0B1220 0%, #152238 100%);
  color: #4FE3DC; font-weight: 700; font-size: 14px;
  border: 1px solid rgba(79, 227, 220, 0.35);
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  margin-top: 10px; text-decoration: none;
}
.btn-reserve-hold:hover {
  background: #111c30; border-color: #4FE3DC;
  box-shadow: 0 6px 20px -4px rgba(79, 227, 220, 0.25);
  transform: translateY(-1px);
}
.reserve-perks {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px 16px; margin: 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.reserve-perk-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink);
}
.reserve-perk-item svg {
  color: var(--accent); flex-shrink: 0; width: 16px; height: 16px;
}

/* Feature 3: Price Drop & Stock Alerts */
.price-alert-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); background: transparent;
  border: 1px dashed var(--accent); padding: 5px 12px; border-radius: 100px;
  cursor: pointer; transition: background 0.2s, color 0.2s; margin-left: 10px;
}
.price-alert-trigger:hover {
  background: var(--accent); color: var(--paper);
}
.stock-alert-banner {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 14px; padding: 24px; margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.stock-alert-left h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--ink); margin: 0 0 4px;
}
.stock-alert-left p {
  font-size: 13.5px; color: var(--ink-quiet); margin: 0;
}

/* Feature 4: Deal Sheet PDF Generator Action */
.btn-deal-sheet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px; border-radius: 10px;
  background: var(--bg); color: var(--ink); font-weight: 600; font-size: 13.5px;
  border: 1px solid var(--rule); cursor: pointer; transition: background 0.2s, border-color 0.2s;
  margin-top: 10px;
}
.btn-deal-sheet:hover {
  background: var(--paper); border-color: var(--ink-quiet);
}

/* ============================================================
   Deal Sheet & Inspection Report (A4 Publication Layout)
   ============================================================ */
.deal-sheet-modal-dialog {
  max-width: 840px !important;
  width: 95% !important;
  padding: 32px !important;
  background: #FFFFFF !important;
  color: #0A1420 !important;
}
.deal-sheet-document {
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, sans-serif);
  color: #0A1420;
  line-height: 1.45;
}
.ds-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0A1420;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.ds-brand .ds-logo {
  font-family: var(--serif, serif);
  font-size: 26px;
  font-weight: 800;
  color: #0A1420;
  line-height: 1;
}
.ds-brand .ds-logo b { color: #07879A; }
.ds-brand .ds-logo span {
  font-family: var(--mono, monospace);
  font-size: 11px;
  background: #07879A;
  color: #FFF;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.ds-dealer-meta {
  font-size: 12px;
  color: #5B6675;
  margin-top: 6px;
  line-height: 1.4;
}
.ds-doc-info {
  text-align: right;
}
.ds-doc-title {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #07879A;
}
.ds-doc-id {
  font-size: 12px;
  color: #5B6675;
  margin-top: 4px;
}
.ds-hero-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  background: #F4F8FC;
  border: 1px solid #E2EAF3;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .ds-hero-grid { grid-template-columns: 1fr; }
  .ds-columns { grid-template-columns: 1fr !important; }
}
.ds-car-photo {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  height: 150px;
  background: #000;
}
.ds-car-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-vir-seal {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(10, 20, 32, 0.9);
  color: #4FE3DC;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid rgba(79, 227, 220, 0.4);
}
.ds-vir-num {
  font-size: 16px;
  font-weight: 800;
  display: block;
  line-height: 1;
}
.ds-vir-lbl {
  font-family: var(--mono, monospace);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #FFF;
}
.ds-car-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ds-meta-sub {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #5B6675;
  text-transform: uppercase;
}
.ds-car-title {
  font-family: var(--serif, serif);
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 8px;
  color: #0A1420;
}
.ds-price-box {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ds-price-main {
  font-family: var(--serif, serif);
  font-size: 24px;
  font-weight: 800;
  color: #0A1420;
}
.ds-price-sub {
  font-size: 13px;
  color: #07879A;
  font-weight: 600;
}
.ds-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-badge {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  background: #FFF;
  border: 1px solid #D0DCE8;
  padding: 2px 8px;
  border-radius: 4px;
  color: #0A1420;
  font-weight: 600;
}
.ds-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.ds-section-title {
  font-family: var(--serif, serif);
  font-size: 15px;
  font-weight: 700;
  color: #0A1420;
  margin: 0 0 10px;
  border-bottom: 1px solid #E2EAF3;
  padding-bottom: 6px;
}
.ds-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ds-spec-table tr {
  border-bottom: 1px solid #F0F4F8;
}
.ds-spec-table td {
  padding: 5px 0;
}
.ds-spec-table td:first-child {
  color: #5B6675;
  width: 55%;
}
.ds-spec-table td:last-child {
  color: #0A1420;
  font-weight: 600;
  text-align: right;
}
.ds-spec-table .ds-total-row td {
  border-top: 1.5px solid #0A1420;
  padding-top: 8px;
  font-weight: 700;
}
.ds-fin-note {
  font-size: 9.5px;
  color: #8291A6;
  margin-top: 8px;
  line-height: 1.35;
}
.ds-inspection-box {
  background: #F8FAFD;
  border: 1px solid #E2EAF3;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.ds-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  font-size: 11.5px;
  color: #0A1420;
}
.ds-audit-grid b { color: #07879A; }
.ds-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #E2EAF3;
}
.ds-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 16px;
}
.ds-sign-block {
  font-size: 11px;
}
.ds-sign-line {
  border-top: 1px dashed #A0B0C0;
  padding-top: 4px;
  color: #5B6675;
  font-size: 10px;
  margin-top: 24px;
}
.ds-sign-name {
  font-weight: 600;
  color: #0A1420;
}
.ds-foot-credits {
  font-family: var(--mono, monospace);
  font-size: 9px;
  color: #8291A6;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Dedicated Print Engine for Deal Sheet */
@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body > *:not(#dealSheetModal) {
    display: none !important;
  }
  #dealSheetModal {
    position: static !important;
    display: block !important;
    background: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #dealSheetModal .tru-dialog-modal {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .no-print, .tru-dialog-close, #btnPrintDealAction {
    display: none !important;
  }
}



/* Hide 360 viewer labels and chips as requested */
.orbit-label, .orbit-reset, .orbit-chips { display: none !important; }

/* --- App-like Enhancements --- */
@keyframes skeleton-pulse {
  0% { opacity: 1; background-color: rgba(232,234,230,0.05); }
  50% { opacity: 0.6; background-color: rgba(232,234,230,0.12); }
  100% { opacity: 1; background-color: rgba(232,234,230,0.05); }
}
.skeleton-loading {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  min-height: 300px;
  border-radius: 12px;
}
.orbit-hero:empty {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background-color: rgba(232,234,230,0.05);
}

@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 227, 220, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(79, 227, 220, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 227, 220, 0); }
}
.pulse-cta {
  animation: cta-pulse 2s infinite;
  animation-delay: 10s;
}

/* ### 1. Ken Burns Hero Animation */
/* Hero Ken Burns — slow zoom-pan on the hero image when no video is available */
@keyframes kenBurns {
  0%   { transform: scale(1)   translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -0.5%); }
  100% { transform: scale(1.04) translate(0.5%, 0.3%); }
}
.hero-media img.kb-active {
  animation: kenBurns 18s ease-in-out infinite alternate;
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img.kb-active { animation: none; }
}

/* ### 2. Scroll Parallax Depth */
/* Parallax depth layers */
.hero-media { will-change: transform; }
.parallax-layer { will-change: transform; transition: transform 0.1s linear; }
@media (prefers-reduced-motion: reduce) {
  .parallax-layer { will-change: auto; transition: none; }
}

/* ### 3. View Transitions API */
/* View Transitions — cross-page morphing */
.hero-media img, .hero-media video { view-transition-name: hero-car; }
.card-media img { view-transition-name: none; } /* assigned dynamically via JS */
::view-transition-old(hero-car),
::view-transition-new(hero-car) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-old(hero-car) {
  animation-name: vtFadeOut;
}
::view-transition-new(hero-car) {
  animation-name: vtFadeIn;
}
@keyframes vtFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
@keyframes vtFadeIn  { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* ### 4. Immersive VDP Gallery + Lightbox */
/* Immersive VDP Gallery */
.vdp-gallery-immersive {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--navy-950);
  margin-bottom: 28px;
}
.vdp-gallery-hero {
  width: 100%; height: 60vh; min-height: 360px; max-height: 600px;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.vdp-gallery-hero img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vdp-gallery-hero:hover img { transform: scale(1.03); }
.vdp-gallery-count {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(14, 26, 38, 0.8); backdrop-filter: blur(8px);
  color: #fff; font-family: var(--mono); font-size: 11px;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15);
}
.vdp-filmstrip {
  display: flex; gap: 6px; padding: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vdp-filmstrip::-webkit-scrollbar { display: none; }
.vdp-filmstrip-thumb {
  flex: 0 0 80px; height: 56px; border-radius: 10px;
  overflow: hidden; cursor: pointer; scroll-snap-align: start;
  border: 2px solid transparent; transition: all 0.2s;
  opacity: 0.65;
}
.vdp-filmstrip-thumb.is-active,
.vdp-filmstrip-thumb:hover {
  border-color: var(--teal); opacity: 1;
  box-shadow: 0 0 0 2px rgba(7, 135, 154, 0.3);
}
.vdp-filmstrip-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Lightbox */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14, 26, 38, 0.95); backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.gallery-lightbox.is-open { opacity: 1; pointer-events: auto; }
.gallery-lightbox img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  transition: transform 0.3s;
}
.gallery-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 20px; display: grid; place-items: center;
  cursor: pointer; transition: all 0.2s;
}
.gallery-lightbox-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.gallery-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 22px; display: grid; place-items: center;
  cursor: pointer; transition: all 0.2s;
}
.gallery-lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.gallery-lightbox-nav.prev { left: 20px; }
.gallery-lightbox-nav.next { right: 20px; }
.gallery-lightbox-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.7);
  background: rgba(14,26,38,0.6); padding: 6px 16px; border-radius: 100px;
}

/* ### 5. Animated VIR Gauge (SVG Ring) */
/* Animated VIR Ring Gauge */
.vir-ring-wrap {
  position: relative; width: 140px; height: 140px; flex-shrink: 0;
}
.vir-ring-svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
}
.vir-ring-bg {
  fill: none; stroke: rgba(14, 26, 38, 0.08); stroke-width: 10;
}
.vir-ring-fill {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke: url(#virGradient);
  transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.vir-ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.vir-ring-num {
  font-family: var(--serif); font-size: 42px; font-weight: 900;
  color: var(--ink); line-height: 1; letter-spacing: -0.03em;
}
.vir-ring-max {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
  .vir-ring-fill { transition: none; }
}

/* VIR category bar stagger animation */
.vir-cat-item .vir-progress-fill {
  transform-origin: left;
  animation: virBarGrow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}
.vir-cat-bars.is-visible .vir-progress-fill {
  animation-play-state: running;
}
.vir-cat-item:nth-child(1) .vir-progress-fill { animation-delay: 0.1s; }
.vir-cat-item:nth-child(2) .vir-progress-fill { animation-delay: 0.25s; }
.vir-cat-item:nth-child(3) .vir-progress-fill { animation-delay: 0.4s; }
.vir-cat-item:nth-child(4) .vir-progress-fill { animation-delay: 0.55s; }
.vir-cat-item:nth-child(5) .vir-progress-fill { animation-delay: 0.7s; }
@keyframes virBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ### 6. Sticky Deal Bar */
/* Sticky Deal Bar */
.sticky-deal-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(251, 248, 243, 0.85); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 24px rgba(14, 26, 38, 0.08);
}
.sticky-deal-bar.is-visible { transform: translateY(0); }
.sticky-deal-inner {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px;
}
.sticky-deal-title {
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.sticky-deal-price {
  font-family: var(--serif); font-size: 18px; font-weight: 900;
  color: var(--ink); white-space: nowrap;
}
.sticky-deal-monthly {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  white-space: nowrap;
}
.sticky-deal-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}
.sticky-deal-actions .btn { padding: 8px 16px; font-size: 12px; }
@media (max-width: 768px) {
  .sticky-deal-title { display: none; }
  .sticky-deal-inner { justify-content: space-between; }
}

/* ### 7. Saved/Recent Drawer */
/* Saved & Recently Viewed Drawer */
.saved-drawer-backdrop {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(14, 26, 38, 0.4); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.saved-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.saved-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 951;
  width: min(400px, 90vw); background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: -16px 0 48px rgba(14, 26, 38, 0.12);
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.saved-drawer-backdrop.is-open + .saved-drawer,
.saved-drawer.is-open { transform: translateX(0); }
.saved-drawer-head {
  padding: 20px 24px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
}
.saved-drawer-head h3 { margin: 0; font-size: 18px; }
.saved-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-dark); display: grid; place-items: center;
  font-size: 16px; cursor: pointer; transition: background 0.2s;
}
.saved-drawer-close:hover { background: rgba(14,26,38,0.1); }
.saved-drawer-tabs {
  display: flex; border-bottom: 1px solid var(--rule);
}
.saved-drawer-tab {
  flex: 1; padding: 12px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s;
}
.saved-drawer-tab.is-active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}
.saved-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px;
}
.saved-drawer-item {
  display: flex; gap: 12px; padding: 12px;
  border-radius: 14px; border: 1px solid var(--rule-soft);
  background: var(--bg-raised); margin-bottom: 10px;
  text-decoration: none; color: inherit; transition: all 0.2s;
}
.saved-drawer-item:hover {
  border-color: var(--accent-edge); background: var(--accent-surf);
  transform: translateX(-2px);
}
.saved-drawer-item img {
  width: 72px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.saved-drawer-item-info {
  flex: 1; min-width: 0;
}
.saved-drawer-item-title {
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saved-drawer-item-meta {
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
  margin-top: 2px;
}
.saved-drawer-item-price {
  font-family: var(--serif); font-size: 14px; font-weight: 900;
  color: var(--accent); margin-top: 4px;
}
.saved-badge {
  position: relative;
}
.saved-badge-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px;
  transform: scale(0); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.saved-badge-count.has-items { transform: scale(1); }
.saved-drawer-empty {
  text-align: center; padding: 48px 24px; color: var(--ink-mute);
}
.saved-drawer-empty svg {
  width: 48px; height: 48px; stroke: var(--ink-mute); margin-bottom: 16px; opacity: 0.4;
}

/* ### 8. Social Proof Ticker */
/* Social Proof Ticker */
.proof-ticker {
  overflow: hidden; padding: 14px 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  background: var(--bg-raised);
}
.proof-ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: proofScroll 22s linear infinite;
}
@keyframes proofScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.proof-ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-quiet); flex-shrink: 0;
}
.proof-ticker-item .proof-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-bright); box-shadow: 0 0 8px var(--teal-bright);
  flex-shrink: 0;
}
.proof-ticker-item b { color: var(--ink); font-weight: 600; }
.proof-ticker-item .proof-time {
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
}
@media (prefers-reduced-motion: reduce) {
  .proof-ticker-track { animation: none; overflow-x: auto; }
}

/* ### 9. Market Price Transparency Panel */
/* Market Price Transparency Panel */
.market-panel {
  background: var(--paper); border: 1.5px solid var(--accent-edge);
  border-radius: 20px; padding: 24px; margin-top: 20px;
  box-shadow: 0 12px 32px -8px rgba(7, 135, 154, 0.08);
}
.market-panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.market-panel-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.market-panel-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 100px;
}
/* tier colours on the brand palette — cyan reads "good" here, not green */
.market-panel-badge.great { background: rgba(7, 135, 154, 0.12); color: #056274; border: 1px solid rgba(7, 135, 154, 0.35); }
.market-panel-badge.fair  { background: rgba(212, 148, 42, 0.12); color: #A66A14; border: 1px solid rgba(212, 148, 42, 0.35); }
.market-panel-badge.above { background: rgba(185, 28, 28, 0.10); color: #B91C1C; border: 1px solid rgba(185, 28, 28, 0.3); }
[data-theme="dark"] .market-panel-badge.great { background: rgba(93, 233, 212, 0.12); color: #5DE9D4; border-color: rgba(93, 233, 212, 0.35); }
[data-theme="dark"] .market-panel-badge.fair  { background: rgba(212, 148, 42, 0.15); color: #E5B04C; border-color: rgba(229, 176, 76, 0.35); }
[data-theme="dark"] .market-panel-badge.above { background: rgba(185, 28, 28, 0.18); color: #F87171; border-color: rgba(248, 113, 113, 0.35); }
.market-bar-wrap {
  position: relative; height: 28px; background: rgba(14, 26, 38, 0.04);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.market-bar-fill {
  height: 100%; border-radius: 14px;
  /* same semantic sweep as the badges, on the brand palette */
  background: linear-gradient(90deg, #5DE9D4 0%, var(--teal) 45%, #D4942A 78%, #B91C1C 100%);
  position: relative;
}
.market-bar-marker {
  position: absolute; top: -4px; bottom: -4px; width: 4px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 3px var(--paper), 0 2px 8px rgba(0,0,0,0.3);
  transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.market-bar-label {
  font-family: var(--mono); font-size: 10px;
  position: absolute; top: -20px; transform: translateX(-50%);
  white-space: nowrap; color: var(--ink); font-weight: 700;
}
.market-comps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.market-comp {
  padding: 10px; border-radius: 10px; background: rgba(14, 26, 38, 0.03);
  border: 1px solid var(--rule-soft); text-align: center;
}
.market-comp-source {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
}
.market-comp-price {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink);
}
@media (max-width: 600px) {
  .market-comps { grid-template-columns: 1fr; }
}

/* ### 10. Micro-Interactions */
/* Micro-interactions — card 3D tilt */
.card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover {
  transform: perspective(800px) rotateY(1.5deg) rotateX(0.5deg) translateY(-4px);
  box-shadow: 0 20px 48px -12px rgba(14, 26, 38, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: translateY(-4px); }
}

/* Heart favourite bounce */
@keyframes heartBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.card-tools button[data-fav].is-on svg {
  fill: #ef4444; stroke: #ef4444;
  animation: heartBounce 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Button ripple */
.btn-primary { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0); animation: rippleOut 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* Filter chip elastic */
.filter-chip {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filter-chip.is-selected {
  transform: scale(1.05);
}
.filter-chip:active {
  transform: scale(0.95);
}

/* CountUp number reveal */
@keyframes countReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-reveal {
  animation: countReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ### 11. Dark Mode */
/* Dark Mode */
[data-theme="dark"] {
  --bg: var(--navy-950);
  --bg-raised: #16283A;
  --bg-inset: #12202E;
  --paper: #16283A;
  --cream: var(--navy-950);
  --parchment: #1D3348;
  --rule: rgba(255, 255, 255, 0.1);
  --rule-soft: rgba(255, 255, 255, 0.06);
  --ink: #F4F0E8;
  --ink-quiet: rgba(244, 240, 232, 0.72);
  --ink-mute: rgba(244, 240, 232, 0.45);
  --accent-surf: rgba(7, 135, 154, 0.15);
  --accent-edge: rgba(93, 233, 212, 0.3);
  --glass: rgba(22, 40, 58, 0.8);
  --glass-dark: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}
[data-theme="dark"] .topbar { background: #12202E; }
/* solid, sampled from the dark lockup's baked ground so the jpg edge never shows */
[data-theme="dark"] .site-header { background: #131B2A; }
[data-theme="dark"] .demo-ribbon { background: #16283A; color: rgba(244,240,232,0.7); }
[data-theme="dark"] .card { background: #16283A; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .card:hover { box-shadow: 0 20px 48px -12px rgba(0,0,0,0.4); }
[data-theme="dark"] .hero-scrim { background: linear-gradient(180deg, rgba(14,26,38,0.3) 0%, rgba(14,26,38,0.85) 100%); }
[data-theme="dark"] .search-rail { background: #12202E; }
[data-theme="dark"] .search-rail select,
[data-theme="dark"] .search-rail .go { border-color: rgba(255,255,255,0.15); color: #F4F0E8; background: rgba(255,255,255,0.06); }
[data-theme="dark"] select option,
[data-theme="dark"] .search-rail select option { background: #12202E !important; color: #F8FAFC !important; }
[data-theme="dark"] .panel,
[data-theme="dark"] .vir-full-card { background: #16283A; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .sticky-deal-bar { background: rgba(14,26,38,0.9); }
[data-theme="dark"] .proof-ticker { background: #12202E; }
[data-theme="dark"] .filters { background: #16283A; }
[data-theme="dark"] .filter-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(244,240,232,0.8); }
[data-theme="dark"] .filter-chip.is-selected { background: var(--accent); color: #fff; }
[data-theme="dark"] .market-panel { background: #16283A; }
[data-theme="dark"] .saved-drawer { background: #16283A; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .saved-drawer-item { background: #1D3348; border-color: rgba(255,255,255,0.06); }

/* Dark mode toggle button */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-dark); border: 1px solid var(--rule-soft);
  display: grid; place-items: center; cursor: pointer;
  transition: all 0.25s; color: var(--ink-mute);
}
.theme-toggle:hover { background: var(--accent-surf); color: var(--accent); border-color: var(--accent-edge); }
.theme-toggle svg { width: 16px; height: 16px; transition: transform 0.3s; }
[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }

/* ### 12. Skeleton Shimmer Loading */
/* Skeleton Shimmer Loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel {
  background: linear-gradient(90deg, var(--parchment) 25%, var(--sand) 50%, var(--parchment) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 12px;
}
.skel-card {
  border-radius: 20px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--rule-soft);
}
.skel-card-img { height: 200px; }
.skel-card-body { padding: 16px; }
.skel-line {
  height: 14px; border-radius: 7px; margin-bottom: 10px;
}
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-line.w40 { width: 40%; }
.skel-line.tall { height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ### 13. Enhanced Glass FAB Interactivity */
/* Stronger hover — teal border glow + lift */
.glass-fab:hover {
  border-color: var(--teal-bright, #5DE9D4);
  box-shadow: 0 12px 34px -8px rgba(7, 135, 154, 0.35),
              0 0 0 2px rgba(93, 233, 212, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-3px) scale(1.03);
}
/* Tap / active — quick scale-in bounce */
.glass-fab:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.1s;
}
/* Teal icon glow on hover */
.glass-fab:hover svg {
  stroke: var(--teal-bright, #5DE9D4);
  filter: drop-shadow(0 0 6px rgba(93, 233, 212, 0.5));
  transition: stroke 0.2s, filter 0.2s;
}
/* Staggered entrance — each FAB pops in with a slight delay */
@keyframes fabPopIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.glass-fab-dock .glass-fab,
.glass-fabs .glass-fab {
  animation: fabPopIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.glass-fab-dock .glass-fab:nth-child(1),
.glass-fabs .glass-fab:nth-child(1) { animation-delay: 0.1s; }
.glass-fab-dock .glass-fab:nth-child(2),
.glass-fabs .glass-fab:nth-child(2) { animation-delay: 0.25s; }
.glass-fab-dock .glass-fab:nth-child(3),
.glass-fabs .glass-fab:nth-child(3) { animation-delay: 0.4s; }
/* Touch device: show tap feedback */
@media (hover: none) {
  .glass-fab:active {
    background: linear-gradient(145deg, rgba(93, 233, 212, 0.2), rgba(7, 135, 154, 0.15));
    border-color: var(--teal-bright, #5DE9D4);
  }
}
/* Dark mode FABs */
[data-theme="dark"] .glass-fab {
  background: linear-gradient(145deg, rgba(22, 40, 58, 0.8), rgba(14, 26, 38, 0.6));
  border-color: rgba(93, 233, 212, 0.25);
  color: #F4F0E8;
}
[data-theme="dark"] .glass-fab:hover {
  background: linear-gradient(145deg, rgba(7, 135, 154, 0.25), rgba(22, 40, 58, 0.85));
  border-color: var(--teal-bright, #5DE9D4);
  box-shadow: 0 12px 34px -8px rgba(93, 233, 212, 0.2),
              0 0 0 2px rgba(93, 233, 212, 0.15);
}

/* ### 14. Enhanced Footer — Newsletter, Social, Trust Badges */
.footer-newsletter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 36px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(244, 240, 232, 0.08);
}
.footer-newsletter-text h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  color: var(--cream); margin: 0 0 6px;
}
.footer-newsletter-text p {
  font-size: 14px; color: rgba(244, 240, 232, 0.5); margin: 0;
  max-width: 36ch;
}
.fn-fields {
  display: flex; gap: 8px;
}
.fn-fields input {
  background: rgba(244, 240, 232, 0.06);
  border: 1px solid rgba(244, 240, 232, 0.15);
  border-radius: 12px; padding: 12px 18px;
  font-family: var(--sans); font-size: 14px; color: var(--cream);
  min-width: 220px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fn-fields input::placeholder { color: rgba(244, 240, 232, 0.3); }
.fn-fields input:focus {
  border-color: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(93, 233, 212, 0.15);
}
.fn-btn {
  background: var(--teal-bright, #5DE9D4); color: var(--navy-950);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  padding: 12px 24px; border-radius: 12px; border: none;
  cursor: pointer; white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.fn-btn:hover {
  background: #7CF0DE; transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(93, 233, 212, 0.4);
}
.fn-btn:active { transform: translateY(0) scale(0.97); }
.fn-ok {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--teal-bright);
  animation: countReveal 0.5s ease forwards;
}
@media (max-width: 640px) {
  .footer-newsletter { flex-direction: column; align-items: flex-start; }
  .fn-fields { flex-direction: column; width: 100%; }
  .fn-fields input { min-width: 0; width: 100%; }
}

/* Social icons row */
.footer-social {
  display: flex; gap: 10px; margin-top: 20px;
}
.footer-social-link {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(244, 240, 232, 0.12);
  color: rgba(244, 240, 232, 0.45);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-social-link:hover {
  color: var(--teal-bright); border-color: var(--teal-bright);
  background: rgba(93, 233, 212, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(93, 233, 212, 0.2);
}

/* Footer link hover arrow */
.footer-grid a {
  position: relative; padding-left: 0;
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.footer-grid a:hover { padding-left: 8px; }
.footer-grid a::before {
  content: "→"; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  opacity: 0; font-size: 11px; color: var(--teal-bright);
  transition: opacity 0.2s, left 0.25s;
}
.footer-grid a:hover::before { opacity: 1; left: -2px; }

/* Trust badges strip */
.footer-trust {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 24px 0; margin-top: 32px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
  border-bottom: 1px solid rgba(244, 240, 232, 0.08);
}
.footer-trust-badge {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
}
.footer-trust-badge svg { stroke: var(--teal-bright); flex-shrink: 0; }

/* "Powered by" credit in footer-note */
.footer-note a { transition: color 0.2s; }
.footer-note a:hover { color: #7CF0DE; }

/* Fix newsletter + CTA band text overlap with glass FABs on mobile */
@media (max-width: 860px) {
  .footer-newsletter-text,
  .footer-newsletter-text p,
  .cta-band h2 { padding-right: 90px; }
  .footer-lead { padding-right: 80px; }
  .footer-grid > div:first-child { grid-column: span 2; }
}

/* Dark mode: hero ticker + stats readability */
[data-theme="dark"] .hero-ticker {
  background: rgba(14, 26, 38, 0.88);
  border-top-color: rgba(244, 240, 232, 0.1);
}
[data-theme="dark"] .hero-ticker > div { border-left-color: rgba(244, 240, 232, 0.1); }
[data-theme="dark"] .hero-ticker b { color: var(--cream); }
[data-theme="dark"] .hero-ticker span { color: rgba(244, 240, 232, 0.5); }
[data-theme="dark"] .hero-facts { color: rgba(244, 240, 232, 0.8); }
[data-theme="dark"] .hero-meta { color: var(--cream); }

/* Dark mode: force CTA band + footer to keep cream text (they're always on dark bg) */
[data-theme="dark"] .cta-band h2 { color: #F4F0E8; }
[data-theme="dark"] .cta-band h2 em { color: var(--teal-bright); }
[data-theme="dark"] .site-footer { color: #F4F0E8; }
[data-theme="dark"] .footer-lead { color: rgba(244, 240, 232, 0.86); }
[data-theme="dark"] .footer-newsletter-text h3 { color: #F4F0E8; }

/* Dark mode: finance page + panels with dark text */
[data-theme="dark"] .fin-card,
[data-theme="dark"] .fin-panel,
[data-theme="dark"] .fin-breakdown { background: #16283A; border-color: rgba(255,255,255,0.1); color: #F4F0E8; }
[data-theme="dark"] .fin-card h3,
[data-theme="dark"] .fin-panel h3,
[data-theme="dark"] .fin-title { color: #F4F0E8; }
[data-theme="dark"] .fin-label { color: rgba(244,240,232,0.5); }
[data-theme="dark"] .fin-value { color: #F4F0E8; }
[data-theme="dark"] .fin-note { color: rgba(244,240,232,0.5); }

/* Dark mode: all panels, sections, and generic content */
[data-theme="dark"] .section { color: #F4F0E8; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #F4F0E8; }
[data-theme="dark"] p { color: rgba(244,240,232,0.78); }
[data-theme="dark"] .plate-no { color: rgba(244,240,232,0.45); }
[data-theme="dark"] .plate-title p { color: rgba(244,240,232,0.65); }

/* Sandbox launcher: remove emoji prefix from action buttons */
.hss-dual-actions .hss-action-btn { font-variant-emoji: text; }

/* Show only on small screens */
.show-sm { display: none; }
@media (max-width: 860px) {
  .show-sm { display: inline; }
}

/* Nav CTA + Subscribe + all outline buttons — premium gradient treatment */
.btn-outline {
  background: linear-gradient(135deg, var(--teal-bright, #5DE9D4) 0%, var(--teal-dark, #07879A) 100%);
  color: var(--navy-950, #0E1A26) !important;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 16px -4px rgba(7, 135, 154, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative; overflow: hidden;
}
.btn-outline::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.btn-outline:hover::before { transform: translateX(100%); }
.btn-outline:hover {
  background: linear-gradient(135deg, #7CF0DE 0%, #0A9DB3 100%) !important;
  border-color: transparent;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px -6px rgba(7, 135, 154, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-outline:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }

/* Subscribe button */
.fn-btn {
  background: linear-gradient(135deg, var(--teal-bright, #5DE9D4) 0%, var(--teal-dark, #07879A) 100%) !important;
  box-shadow: 0 4px 16px -4px rgba(7, 135, 154, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative; overflow: hidden;
}
.fn-btn:hover {
  background: linear-gradient(135deg, #7CF0DE 0%, #0A9DB3 100%) !important;
  box-shadow: 0 8px 28px -6px rgba(7, 135, 154, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Price badge — premium gradient treatment */
.price-badge.is-great {
  color: #0E1A26;
  background: linear-gradient(135deg, rgba(93, 233, 212, 0.25) 0%, rgba(7, 135, 154, 0.15) 100%);
  border-color: rgba(93, 233, 212, 0.4);
  box-shadow: 0 2px 8px -2px rgba(7, 135, 154, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* CTA band centre on mobile */
@media (max-width: 860px) {
  .cta-band .wrap { align-items: center; }
  .cta-band .btn-accent { align-self: center; }
  .footer-newsletter { align-items: center; text-align: center; }
  .footer-newsletter-text { text-align: center; }
  .fn-fields { justify-content: center; }
}


/* ==========================================================
   POLISH PASS (2026-08-31) — spacing · glass · rail · scroll
   ========================================================== */

/* ---- 1. spacing: kill the doubled section gap ---- */
.section + .section { padding-top: 0; }
main.section { padding-top: clamp(28px, 4vw, 56px); }

/* ---- 2. card body rhythm: clamp trim so short cards don't void ---- */
.card-trim {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* grid-hole filler tile (JS appends when span math leaves a void) */
.card-filler {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 180px;
  background: var(--bg-inset);
  border: 1px dashed var(--rule);
  border-radius: 14px;
  font-family: var(--serif);
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-quiet);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card-filler::after { content: "→"; font-family: var(--serif); transition: transform 0.3s ease; }
.card-filler:hover { color: var(--accent); border-color: var(--accent); }
.card-filler:hover::after { transform: translateX(5px); }

/* ---- 3. mobile body tiles: compact two-up ---- */
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  /* odd count: let the last tile take the row so no grey void cell */
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: 18px 16px; }
  .tile svg { width: 40px; height: 24px; margin-bottom: 10px; }
  .tile b { font-size: 17px; }
  .tile::after { right: 14px; top: 20px; }
}

/* ---- 4. mobile sticky bars: no overflow ---- */
@media (max-width: 480px) {
  .sticky-deal-monthly { display: none; }
  .sticky-deal-actions .btn { padding: 8px 12px; }
  .vdp-mobile-pm { display: none; }
  .vdp-mobile-btn { padding: 10px 12px; font-size: 12px; }
}

/* ---- 5. dark glass: tech badges get the dark recipe ---- */
[data-theme="dark"] .tru-tech-badge {
  background: linear-gradient(135deg, rgba(93, 233, 212, 0.10), rgba(22, 40, 58, 0.62));
  border-color: rgba(93, 233, 212, 0.28);
  color: var(--teal-bright);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .tru-tech-badge:hover,
[data-theme="dark"] .tru-tech-badge.is-open {
  background: rgba(29, 51, 72, 0.85);
  border-color: var(--teal-bright);
}
[data-theme="dark"] .tru-tech-badge span b { color: #F4F0E8; }

/* ---- 6. rail: icon-circles, label slides out on hover/focus ---- */
.glass-fab { padding: 0; justify-content: center; gap: 0; }
.glass-fab span {
  max-width: 0; opacity: 0; overflow: hidden;
  white-space: nowrap; margin-left: 0;
  transition: max-width 0.4s var(--ease), opacity 0.25s var(--ease), margin-left 0.4s var(--ease);
}
.glass-fab:hover, .glass-fab:focus-visible { padding: 0 20px 0 16px; justify-content: flex-start; }
.glass-fab:hover span, .glass-fab:focus-visible span { max-width: 110px; opacity: 1; margin-left: 10px; }
@media (max-width: 768px) {
  .glass-fab-dock, .glass-fabs { display: none; }
}

/* ---- 7. deal bar replaces the header on scroll ---- */
.site-header { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
body.deal-live .site-header { transform: translateY(-100%); }
.sticky-deal-bar { min-height: var(--header); display: flex; align-items: center; }

/* ---- 8. scroll progress hairline ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--teal-bright));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---- 9. anchor jumps clear the fixed chrome ---- */
.section, [id] { scroll-margin-top: calc(var(--header) + 16px); }

/* ---- 10. similar-cars: snap carousel on mobile ---- */
@media (max-width: 900px) {
  .similar-stock-wrap .card-grid,
  .similar-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .similar-stock-wrap .card-grid > .card,
  .similar-grid > .card { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ---- 11. widget attribution line ---- */
.widget-powered {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.widget-powered::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--teal-bright), var(--accent));
  flex-shrink: 0;
}

/* ---- 12. tech badges: touch + keyboard open the tip ---- */
.tru-tech-badge { cursor: pointer; }
.tru-tech-badge.is-open .tech-tip,
.tru-tech-badge:focus-visible .tech-tip {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ---- 14. supplied 3D lockup in the header ----
   Light: flood-keyed transparent PNG (white ground removed, interior chrome
   highlights kept). Dark: jpg on a solid #131B2A header sampled from its baked
   ground. Crop shows the wordmark band; the "Demo Site" tagline lives in the
   footer lockup instead. */
.brand-lockup {
  position: relative;
  width: 200px; height: 40px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-lockup img {
  position: absolute; left: 50%; top: 0;
  height: 134px; width: auto; max-width: none;
  transform: translateX(-50%);
  margin-top: -37px;
}
.brand-lockup .lockup-dark { display: none; }
[data-theme="dark"] .brand-lockup .lockup-light { display: none; }
[data-theme="dark"] .brand-lockup .lockup-dark {
  display: block;
  mix-blend-mode: normal;
}
/* footer runs the dark lockup full (tagline included) on its matched ground */
.footer-lockup img {
  display: block;
  height: 74px;
  width: auto;
}

/* ---- 13. reduced motion: freeze the new transitions too ---- */
@media (prefers-reduced-motion: reduce) {
  .site-header, .glass-fab span, .sticky-deal-bar { transition: none !important; }
  .scroll-progress { display: none; }
}