/* ─────────────────────────────────────────────────────────────────────────
   EntryLane marketing site — "Tarmac Spec"
   Built from the Stitch design (DESIGN.md + code.html): layered dark
   surfaces with no hairline borders, small 4/8/12px radii, Space Grotesk
   display, Chivo body, JetBrains Mono telemetry labels, one accent plus a
   secondary. The EntryLane wordmark (ENTRY + LANE.) and the tachometer
   carry over from the original site.

   Three schemes share every rule below; only these tokens change:
   <html data-scheme="orange|blue|purple">.
   ───────────────────────────────────────────────────────────────────────── */

/* Scheme tokens (orange / blue / purple) live in css/tarmac-tokens.css. */

:root {
  --bad: #ffb4ab;
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Chivo', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --wrap: 1280px;
  --pad: clamp(16px, 3vw, 32px);
  --hdr: 76px;
  /* Motion. Entrances ease out hard (expo); state changes ease out (quint);
     feedback is near-instant. Exits run shorter than entrances. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d-base: 250ms;
  --d-slow: 450ms;
  --d-enter: 650ms;
}

* { box-sizing: border-box; }
/* No document-wide smooth scrolling: scripted and assistive jumps land at
   once (they used to animate for a second, during which screen readers and
   tooling saw headings under the bar). In-page links glide via script. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }
strong { color: var(--text); font-weight: 700; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hidden { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
/* Icons are inline SVG from the sprite at the top of <body>; they size by
   font-size like the glyphs they replaced, and take colour from the text. */
.mi { display: inline-block; width: 1em; height: 1em; font-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; overflow: visible; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.6rem 1rem; z-index: 999; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Type roles (DESIGN.md scale, nudged up for legibility) */
.t-code { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; }
.t-tel  { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; }
.t-stat { font-family: var(--f-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

.c-soft { color: var(--soft); } .c-soft2 { color: var(--soft-2); } .c-pale { color: var(--pale); } .c-bad { color: var(--bad); } .c-var { color: var(--variant); }

/* Wordmark — carried over from the live brand */
.kw { font-family: 'Bebas Neue', 'Bebas Fallback', sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.02em; color: var(--text); text-decoration: none; white-space: nowrap; line-height: 1; }
.kw b { font-weight: 400; color: var(--accent); }
.kw b::after { content: "."; }

/* Pills / dots */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; display: inline-block; }

.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-sm); background: var(--glow-lo); color: var(--pale); }
.tag.grey { background: var(--highest); color: var(--variant); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; transition: background var(--d-fast), box-shadow 0.2s, color var(--d-fast), filter var(--d-fast), transform var(--d-fast) var(--ease-out); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.1); }
/* Press: the plate sits down a pixel and darkens, at once. */
.btn:active { transform: translateY(1px); filter: brightness(0.94); transition-duration: 60ms; }
/* Busy (a form is sending): the arrow becomes a turning ring and the
   button stops taking clicks until the request answers. */
