/* ============================================================================
   FOREFITTER — the precision fitting lab
   A launch-monitor / carbon-lab front desk that fronts the four bays: the Ball
   Lab (Golf Ball Selector), the Shaft Lab (Shaftology), the Coach Lab (PGA
   Coach Finder) and the Course Lab (Course Finder).

   Colour, type, radii and motion all come from /shared/forefitter-tokens.css,
   which every bay in the suite loads. THIS file holds only what is unique to
   the hub: its layout, the launch-monitor panel, the topo + ball-flight tracer
   art, and the scroll reveal. If you find yourself adding a colour or a font
   here, it belongs in the token sheet instead.
   ========================================================================== */

/* Hub-only: the fitting-ring ball is drawn in cream at every theme, so its
   shading ramp is art, not palette, and stays local. */
:root[data-theme="dark"] {
  --ball-hi:  #f4fce0;
  --ball-mid: #e6f2b8;
  --ball-lo:  #b9cc70;
}
:root[data-theme="light"] {
  --ball-hi:  #ffffff;
  --ball-mid: #eef4d8;
  --ball-lo:  #c3d488;
}

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

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

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--body-glow), var(--bg);
  background-attachment: fixed;
  line-height: var(--lh-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--volt); }

/* ---------------- BACKGROUND TEXTURE ---------------- */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-op);
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.015) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.topo {
  position: fixed; left: 0; top: -12%; width: 100%; height: 124%; z-index: 0;
  pointer-events: none; opacity: var(--topo-op);
  will-change: transform;
}
.topo-line { fill: none; stroke: var(--volt); stroke-width: 1; opacity: 0.20; }
.topo-line.faint { opacity: 0.10; }
.topo-hole { fill: var(--copper); opacity: 0.5; }

/* ---- scroll-driven ball-flight tracer ----
   Deliberately faint so text stays readable over it: no glow halo on the line,
   thin stroke, low opacity (lower still in dark, where volt is brightest). */
.flight {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none;
}
.flight-path { fill: none; stroke: var(--line-hard); stroke-width: 1; stroke-dasharray: 2 12; opacity: 0.14; }
.flight-lead {
  fill: none; stroke: var(--volt); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;   /* undrawn until scrolled */
  opacity: 0.18;
}
:root[data-theme="light"] .flight-lead { opacity: 0.3; }
.fb-core { fill: var(--volt); opacity: 0.5; }
.fb-glow { fill: var(--volt); opacity: 0.1; filter: blur(4px); }
.fb-ring { fill: none; stroke: var(--volt); stroke-width: 1; opacity: 0.32; }

/* ---------------- LAYOUT SHELL ---------------- */
main, .nav, .footer { position: relative; z-index: 2; }
section { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---------------- NAV ---------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 24px;
  max-width: 100%;
  padding: 14px 32px;
  background: var(--head-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; }
.brand-mark svg { display: block; }
.bm-ring { fill: none; stroke: var(--line-hard); stroke-width: 1.4; }
.bm-pole { stroke: var(--ink-dim); stroke-width: 1.6; stroke-linecap: round; }
.bm-flag { fill: var(--volt); }
.bm-ball { fill: var(--ink); }
.brand-emblem path, .brand-emblem polygon { fill: var(--ink); }
/* footer wordmark = the logo's own lettering (vector) */
.brand-word { display: block; height: 18px; width: auto; }
.brand-word .wm-fore path { fill: var(--ink); }
.brand-word .wm-fitter path { fill: var(--volt); }
.brand-accent { color: var(--volt); }

.nav-links { display: flex; gap: 26px; margin-left: 10px; }
.nav-links a {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-dim);
  position: relative; padding: 4px 0; transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--volt); transition: width .28s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-cta {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-hard); color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.nav-cta:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-soft); }

.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--line-hard);
  background: var(--panel); color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.theme-toggle:hover { border-color: var(--volt); color: var(--volt); transform: rotate(-18deg); }
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }

