/* The Model Black design system v3: "the private office".
   White in the light, ink in the dark, never beige. Two type voices:
   Fraunces (a soft, editorial serif at light weights) for headlines and
   numbers, Inter for everything you read or click. The only color on the
   site is the metal in the wordmark (white, silver, gold); every other
   accent is silver or pure contrast (ink on white, white on ink). Rounded
   surfaces, hairline rules, photography does the talking. Prose always
   fills its container: no character caps, no truncation. */
:root {
  --bg: #ffffff;
  --bg-2: #f4f4f6;
  --panel: #ffffff;
  --panel-glass: rgba(255, 255, 255, .86);
  /* The specials strip's glass: a little more opaque than the nav's, so its dim labels ("Sponsored" and the rest) hold
     4.5:1 over the darkest content scrolled under it (Legal, 2026-09-28; scripts/test-market-surfaces.js works it out). */
  --strip-glass: rgba(255, 255, 255, .92);
  --line: rgba(10, 10, 12, .1);
  --line-strong: rgba(10, 10, 12, .26);
  --fg: #111214;
  --dim: #66686d;
  --acc: #111214;
  --acc-ink: #ffffff;
  --gold: #7c7f87;        /* "metal" accent on surfaces: silver, never gold or beige */
  --gold-2: #e6e7eb;      /* light silver fill (save pills) */
  --silver: #9a9ca3;
  --input-bg: #ffffff;
  --shadow: 0 12px 40px rgba(10, 10, 12, .08);
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .72) 100%);
  --logo-a: #111214;
  --logo-b: #8b8d94;
  --logo-c: #a4852f;      /* the one gold on the site: the wordmark sweep */
  --good: #2f7d4f;
  --warn: #b5541f;
  /* Squarer than round (Anne, 2026-09-23). */
  --r: 4px;
  --r-btn: 3px;
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  /* Legacy aliases: the earlier templates reference these names. */
  --asphalt: var(--bg);
  --asphalt-2: var(--bg-2);
  --white: var(--fg);
  --gray: var(--dim);
  --red: var(--acc);
  --red-hot: var(--gold);
  --yellow: var(--gold);
  --condensed: var(--body);
  --serif: var(--display);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0c0c0d;
  --bg-2: #111113;
  --panel: #161618;
  --panel-glass: rgba(14, 14, 16, .86);
  --strip-glass: rgba(14, 14, 16, .86);
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .3);
  --fg: #f1f1f3;
  --dim: #9c9da3;
  --acc: #f1f1f3;
  --acc-ink: #0c0c0d;
  --sheen-mid: #5a5a62;
  --gold: #b9bbc2;
  --gold-2: #2a2b30;
  --silver: #c4c5ca;
  --input-bg: #0f0f11;
  --shadow: 0 16px 48px rgba(0, 0, 0, .5);
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 100%);
  --logo-a: #ffffff;
  --logo-b: #b9b9b9;
  --logo-c: #d4b56a;
  --good: #7fc79a;
  --warn: #e0a05a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0d;
    --bg-2: #111113;
    --panel: #161618;
    --panel-glass: rgba(14, 14, 16, .86);
    --strip-glass: rgba(14, 14, 16, .86);
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .3);
    --fg: #f1f1f3;
    --dim: #9c9da3;
    --acc: #f1f1f3;
    --acc-ink: #0c0c0d;
    --sheen-mid: #5a5a62;
    --gold: #b9bbc2;
    --gold-2: #2a2b30;
    --silver: #c4c5ca;
    --input-bg: #0f0f11;
    --shadow: 0 16px 48px rgba(0, 0, 0, .5);
    --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 100%);
    --logo-a: #ffffff;
    --logo-b: #b9b9b9;
    --logo-c: #d4b56a;
    --good: #7fc79a;
    --warn: #e0a05a;
    color-scheme: dark;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
b, strong { font-weight: 600; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--gold-2); color: var(--fg); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
/* App pages (shop, vehicle, garage) grow with the browser. */
.wrap-wide { max-width: min(96vw, 1760px); }
@media (max-width: 640px) { .wrap, .wrap-wide { padding: 0 18px; } }