.btn.is-busy { pointer-events: none; filter: brightness(0.9); }
.btn.is-busy .arrow { border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; transform: none; animation: btn-spin 0.7s linear infinite; }
.btn.is-busy .arrow use { display: none; }
@keyframes btn-spin { to { rotate: 360deg; } }
.btn.is-sent .arrow { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn.is-busy .arrow { animation: none; border-style: dotted; } .btn:active { transform: none; } }
.btn-quiet { background: var(--cont); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.btn-quiet:hover { background: var(--high); }
html[data-mode="light"] .btn-quiet { box-shadow: inset 0 0 0 1px var(--highest); }

.btn-flat { background: var(--high); color: var(--text); width: 100%; }
.btn-flat:hover { background: var(--highest); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.link .mi { font-size: 16px; }

/* ── Header ── */
/* Fixed bar, fully opaque (the scheme's bar tint over its darkest surface)
   and on its own compositing layer: iOS Safari otherwise lets blurred
   content scrolling underneath paint through or over it. ::before extends
   the bar upward so an overscroll bounce at the top shows bar, not page. */
.hdr { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; background-color: var(--lowest); background-image: linear-gradient(var(--hdr-bg), var(--hdr-bg)); box-shadow: 0 4px 20px rgba(0,0,0,0.65); transform: translateZ(0); backface-visibility: hidden; isolation: isolate; }
/* Nothing on the page may stack above the bar: every other layer stays
   below 100 (dock 90, drawer 99); only dialogs (300+) and the colour
   switcher panel, which opens upward from the bottom corner, sit higher. */
.hdr::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: inherit; pointer-events: none; }
.hdr-in { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr-l { display: flex; align-items: center; gap: 20px; }
.hdr-status { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: var(--low); border-radius: 999px; color: var(--variant); white-space: nowrap; }
@media (min-width: 1680px) { .hdr-status { display: inline-flex; } }
.hdr-nav { display: flex; align-items: center; gap: 2px; }
.hdr-nav a, .hdr-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--variant); text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.hdr-nav a:hover, .hdr-quiet:hover { color: var(--text); background: var(--high); }
.hdr-nav a.is-active { color: var(--text); background: var(--cont); }
.hdr-r { display: flex; align-items: center; gap: 4px; }
.hdr-r .btn { margin-left: 8px; }
.hdr-menu { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: var(--high); color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.drawer { display: none; }
/* Below 1340px the quiet links leave the bar, so the menu (which carries
   them) appears at the same width; below 1000px the nav joins it. */
@media (max-width: 1340px) {
  .hdr-quiet { display: none; }
  .hdr-menu { display: inline-flex; }
  .drawer { display: block; position: fixed; z-index: 99; inset: var(--hdr) 0 auto 0; background: var(--lowest); box-shadow: 0 20px 40px rgba(0,0,0,0.6); padding: 8px var(--pad) 16px; transform: translateY(-110%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s; }
  .drawer.is-open { transform: none; visibility: visible; }
  .drawer a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 12px; color: var(--text); text-decoration: none; border-radius: var(--r-sm); font-family: var(--f-display); font-weight: 600; font-size: 18px; }
  .drawer a:hover { background: var(--high); }
  .drawer a span { color: var(--muted); }
}
@media (max-width: 1080px) { .hdr-nav { display: none; } }
@media (min-width: 1081px) { .drawer .dr-nav { display: none !important; } }
/* Phones keep a short label on the header CTA instead of a bare arrow. */
.hdr-r .btn .lbl-short { display: none; }
@media (max-width: 480px) { .hdr-r .btn .lbl-long { display: none; } .hdr-r .btn .lbl-short { display: inline; } .hdr-r .btn { padding: 0 14px; } }

main { padding-top: var(--hdr); }

/* Section scaffolding: alternating surfaces, no hairlines */
.sec { padding: clamp(40px, 3.4vw, 44px) 0; }
/* One continuous page background: sections are set apart by rhythm and by
   their cards, never by color bands (even faded bands read as stripes). */
/* Section backdrops: each section sits on a soft glow behind its content,
   built from radial gradients that fade to transparent on every side, so
   they set the area apart without a horizontal band edge. Sides alternate
   down the page; the accent tint stays faint so it reads as light, not
   color. */
.sec { position: relative; isolation: isolate; }
.sec::before {
  content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 48% at var(--glow-x, 20%) 38%, rgba(var(--accent-rgb), var(--glow-a, 0.14)), transparent 72%),
    radial-gradient(ellipse 70% 55% at 50% 55%, color-mix(in srgb, var(--cont) 85%, transparent), transparent 74%);
}
.sec:nth-of-type(even) { --glow-x: 82%; }
.bg-cont { --glow-a: 0.18; }
.bg-lowest { --glow-a: 0.11; }
html[data-mode="light"] .sec::before {
  background:
    radial-gradient(ellipse 55% 48% at var(--glow-x, 20%) 38%, rgba(var(--accent-rgb), calc(var(--glow-a, 0.10) * 0.7)), transparent 72%),
    radial-gradient(ellipse 70% 55% at 50% 55%, color-mix(in srgb, var(--high) 70%, transparent), transparent 74%);
}
.final::before { --glow-x: 50%; }
.sec-head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.sec-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sec-head.center { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.sec-head p { margin-top: 14px; max-width: 64ch; color: var(--variant); font-size: 18px; line-height: 1.6; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

/* Scroll reveal, lists only. The steps, the two deal cards, the tiers, the
   FAQ rows, the guides and the event cards under the map rise in one after
   another as they enter (the script tags each .rv and adds .in; --d is the
   item's place in the batch, capped so a long list never waits). Headings
   and single panels are simply there: the page never goes blank on arrival.
   Uses the translate property and an animation, so the cards' own hover
   transform/transition stay untouched. No script, no .rv: content shows. */
html.js .rv { opacity: 0; }
html.js .rv.in { animation: rv-rise var(--d-enter) var(--ease-out-expo) both; animation-delay: calc(min(var(--d, 0), 7) * 70ms); }
@keyframes rv-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; } html.js .rv.in { animation: none; } }

/* ── Hero ── */
.hero { position: relative; isolation: isolate; padding: clamp(28px, 4vw, 48px) 0 clamp(36px, 3.4vw, 44px); }
/* Carbon-fiber band behind the hero, as on the original site: the carbon
   photo, angled pinstripes and a dark overlay, with the scheme's accent
   glowing from the top corner. It fades into the page at its foot, so
   there is no hard edge. Light mode swaps in white forged carbon (below). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 88% 8%, rgba(var(--accent-rgb), 0.30), transparent 70%),
    radial-gradient(ellipse 40% 50% at 6% 70%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    linear-gradient(115deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.66) 58%, rgba(10,10,11,0.45) 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.06) 38px 40px),
    url('/images/hero-carbon-1600.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}
@media (max-width: 760px) {
  .hero::before { background-image:
    radial-gradient(ellipse 55% 60% at 88% 8%, rgba(var(--accent-rgb), 0.30), transparent 70%),
    radial-gradient(ellipse 40% 50% at 6% 70%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    linear-gradient(115deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.66) 58%, rgba(10,10,11,0.45) 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.06) 38px 40px),
    url('/images/hero-carbon-900.webp'); }
}
/* Light mode: white forged carbon instead of the dark band
   (images/hero-forged-light*.jpg, chopped strands in pale greys), fading in
   from the top behind a soft wash of the page surface, with the scheme's
   accent warming one corner. The hero text keeps the day ink. */
html[data-mode="light"] .hero::before {
  background:
    radial-gradient(ellipse 55% 60% at 90% 4%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(ellipse 45% 55% at 4% 78%, rgba(var(--accent-rgb), 0.07), transparent 70%),
    linear-gradient(115deg, color-mix(in srgb, var(--surface) 72%, transparent) 0%, color-mix(in srgb, var(--surface) 30%, transparent) 55%, transparent 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
    url('/images/hero-forged-light-1600.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
@media (max-width: 760px) {
  html[data-mode="light"] .hero::before { background-image:
    radial-gradient(ellipse 55% 60% at 90% 4%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(ellipse 45% 55% at 4% 78%, rgba(var(--accent-rgb), 0.07), transparent 70%),
    linear-gradient(115deg, color-mix(in srgb, var(--surface) 72%, transparent) 0%, color-mix(in srgb, var(--surface) 30%, transparent) 55%, transparent 100%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(var(--accent-rgb), 0.05) 38px 40px),
    url('/images/hero-forged-light-900.webp'); }
}

.hero-in { position: relative; }
.hero-pre { margin-bottom: 18px; color: var(--variant); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 20px; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 { color: var(--accent-text); padding-bottom: 0.04em; }
.hero-lede { max-width: 42rem; font-size: 18px; line-height: 1.6; color: var(--variant); margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.badge { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--low); border-radius: var(--r-sm); color: var(--text); font-family: var(--f-body); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.badge .mi { font-size: 20px; color: var(--accent-text) !important; }

/* Headline motion: line 1's letters land in sequence on load; line 2 wipes
   on once in solid accent. No loops. */
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; }
html.js .hero h1 .ch { opacity: 0; animation: slam 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) forwards; animation-delay: calc(0.08s + var(--i) * 0.03s); }
@keyframes slam { 0% { opacity: 0; transform: translateY(0.45em) skewX(-14deg); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); transform: translateY(-0.03em) skewX(3deg); } 100% { opacity: 1; transform: none; filter: none; } }
html.js .hero h1 .l2 { clip-path: inset(0 100% 0 0); animation: wipe 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards; }
@keyframes wipe { to { clip-path: inset(-10% -5% -10% 0); } }

/* The rest of the hero follows the headline in one sequence: the pre-line
   fades up first, then once line 2 has wiped on, the lede, the buttons and
   the badges rise in turn, while the photo panel settles in beside them
   and its entry card lifts into place last. Nothing loops. */
html.js .hero-pre { animation: hero-fade var(--d-slow) var(--ease-out) both; }
html.js .hero-lede, html.js .hero-cta, html.js .badges { animation: hero-rise var(--d-enter) var(--ease-out-expo) both; }
html.js .hero-lede { animation-delay: 0.6s; }
html.js .hero-cta { animation-delay: 0.72s; }
html.js .badges { animation-delay: 0.84s; }
html.js .panel { animation: panel-in 0.9s var(--ease-out-expo) 0.3s both; }
html.js .dash { animation: dash-in 0.7s var(--ease-out-expo) 0.85s both; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes panel-in { from { opacity: 0; scale: 0.985; } to { opacity: 1; scale: none; } }
@keyframes dash-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .ch { animation: none; opacity: 1; }
  html.js .hero h1 .l2 { animation: none; clip-path: none; }
  html.js :is(.hero-pre, .hero-lede, .hero-cta, .badges, .panel, .dash) { animation: none; }
}

/* Hero panel: photo backplate with the arrows and the dash card,
   all contained inside the panel so nothing can overflow or clip. */
.panel { position: relative; height: 500px; border-radius: var(--r-md); overflow: hidden; background: var(--low); }
.panel-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
/* Cross-fade without the dip: the new photo fades in above the old one,
   which stays opaque underneath until the script drops is-prev. */
.panel-img.is-prev { opacity: 1; z-index: 1; transition: none; }
.panel-img.is-on { opacity: 1; z-index: 2; }
/* isolation keeps the photos' z-order inside this layer, under the arrows and dash. */
.panel-photos { position: absolute; inset: 0; isolation: isolate; }
.panel-nav { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: rgba(14,14,16,0.9); }
.panel-btn { width: 44px; height: 44px; border: 0; border-radius: 3px; background: transparent; color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s; }
.panel-btn:hover { background: var(--high); }
.panel-count { min-width: 44px; text-align: center; color: var(--variant); font-size: 11px; }
/* Automatic rotation (platform admin): no arrows and no counter chip. */
.panel.is-auto .panel-nav { display: none; }
.dash .swap { animation: dash-swap 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dash-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash .swap { animation: none; } }
@media (prefers-reduced-motion: reduce) { .panel-img { transition: none; } }

.panel-shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--lowest) 0%, color-mix(in srgb, var(--lowest) 75%, transparent) 30%, color-mix(in srgb, var(--lowest) 35%, transparent) 55%, transparent 80%); }


.dash { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px; border-radius: var(--r-sm); background: var(--dash); box-shadow: 0 10px 30px rgba(0,0,0,0.9); }
.dash-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px; margin-bottom: 10px; border-radius: var(--r-sm); background: var(--cont); }
#dash-from[hidden] { display: none; }
.dash-car { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.2; text-transform: uppercase; color: var(--text); margin: 4px 0 0; text-wrap: balance; }
.dash-class { font-size: 14px; color: var(--variant); }
/* Instagram link where the decorative QR used to sit; shown only for a car
   whose owner gave a handle (platform admin, Homepage cars). */
.dash-ig { position: relative; z-index: 3; touch-action: manipulation; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); background: var(--accent); color: #fff; border: 1px solid var(--accent); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; }
.dash-ig .mi { width: 30px; height: 30px; stroke-width: 1.8; }
.dash-ig:hover, .dash-ig:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--text); outline: none; transform: translateY(-1px); }
.dash-ig:focus-visible { box-shadow: 0 0 0 3px var(--low), 0 0 0 5px var(--accent); }
.dash-ig[hidden] { display: none; }
/* Click the car: a transparent button over the photo opens the lightbox.
   The arrows and the dash come later in the DOM, so they stay on top. */