/* ---------------- BUTTONS ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.005em;
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--volt); color: var(--on-volt); box-shadow: 0 0 0 0 var(--volt-soft); }
.btn-primary:hover { box-shadow: 0 14px 30px -12px var(--volt), 0 0 0 4px var(--volt-soft); transform: translateY(-2px); }

.btn-copper { background: var(--copper); color: var(--on-copper); }
.btn-copper:hover { box-shadow: 0 14px 30px -12px var(--copper), 0 0 0 4px var(--copper-soft); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-hard); }
.btn-ghost:hover { border-color: var(--volt); color: var(--volt); transform: translateY(-2px); }

/* ---------------- HERO ---------------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  padding-top: 76px; padding-bottom: 40px;
}
/* Typography comes from the shared .eyebrow in forefitter-tokens.css; the hub
   only adds the registration-tick layout. */
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow .tick { color: var(--volt); letter-spacing: 0; }
.hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.6rem); margin: 20px 0 22px; letter-spacing: -0.035em;
}
/* "fit." carries a hand-drawn shot tracer that draws itself in, and re-draws on hover */
.h1-fit { position: relative; display: inline-block; }
.h1-trace {
  position: absolute; left: -2%; right: -2%; bottom: -0.14em; width: 104%; height: 0.28em;
  overflow: visible; pointer-events: none;
}
.h1-trace path {
  fill: none; stroke: var(--volt); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.reveal.is-in .h1-trace path { animation: h1trace var(--dur-slow, .7s) var(--ease) .45s forwards; }
.h1-fit:hover .h1-trace path { animation: h1trace .55s var(--ease) forwards; }
@keyframes h1trace { to { stroke-dashoffset: 0; } }
.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-dim); max-width: 33em; line-height: 1.62;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 20px 30px;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line);
}
.hero-stats > div { position: relative; padding-bottom: 6px; cursor: default; }
.hero-stats > div::after { /* volt rule sweeps in under the stat you point at */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--volt); transition: width var(--dur, .28s) var(--ease);
}
.hero-stats > div:hover::after { width: 100%; }
.hero-stats dt { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; white-space: nowrap; transition: color var(--dur-fast, .18s) ease; }
.hero-stats > div:hover dt { color: var(--ink-dim); }
.hero-stats dd { font-family: var(--serif); font-size: 2.15rem; font-weight: 600; line-height: 1; color: var(--ink); transition: transform var(--dur, .28s) var(--ease); }
.hero-stats > div:hover dd { transform: translateY(-2px); }
.hero-stats dd::first-letter { color: var(--volt); }
.hero-stats .no-count { color: var(--volt); }

/* ---- launch monitor panel (live instrument) ---- */
.monitor {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hard); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  position: relative;
  /* JS writes --tx/--ty (deg) as the pointer moves across the panel */
  transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform var(--dur, .28s) var(--ease), border-color var(--dur, .28s) ease;
  will-change: transform;
}
.monitor:hover { border-color: color-mix(in srgb, var(--volt) 40%, var(--line-hard)); }
.monitor.is-firing { border-color: var(--volt); }
.monitor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.monitor-head, .monitor-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro);
  color: var(--ink-dim); text-transform: uppercase;
}
.monitor-head { border-bottom: 1px solid var(--line); background: var(--panel-3); }
.mon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.mon-label { font-weight: 600; color: var(--ink); }
/* the swing-speed band the dial currently sits in — same bands the Ball Lab fits against */
.mon-band {
  padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
  color: var(--volt); font-weight: 700; letter-spacing: 0.12em; line-height: 1.5;
  transition: color var(--dur-fast, .18s) ease, border-color var(--dur-fast, .18s) ease;
}
.mon-live { margin-left: auto; color: var(--rose); font-weight: 600; letter-spacing: 0.1em; }
.monitor.is-firing .mon-live { animation: recPulse .5s steps(2, end) 3; }
@keyframes recPulse { 50% { opacity: 0.25; } }
.monitor-foot { border-top: 1px solid var(--line); justify-content: space-between; }
.monitor-foot b { color: var(--ink); }
.mon-cal { color: var(--volt); }

.monitor-screen {
  padding: 16px 16px 6px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--mon-glow), transparent 60%),
    var(--bg-2);
}
.trajectory { width: 100%; height: auto; display: block; }
.tj-grid line { stroke: var(--line-soft); stroke-width: 1; }
.tj-grid line.soft { stroke-dasharray: 2 6; }
.tj-yards text { font-family: var(--mono); font-size: 10px; fill: var(--ink-dim); text-anchor: middle; }
/* the solved arc (ghost) and the tracer the ball paints along it — both driven from JS */
.tj-path { fill: none; stroke: var(--line-hard); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: 0.65; }
.tj-path-lead {
  fill: none; stroke: var(--volt); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--volt));
  stroke-dasharray: 100; stroke-dashoffset: 100;   /* pathLength=100; JS sets the offset */
}
.tj-flag { transition: transform var(--dur, .28s) var(--ease); }
.tj-flag line { stroke: var(--ink-dim); stroke-width: 1.5; }
.tj-flag path { fill: var(--copper); }
.tj-ball { fill: var(--ink); stroke: var(--volt); stroke-width: 1.5; }