/* ---------- Type ---------- */
h1, h2, h3 { font-weight: 300; text-transform: none !important; letter-spacing: -0.02em; }
h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 66px); line-height: 1.04; font-variation-settings: 'opsz' 96; }
h2 { font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; margin-bottom: 16px; font-variation-settings: 'opsz' 72; }
h3 { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
h1 .redline, h2 .redline, .redline, h1 em, h2 em { font-style: normal; font-weight: 500; color: var(--fg); }
h1 .stroke { color: var(--dim); }
/* Secondary pages' titles and the paragraph under them, sized down (Anne, 2026-10-02: "The header information on secondary
   pages such as the inventory page, the brands, the text is too big. Size it down."). */
.h1-page { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.08; }
.kicker { font-family: var(--body); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); font-size: 12px; margin-bottom: 18px; }
.lead, .hero p.lead { margin-top: 22px; font-size: 19px; color: var(--dim); line-height: 1.6; }
.hero p.lead strong { color: var(--fg); font-weight: 500; }
.section-sub { color: var(--dim); font-size: 16.5px; line-height: 1.65; }
.hero-ctas { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: rounded, sentence case, contrast is the accent ---------- */
.btn, .dbtn, .dbtn-outline, .btn-outline {
  display: inline-block; box-sizing: border-box; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: 0; line-height: 1.2;
  padding: 14px 24px; border-radius: var(--r-btn); border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover, .dbtn:hover { transform: translateY(-1px); }
.btn-red, .dbtn { background: var(--acc); color: var(--acc-ink); }
.btn-red:hover, .dbtn:hover { box-shadow: var(--shadow); }
.btn-ghost, .dbtn-outline, .btn-outline { background: transparent; color: var(--fg); border-color: var(--line-strong); }
/* An element marked hidden stays hidden, whatever display its class gives it (a class rule outranks the browser's own
   [hidden] rule, which left a "hidden" second Concierge button on every model page; Anne, 2026-10-02). */
[hidden] { display: none !important; }
.btn-ghost:hover, .dbtn-outline:hover, .btn-outline:hover { border-color: var(--fg); }
.dbtn-outline.on { border-color: var(--fg); background: var(--bg-2); }
.btn-full { display: block; width: 100%; }
.btn-left { text-align: left; }
.dbtn[disabled], .btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn-sm { padding: 10px 16px; font-size: 13px; }

/* ---------- Wordmark: THEMODELBLACK, Anne's logo (2026-10-06): one word in Jost capitals, charcoal to silver to
   gold from left to right, the same on white and on ink. The other sheens (--logo-a/b/c) keep the site's metal. ---------- */
.logo {
  font-family: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: linear-gradient(90deg, #232326 0%, #5f6065 16%, #a9aaae 34%, #c8c4b6 50%, #d8c08a 66%, #e6bf5c 84%, #eec558 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.logo em { font-style: normal; }
/* The metal sweep the other sheens still use (the specials CTA, member pricing, "coming soon" labels). */
@keyframes logoSheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ---------- Nav ---------- */
nav { position: sticky; top: 0; z-index: 50; background: var(--panel-glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--dim); text-decoration: none; font-family: var(--body); font-weight: 500; font-size: 14px; transition: color .18s; white-space: nowrap; padding: 10px 0; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.cta { background: var(--acc); color: var(--acc-ink); padding: 10px 16px; border-radius: var(--r-btn); }
.nav-links a.cta:hover { color: var(--acc-ink); box-shadow: var(--shadow); }
/* The header's Instant Specials button (Anne, 2026-10-07): it lights up, with a live dot, while instant specials are running
   for the visitor (public/specials.js lightInstant). */
.nav-links a.cta-instant.lit { animation: bb-lit 2.4s ease-in-out infinite; }
.nav-links a.cta-instant.lit::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; animation: bb-lit-dot 1.6s ease-in-out infinite; }
@keyframes bb-lit { 0%, 100% { box-shadow: 0 0 6px 0 rgba(124, 127, 135, .35); } 50% { box-shadow: 0 0 0 3px rgba(124, 127, 135, .25), 0 0 18px 4px rgba(124, 127, 135, .55); } }
@keyframes bb-lit-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nav-links a.cta-instant.lit, .nav-links a.cta-instant.lit::before { animation: none; } .nav-links a.cta-instant.lit { box-shadow: 0 0 0 3px rgba(124, 127, 135, .35); } }
/* theme toggle (injected by theme.js) */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: border-color .18s, transform .3s; }
.theme-toggle:hover { border-color: var(--fg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: block; } :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: none; } }
/* Tablet widths: tighter row, the secondary links step out before anything overflows. Each step leaves room for
   the Concierge button, "My account", the CTA and the theme toggle on every page, so the row never runs off the screen. */
@media (max-width: 1652px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-links a.cta { padding: 9px 12px; }
}
@media (max-width: 1492px) {
  .nav-links a[href="/compare"], .nav-links a[href="/trade-in"] { display: none; }
}
@media (max-width: 1336px) {
  .nav-links a[href="/brands"], .nav-links a[href="/cities"], .nav-links a[href="/learn"], .nav-links a[href="/about"] { display: none; }
}
/* My garage steps out first in the full site nav (the one with the CTA; a short nav such as the account page's keeps
   it). It comes back in the phone sheet. */
@media (min-width: 946px) and (max-width: 1032px) { .nav-links:has(> a.cta) a[href="/account#gr-card"] { display: none; } }
/* Phones and tablets in portrait: wordmark, toggle and a Menu button stay in the bar; the links open as a sheet under it. */
.nav-menu { display: none; }
@media (max-width: 945px) {
  .nav-inner { height: 60px; gap: 8px; }
  .logo { font-size: 13px; letter-spacing: 0.04em; flex: 0 0 auto; }
  .nav-menu { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; color: var(--fg); font-family: var(--body); font-weight: 500; font-size: 13px; cursor: pointer; flex: 0 0 auto; margin-left: auto; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 14px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  nav.open .nav-links { display: flex; }
  .nav-links a, .nav-links a[href="/brands"], .nav-links a[href="/cities"], .nav-links a[href="/learn"], .nav-links a[href="/about"], .nav-links a[href="/compare"], .nav-links a[href="/trade-in"], .nav-links a:not(.cta):not(.keep) { display: block; font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; margin: 0; }
  .nav-links a.cta { margin-top: 10px; border: 0; border-radius: var(--r-btn); padding: 12px 16px; text-align: center; }
  .theme-toggle { width: 40px; height: 40px; }
}



/* ---------- Specials strip (injected by specials.js, under the nav): a quiet ticker of offers. It scrolls away with the
   page; only the nav stays at the top (Anne, 2026-10-05, decision D5). ---------- */
.offer-strip-wrap { position: relative; z-index: 49; border-bottom: 1px solid var(--line); background: var(--strip-glass); backdrop-filter: blur(14px); }
.offer-strip { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 44px; scrollbar-width: none; padding: 0 44px; }
.offer-strip::-webkit-scrollbar { display: none; }
.offer-mini { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 9px 22px 9px 0; margin-right: 22px; border-right: 1px solid var(--line); scroll-snap-align: start; min-width: 250px; transition: opacity .18s; }
.offer-mini:last-child { border-right: 0; }
.offer-mini:hover .om-t { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.om-img { width: 54px; height: 36px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: var(--bg-2); }
.om-copy { display: flex; flex-direction: column; line-height: 1.3; }
.om-tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.om-t { font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--fg); }
.om-disc { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; margin-top: 2px; cursor: pointer; }
.om-disc:hover { color: var(--fg); }
.strip-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-glass); backdrop-filter: blur(6px); color: var(--fg); cursor: pointer; font-size: 14px; line-height: 1; z-index: 2; display: flex; align-items: center; justify-content: center; transition: border-color .18s; }
.strip-arrow:hover { border-color: var(--fg); }
.strip-arrow.left { left: 8px; } .strip-arrow.right { right: 8px; }
@media (max-width: 640px) { .strip-arrow { display: none; } .offer-strip { padding: 0 18px; scroll-padding-inline: 18px; } .offer-mini { min-width: 230px; margin-right: 16px; padding-right: 16px; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 88px 0 72px; background: var(--bg); overflow: hidden; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
section.dark { background: var(--bg-2); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-head h2 { margin: 0; }
.sec-head .more { font-weight: 500; font-size: 14px; color: var(--dim); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.sec-head .more:hover { color: var(--fg); border-color: var(--fg); }

/* Safari paints a transformed child (the hover zoom) outside a rounded overflow:hidden box; a mask keeps it clipped. */
.deal-card, .action-tile, .tile, .gal-frame, .hero-photo, .conc-photo { -webkit-mask-image: -webkit-radial-gradient(#fff, #000); transform: translateZ(0); }
/* Editorial photo cards (the "deals" grid) */
.deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
/* The offer card (Anne, 2026-10-02: "The specials also have more room, the photo doesn't dominate it and the information is
   cleaner"): the photo on top at one shape, the words below on the card's own panel, one quiet link at the foot. The label
   row ("Sponsored · SUV lease") is the dim text on the panel: 5.6:1 in the light theme, 6.6:1 in the dark (Legal,
   2026-09-28: 4.5:1 or better; scripts/test-market-surfaces.js works it out). */
.deal-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--panel); border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.deal-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.deal-card .dc-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.deal-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.deal-card:hover img { transform: scale(1.03); }
.deal-card .dc-body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.deal-card .dc-tag { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); font-weight: 500; line-height: 1.5; }
.deal-card .dc-title { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; margin: 6px 0 2px; letter-spacing: -0.01em; color: var(--fg); }
.deal-card .dc-pay { font-family: var(--display); font-weight: 300; font-size: 25px; line-height: 1.25; margin-top: 4px; color: var(--fg); font-variant-numeric: tabular-nums; }
.deal-card .dc-pay small { font-family: var(--body); font-size: 13px; color: var(--dim); margin-left: 2px; }
.deal-card .dc-pay.pending { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--dim); }
.deal-card .dc-terms { font-size: 13px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.deal-card .dc-cta { align-self: flex-start; margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.deal-card .dc-cta::after { content: ''; display: block; height: 1px; margin-top: 3px; background: currentColor; transition: opacity .2s ease; opacity: .55; }
.deal-card:hover .dc-cta::after { opacity: 1; }
.deal-card .dc-disc { display: block; margin-top: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.deal-card .dc-disc:hover, .deal-card .dc-disc:focus-visible { color: var(--fg); }
.deal-card .dc-pay sup, .om-t sup, .sp-num sup { font-size: .6em; vertical-align: super; line-height: 0; margin-left: 1px; }

/* Six-tile action grid (Shop new, Lease, Finance, Delivery, Test drive, Trade) */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.action-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--bg-2); color: #fff; text-decoration: none; isolation: isolate; }
.action-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); z-index: -1; }
.action-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .8) 100%); }
.action-tile:hover img { transform: scale(1.04); }
.action-tile .at-copy { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.action-tile .at-label { display: flex; align-items: center; justify-content: space-between; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.action-tile .at-kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); font-weight: 500; line-height: 1.4; }
.action-tile .at-label svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s; }
.action-tile:hover .at-label svg { transform: translateX(4px); }