.panel-open { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.panel-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.photo-box { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.photo-box[open] { display: grid; place-items: center; }
.photo-box::backdrop { background: rgba(8, 6, 12, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.photo-box-fig { margin: 0; display: grid; gap: 12px; justify-items: center; animation: photo-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.photo-box-img { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); background: var(--lowest); }
.photo-box-cap { font-size: 13px; color: var(--text); text-align: center; }
.photo-box-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: rgba(14, 14, 16, 0.9); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.photo-box-close:hover, .photo-box-close:focus-visible { background: var(--accent); outline: none; }
@keyframes photo-in { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .photo-box-fig { animation: none; } }
.dash-meta { margin: 0; display: grid; gap: 4px; }
.dash-meta > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: var(--r-sm); background: var(--low); }
.dash-meta > div[hidden] { display: none; }
.dash-meta dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--variant); }
.dash-meta dd { margin: 0; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
#dash-club-t[hidden], .dash-club-link[hidden] { display: none; }
/* Club name as a link to the club's Instagram: underlined so it reads as one. */
.dash-club-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; border-radius: 2px; }
.dash-club-link:hover, .dash-club-link:focus-visible { color: var(--accent-text, var(--accent)); outline: none; }
.dash-club-link:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

@media (max-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } .panel { height: 460px; } }
@media (max-width: 600px) {
  .badges { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* Phones: the wide photo would crop to a strip of spoiler, so the panel
     stacks instead: the whole car in a 4:3 band
     above it, then the dash card overlapping only the band's bottom edge. */
  .panel { height: auto; display: flex; flex-direction: column; }
  /* The first photo sets the band's height; the others sit on top of it. */
  .panel-photos { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .panel-img { object-position: 50% 70%; }
  .panel-open { inset: 0 0 auto 0; aspect-ratio: 4 / 3; }
  .panel-nav { top: 10px; left: 10px; }
  .panel-shade { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 3; background: linear-gradient(0deg, var(--lowest) 0%, transparent 30%); }
  .dash { position: relative; left: auto; right: auto; bottom: auto; margin: -32px 12px 12px; padding: 12px; }
  .dash-top { align-items: center; }
  .dash-top > div:first-child { min-width: 0; }
  .dash-car { font-size: 17px; text-wrap: balance; }
  .dash-meta dd { font-size: 14px; }
  .dash-ig { width: 60px; height: 60px; }
  .dash-ig .mi { width: 32px; height: 32px; }
}

/* ── Live radar ── */
.counters { display: flex; gap: 12px; flex-wrap: wrap; }
.counter { padding: 12px 16px; background: var(--high); border-radius: var(--r-sm); text-align: right; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.counter .t-stat { font-size: 36px; }
.counter .t-tel { color: var(--variant); }
.counter[hidden] { display: none; }
html.js .counter { animation: hero-rise var(--d-slow) var(--ease-out-expo) both; }
@media (prefers-reduced-motion: reduce) { html.js .counter { animation: none; } }
.radar { background: var(--lowest); border-radius: var(--r-lg); padding: clamp(14px, 2vw, 24px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.radar-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; margin-bottom: 14px; border-radius: var(--r-sm); background: var(--low); }
#live-shows .us-map-tabs { display: inline-flex; padding: 4px; gap: 2px; background: var(--high); border-radius: var(--r-sm); }
#live-shows .us-map-tab { border: 0; background: transparent; color: var(--variant); font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; min-height: 44px; padding: 0 16px; border-radius: 3px; cursor: pointer; transition: background var(--d-fast), color var(--d-fast), box-shadow var(--d-fast); }
#live-shows .us-map-tab:hover { color: var(--text); }
#live-shows .us-map-tab.is-active { background: var(--lowest); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.radar-meta { display: flex; align-items: center; gap: 18px; color: var(--variant); flex-wrap: wrap; }
.radar-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.radar-map { position: relative; border-radius: var(--r-sm); background: var(--high); overflow: hidden; padding: clamp(8px, 2vw, 24px); }
.radar-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--high) 70%, transparent) 85%, var(--high) 100%); }