/* impact burst at the tee when a shot fires */
.tj-impact { pointer-events: none; }
.imp-ring { fill: none; stroke: var(--volt); stroke-width: 2; opacity: 0; }
.monitor.is-firing .imp-ring { animation: impRing .62s var(--ease) forwards; }
.monitor.is-firing .imp-ring-2 { animation-delay: .1s; }
@keyframes impRing {
  0%   { r: 3;  opacity: 0.85; stroke-width: 2.4; }
  100% { r: 30; opacity: 0;    stroke-width: 0.4; }
}

/* hover reticle — reads the yardage under the cursor */
.tj-reticle { opacity: 0; transition: opacity var(--dur-fast, .18s) ease; }
.tj-reticle.is-on { opacity: 1; }
.tj-reticle line { stroke: var(--volt); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
.tj-reticle text {
  font-family: var(--mono); font-size: 10px; fill: var(--volt);
  text-anchor: middle; font-weight: 600;
}

.readouts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 12px; background: var(--line); border-top: 1px solid var(--line);
}
.ro {
  background: var(--panel); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
  position: relative; transition: background var(--dur-fast, .18s) ease;
}
.ro::before { /* volt edge lights up the tile you point at */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--volt); transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform var(--dur, .28s) var(--ease);
}
.ro:hover { background: var(--panel-2); }
.ro:hover::before { transform: scaleY(1); }
.ro-v b { transition: color var(--dur-fast, .18s) ease; }
.ro.is-live b { color: var(--volt); }
.ro-k { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-faint); }
.ro-v { font-family: var(--mono); display: flex; align-items: baseline; gap: 4px; }
.ro-v b { font-size: 1.32rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ro-v i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-dim); }

/* ---- the instrument's control bar: dial a swing speed, the flight re-solves ---- */
.mon-control {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-top: 1px solid var(--line); background: var(--panel-3);
}
.ctl-k {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.ctl-v { font-family: var(--mono); display: flex; align-items: baseline; gap: 4px; flex: none; }
.ctl-v b {
  font-size: 1.1rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 3ch; text-align: right; display: inline-block;
}
.ctl-v i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-dim); }

.rail {
  position: relative; flex: 1 1 auto; min-width: 90px; height: 26px;
  display: flex; align-items: center; cursor: grab; touch-action: none;
}
.rail:active { cursor: grabbing; }
.rail-track {
  position: relative; width: 100%; height: 4px; border-radius: var(--r-pill, 999px);
  background: var(--line-hard); overflow: hidden;
}
.rail-fill {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background: linear-gradient(90deg, var(--volt-deep), var(--volt));
  border-radius: inherit;
}
.rail-thumb {
  position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--volt); border: 2px solid var(--panel-3);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--volt-soft);
  transition: box-shadow var(--dur, .28s) ease, transform var(--dur-fast, .18s) var(--ease);
  pointer-events: none;
}
.rail:hover .rail-thumb { transform: translate(-50%, -50%) scale(1.15); }
.rail:focus-visible { outline: none; }
.rail:focus-visible .rail-thumb,
.rail.is-drag .rail-thumb { box-shadow: 0 0 0 6px var(--volt-soft); }

.hit-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-pill, 999px); cursor: pointer;
  border: 1px solid transparent; background: var(--volt); color: var(--on-volt);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tr-micro); text-transform: uppercase;
  transition: transform var(--dur-fast, .18s) var(--ease), box-shadow var(--dur, .28s) ease;
}
.hit-btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast, .18s) var(--ease); }
.hit-btn:hover { box-shadow: 0 10px 24px -10px var(--volt), 0 0 0 4px var(--volt-soft); transform: translateY(-1px); }
.hit-btn:hover svg { transform: translateX(3px); }
.hit-btn:active { transform: translateY(1px) scale(0.97); }
.hit-btn[disabled] { opacity: 0.5; pointer-events: none; }

@media (max-width: 520px) {
  .mon-control { flex-wrap: wrap; gap: 10px; }
  .rail { order: 3; flex-basis: 100%; }
}

