/* hub.css — stumped.games front door ("the stadium"), ported from the Lovable "Stumped Hub" export to plain
   hand-authored CSS (no Tailwind/shadcn/React), the way player.css / league.css are written.

   Token fix folded in: the export shipped --chartreuse / --violet-glow whose names didn't match their values;
   renamed to --amber (#FFB734) / --teal (#007793). Values unchanged.
   Game miniatures keep their own game colours (see game-minis.css) — deliberately NOT hub-tokenised. */

:root {
  /* brand palette — deep stadium ink + floodlight amber + teal */
  --night: oklch(0.22 0.055 245);
  --night-deep: oklch(0.14 0.04 248);
  --amber: oklch(0.83 0.16 76);          /* ≈ #FFB734 — the primary/action colour (was mislabeled --chartreuse) */
  --amber-foreground: oklch(0.17 0.045 248);
  --teal: oklch(0.52 0.11 218);          /* ≈ #007793 (was mislabeled --violet-glow) */
  --floodlight: oklch(0.75 0.15 62);
  --ticker: oklch(0.18 0.045 248);

  --background: var(--night-deep);
  --foreground: oklch(0.98 0.005 250);
  --card: oklch(0.24 0.05 246 / 68%);
  --border: oklch(1 0 0 / 14%);
  --muted-foreground: oklch(0.82 0.025 240);  /* raised from 0.76 — muted is for genuinely secondary text (stamps, dates, ©), not a wash over everything */
  --secondary: oklch(0.31 0.06 240);
  --primary: var(--amber);
  --primary-foreground: var(--amber-foreground);

  --shadow-card: 0 24px 60px -20px oklch(0.07 0.03 248 / 85%);
  --gradient-stage: linear-gradient(to bottom, transparent 0%, oklch(0.14 0.04 248 / 12%) 38%, oklch(0.14 0.04 248 / 42%) 62%, oklch(0.14 0.04 248 / 78%) 82%, var(--night-deep) 100%);
  --gradient-ground: linear-gradient(to bottom, var(--night-deep) 0%, oklch(0.128 0.038 248) 55%, oklch(0.108 0.032 250) 100%);

  --f-display: "Cabinet Grotesk", system-ui, sans-serif;
  --f-sans: "General Sans", system-ui, sans-serif;
  --max: 1440px;
  --gutter: clamp(24px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hub {
  margin: 0; min-width: 320px;
  background-color: var(--background); background-image: var(--gradient-ground); background-attachment: fixed;
  color: var(--foreground); font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.hub a { color: inherit; text-decoration: none; }
.hb-display { font-family: var(--f-display); }
.hb-shell { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* film grain overlay (shared) */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>"); }

/* ── self-hosted fonts (OFL — licenses in /assets/fonts/) ──
   Optician Sans: caps-only geometric, used for the hero CTA.
   Saira SemiCondensed SemiBold: sporty condensed grotesk, used for the hero subhead.
   (The ticker uses Archivo, loaded via Google Fonts in index.html.) */
@font-face { font-family: "Optician Sans"; src: url("/assets/fonts/OpticianSans.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira SemiCondensed"; src: url("/assets/fonts/SairaSemiCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ── live ticker ── amber band, animated by the inline script in index.html (score data baked between the
   markers by tools/update-scores.mjs). Two motions by design: a full-width NAVY SWEEP announces each beat
   — a league, or that league's scores — and settles into a small chip on the left; game invites CRAWL
   past like a wire; each score FLIPS up and holds while its two starting-QB stat lines crawl beside it.
   A soft-white bottom border gives the band a hard edge over the nav. Ticker type is Archivo.
   Score-item structure adapted from paulpullen/sportsticker (MIT) — our palette, our type, no logos. */
.hb-ticker { position: relative; z-index: 30; width: 100%; overflow: hidden; border-bottom: 3px solid oklch(0.9 0.01 245); background: var(--amber); }
.hb-ticker-inner { position: relative; display: flex; align-items: center; gap: 14px; height: 40px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* chip and brand sit in EQUAL-width side zones (--tk-side) so the navy screen is centred with the same
   space on its left and right. The chip hugs the RIGHT of its zone (snug against the navy screen, so a
   short league chip sits as close to the screen as a wide scores chip); the brand hugs the right of its zone. */
.hb-ticker { --tk-side: 150px; }
.hb-ticker-lead { flex: 0 0 var(--tk-side); display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.hb-ticker-chip { flex: none; display: inline-flex; align-items: center; height: 30px; background: var(--night-deep); color: #fff; font-family: "Archivo", var(--f-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 13px; border-radius: 4px; white-space: nowrap; }
/* the scroll zone is BOUNDED (not full-width) so content enters near centre and each crawl is short.
   The scroll zone itself is the NAVY panel — a "screen" set into the amber band — so the crawl reads as
   its own surface; the chip sits left and the brand sits right, both on amber. */
/* the navy screen FILLS the space between chip and brand (flex:1) so there's no dead amber gap; the
   fit→flip rule keeps it readable at any width (wider screen ⇒ more invites fit ⇒ flip). Edges slanted "/". */
/* slant driven by skewX (not clip-path) so border-radius can round the corners like the score chips;
   the skew shears the content, so the box/message/stat text is counter-skewed (skewX(13deg)) to stay upright. */
.hb-ticker-slot { position: relative; flex: 1 1 auto; min-width: 0; height: 30px; overflow: hidden; background: var(--night-deep); transform: skewX(-13deg); border-radius: 4px; }
.hb-ticker-brand { flex: 0 0 var(--tk-side); display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; white-space: nowrap;
  color: oklch(0.22 0.05 250 / 0.72); font-family: "Archivo", var(--f-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: lowercase; }
.hb-ticker-stage { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform, top; font-family: "Archivo", var(--f-sans); }
.hb-tk-msg { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: inline-block; transform: skewX(13deg); }
.hb-tk-msg b { font-weight: 800; }                                    /* the game name leads each invite */
.hb-tk-sep { color: oklch(1 0 0 / 0.4); padding: 0 6px; }             /* separator in the reduced-motion static line */
/* a flipped score on the navy panel: winner box in amber (navy text), loser box a glassy white; QB stat
   lines crawl beside them in white. */
.hb-tk-su { display: flex; align-items: center; height: 100%; width: 100%; gap: 14px; }
/* the team boxes inherit the slot's skew (parallelograms matching the screen); their text is counter-skewed. */
.hb-tk-su-score { flex: none; display: inline-flex; align-items: stretch; margin-left: 9px; }
.hb-tk-team { display: inline-flex; align-items: center; gap: 0; background: oklch(1 0 0 / 0.14); color: #fff; height: 24px; padding: 0 12px; font-family: "Archivo", var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.hb-tk-team:first-child { border-radius: 3px 0 0 3px; }
.hb-tk-team:last-child { border-radius: 0 3px 3px 0; border-left: 1px solid oklch(1 0 0 / 0.18); }
.hb-tk-team .ab { font-weight: 800; display: inline-block; transform: skewX(13deg); }
/* real W-L record: small + dim + parenthesised, snug to the name so the score still dominates */
.hb-tk-team .rec { display: inline-block; transform: skewX(13deg); font-size: 11px; font-weight: 600; opacity: 0.55; letter-spacing: 0; margin-left: 4px; }
.hb-tk-team .rec::before { content: "("; }
.hb-tk-team .rec::after { content: ")"; }
.hb-tk-team .pt { font-variant-numeric: tabular-nums; display: inline-block; transform: skewX(13deg); font-size: 15px; font-weight: 800; margin-left: 11px; }
.hb-tk-team.win { background: var(--amber); color: var(--night-deep); }
.hb-tk-team.win .rec { opacity: 0.7; }
.hb-tk-su-detail { flex: 1; min-width: 0; position: relative; overflow: hidden; height: 100%; }
.hb-tk-su-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; font-family: "Archivo", var(--f-sans); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-variant-numeric: tabular-nums; transform: skewX(13deg); }
.hb-tk-su-strip b { font-weight: 800; }
.hb-ticker-sweep { position: absolute; left: max(0px, calc((100% - var(--max)) / 2)); top: 0; height: 40px; width: 0; max-width: var(--max); overflow: hidden; background: var(--night-deep); z-index: 5; display: flex; align-items: center; perspective: 600px; }
.hb-tk-sweep-lg { color: #fff; font-family: "Archivo", var(--f-sans); font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transform-origin: center; padding-left: var(--gutter); }
.hb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* narrow screens: drop the brand bug and let the scroll zone take the full width */
@media (max-width: 640px) { .hb-ticker-brand { display: none; } .hb-ticker-lead { flex: 0 0 auto; } .hb-ticker-slot { flex: 1 1 auto; width: auto; } }

/* ── stadium stage (full-bleed hero) ── */
.hb-stage { position: relative; isolation: isolate; }
.hb-stage-img { position: absolute; inset: 0; z-index: -10; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.hb-stage-fade { position: absolute; inset: 0; z-index: -10; pointer-events: none; background-image: var(--gradient-stage); }

/* ── camera flashes ── real camera flashes, not pulsing dots: instant on, fast fade, then a long dark
   gap, with per-dot durations/delays wide and un-round so the crowd sparkles irregularly. An overlay
   LAYER (not an edit to the illustration): above the image/fade (z -10), below the in-flow hero content,
   so flashes pop in the stands behind the wordmark. Dots are constrained to the CROWD in index.html
   (never the sky, or they read as stars). Pure CSS, no JS on this static page. */
.hb-flashes { position: absolute; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; }
.hb-flash { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 3px 1px oklch(1 0 0 / 1), 0 0 8px 2px oklch(1 0 0 / 0.6), 0 0 16px 5px oklch(1 0 0 / 0.22);
  animation: hb-flash 4s linear infinite; }
@keyframes hb-flash {
  0%   { opacity: 0; }
  2%   { opacity: 1; }   /* near-instant pop */
  8%   { opacity: 0; }   /* fast fade */
  100% { opacity: 0; }   /* long, dark gap — the flash is brief and the wait irregular per dot */
}

/* ── nav ── */
/* The nav sits on its own navy band — a full-bleed gradient that's a solid surface at the top and
   fades to transparent below the nav, so the nav reads as a distinct section while the hero/stadium
   still shows through beneath it. */
.hb-nav { position: relative; z-index: 30; display: flex; align-items: center; gap: 40px; padding-top: clamp(18px, 3vw, 30px); padding-bottom: 14px; }
.hb-nav::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: calc(100% + 30px); pointer-events: none;
  background: linear-gradient(to bottom, oklch(0.13 0.04 248 / 0.92) 0%, oklch(0.13 0.04 248 / 0.55) 48%, transparent 100%);
}
/* section divider beneath the nav — a solid amber seam (no gradient), 2px, full-bleed */
.hb-nav::after {
  content: ""; position: absolute; z-index: -1; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 2px; pointer-events: none; background: oklch(0.83 0.16 76 / 0.8);
}
.hb-wordmark { font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 2.5vw, 24px); letter-spacing: -0.01em; }
.hb-wordmark .dot, .hb-primary-dot { color: var(--primary); }
/* nav wordmark sits over the floodlights too — same halo idea, lighter */
.hb-nav .hb-wordmark { text-shadow: 0 1px 12px oklch(0.10 0.03 248 / 0.55); }
/* Nav links: full-white ink + a legibility halo (no per-item boxes — the section rule above carries the
   structure). Hover goes amber, tying the links into the page's amber system. */
.hb-nav-leagues { display: none; align-items: center; gap: 28px; }
.hb-nav-leagues a, .hb-nav-right a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--foreground);
  text-shadow: 0 1px 10px oklch(0.10 0.03 248 / 0.6); transition: color 0.15s;
}
/* light clickable affordance: an amber underline that grows in on hover/focus (no heavy box).
   Drawn with a border (not background) so it stays a decorative underline, not the anchor's surface. */
.hb-nav-leagues a::after, .hb-nav-right a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 0; border-bottom: 2px solid var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease;
}
.hb-nav-leagues a:hover, .hb-nav-right a:hover, .hb-nav-leagues a:focus-visible, .hb-nav-right a:focus-visible { color: var(--amber); }
.hb-nav-leagues a:hover::after, .hb-nav-right a:hover::after, .hb-nav-leagues a:focus-visible::after, .hb-nav-right a:focus-visible::after { transform: scaleX(1); }
.hb-nav .tick { width: 6px; height: 6px; background: var(--amber); }
.hb-nav-right { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; color: var(--foreground); }
/* amber fill + white keyline — a solid button that doesn't get lost under the amber ticker; the white
   keyline separates it from the amber band above and reads as a control, not part of the ticker. */
.hb-menu-btn { border: 1px solid #fff; padding: 6px 16px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; background: var(--amber); color: var(--night-deep); font: inherit; font-size: 13px; font-weight: 700; transition: background-color 0.15s, box-shadow 0.15s; }
.hb-menu-btn:hover { background: oklch(0.88 0.16 76); box-shadow: 0 0 0 1px #fff; }
/* The nav is a logo on the left + a single Menu button on the right, at ALL widths — the button opens
   the full overlay (WNBA · NFL · About · …). No inline links in the bar. (.hb-nav-leagues is unused now;
   .hb-nav-right keeps margin-left:auto to push the Menu button right.) */

/* ── hero ── */
/* Extra top padding drops the wordmark below the corner floodlights into the darker crowd band — this
   fixes legibility by MOVING off the lights rather than dimming them, preserving the whole illustration. */
.hb-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(104px, 15vw, 216px); }
/* Halo glued to the glyphs — a dark cushion right behind each letter (the "dim behind the S and period"),
   which fixes legibility over the floodlights while dimming only the glyph vicinity, not the lights
   between the words. Three layers: tight for crispness, mid + wide for a soft localized dim. */
.hb-h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 13vw, 8.5rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0;
  text-shadow: 0 1px 3px oklch(0.09 0.03 248 / 0.66), 0 4px 20px oklch(0.08 0.03 248 / 0.72), 0 10px 56px oklch(0.06 0.03 248 / 0.55); }
.hb-h1 .dot { color: var(--primary); }
.hb-tagline { margin: clamp(24px, 4vw, 32px) 0 0; max-width: 42rem; font-family: "Saira SemiCondensed", var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 3.3vw, 2.1rem); letter-spacing: 0.005em; color: oklch(0.99 0.004 250 / 0.97); text-shadow: 0 1px 14px oklch(0.09 0.03 248 / 0.5); }
.hb-subline { margin: 14px 0 0; max-width: 36rem; font-size: clamp(1rem, 2vw, 1.125rem); color: oklch(0.98 0.005 250 / 0.93); text-shadow: 0 1px 12px oklch(0.09 0.03 248 / 0.45); }
/* .hub .hb-cta (0,2,0) so the dark ink wins over `.hub a { color: inherit }` (0,1,1) — otherwise the button
   inherits the near-white body ink and renders light-on-amber (the league-page bug, preempted here).
   Amber surface (matching the ticker + Play buttons, so amber reads as a system, not a lone accent), and
   large/heavy because it's the one action on the page. */
.hub .hb-cta { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; background: var(--amber); color: #000; padding: 18px 44px; font-family: "Optician Sans", var(--f-sans); font-size: 22px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; font-synthesis: none; -webkit-text-stroke: 0.5px #000; border: 1px solid transparent; transition: box-shadow 0.3s, transform 0.15s; }
.hb-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--amber), 0 0 32px 7px oklch(0.83 0.16 76 / 0.42); }
.hb-lowerbowl { height: clamp(38vh, 44vh, 46vh); }
/* faint AMBER divider (was grey-at-low-opacity, which did nothing) — a subtle on-system seam. */
.hb-rule { height: 1px; width: 100%; max-width: var(--max); margin: 0 auto; background: linear-gradient(to right, transparent, oklch(0.83 0.16 76 / 0.45), transparent); }

/* ── trending games ── */
.hb-trending { position: relative; z-index: 20; margin-top: -6rem; padding-bottom: 24px; }
.hb-trending-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
.hb-trending-head h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -0.01em; margin: 0; }
/* amber marker over the section title — the same amber that bands the ticker, so the colour recurs */
.hb-trending-head h2::before { content: ""; display: block; width: 44px; height: 4px; background: var(--amber); margin-bottom: 16px; }
.hb-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .hb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hb-cards { grid-template-columns: repeat(3, 1fr); } }

/* amber top edge marks a live/new card — another surface the palette lands on, and it anchors the
   card shelf instead of letting it float. */
.hb-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid var(--amber); background: var(--card); padding: 28px; box-shadow: var(--shadow-card); backdrop-filter: blur(12px); transition: transform 0.3s; }
.hb-card:hover { transform: translateY(-4px); }
.hb-card-top { display: flex; align-items: center; justify-content: space-between; }
.hb-pill { padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.hb-status.is-new { color: var(--primary); }
.hb-status.is-played { color: var(--muted-foreground); }
.hb-status .dot { width: 6px; height: 6px; }
.hb-status.is-new .dot { background: var(--primary); animation: hb-pulse 2s ease-in-out infinite; }
.hb-status.is-played .dot { background: var(--muted-foreground); }
@keyframes hb-pulse { 50% { opacity: 0.4; } }
.hb-card-mini { position: relative; z-index: 10; margin-top: 24px; }
.hb-card h3 { font-family: var(--f-display); font-weight: 800; font-size: 1.875rem; letter-spacing: -0.01em; margin: 24px 0 0; }
.hb-card-blurb { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: oklch(0.98 0.005 250 / 0.9); }
.hb-card-foot { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.hb-card-stamp { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
/* same treatment as the nav Menu chip: amber fill + white keyline, brighter-amber + white-ring on hover */
.hub .hb-card-play { background: var(--primary); color: var(--primary-foreground); border: 1px solid #fff; padding: 6px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.15s, box-shadow 0.15s; }
.hub .hb-card-play:hover { background: oklch(0.88 0.16 76); box-shadow: 0 0 0 1px #fff; }

/* ── footer ── */
.hb-footer { position: relative; z-index: 20; margin: 6rem auto 0; padding: 32px 0 48px; }
.hb-footer-row { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--border); padding-top: 32px; }
@media (min-width: 1024px) { .hb-footer-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.hb-footer-nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; color: oklch(0.98 0.005 250 / 0.88); }
.hb-footer-nav a:hover { color: var(--foreground); }
.hb-footer .copy { font-size: 12px; color: var(--muted-foreground); }

/* ── mobile menu (checkbox hack, no JS) ── */
.hb-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hb-menu { display: none; position: fixed; inset: 0; z-index: 50; flex-direction: column; padding: 28px 32px; background: var(--night-deep); overflow-y: auto; }
.hb-menu-toggle:checked ~ .hb-menu { display: flex; }
.hb-menu-head { display: flex; align-items: center; justify-content: space-between; }
.hb-menu-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); cursor: pointer; }
.hb-menu-sec { margin-top: 40px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); }
.hb-menu-leagues { margin-top: 16px; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.hb-menu-leagues a { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 16px 0; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; }
.hb-menu-leagues .sq { width: 8px; height: 8px; }
.hb-menu-links { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.hb-menu-links a { font-size: 14px; color: oklch(0.98 0.005 250 / 0.9); }
.hb-menu .copy { margin-top: auto; padding-top: 24px; font-size: 12px; color: var(--muted-foreground); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hb-status.is-new .dot, .hb-flash { animation: none; }
  /* the ticker's JS shows a static line under reduced motion; make sure the stage flows in place */
  .hb-ticker-stage { position: static; transform: none !important; top: auto !important; width: auto !important; padding-left: 10px; }
  .hb-ticker-sweep { display: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ── content pages (About / How We Check / Privacy / Terms) ── */
:root { --link: oklch(0.76 0.12 218); }   /* lightened teal — the base teal #007793 is ~3:1 on the dark ground; this clears 4.5:1 */
.hb-page-head { border-bottom: 1px solid var(--border); }
.hb-page-head .hb-shell { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.hb-page-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: oklch(0.98 0.005 250 / 0.88); }
.hb-page-links a:hover { color: var(--foreground); }
.hb-page { padding-block: clamp(40px, 7vw, 72px); }
.hb-prose { max-width: 720px; margin: 0 auto; }
.hb-prose .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin: 0; }
.hb-prose h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.01em; margin: 12px 0 0; }
.hb-prose .updated { color: var(--muted-foreground); font-size: 13px; margin: 14px 0 0; }
.hb-prose h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.375rem; margin: 36px 0 0; }
.hb-prose p, .hb-prose li { color: oklch(0.98 0.005 250 / 0.92); font-size: 15px; line-height: 1.65; margin: 12px 0 0; }
.hb-prose ul { margin: 12px 0 0; padding-left: 20px; }
.hb-prose li { margin-top: 8px; }
.hb-prose strong { color: var(--foreground); }
.hb-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.hb-prose a:hover { color: var(--foreground); }