#live-shows .us-map-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
#live-shows .us-map-stage { position: relative; width: 100%; aspect-ratio: 960 / 600; overflow: hidden; }
#live-shows .us-states-path { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.16); stroke-width: 0.6; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
#live-shows .us-map-outline, #live-shows .us-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
#live-shows .us-map-outline { pointer-events: none; }
#live-shows .us-map-svg { overflow: visible; }
/* A cluster's halo breathes twice as the map comes into view, then holds. */
#live-shows .heat-bloom { transform-box: fill-box; transform-origin: center; animation: heat 4.5s ease-in-out 2; pointer-events: none; }
@keyframes heat { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.12); } }
#live-shows .dot-group { cursor: pointer; }
#live-shows .dot-group.dot-muted { cursor: default; }
#live-shows .dot-group.dot-muted .dot-core { opacity: 0.45; }
#live-shows .dot-group.dot-muted .dot-pulse { opacity: 0.15; }
#live-shows .dot-core { fill: var(--accent); transform-box: fill-box; transform-origin: center; transition: r 0.15s; }
#live-shows .dot-group:focus .dot-core, #live-shows .dot-group:hover .dot-core, #live-shows .dot-group.is-active .dot-core { r: 4.5; stroke: var(--text); stroke-width: 1.5; }
/* Each dot sends out three rings when the map comes into view (the section
   is paused while off screen), then rests: a live show is a fact, not an
   alarm. */