/* ---------------- RIBBON TICKER ---------------- */
.ribbon {
  position: relative; z-index: 2; margin-top: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--panel); overflow: hidden;
}
.ribbon-track {
  display: inline-flex; align-items: center; gap: 22px; white-space: nowrap;
  padding: 11px 0; will-change: transform;
  /* Duration tracks the content length, not the clock: the ribbon went from
     7 items to 11 when the Coach and Course datasets were added, and at a
     fixed 34s that sped the scroll up by ~56%. 53s restores the original
     ~41px/s. Re-derive it if you add or remove items. */
  animation: marquee 53s linear infinite;
}
.ribbon-track span {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); font-weight: 600;
  color: var(--ink-dim); text-transform: uppercase;
}
.ribbon .rib-dot { color: var(--volt); font-size: 0.5rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ribbon:hover .ribbon-track { animation-play-state: paused; }

/* ---------------- CHIP on the ticker ----------------
   His coat, kit and walk cycle are defined once in /shared/forefitter-loader.css
   (shared with the suite's loading state). All that belongs here is where he
   stands: on the top edge of the marquee, centred between the data callouts and
   the launch monitor.

   The zone exists so he can stand ON the belt — the ribbon itself must keep
   overflow:hidden to clip the marquee, so he lives outside it and overflows
   upward with bottom:100%, which plants his feet on the belt's top border. */
.ribbon-zone { position: relative; }
.gopher {
  position: absolute; left: 50%; translate: -50% 0; bottom: 100%;
  height: 82px; width: auto; z-index: 3; pointer-events: none;
}

/* stop the belt, stop the gopher */
.ribbon-zone:hover .ribbon-track,
.ribbon-zone:hover .gopher * { animation-play-state: paused; }

@media (max-width: 560px) { .gopher { height: 58px; } }

/* ---------------- SECTION HEADINGS ---------------- */
.section-head { max-width: 46rem; margin: 0 auto 46px; text-align: center; }
.sec-eyebrow { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--volt-deep); font-weight: 600; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 16px; }
.sec-sub { color: var(--ink-dim); font-size: 1.04rem; line-height: 1.62; }

/* ---------------- THE BAYS ---------------- */
.bays { padding-top: 96px; }
/* auto-fit rather than a fixed count: the lab gained a fourth bay and will
   gain more. 258px is the narrowest a bay card reads at — four fit the 1136px
   measure, and the grid steps down to 3 / 2 / 1 on its own. */
.bay-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 24px;
}

/* ---- THE SLEEVE ----------------------------------------------------------
   A bay card is shaped like a sleeve of golf balls: hang punch, tuck seam, a
   die-cut window showing what's inside, and a flap above the CTA.

   Deliberately NOT skeuomorphic. No cardboard texture, no fake carton
   lighting — that would fight the anodized-instrument language the suite is
   built in. What's borrowed is the STRUCTURE of a sleeve (its seams, its
   window, its retail punch) drawn in the same hairlines, tokens and
   registration ticks as everything else. The proportions already suited it:
   these cards were tall and narrow before this treatment existed.           */
.bay {
  --bay-accent: var(--volt); --bay-on: var(--on-volt); --bay-soft: var(--volt-soft);
  /* Visible side = depth × sin(turn); face foreshortening = 1 − cos(turn).
     Only the ANGLE costs legibility, so the angle stays small and the depth
     does the work: −14° / 64px shows 15.5px of side for 3% foreshortening,
     where −22° would need 7.3% to show 21px. A real sleeve is roughly square
     in cross-section anyway, so deep is also the honest proportion. */
  --sleeve-depth: 64px;
  --sleeve-turn: -14deg;
  /* Each card carries its OWN camera rather than sharing one on the grid.
     A single grid-level perspective puts every card at a different distance
     from one vanishing point, so identical transforms projected to different
     widths — 247 / 255 / 262 / 269px across the row, visibly inconsistent.
     perspective() as a transform function defaults its origin to the element's
     own centre, so all four are now framed identically.

     The trade is the shared vanishing point, i.e. strict "one shelf" realism.
     At 14° that realism was barely legible while the width drift was obvious,
     so consistency wins. It also removes the outer-card fisheye risk, which is
     why the camera can now sit closer (1500px vs 2600px) for a richer turn. */
  --sleeve-cam: 1500px;

  position: relative; display: flex; flex-direction: column;
  /* Top padding makes room for the hang punch above the tuck seam. */
  padding: 40px 30px 34px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hard);
  box-shadow: 16px 26px 44px -26px rgba(0, 0, 0, 0.75), var(--shadow-sm);

  /* NO overflow:hidden — it would clip the side face flat against the front.
     Both pseudos below are reshaped to stay inside the radius instead. */
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), border-color .3s, box-shadow .3s;
}