/* Bars: vehicle finder, trade, payment configurator (inline forms in a panel) */
.bar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow); }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bar-title { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
.bar-note { color: var(--dim); font-size: 13.5px; }
.bar-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.bar-row .zip-note[hidden] { display: none; }
.bar-row.cfg .field { display: flex; flex-direction: column; justify-content: flex-end; }
.bar-row .field { margin: 0; }
.bar-row label { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 6px; }
.bar-row input, .bar-row select { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--body); font-size: 15px; padding: 12px 12px; outline: none; -webkit-appearance: none; appearance: none; }
.bar-row select { padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.bar-row input:focus, .bar-row select:focus { border-color: var(--fg); }
.bar-row .btn, .bar-row .dbtn { width: 100%; padding: 13px 16px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bar-stack { display: grid; gap: 16px; }
.bar-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bar-result .big { font-family: var(--display); font-weight: 300; font-size: 34px; font-variant-numeric: tabular-nums; }
.bar-result .fine { color: var(--dim); font-size: 13px; }


/* ---------- Full-bleed showcase grid (home): edge to edge, three across, one gutter ---------- */
.bleed { width: auto; padding: 0 0 20px; }
.bleed-fine { padding: 0 20px; }
.bleed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 20px; margin-bottom: 20px; }
.bleed-grid > .action-tile { aspect-ratio: 16 / 9; border-radius: 6px; }
.bleed-grid > .action-tile .at-copy { left: 28px; right: 28px; bottom: 26px; }
.bleed-grid > .action-tile .at-label { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.bleed-grid > .action-tile::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 58%, rgba(0, 0, 0, .82) 100%); }
.action-tile .at-kicker { letter-spacing: .15em; color: rgba(255, 255, 255, .8); }
.bleed-grid > .action-tile .at-label svg { width: 22px; height: 22px; }
.bleed-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bleed-grid.four > .action-tile { aspect-ratio: 4 / 3; }
.bleed-grid.four > .action-tile .at-label { font-size: clamp(19px, 1.7vw, 23px); }
@media (max-width: 900px) { .bleed-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bleed-grid.four > .action-tile { aspect-ratio: 1 / 1.05; } .bleed-grid.four .at-kicker { display: none; } .bleed-grid.four > .action-tile .at-label { font-size: 17px; } }
.bleed-head { padding: 0 20px; margin: 26px 0 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bleed-head h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
.bleed-head .more { font-weight: 500; font-size: 14px; color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.bleed-head .more:hover { color: var(--fg); border-color: var(--fg); }
@media (max-width: 1100px) {
  .bleed-grid { gap: 14px; padding: 0 14px; margin-bottom: 14px; }
  .bleed-head, .bleed-fine { padding: 0 14px; }
  .bleed-grid > .action-tile .at-label { font-size: 22px; align-items: flex-end; }
  .bleed-grid > .action-tile .at-kicker { font-size: 11px; letter-spacing: .1em; }
  .bleed-grid > .action-tile .at-copy { left: 20px; right: 20px; bottom: 16px; }
}
@media (max-width: 900px) {
  /* Tablets: two across; the offer rows swipe so a row never breaks 2 + 1. */
  .bleed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bleed-grid.offers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .bleed-grid.offers::-webkit-scrollbar { display: none; }
  .bleed-grid.offers > .deal-card { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 900px) { .bleed-grid > .action-tile .at-label { font-size: 18px; } }
@media (max-width: 640px) {
  .bleed { padding-bottom: 12px; }
  .bleed-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 12px; margin-bottom: 12px; }
  .bleed-grid.offers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .bleed-grid.offers::-webkit-scrollbar { display: none; }
  .bleed-grid.offers > .deal-card { flex: 0 0 84%; scroll-snap-align: start; }
  .bleed-grid > .action-tile { aspect-ratio: 16 / 10; }
  .bleed-head, .bleed-fine { padding: 0 12px; }
}

/* Stat band */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 28px; }
.stat { background: var(--panel); padding: 26px 24px; }
.stat .big { font-family: var(--display); font-weight: 300; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat p { color: var(--dim); margin-top: 10px; font-size: 14.5px; line-height: 1.5; }

/* Number cards (the four factors) */
.grid4 { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.factor { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.factor .num { font-family: var(--display); font-weight: 300; font-size: 30px; color: var(--dim); line-height: 1; }
.factor h3 { font-size: 18px; margin: 14px 0 8px; }
.factor p { color: var(--dim); font-size: 14.5px; }

.dealer-strip { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 0; }
.dealer-strip p { color: var(--dim); font-size: 18px; }
.dealer-strip .btn { margin-top: 28px; }
.checklist { margin-top: 28px; display: grid; gap: 12px; }
.checklist li { list-style: none; font-size: 16px; padding-left: 26px; position: relative; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--fg); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; color: var(--dim); font-size: 14px; background: var(--bg); }
footer .foot-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--dim); }
.disclaimer { margin-top: 22px; font-size: 12.5px; line-height: 1.75; }
footer .disclaimer { columns: auto; max-width: none; text-align: left; }
footer .disclaimer ~ .disclaimer { columns: auto; text-align: left; }

/* ---------- Forms / panels ---------- */
.calc-shell { max-width: 900px; margin: 0 auto; padding: 60px 28px 120px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 34px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--dim); margin-bottom: 7px; }
.field label .req { color: var(--dim); }
.field input, .field select, .field textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--body); font-size: 16px; padding: 13px 14px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); }
.field input.err { border-color: var(--warn); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.form-error { display: none; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-btn); color: var(--fg); padding: 12px 16px; margin-bottom: 18px; }