#live-shows .dot-pulse { transform-origin: center; transform-box: fill-box; animation: flash 2.4s cubic-bezier(0.22,1,0.36,1) 3; pointer-events: none; }
@keyframes flash { 0% { transform: scale(0.3); opacity: 0.95; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
#live-shows .dot-member { transition: transform 0.2s ease; }
#live-shows .cluster-hit { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #live-shows .heat-bloom, #live-shows .dot-pulse { animation: none; } #live-shows .us-map-outline, #live-shows .us-map-svg, #live-shows .dot-member { transition: none; } }
#live-shows .us-map-tooltip { position: absolute; z-index: 3; min-width: 190px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(14,14,16,0.95); box-shadow: 0 16px 40px rgba(0,0,0,0.7); transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; opacity: 0; transition: opacity 0.12s; }
#live-shows .us-map-tooltip.visible { opacity: 1; }
#live-shows .us-map-tooltip p { margin: 0; }
#live-shows .tt-name { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--text); text-transform: uppercase; }
#live-shows .tt-date { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--pale); text-transform: uppercase; }
#live-shows .tt-street { font-size: 13px; color: var(--text); }
#live-shows .tt-place { font-size: 13px; color: var(--variant); }
#live-shows .tt-street:empty, #live-shows .tt-place:empty { display: none; }
#live-shows .tt-flyer { width: 150px; max-height: 200px; object-fit: cover; object-position: top; margin-top: 8px; border-radius: var(--r-sm); }
#live-shows .us-map-count { position: relative; z-index: 2; margin: 4px 0 0; text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--variant); }
#live-shows .us-ticker { display: flex; align-items: stretch; margin-top: 14px; border-radius: var(--r-sm); overflow: hidden; background: var(--low); }
#live-shows .us-ticker-label { flex: none; display: flex; align-items: center; padding: 0 14px; background: var(--accent); color: var(--on-accent); font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
#live-shows .us-ticker-viewport { flex: 1; overflow: hidden; position: relative; }
#live-shows .us-ticker-track { display: inline-flex; align-items: center; padding: 10px 0; white-space: nowrap; will-change: transform; }
@keyframes ticker-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ticker-shift, 50%))); } }
@keyframes ticker-cross { from { transform: translateX(var(--ticker-start, 100%)); } to { transform: translateX(calc(-1 * var(--ticker-shift, 100%))); } }
@media (prefers-reduced-motion: reduce) { #live-shows .us-ticker-track { animation: none; } }
#live-shows .ticker-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 14px; text-decoration: none; color: var(--text); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; }
#live-shows .ticker-item .ti-date { color: var(--pale); font-weight: 700; }
#live-shows .ticker-item .ti-name { font-weight: 700; text-transform: uppercase; }
#live-shows a.ticker-item:hover .ti-name { text-decoration: underline; text-underline-offset: 3px; }
#live-shows .ticker-item .ti-place { color: var(--variant); }
#live-shows .ticker-sep { color: var(--muted); padding: 0 6px; }
#live-shows .ticker-empty { color: var(--variant); font-style: italic; }

.event-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.event { display: flex; flex-direction: column; padding: 16px; border-radius: var(--r-sm); background: var(--cont); text-decoration: none; transition: background 0.15s; }
.event:hover { background: var(--high); }
.event-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--variant); margin-bottom: 8px; }
.event h3 { font-size: 20px; line-height: 1.25; margin-bottom: 14px; text-transform: none; letter-spacing: -0.01em; }
.event p { color: var(--variant); font-size: 14px; margin-bottom: 14px; }
.event-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--variant); }
.event-foot .go { color: var(--soft); display: inline-flex; align-items: center; gap: 4px; }
.event-foot .go .mi { font-size: 16px; }
@media (max-width: 900px) { .event-cards { grid-template-columns: 1fr; } }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: var(--r-md); background: var(--low); box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: background 0.2s, transform 0.25s; }
.step:hover { background: var(--cont); }

.step-n { color: var(--accent-text); margin-bottom: 14px; font-size: 32px; }

.step h3 { font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
.step p { color: var(--variant); margin-bottom: 20px; }
.step p .c-pale { color: var(--pale); }
.step-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; color: var(--variant); }
.step-foot span:last-child { color: var(--text); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 26px; } }

/* ── The deal ── */
.deal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.deal-card { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--low); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.deal-card.us { background: var(--cont); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.deal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.deal-head h3 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.deal-head .mi { font-size: 28px; }
.deal-rows { display: grid; gap: 12px; }
.deal-row { padding: 16px; border-radius: var(--r-sm); background: var(--lowest); }
.deal-row h4 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.deal-row h4 .mi { font-size: 20px; }
.them .deal-row h4 { color: var(--text); }
.them .deal-row h4 .mi { color: var(--bad); }
.us .deal-row h4 { color: var(--text); }
.us .deal-row h4 .mi { color: var(--accent-text); }
.deal-row p { color: var(--variant); }
@media (max-width: 900px) { .deal { grid-template-columns: 1fr; } }

.rig { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--lowest); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.rig-head { margin-bottom: 14px; font-size: 20px; letter-spacing: -0.01em; }
.rig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rig-item { padding: 14px; border-radius: var(--r-sm); background: var(--low); transition: background 0.15s; }
.rig-item:hover { background: var(--cont); }
.rig-item .mi { color: var(--accent-text); font-size: 24px; margin-bottom: 6px; }
.rig-item b { display: block; font-family: var(--f-display); font-size: 17px; text-transform: uppercase; color: var(--text); line-height: 1.3; }
.rig-item span { display: block; font-size: 14px; color: var(--variant); margin-top: 2px; }
@media (max-width: 900px) { .rig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Case study ── */
.case { padding: clamp(22px, 4vw, 40px); border-radius: var(--r-lg); background: var(--low); box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 40px); align-items: center; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--variant); margin-bottom: 12px; }
.case-meta .tag { background: var(--high); color: var(--text); }
.case h3 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.case p { color: var(--variant); margin-bottom: 14px; line-height: 1.7; max-width: 64ch; text-wrap: pretty; }
.case p.small { font-size: 15px; margin-bottom: 24px; }
.case-years { display: grid; gap: 6px; margin-bottom: 24px; }
.case-year { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--lowest); }
.case-year .yr { font-family: var(--f-mono); font-weight: 700; color: var(--variant); }
.case-year .sys { color: var(--text); font-weight: 700; }
.case-year .out { color: var(--variant); text-align: right; }
.case-year.now { background: var(--glow-lo); }
.case-year.now .yr, .case-year.now .out { color: var(--pale); }
.term { padding: 16px; border-radius: var(--r-md); background: var(--lowest); box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.term-head { padding: 2px 2px 10px; color: var(--variant); }
.term-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.term-cell { padding: 12px; border-radius: var(--r-sm); background: var(--low); }
.term-cell .t-tel { color: var(--variant); }
.term-zero { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 12px; border-radius: var(--r-sm); background: var(--low); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.term-zero .t-stat { color: var(--text); }
.term-zero .t-tel { color: var(--variant); }
.term-zero .mi { font-size: 36px; color: var(--accent-text); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }

/* ── Pricing ── */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; margin-bottom: 24px; align-items: stretch; }
.tier { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 7; align-content: start; padding: clamp(20px, 2.5vw, 26px); border-radius: var(--r-lg); background: var(--low); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.tier.featured { background: var(--cont); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.tier-flag { position: absolute; top: -12px; right: 18px; padding: 3px 10px; background: var(--accent); color: var(--on-accent); }
.tier-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--variant); margin-bottom: 8px; }
.tier-meta .m { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); }