/* The turn has to be declared at .bay.reveal specificity, not on .bay.
   These cards carry the scroll-reveal class, and `.reveal.is-in { transform:
   none }` is two classes — it outranks a bare `.bay { transform: … }` and
   silently cancelled the rotation, leaving the side face edge-on and the whole
   effect invisible. Transform is a single property: the reveal's slide and the
   sleeve's turn have to be composed in one value, not set independently. */
.bay { transform: perspective(var(--sleeve-cam)) rotateY(var(--sleeve-turn)); }
.bay.reveal { transform: perspective(var(--sleeve-cam)) translateY(22px) rotateY(var(--sleeve-turn)); }
.bay.reveal.is-in { transform: perspective(var(--sleeve-cam)) rotateY(var(--sleeve-turn)); }

/* The side face. Hinged on the card's right edge and swung back into Z, so it
   is a real surface catching a real angle — not a gradient pretending. */
.bay-side {
  position: absolute; top: 0; left: 100%; width: var(--sleeve-depth); height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  /* Darkened toward the fold. A receding plane loses light; matching the front
     face's tone is what made the first attempt read as a flat seam. */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--panel) 82%, black),
    color-mix(in oklab, var(--bg) 62%, black));
  border: 1px solid var(--line-hard); border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
  pointer-events: none;
}
:root[data-theme="light"] .bay-side {
  /* On paper the same plane goes warm-grey rather than black, or it reads as a
     hole rather than a shaded side. */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--panel-3) 88%, black),
    color-mix(in oklab, var(--bg) 78%, black));
}

/* The retail hang punch. A slot, not a circle — matches how sleeves are
   actually die-cut for a peg hook. */
.bay-hang {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 8px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line-hard);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
:root[data-theme="light"] .bay-hang { box-shadow: inset 0 1px 3px rgba(40, 55, 15, 0.22); }
.bay::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--bay-accent), transparent 70%);
  opacity: 0.85;
  /* Rounded to match the card: with overflow visible, a square bar would poke
     past the corner radius. */
  border-radius: var(--r) var(--r) 0 0;
}
.bay::after {
  content: ""; position: absolute; right: 0; top: 0; width: 190px; height: 190px;
  background: radial-gradient(circle at 75% 25%, var(--bay-soft), transparent 66%);
  border-radius: 0 var(--r) 0 0;
  pointer-events: none;
}
/* Hover squares the sleeve to face-on and lifts it. The turn goes to a hard 0,
   not a fraction of --sleeve-turn: the point of the hover state is that the
   card you're about to read stops being foreshortened at all. The side face
   goes edge-on and disappears of its own accord, which is exactly right — the
   box is facing you now.
   Written at .bay.reveal.is-in:hover so it outranks the reveal's own
   transform; a plain .bay:hover is one class short and would never fire once
   the card revealed. */