/* Result (trade-in / calculators) */
.result { display: none; text-align: center; padding: 30px 0 8px; }
.result .r-label { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-size: 12px; }
.result .r-rate { font-family: var(--display); font-weight: 300; font-size: clamp(56px, 8vw, 96px); line-height: 1; color: var(--fg); margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.result .r-payment { font-family: var(--display); font-weight: 300; font-size: 30px; margin-top: 16px; }
.result .r-meta { margin-top: 18px; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: var(--dim); font-size: 13.5px; }
.result .r-meta b { color: var(--fg); font-weight: 500; }
.result .again { margin-top: 30px; }
.breakdown { max-width: 480px; margin: 30px auto 0; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 18px 22px; }
.bd-title { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-size: 11.5px; margin-bottom: 10px; }
.bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--dim); border-bottom: 1px solid var(--line); }
.bd-row b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.bd-total { border-top: 1px solid var(--fg); border-bottom: 0; margin-top: 6px; padding-top: 10px; }
.bd-total span { color: var(--fg); font-weight: 500; }

/* Gate */
.gate { max-width: 520px; margin: 0 auto; text-align: center; }
.gate h1 { font-size: clamp(32px, 5vw, 52px); }
.gate p { color: var(--dim); margin: 18px 0 30px; font-size: 16px; }
.gate input { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--display); text-align: center; letter-spacing: 0.3em; text-transform: uppercase; font-size: 22px; padding: 16px; outline: none; margin-bottom: 16px; }
.gate input:focus { border-color: var(--fg); }
.small-note { font-size: 12.5px; color: var(--dim); margin-top: 26px; line-height: 1.6; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.car, .g-card, .spec, .addon, .chip, .hv-chip, .car-cta, .car-save { transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; }
.car:hover, .g-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.car-img { position: relative; }
.car-img img, .g-img img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.car:hover .car-img img, .g-card:hover .g-img img { transform: scale(1.04); }
.sec-title { position: relative; padding-bottom: 8px; }
.sec-title::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--fg); transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.reveal.in.sec-title::after, .sec-title.in::after { width: 60px; }