.tier-meta .mi { font-size: 18px; }
.tier h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 8px; }
.tier-sub { color: var(--variant); font-size: 15px; margin-bottom: 18px; }
.price { padding: 16px; border-radius: var(--r-sm); background: var(--lowest); margin-bottom: 20px; }
.price .t-code { color: var(--variant); }
.tier.featured .price .t-code { color: var(--soft); }
.price .t-stat { color: var(--text); font-size: 34px; }
.price .t-stat.big { color: var(--pale); font-size: 44px; }
.price .t-stat small { font-family: var(--f-body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--variant); text-transform: uppercase; }
.price .note { font-size: 14px; color: var(--soft-2); }
.tier ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; align-content: start; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text); line-height: 1.45; }
.tier li .mi { font-size: 19px; color: var(--accent-text); margin-top: 1px; }
/* Pre-registration: its own subgrid row, so it lines up across all three
   tiers; set off by a hairline because on two tiers it costs extra. */
.tier-pre { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 22px; padding-top: 12px; border-top: 1px solid rgba(var(--accent-rgb), 0.22); font-size: 15px; line-height: 1.45; color: var(--variant); }
.tier-pre .mi { font-size: 19px; color: var(--accent-text); margin-top: 1px; }
.tier-pre b { color: var(--text); font-weight: 700; }

.tier-foot { align-self: end; padding-top: 14px; }
.tier-vol { margin-top: 10px; text-align: center; color: var(--variant); font-size: 14px; }
.tier-vol a { color: var(--accent-text); }
.tiers-vol { margin: -4px 0 28px; font-size: 15px; }
@media (max-width: 1000px) { .tier { display: flex; flex-direction: column; grid-row: auto; margin-bottom: 16px; } .tier-foot { margin-top: auto; } .tiers { grid-template-columns: 1fr; max-width: 580px; margin-left: auto; margin-right: auto; } .tier.featured { order: -1; } }

.callout { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: clamp(18px, 3vw, 26px); border-radius: var(--r-lg); background: var(--lowest); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.callout-l { display: flex; gap: 16px; align-items: center; }
.callout-ic { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--glow-lo); color: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; }
.callout-ic .mi { font-size: 28px; }
.callout h3 { font-size: 22px; line-height: 1.3; }
.callout p { color: var(--variant); }

/* ── FAQ ── */
.faq { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item { border-radius: var(--r-md); background: var(--low); overflow: hidden; transition: background 0.15s; }
.faq-item.open { background: var(--cont); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 20px; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; }
.faq-q { transition: color var(--d-fast); }
.faq-q:hover { color: var(--accent-text); }
.faq-q .mi { color: var(--variant); transition: transform 0.3s; }
.faq-item.open .faq-q .mi { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22,1,0.36,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a-in { padding: 0 20px 20px; max-width: 70ch; color: var(--variant); font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.faq-a-in a { color: var(--accent-text); font-weight: 600; }

/* ── Guides ── */
.guides { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.guide { display: flex; flex-direction: column; min-height: 150px; padding: 18px; border-radius: var(--r-md); background: var(--high); text-decoration: none; transition: background 0.15s, transform 0.2s; }
.guide:hover { background: var(--highest); transform: translateY(-3px); }
.guide .t-code { color: var(--variant); margin-bottom: 10px; }
.guide b { font-family: var(--f-display); font-size: 19px; line-height: 1.25; text-transform: uppercase; color: var(--text); }
.guide .mi { margin-top: auto; align-self: flex-end; color: var(--variant); transition: transform 0.2s, color 0.2s; }
.guide:hover .mi { color: var(--soft); transform: translateX(3px); }
@media (max-width: 1000px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .guides { grid-template-columns: 1fr; } .guide { min-height: 0; } }

/* ── Final CTA ── */
.final { position: relative; text-align: center; }

.final-pre { color: var(--variant); font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.final h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.final h2 span { color: var(--accent-text); }
.final p { max-width: 40rem; margin: 14px auto 24px; color: var(--variant); font-size: 18px; }
.final-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; }

/* ── Footer ── */


/* ── Modals ── */
.fj-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fj-backdrop { position: absolute; inset: 0; background: rgba(5,5,6,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: hero-fade var(--d-base) ease-out both; }
.fj-modal .fj-card { animation: modal-in 0.32s var(--ease-out-expo) both; }
.fj-modal.is-closing .fj-backdrop { animation: modal-fade-out 180ms ease-in both; }
.fj-modal.is-closing .fj-card { animation: modal-out 180ms ease-in both; }
.fj-modal.is-closing { pointer-events: none; }
@keyframes modal-in { from { opacity: 0; translate: 0 14px; scale: 0.98; } to { opacity: 1; translate: none; scale: none; } }
@keyframes modal-out { to { opacity: 0; translate: 0 8px; scale: 0.99; } }
@keyframes modal-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fj-backdrop, .fj-modal .fj-card, .fj-modal.is-closing .fj-backdrop, .fj-modal.is-closing .fj-card { animation: none; } }
.fj-card { position: relative; width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: 28px; border-radius: var(--r-lg); background: var(--cont); box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 30px var(--glow-lo); }
.fj-card h3 { font-size: 28px; margin-bottom: 6px; }
.fj-card .muted { color: var(--variant); margin-bottom: 20px; }
.fj-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: none; color: var(--variant); font-size: 26px; cursor: pointer; }
.fj-close:hover { background: var(--high); color: var(--text); }
.ea-form { display: flex; flex-direction: column; gap: 14px; }
.ea-field { display: flex; flex-direction: column; gap: 6px; }
.ea-label { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.ea-optional { color: var(--muted); }
.ea-input { min-height: 48px; padding: 12px 14px; border: 1px solid var(--highest); border-radius: var(--r-sm); background: var(--lowest); color: var(--text); font: inherit; }
.ea-input { transition: border-color var(--d-fast); }
.ea-input::placeholder { color: var(--muted); }
.ea-input:focus { outline: none; border-color: var(--accent); }
.ea-note { margin-top: 12px; color: var(--variant); min-height: 1.2em; }
.ea-note:not(:empty) { animation: hero-fade var(--d-base) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .ea-note:not(:empty) { animation: none; } }
.ea-note.error { color: var(--bad); }
.ea-field-error { margin: 2px 0 0; color: var(--bad); font-size: 14px; }
.ea-input[aria-invalid="true"] { border-color: var(--bad); }

.flyer-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 4vh 16px; }
.flyer-modal[hidden] { display: none; }
.flyer-modal-backdrop { position: absolute; inset: 0; background: rgba(5,5,6,0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.flyer-modal-card { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); height: min(92vh, 1120px); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.flyer-modal-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px 6px 16px; background: var(--lowest); color: var(--text); }
.flyer-modal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; }
.flyer-modal-body { position: relative; flex: 1; min-height: 0; background: #fff; }
.flyer-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.flyer-modal-img { width: 100%; height: 100%; object-fit: contain; background: #0a0a0c; }
.flyer-modal-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--high); color: var(--text); font-family: var(--f-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.flyer-modal-btn:hover { background: var(--highest); }
.flyer-modal-close { padding-right: 12px; }
.flyer-modal-close span { font-size: 22px; line-height: 1; }
@media (max-width: 640px) { .flyer-modal { padding: 0; } .flyer-modal-card { width: 100%; height: 100%; border-radius: 0; } }
@media print {
  body.flyer-open > *:not(#flyer-modal) { display: none !important; }
  body.flyer-open #flyer-modal { position: static; padding: 0; display: block; }
  body.flyer-open .flyer-modal-backdrop, body.flyer-open .flyer-modal-bar { display: none !important; }
  body.flyer-open .flyer-modal-card { width: 100%; height: auto; box-shadow: none; }
  body.flyer-open .flyer-modal-frame { min-height: 96vh; }
}
.show-sheet { position: fixed; inset: 0; z-index: 330; }
.show-sheet[hidden] { display: none; }
.show-sheet-backdrop { position: absolute; inset: 0; background: rgba(5,5,6,0.7); opacity: 0; transition: opacity 0.25s; }
.show-sheet.is-open .show-sheet-backdrop { opacity: 1; }
.show-sheet-card { position: absolute; inset: auto 0 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--cont); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); }
.show-sheet.is-open .show-sheet-card { transform: none; }
.show-sheet-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--variant); font-size: 26px; cursor: pointer; }
.show-sheet .ss-name { font-family: var(--f-display); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--text); margin: 0 44px 6px 0; }
.show-sheet .ss-date { font-family: var(--f-mono); font-size: 13px; color: var(--pale); margin-bottom: 4px; }
.show-sheet .ss-place { color: var(--variant); margin-bottom: 16px; }
.show-sheet .ss-place:empty { display: none; }
.show-sheet .ss-flyer-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--accent); color: var(--on-accent); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; text-decoration: none; }