.bay:hover,
.bay.reveal.is-in:hover {
  transform: perspective(var(--sleeve-cam)) rotateY(0deg) translateY(-6px);
  border-color: var(--bay-accent);
  box-shadow: 10px 34px 54px -26px rgba(0, 0, 0, 0.8), var(--shadow);
}
:root[data-theme="light"] .bay { box-shadow: 14px 22px 38px -26px rgba(40, 55, 15, 0.4), var(--shadow-sm); }
:root[data-theme="light"] .bay:hover { box-shadow: 10px 30px 48px -26px rgba(40, 55, 15, 0.45), var(--shadow); }
.bay--shaft { --bay-accent: var(--copper); --bay-on: var(--on-copper); --bay-soft: var(--copper-soft); }
.bay--coach { --bay-accent: var(--sky); --bay-on: #06181c; --bay-soft: rgba(125, 199, 211, 0.14); }
:root[data-theme="light"] .bay--coach { --bay-on: #f6f8ee; --bay-soft: rgba(47, 125, 138, 0.14); }
/* Bay 04 keeps volt: turf is the brand chartreuse's home, and the card's art
   carries the bay's own difficulty scale (volt / copper / rose) to distinguish
   it from the Ball Lab rather than leaning on a fourth accent. */
.bay--course { --bay-accent: var(--volt); --bay-on: var(--on-volt); --bay-soft: var(--volt-soft); }
.btn-sky { background: var(--sky); color: var(--on-sky, #06181c); }
:root[data-theme="light"] .btn-sky { color: #f6f8ee; }
.btn-sky:hover { box-shadow: 0 14px 30px -12px var(--sky), 0 0 0 4px rgba(125, 199, 211, 0.18); transform: translateY(-2px); }

/* coach viz — a range-finder sweep over a pin field */
.coach-viz .cv-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.coach-viz .cv-sweep { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(125, 199, 211, 0.5));
  transform-origin: 100px 100px; animation: cv-spin 5.5s linear infinite; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
.coach-viz .cv-pin { fill: var(--volt); }
.coach-viz .cv-pin.is-alt { fill: var(--copper); }
.coach-viz .cv-hub { fill: var(--sky); }
.coach-viz .cv-hub-halo { fill: none; stroke: var(--sky); stroke-width: 1.2; opacity: 0.45; }

/* --- Bay 04 · Course Lab: terrain, a search radius and flags --- */
.course-viz .cvz-topo path { fill: none; stroke: var(--line); stroke-width: 1; }
.course-viz .cvz-topo path:nth-child(2) { opacity: 0.8; }
.course-viz .cvz-topo path:nth-child(3) { opacity: 0.6; }
.course-viz .cvz-ring {
  fill: none; stroke: var(--volt); stroke-width: 1.2; opacity: 0.55;
  stroke-dasharray: 3 4; animation: cvz-sweep 14s linear infinite;
}
@keyframes cvz-sweep { to { stroke-dashoffset: -100; } }
.course-viz .cvz-pole { stroke: var(--ink-faint); stroke-width: 1.4; stroke-linecap: round; }
.course-viz .cvz-flag { stroke-linejoin: round; }
.course-viz .cvz-flag.is-easy { fill: var(--volt); stroke: var(--volt); }
.course-viz .cvz-flag.is-mid  { fill: var(--copper); stroke: var(--copper); }
.course-viz .cvz-flag.is-hard { fill: var(--rose); stroke: var(--rose); }
.course-viz .cvz-hub { fill: var(--sky); }
.course-viz .cvz-hub-halo { fill: none; stroke: var(--sky); stroke-width: 1.2; opacity: 0.45; }

.bay-top {
  display: flex; justify-content: space-between; align-items: center;
  /* Negative inline margins let the seam bleed to the card edges the way a
     real fold does, instead of stopping at the text column. */
  margin: 0 -30px 8px; padding: 14px 30px 0;
  border-top: 1px dashed var(--line-hard);
}
.bay-tag {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); font-weight: 600;
  color: var(--bay-accent); text-transform: uppercase;
}
.bay-status {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); font-weight: 700;
  color: var(--bay-accent); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
}
.bay-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bay-accent); box-shadow: 0 0 8px var(--bay-accent); }

/* The die-cut window. Recessed to --bg so it reads as a hole punched through
   the front of the sleeve rather than a panel sitting on it. */
.bay-visual {
  position: relative; display: grid; place-items: center;
  margin: 16px 0 20px; padding: 16px 0;
  border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line-hard);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .bay-visual { box-shadow: inset 0 2px 10px rgba(40, 55, 15, 0.14); }
/* Corner registration ticks — the suite's instrument detail, which is what
   keeps the window reading as precision kit rather than packaging. */
.bay-visual::before, .bay-visual::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border-color: var(--bay-accent); opacity: 0.55; pointer-events: none;
}
.bay-visual::before { top: 8px; left: 8px; border-top: 1.5px solid; border-left: 1.5px solid; }
.bay-visual::after { bottom: 8px; right: 8px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.bay-visual svg { width: 158px; height: 158px; }

/* ball viz */
.fit-ring-track { fill: none; stroke: var(--line); stroke-width: 6; }
.fit-ring { fill: none; stroke: var(--volt); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 98 100; transform: rotate(-90deg); transform-origin: center;
  filter: drop-shadow(0 0 6px var(--volt-soft)); }
.ball-body { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); }
.dimples circle { fill: rgba(30,40,10,0.10); }
:root[data-theme="dark"] .dimples circle { fill: rgba(20,26,8,0.16); }
/* the ball sphere is a light cream in both themes, so keep this text dark for contrast */
.fit-pct { font-family: var(--mono); font-size: 30px; font-weight: 700; fill: #1b2410; }
.fit-pct-sm { font-size: 15px; fill: #5f7d0e; }
.fit-cap { font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; fill: #47571f; font-weight: 600; }

/* shaft viz */
.radar-grid polygon { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-spokes line { stroke: var(--line-soft); stroke-width: 1; }
.radar-fill { fill: var(--copper-soft); stroke: var(--copper); stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--copper-soft));
  stroke-dasharray: 100; stroke-dashoffset: 100; }
.reveal.is-in .radar-fill { animation: draw2 1.4s var(--ease) .3s forwards; }
@keyframes draw2 { to { stroke-dashoffset: 0; } }
.radar-nodes circle { fill: var(--copper); }

.bay h3 { font-size: 1.9rem; margin-bottom: 2px; }
.bay-sub { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 14px; }
.bay-sub em { color: var(--bay-accent); font-style: italic; }
.bay-desc { color: var(--ink-dim); font-size: 0.98rem; line-height: 1.62; }
.bay-desc strong { color: var(--ink); font-weight: 600; }

.bay-feats { list-style: none; margin: 18px 0 24px; display: grid; gap: 9px; }
.bay-feats li {
  position: relative; padding-left: 24px; font-size: 0.9rem; color: var(--ink-dim);
  font-family: var(--mono); letter-spacing: 0.01em;
}
.bay-feats li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 8px;
  border-left: 2px solid var(--bay-accent); border-bottom: 2px solid var(--bay-accent);
  transform: rotate(-45deg);
}
/* The bay CTA fills the card rather than shrink-wrapping its label.
   Shrink-to-fit made the four buttons four different widths (191/200/207/212px)
   against a 206px card interior, so "Enter the coach lab" and "Enter the course
   lab" wrapped to two lines while the other two didn't. Stretching them makes
   the row even by construction — every card gets the same button — and nowrap
   guarantees a single line. The inline padding drops because a full-width pill
   centres its own label: that padding is now only a minimum inset, not the
   thing giving the button its width, and the smaller value buys the headroom
   the longest label needs at the narrowest 4-across card (258px). */
.bay-btn {
  position: relative;
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  white-space: nowrap;
  padding-inline: 12px;
  gap: 7px;
  /* A hair under the hero buttons. Four-across only survives down to a 258px
     card, where the longest label ("Enter the course lab") would otherwise
     clear the pill by ~6px — and since nowrap overflows rather than wraps,
     that margin has to cover the font-display:swap window too, when the
     fallback face is measurably wider than Hanken. */
  font-size: 0.92rem;
}
/* The bottom flap: same dashed fold as the tuck seam, so the card is closed
   at both ends the way a sleeve is. */
.bay-btn::before {
  content: ""; position: absolute; left: -30px; right: -30px; top: -17px;
  border-top: 1px dashed var(--line-hard);
}

/* ---------------- HOW IT WORKS ---------------- */
.how { padding-top: 108px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step {
  position: relative; padding: 28px 24px 30px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .3s var(--ease), border-color .3s;
}
.step:hover { transform: translateY(-4px); border-color: var(--line-hard); }
.step-no {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--volt); margin-bottom: 12px;
}
.step-body h3 { font-size: 1.5rem; margin-bottom: 8px; }
.step-body p { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }
.step-ico {
  position: absolute; top: 24px; right: 22px; color: var(--ink-faint);
  display: grid; place-items: center; opacity: 0.75;
}
.step-ico svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step:hover .step-ico { color: var(--volt); }

/* connector dashes between steps */
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -18px; top: 50%; width: 14px; height: 2px;
  background-image: linear-gradient(90deg, var(--line-hard) 0 4px, transparent 4px 8px);
  background-size: 8px 2px;
}