/* Tags on photos */
.drop-ribbon, .featured-flag, .pc-flag { position: absolute; z-index: 4; font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.drop-ribbon { top: 12px; left: 12px; background: var(--acc); color: var(--acc-ink); }
.featured-flag { top: 12px; right: 12px; background: var(--panel-glass); color: var(--fg); border: 1px solid var(--line); }
.pc-flag { bottom: 12px; left: 12px; background: var(--acc); color: var(--acc-ink); }
.car.dropped { border-color: var(--line-strong); }
.was-price { color: var(--dim); font-size: 14px; text-decoration: line-through; margin-left: 6px; }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(0); } }
.drop-in { animation: dropIn .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .drop-in { animation: none; } }
.car.pc-pick { border-color: var(--line-strong); }

/* Photo placeholder */
.ph-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-2); position: relative; }
.ph-tile .ph-logo { font-family: 'Jost', 'Futura', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg); }
.ph-tile .ph-logo em { font-style: normal; color: var(--dim); }
.ph-tile .ph-msg { font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.gallery-main .ph-tile .ph-logo, .gal-frame .ph-tile .ph-logo { font-size: 24px; }

.spin { display: none; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--fg); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ZIP-first configurator on the home page. */
.bar .zip-note { font-family: var(--body); font-size: 12px; line-height: 1.4; color: var(--dim); margin-top: 6px; min-height: 1.2em; }
.bar .zip-note.warn { color: var(--warn); }

/* The move-forward button. The label stays solid (Anne, 2026-10-05, decision D6: a sheen through the letters washed them
   out); the logo's sheen crosses the button's face once as the page loads, and again on hover or keyboard focus. */
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen > span { color: inherit; font-weight: 500; }
.btn-sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%); background-size: 320% 100%; background-position: 100% 50%; animation: btnSweep 1.6s ease-in-out .4s 1 both; pointer-events: none; }
.btn-sheen:hover::after, .btn-sheen:focus-visible::after { animation: btnSweepAgain 1.1s ease-in-out 1 both; }
@keyframes btnSweep { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@keyframes btnSweepAgain { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn-sheen::after { animation: none; } }
/* Coming-soon mode (COMING_SOON=1): the car and the number are placeholders under a blur, and "Coming soon" sits over them in the logo's sheen. */
.soon-dim { opacity: .38; filter: grayscale(1); }
.soon-wrap { position: relative; display: inline-block; max-width: 100%; }
.soon-blur { filter: blur(6px); opacity: .55; user-select: none; pointer-events: none; }
.soon-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.deal-card .dc-soon { position: relative; }
.deal-card .dc-soon .dc-title, .deal-card .dc-soon .dc-pay { filter: blur(8px); opacity: .5; user-select: none; }
.deal-card .dc-soon .soon-over { font-size: 13px; letter-spacing: .18em; justify-content: flex-start; }
.cc-table.dc-soon .soon-over { font-size: 14px; letter-spacing: .2em; }
.bar-result.dc-soon { position: relative; }
.bar-result.dc-soon .soon-over { justify-content: flex-start; align-items: flex-start; padding-top: 2px; font-size: 14px; letter-spacing: .2em; }
.bar-result.dc-soon .big .soon-blur { filter: blur(7px); opacity: .45; }
.cc-table.dc-soon b.soon-blur { filter: blur(7px); opacity: .45; }
.soon-sheen { display: inline-block; font-family: var(--body); font-weight: 500; font-size: .8em; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(100deg, var(--logo-a) 0%, var(--logo-a) 30%, var(--logo-b) 48%, var(--logo-c) 62%, var(--logo-b) 76%, var(--logo-a) 100%); background-size: 320% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: logoSheen 6s ease-in-out infinite; white-space: nowrap; }
/* The offer card's panel takes the wordmark's own sweep, light or dark with the theme. */
.deal-card .dc-cta.soon { background-image: linear-gradient(100deg, var(--logo-a) 0%, var(--logo-a) 30%, var(--logo-b) 48%, var(--logo-c) 62%, var(--logo-b) 76%, var(--logo-a) 100%); background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: logoSheen 6s ease-in-out infinite; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.deal-card .dc-cta.soon::after { display: none; }
.om-t .soon-sheen { margin-left: 8px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .soon-sheen, .deal-card .dc-cta.soon { animation: none; } }

/* The Model Black Savings: the wordmark sweep across a whole line (label and amount), and the member gate.
   A gated line is one full-width bar, the light twin of the "Let's drive." button: pale face, square corners,
   the sweep in the text, a faint gold sheen crossing the face. The label sits left, "Login to view" right. */
.sheen-text { background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 30%, var(--logo-b) 48%, var(--logo-c) 62%, var(--logo-b) 76%, var(--fg) 100%); background-size: 320% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: logoSheen 6s ease-in-out infinite; font-weight: 500; }
.sheen-row > span, .sheen-row > b { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sheen-text { animation: none; color: var(--fg); -webkit-text-fill-color: var(--fg); background: none; } }
/* the bar */
.mem-bar, .deal-row:has(> b > .mem-login), .deal-total:has(> .t-num > .mem-login), .srp-gated { position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 4px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); box-shadow: 0 1px 2px rgba(10,10,12,.06), inset 0 1px 0 rgba(255,255,255,.7); transition: border-color .2s ease, box-shadow .2s ease; }
.mem-bar::after, .deal-row:has(> b > .mem-login)::after, .deal-total:has(> .t-num > .mem-login)::after, .srp-gated::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(164,133,47,.10) 50%, transparent 80%); background-size: 320% 100%; animation: logoSheen 6s ease-in-out infinite; pointer-events: none; }
.mem-bar:hover, .deal-row:has(> b > .mem-login):hover, .deal-total:has(> .t-num > .mem-login):hover, .srp-gated:hover { border-color: var(--logo-c); box-shadow: 0 4px 14px rgba(10,10,12,.10); }
/* the text inside: solid, always the body face (Anne, 2026-10-05, D6: "label stays solid"); the bar behind it keeps its glint */
.mem-login { display: inline-flex; align-items: center; cursor: pointer; user-select: none; font-family: var(--body) !important; font-weight: 500 !important; font-style: normal; font-size: 13px; letter-spacing: .02em; line-height: 1.2; }
.mem-login > span { color: var(--fg); }
.mem-login:focus-visible { outline: 1px solid var(--logo-c); outline-offset: 2px; }
/* a charge that lives inside the payment rather than at signing: shown, dimmed, not summed */
.deal-row.deal-info > span, .deal-row.deal-info > b { color: var(--dim); font-weight: 400; font-size: 14px; }
/* a gated figure that is simply withheld: grayed row, italic note, nothing to click */
.deal-row.deal-dim > span, .deal-row.deal-dim > b { color: var(--dim); font-weight: 400; }
.gated-note { font-style: italic; font-weight: 400; color: var(--dim); }
/* deal rows: the whole row is the bar */
.deal-row:has(> b > .mem-login) { padding: 13px 16px; margin: 6px 0; border-bottom: 1px solid var(--line-strong); }
.deal-row:has(> b > .mem-login) > span { color: var(--fg); font-weight: 500; }
.deal-row:has(> b > .mem-login) > span:not(.sheen-text) { color: var(--fg); }
/* the out-the-door total: same bar, larger */
.deal-total:has(> .t-num > .mem-login) { padding: 11px 16px; margin-top: 8px; align-items: center !important; }
.deal-total:has(> .t-num > .mem-login) .t-label, .deal-total:has(> .t-num > .mem-login) .t-num { line-height: 1; display: flex; align-items: center; }
.deal-total:has(> .t-num > .mem-login) .t-num { font-size: 14px; }
.deal-total:has(> .t-num > .mem-login) .mem-login { font-size: 14px; }
/* the big hero number and the rail figure: a full-width bar, centered, the height of "Let's drive." */
#p-num .mem-login, #r-pay .mem-login { display: flex; width: 100%; justify-content: center; padding: 14px 24px; font-size: 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); box-shadow: 0 1px 2px rgba(10,10,12,.06), inset 0 1px 0 rgba(255,255,255,.7); position: relative; overflow: hidden; }
#p-num .mem-login::after, #r-pay .mem-login::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(164,133,47,.10) 50%, transparent 80%); background-size: 320% 100%; animation: logoSheen 6s ease-in-out infinite; pointer-events: none; }
#p-num .mem-login:hover, #r-pay .mem-login:hover { border-color: var(--logo-c); box-shadow: 0 4px 14px rgba(10,10,12,.10); }
#p-num:has(.mem-login) { line-height: 1; }
/* inventory cards: the savings line becomes the bar across the card */
/* The shop and the vehicle page also load dealer.css, whose .srp-save paints a solid gold pill. The
   shorthand wipes the sheen gradient this chip clips its text to, and .sheen-text has already set the
   fill transparent, so the savings amount rendered as an empty bar on every card. Two classes outrank
   one, so the member's chip keeps its own paint wherever it lands. */