/* ── Light mode (html[data-mode="light"], tokens in tarmac-tokens.css) ── */
/* The hero photo panel stays a dark instrument cluster over the photo. */
html[data-mode="light"] .panel {
  --text: #f5f2f9; --variant: #d8d0e6; --muted: #a99fbe;
  --lowest: #0e0c12; --low: rgba(20, 18, 26, 0.88); --cont: rgba(30, 27, 36, 0.92);
  --dash: rgba(36, 32, 44, 0.94);
  --soft: color-mix(in srgb, var(--accent) 50%, #fff);
  --soft-2: color-mix(in srgb, var(--accent-2) 55%, #fff);
  --pale: color-mix(in srgb, var(--accent) 22%, #fff);
  --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
}
html[data-mode="light"] .panel-shade { background: linear-gradient(0deg, rgba(14,12,18,0.85) 0%, rgba(14,12,18,0.45) 35%, rgba(14,12,18,0.1) 65%, transparent 85%); }
/* Soft lift instead of heavy black shadows. */
html[data-mode="light"] :is(.panel, .radar, .deal-card, .tier, .case, .step, .rig, .callout, .counter, .fj-card) {
  box-shadow: 0 1px 2px rgba(20, 16, 30, 0.06), 0 10px 28px rgba(20, 16, 30, 0.08);
}
html[data-mode="light"] :is(.deal-card.us, .tier.featured) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 28px rgba(20, 16, 30, 0.07); }
html[data-mode="light"] .hdr { box-shadow: 0 1px 0 rgba(20, 16, 30, 0.06), 0 6px 20px rgba(20, 16, 30, 0.06); }
html[data-mode="light"] .term { box-shadow: inset 0 1px 3px rgba(20, 16, 30, 0.06); }
/* Map: dark strokes on the light map card. */
html[data-mode="light"] #live-shows .us-states-path { fill: rgba(20, 16, 30, 0.04); stroke: rgba(20, 16, 30, 0.2); }
html[data-mode="light"] #live-shows .us-map-tooltip { background: #fff; box-shadow: 0 10px 30px rgba(20, 16, 30, 0.18); }
html[data-mode="light"] #live-shows .us-map-tab.is-active { background: #fff; box-shadow: 0 1px 3px rgba(20, 16, 30, 0.15); }
html[data-mode="light"] .radar-map::after { opacity: 0.6; }

/* Soft, even elevation. The large black shadows left dark halos around
   every card on the continuous background. */
:is(.panel, .radar, .deal-card, .tier, .case, .step, .rig, .callout, .counter) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 6px 18px rgba(0, 0, 0, 0.22);
}
.panel { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
:is(.deal-card.us, .tier.featured) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
/* Blobs sit behind content as soft light, clipped to the viewport width. */
.hero, .final { overflow-x: clip; }


/* ─────────────────────────────────────────────────────────────────────────
   Poster type (2026-10-29). Bebas Neue, the face of the old brand, carries
   every headline, button and label on the homepage: a car-show poster, not
   a software template. Chivo keeps the reading text; JetBrains Mono is left
   to the instruments and real data (entry numbers, tach numerals).
   ───────────────────────────────────────────────────────────────────────── */
:root { --f-poster: 'Bebas Neue', 'Bebas Fallback', sans-serif; }
h1, h2, h3, h4 { font-family: var(--f-poster); font-weight: 400; letter-spacing: 0.02em; }
.hero h1 { font-size: clamp(56px, 7.4vw, 100px); line-height: 0.9; letter-spacing: 0.01em; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(40px, 5.2vw, 64px); line-height: 0.95; letter-spacing: 0.02em; }
.final h2 { font-size: clamp(48px, 6.6vw, 84px); line-height: 0.95; letter-spacing: 0.02em; }
.step h3 { font-size: 32px; line-height: 1; }
.tier h3 { font-size: clamp(34px, 3.4vw, 44px); line-height: 1; letter-spacing: 0.02em; }
.deal-head h3 { font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.case h3 { font-size: clamp(36px, 4.2vw, 48px); line-height: 1; letter-spacing: 0.02em; }
.callout h3 { font-size: 30px; line-height: 1; }
.rig-head { font-size: 28px; letter-spacing: 0.03em; }
.rig-item b { font-family: var(--f-poster); font-weight: 400; font-size: 21px; letter-spacing: 0.04em; }
.guide b { font-family: var(--f-poster); font-weight: 400; font-size: 25px; letter-spacing: 0.03em; }
.dash-car { font-family: var(--f-poster); font-weight: 400; font-size: 26px; letter-spacing: 0.02em; }
.deal-row h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.005em; text-transform: none; font-size: 19px; }
.event h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.fj-card h3 { font-size: 36px; }
.t-stat { font-family: var(--f-poster); font-weight: 400; letter-spacing: 0.01em; font-size: 48px; }
.counter .t-stat { font-size: 44px; }
.price .t-stat { font-size: 42px; }
.step-n { font-size: 44px; line-height: 1; }
.btn { font-family: var(--f-poster); font-weight: 400; font-size: 21px; letter-spacing: 0.06em; }
.btn-sm { font-size: 18px; }
.drawer a { font-family: var(--f-poster); font-weight: 400; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Labels leave the mono costume. Chips and the small caps that name things
   are Bebas; navigation, dates and secondary notes are Chivo. */
.t-code { font-family: var(--f-poster); font-weight: 400; font-size: 15px; letter-spacing: 0.1em; }
.t-tel { font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; text-transform: none; }
.hdr-nav a, .hdr-quiet { font-size: 15px; }
.counter .t-tel, .term-cell .t-tel, .term-zero .t-tel, .step-foot { font-family: var(--f-poster); font-weight: 400; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
#live-shows .us-map-tab { font-family: var(--f-poster); font-weight: 400; font-size: 17px; letter-spacing: 0.06em; }
#live-shows .us-ticker-label { font-family: var(--f-poster); font-weight: 400; font-size: 16px; letter-spacing: 0.1em; }
#live-shows .ticker-item { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; }
#live-shows .ticker-item .ti-name { text-transform: none; }
#live-shows .us-map-count { font-family: var(--f-poster); font-size: 15px; letter-spacing: 0.1em; }
#live-shows .tt-date { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.panel-count { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ea-label { font-family: var(--f-poster); font-weight: 400; font-size: 15px; letter-spacing: 0.1em; }
/* The shared dock and colour chip, in the page's voice. */
.el-dock, .scheme-switch { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .el-dock a, .el-dock button { letter-spacing: 0; font-size: 12px; } }

/* Section tint: the same accent light the hero carries, faint, alternating
   sides down the page, in both modes (tarmac-tokens sets --accent-rgb per
   scheme, so it follows the colour the visitor picked). */
.sec::before { display: block; }
.sec { --glow-a: 0.16; }
.sec.bg-cont { --glow-a: 0.2; }
html[data-mode="light"] .sec::before {
  background:
    radial-gradient(ellipse 55% 48% at var(--glow-x, 20%) 38%, rgba(var(--accent-rgb), 0.16), transparent 72%),
    radial-gradient(ellipse 70% 55% at 50% 55%, color-mix(in srgb, var(--high) 80%, transparent), transparent 74%);
}
/* Rhythm: sections sit closer; the cards and headings do the separating. */
.sec { padding: clamp(22px, 2.2vw, 30px) 0; }
.sec-head { margin-bottom: clamp(14px, 1.6vw, 20px); }
.sec-head p { margin-top: 10px; }
.hero { padding-bottom: clamp(24px, 2.4vw, 32px); }

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(52px, 15vw, 64px); }
  .sec-head h2 { font-size: clamp(38px, 11vw, 48px); }
  .final h2 { font-size: clamp(44px, 13vw, 56px); }
  .btn { font-size: 20px; }
}

/* ── Polish pass (2026-10-29) ──
   Accent as text in light mode uses the Signal Ink, never the fill. */
html[data-mode="light"] .kw b { color: var(--accent-text); }
/* Sections that have scrolled out of view stop animating (the map's pulses
   and blooms, the ticker, the tach idle); index.html toggles the class. */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
@media (max-width: 600px) { .panel-nav { top: 10px; } }
/* Hit areas: the wordmark link and the small arrow links reach 44px without
   moving anything (padding pulled back by an equal negative margin). */
.kw { display: inline-flex; align-items: center; min-height: 44px; }
.link { padding: 12px 0; margin: -12px 0; }