/* ---------------- THE LAB / SCORECARD ---------------- */
.lab { padding-top: 112px; }
.lab-inner {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
}
.lab-copy h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 14px 0 16px; }
.lab-points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; margin-top: 30px; }
.lab-point { display: flex; flex-direction: column; gap: 5px; padding-left: 16px; border-left: 2px solid var(--volt); }
.lp-k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink); font-weight: 600; }
.lp-v { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.5; }

.scorecard {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hard); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
.sc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--panel-3); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
}
.sc-head span:first-child { font-weight: 700; color: var(--ink); }
.sc-par { color: var(--ink-dim); }   /* --panel-3 lifts the surface, so faint drops under 4.5:1 here */
.scorecard table { width: 100%; border-collapse: collapse; }
.scorecard td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.sc-hole { color: var(--ink-dim); font-size: 0.92rem; }
.sc-num {
  text-align: right; font-family: var(--mono); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sc-total td { border-bottom: none; background: var(--volt-soft); }
.sc-total .sc-hole { color: var(--ink); font-weight: 600; font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.sc-total .sc-num { color: var(--volt-deep); font-size: 1.4rem; }

/* ---------------- ABOUT ---------------- */
.about { padding-top: 112px; }
.about-inner {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center;
}
.about-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brand-plate {
  position: relative; width: 100%; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); /* matches the site's cards */
  border: 1px solid var(--line-hard); border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow);
  padding: clamp(30px, 5vw, 58px) clamp(24px, 5vw, 54px);
  display: grid; place-items: center;
}
.brand-plate::before { /* volt top-accent, like the bay cards */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--volt), transparent 70%); opacity: 0.85;
}
.brand-plate::after { /* corner registration tick */
  content: ""; position: absolute; left: 16px; top: 16px; width: 26px; height: 26px;
  border-left: 2px solid var(--volt); border-top: 2px solid var(--volt); opacity: 0.5;
}
.brand-lockup { position: relative; width: 100%; max-width: 320px; height: auto; display: block; }
/* theme-matched lockup: emblem + "fore" in ink, "fitter" in the site's volt accent */
.bl-emblem path, .bl-emblem polygon { fill: var(--ink); }
.bl-fore path { fill: var(--ink); }
.bl-fitter path { fill: var(--volt); }
.brand-plate-cap {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.about-copy h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 14px 0 18px; }
.about-copy p { color: var(--ink-dim); font-size: 1.05rem; line-height: 1.66; margin-bottom: 16px; }
.about-copy p strong { color: var(--ink); font-weight: 600; }
.about-sign {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem !important;
  color: var(--ink) !important; margin-top: 4px !important;
}