.srp-save.sheen-text { background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 30%, var(--logo-b) 48%, var(--logo-c) 62%, var(--logo-b) 76%, var(--fg) 100%); background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .srp-save.sheen-text { background: none; -webkit-text-fill-color: var(--fg); color: var(--fg); } }
.srp-save.srp-gated { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 12px; margin-top: 6px; border-radius: 4px; font-family: var(--body); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); }
.srp-gated .mem-login { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.srp-gated .sheen-text { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .mem-login > span, .mem-login::after, .mem-bar::after, .deal-row:has(> b > .mem-login)::after, .deal-total:has(> .t-num > .mem-login)::after, .srp-gated::after, .deal-row:has(> b > .mem-login) > span { animation: none; } }
.sheen-text { background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 30%, var(--logo-b) 48%, var(--logo-c) 62%, var(--logo-b) 76%, var(--fg) 100%); background-size: 320% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: logoSheen 6s ease-in-out infinite; font-weight: 500; }
.sheen-row > span, .sheen-row > b { font-weight: 500; }
.srp-gated { display: inline-flex; gap: 6px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .sheen-text { animation: none; color: var(--fg); -webkit-text-fill-color: var(--fg); background: none; } }
.mem-bg { display: none; position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.mem-bg.on { display: flex; }
html.mem-open { overflow: hidden; }
.mem-box { position: relative; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-top: 3px solid var(--logo-c); border-radius: var(--r); box-shadow: var(--shadow); max-width: 460px; width: 100%; padding: 30px; max-height: 90vh; overflow-y: auto; }
.mem-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--dim); font-size: 24px; cursor: pointer; line-height: 1; }
.mem-k { font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.mem-box h3 { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 8px; }
.mem-box h3 .sheen-text { font-weight: 400; }
.mem-p { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.mem-p b { color: var(--fg); font-weight: 500; }
.mem-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mem-in { flex: 1 1 200px; min-width: 0; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--body); font-size: 16px; padding: 13px 14px; outline: none; }
.mem-in:focus { border-color: var(--fg); }
.mem-form .btn { flex: 0 0 auto; }
/* The email step stacks its fields, so a flex-basis would be read as a height and blow the box up. */
.mem-form[data-form="email"] > .mem-in { flex: 0 0 auto; }
.mem-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mem-msg { display: none; margin-top: 10px; font-size: 14px; color: var(--dim); }
.mem-msg.on { display: block; }
.mem-fine { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 16px 0 0; }
.mem-fine a { color: var(--fg); }

/* Talk to a human: call and text, filled from /api/site-config once the line is live. */
.talk { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); padding: 22px 26px; margin: 0 0 28px; }
.talk-h { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--fg); }
.talk-p { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 640px; }
.talk-p a { color: var(--fg); }
.talk-hours { color: var(--dim); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.talk-hl { font-family: var(--body); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-right: 8px; }
.talk-copy { flex: 1 1 420px; }
.talk-btns { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.talk-btn { display: inline-block; text-decoration: none; font-family: var(--body); font-weight: 500; font-size: 14px; line-height: 1.2; padding: 12px 20px; border-radius: var(--r-btn); background: var(--acc); color: var(--acc-ink); border: 1px solid var(--acc); white-space: nowrap; }
.talk-btn.ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.talk-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.talk.live [data-num]::before { content: ' '; }
@media (max-width: 640px) { .talk { padding: 18px; } .talk-btns { width: 100%; } .talk-btn { flex: 1; text-align: center; } }

/* Social glyphs in the footer link row */
footer .disclaimer a.soc { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
footer .disclaimer a.soc svg { display: block; }

.talk-link { color: var(--fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.talk-link:hover { text-decoration-color: var(--fg); }
.talk-link[aria-disabled="true"] { color: var(--dim); opacity: .5; text-decoration: none; pointer-events: none; cursor: default; }
.talk-sep { color: var(--line-strong); margin: 0 4px; }
.talk-link.soc { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }

/* ---------- Booking widget (public/booking.js): month grid, times, form ---------- */
.bk { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 22px; }
.bk-type { font-size: 14px; color: var(--dim); margin-bottom: 14px; }
.bk-type b { color: var(--fg); font-weight: 500; }
.bk-cols { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 640px) { .bk-cols { grid-template-columns: 1fr; } }
.bk-mh { display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.bk-nav { background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--fg); width: 32px; height: 32px; cursor: pointer; }
.bk-nav:hover { border-color: var(--fg); }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow { text-align: center; font-size: 11px; letter-spacing: .1em; color: var(--dim); padding: 4px 0; }
.bk-day { height: 38px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--dim); font-family: var(--body); font-size: 14px; cursor: default; opacity: .45; }
.bk-day.open { color: var(--fg); border-color: var(--line-strong); cursor: pointer; opacity: 1; }
.bk-day.open:hover { border-color: var(--fg); }
.bk-day.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.bk-tz { font-size: 12px; color: var(--dim); margin-top: 8px; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.bk-slot { border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; color: var(--fg); font-family: var(--body); font-size: 14px; padding: 10px 6px; cursor: pointer; }
.bk-slot:hover { border-color: var(--fg); }
.bk-slot.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.bk-form { margin-top: 20px; display: grid; gap: 12px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .bk-row { grid-template-columns: 1fr; } }
.bk-form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.bk-form input, .bk-form textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--fg); font-family: var(--body); font-size: 15px; padding: 12px 13px; outline: none; letter-spacing: 0; text-transform: none; }
.bk-form input:focus, .bk-form textarea:focus { border-color: var(--fg); }
.bk-form .btn { justify-self: start; }
.bk-msg { margin-top: 12px; color: var(--warn); font-size: 14px; }
.bk-fine { font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 8px; }
.bk-done .bk-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.bk-done h3 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 8px 0 10px; }
.bk-done p { color: var(--dim); line-height: 1.6; }

/* ---------- Deal watches on the member profile ---------- */
.wt-item { border: 1px solid var(--line-strong); border-radius: 4px; padding: 16px 18px; margin-bottom: 12px; background: var(--panel); }
.wt-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.wt-head .m { color: var(--dim); font-size: 13px; margin-top: 4px; }
.wt-matches { margin-top: 12px; border-top: 1px solid var(--line); }
.wt-match { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wt-match:last-child { border-bottom: 0; }
.wt-match .m { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
.wt-good { color: var(--good, #2e7d5b); }
.wt-over { color: var(--dim); }

/* ---------- Brand chips on the member profile ---------- */
.chipbox { display: flex; flex-wrap: wrap; gap: 8px; min-height: 26px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 8px 5px 12px; }
.chip button { border: 0; background: transparent; color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.chip button:hover { color: var(--fg); }

/* Every box wears the wordmark's sweep on its edge, the way the state tiles do
   (Anne, 2026-09-23): white or black into silver into gold, travelling on a
   loop. The fill stays the box's own (--sheen-fill); body raises specificity
   over each page's own box rule. */
:root { --sheen-edge: linear-gradient(100deg, var(--logo-a) 0%, var(--logo-a) 26%, var(--logo-b) 44%, var(--logo-c) 58%, var(--logo-b) 72%, var(--logo-a) 100%); }
@keyframes bbSheen { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } }
body :is(.tv-form, .tv-retail > div, .tv-note, .bar, .factor, .panel, .breakdown, .bk, .mb-card, .learn-tile, .rule-strip, .fact, .sp-card, .g-card, .model-card, .alt-card, .dealcard, .pay-card, .city-tile, .onboard-card, .sg-card, .wt-item, .mem-box),
body.consumer :is(.pcard, .tv, .tv-retail > div) {
  border-color: transparent;
  background: linear-gradient(var(--sheen-fill, var(--panel)), var(--sheen-fill, var(--panel))) padding-box, var(--sheen-edge) border-box;
  background-size: 100% 100%, 320% 100%;
  animation: bbSheen 7s ease-in-out infinite;
}
body :is(.tv-note, .rule-strip, .dealcard) { --sheen-fill: var(--bg-2); }
@media (prefers-reduced-motion: reduce) { body :is(.tv-form, .tv-retail > div, .tv-note, .bar, .factor, .panel, .breakdown, .bk, .mb-card, .learn-tile, .rule-strip, .fact, .sp-card, .g-card, .model-card, .alt-card, .dealcard, .pay-card, .city-tile, .onboard-card, .sg-card, .wt-item, .mem-box), body.consumer :is(.pcard, .tv, .tv-retail > div) { animation: none; } }
/* Asterisks that jump to the fine print at the bottom of the page (Anne, 2026-09-28). */
.fn-ast { cursor: pointer; color: inherit; text-decoration: none; vertical-align: super; font-size: .72em; line-height: 0; margin-left: 1px; }
.fn-ast:hover, .fn-ast:focus-visible { opacity: .7; }
/* Land below the sticky nav and offer strip when an asterisk jumps down. */
#fine-print, #fine-print > [id] { scroll-margin-top: 150px; }
/* The pointer near a page's first payment (Legal, 2026-09-28: FTC .com Disclosures; a bare asterisk alone is weak). */
.fn-cue { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.fn-cue a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Every note in the fine print reads at the footer's size and colour, whatever class it carried from the page. */
#fine-print > * { font-size: 12.5px !important; line-height: 1.75 !important; color: var(--dim) !important; opacity: 1 !important; }