/* ---------------- FINAL CTA ---------------- */
.final-cta { padding-top: 116px; padding-bottom: 20px; }
.fc-inner {
  text-align: center; padding: 64px 40px; border-radius: calc(var(--r) + 6px);
  background:
    radial-gradient(90% 130% at 50% -20%, var(--volt-soft), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-hard); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.fc-inner::before, .fc-inner::after {
  content: ""; position: absolute; width: 60px; height: 60px; pointer-events: none;
  border: 2px solid var(--volt); opacity: 0.5;
}
.fc-inner::before { left: 20px; top: 20px; border-right: none; border-bottom: none; }
.fc-inner::after { right: 20px; bottom: 20px; border-left: none; border-top: none; }
.fc-inner .eyebrow { justify-content: center; margin-bottom: 16px; }
.fc-inner h2 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); margin-bottom: 30px; }
.fc-inner .hero-cta { justify-content: center; margin-top: 0; }

/* ---------------- FOOTER ---------------- */
.footer { border-top: 1px solid var(--line); margin-top: 90px; background: var(--bg-2); }
.foot-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 52px 32px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px;
}
.foot-brand .brand { margin-bottom: 14px; }
.foot-tag { color: var(--ink-dim); font-size: 0.92rem; max-width: 26em; line-height: 1.55; }
.foot-col h4 { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 14px; }
.foot-col a, .foot-note { display: block; font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 9px; transition: color .2s; }
.foot-col a:hover { color: var(--volt); }
.foot-note { color: var(--ink-faint); }
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 20px 32px 34px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px;
  font-size: 0.8rem; color: var(--ink-faint); flex-wrap: wrap;
}
.foot-fine { max-width: 44em; }

/* ---------------- REVEAL ANIMATION ---------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- RESPONSIVE ---------------- */
/* The shelf needs neighbours. Once the grid drops to a single full-width
   column there is no row to read the boxes against, and a 14° turn on a
   330px-wide card stops looking like depth and starts looking like a broken
   transform — the body copy skews badly at that width. Keep a hint of the
   angle so the side face still catches light, and let the flat sleeve cues
   (punch, seams, die-cut window) carry it from there. */
@media (max-width: 620px) {
  .bay { --sleeve-turn: -5deg; --sleeve-depth: 34px; }
}

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 52px; }
  .monitor { order: 2; }
  .lab-inner { grid-template-columns: 1fr; gap: 34px; }
  .about-inner { grid-template-columns: 1fr; gap: 34px; }
  .about-brand { max-width: 460px; margin: 0 auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  section { padding: 0 22px; }
  .nav { padding: 12px 20px; gap: 14px; }
  .nav-links { display: none; }
  .bay-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .lab-points { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, auto); gap: 22px; }
  .hero-stats dd { font-size: 1.8rem; }
  .foot-bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .readouts { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
  .fc-inner { padding: 44px 24px; }
}