/* ============================================================
   Broadcast Assistant AI — marketing site
   Headlines: General Sans — a calm, confident premium sans (The
   Athletic's register: trust/depth, not ESPN/CBS's loud broadcast-
   graphics convention, and not a serif borrowed from fashion/luxury).
   The product's own real broadcast fonts (Big Shoulders Display)
   are demoted to a deliberate small signature detail — wordmark,
   jersey-style badges, the loading readout — never headline scale.
   General Sans also carries body/capsule copy (a confirmed switch from
   the prior Barlow Condensed body font); Inter (labels/UI) unchanged.
   Color duality: press-box ink (dark) <-> printed board paper (light).
   ============================================================ */

/* WOFF2, subset to Basic Latin + Latin-1 + Latin Extended-A + General
   Punctuation + arrows (covers this site's copy with headroom for accented
   names/future edits) via fonttools pyftsubset — cut the combined font
   payload from ~1.55MB of raw TTF to ~211KB (~86% smaller), largest win on
   Inter (a large multi-script font normally) at ~7% of its original size.
   font-display: swap avoids invisible-text on load, which otherwise
   contradicted the hero's own "text is the constant" rule below. */
@font-face { font-family: 'General Sans'; src: url('public/fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('public/fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('public/fonts/GeneralSans-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('public/fonts/GeneralSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('public/fonts/BigShouldersDisplay-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('public/fonts/BigShouldersDisplay-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('public/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('public/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('public/fonts/Inter-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --ink-900: #0b0f1a;
  --ink-800: #131a2b;
  --ink-700: #1c2540;
  --ink-line: #2a3350;
  --ink-text: #edeff4;
  --ink-muted: #98a3bd;

  --paper: #f2ece0;
  --paper-raised: #faf7f0;
  --paper-line: #d9cfba;
  --paper-text: #18140f;
  --paper-muted: #6b6255;

  --tally: #C63A22;
  --tally-dim: #9E2E1B;
  --turf: #2e6e4e;

  --font-headline: 'General Sans', sans-serif;
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'General Sans', sans-serif;
  --font-ui: 'Inter', sans-serif;

  --container: 1180px;
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* A near-invisible grain texture — the one common trick that keeps a
   flat digital dark/paper duality from reading as sterile. Deliberately
   subtle: felt, not seen. mix-blend-mode lets it sit over both grounds
   without needing a separate light/dark version. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: url('public/noise.webp');
  background-size: 100px 100px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  body::after { display: none; }
}

/* ---------- scroll progress bar ---------- */
/* A thin, understated reading-progress cue — fits an 11-section page and
   the editorial "considered reading experience" thesis. Always present
   (even during the hero), width driven by scroll fraction in script.js. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--tally);
  z-index: 9500;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}
/* height:auto matters as much as max-width here: any <img> carrying HTML
   width/height attributes (added for the showcase boards specifically to
   avoid layout shift) gets those attributes' height mapped as a literal
   CSS pixel height by the browser unless height is explicitly set to
   auto — without this, max-width alone shrinks the image's rendered
   width but leaves height pinned at the attribute's raw value, and the
   default object-fit:fill then non-uniformly stretches the image to
   fill that mismatched box. Real bug, not hypothetical: this is exactly
   what made the showcase boards render squashed/illegible. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--tally); color: #fff; }
::-moz-selection { background: var(--tally); color: #fff; }

/* ---------- focus-visible ---------- */
/* A considered brand-colored ring in place of the browser default blue
   outline, covering every plain link/button on the site. Two elements
   already carried their own more specific treatment before this pass
   (.showcase-zoom-btn, .board-lightbox-close) and are unaffected by this
   broader default. An outline, not a box-shadow, so it stays outside the
   Flat-By-Default rule's scope -- state feedback, not decorative
   elevation. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tally);
  outline-offset: 3px;
}
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- reveal-on-scroll ---------- */
/* Slower, more deliberate than a quick utilitarian fade — negative space
   and unhurried pacing apply throughout the page, not just the hero. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- nav ---------- */
/* Hidden until the visitor scrolls past the full-viewport hero — nothing
   competes with that first screen. .visible is toggled by script.js. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(11, 15, 26, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-line);
  box-shadow: inset 0 3px 0 0 var(--tally);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.nav.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: opacity 0.2s ease; transform: none; }
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink-text);
  white-space: nowrap;
}
.wordmark span { color: var(--tally); margin-left: 6px; }
.wordmark.small { font-size: 16px; }
/* Image wordmark (trimmed transparent PrepOnev4). Sized to sit at the
   text-wordmark's optical height; width follows the ~3.9:1 aspect. */
.wordmark-img { display: block; height: 26px; width: auto; }
@media (max-width: 900px) { .wordmark-img { height: 24px; } }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
}
.nav-links a {
  position: relative;
}
.nav-links a:hover { color: var(--ink-text); }
/* A thin animated underline on hover -- a considered editorial-nav detail
   (a flat color swap alone read as the site's only nav feedback) rather
   than a decorative flourish: fast 0.2s state feedback, same bucket as
   the existing 0.15s button-hover convention, not the slow cinematic
   easing reserved for section-level motion. Skipped on the mobile
   slide-down panel, where full-width rows already give clear affordance
   and an underline reads as visual noise under a thumb. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--tally);
  transition: right 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { right: 0; }
@media (max-width: 900px) {
  .nav-links a::after { display: none; }
}
.nav-cta {
  background: var(--tally);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: 3px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--tally-dim); }
.nav-toggle { display: none; }

/* ---------- shared eyebrow / type ---------- */
/* Styled as a score-bug tag: a small solid color block, the way an on-air
   graphic labels a segment, rather than a plain colored line of text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 20px;
  background: var(--tally);
  color: #fff;
  padding: 5px 11px 4px;
  border-radius: 2px;
}
.eyebrow-dark, .eyebrow-light { color: #fff; }
.eyebrow::before { content: '\25CF'; font-size: 6px; margin-right: 8px; position: relative; top: -1px; opacity: 0.85; }

/* Quiet variant: the hero/showcase moments earn the full score-bug chip;
   trust, FAQ, and other reading-heavy sections stay a plain colored label
   so the broadcast-graphics device doesn't blanket every section equally. */
.eyebrow-quiet {
  display: block;
  background: none;
  color: var(--tally);
  padding: 0;
  border-radius: 0;
}
.eyebrow-quiet::before { opacity: 1; }

/* ---------- hero: full-viewport cinematic first screen ---------- */
/* The entire first screen is the real-board reveal animation. No nav, no
   card framing, no boxed component — the real board fills the viewport
   itself. Headline copy overlays at bottom-left once the sequence
   settles, over a dark scrim for contrast.

   PROTOTYPE STATE: four reveal mechanisms are wired up simultaneously,
   switchable via #protoPanel and the [data-variant] attribute on
   #boardAnim, for live side-by-side comparison. "wipe" is the previous
   shipped direction (kept as a reference point); a/b/c are the new
   candidates. Once a direction is chosen, delete the unused variants'
   CSS/HTML/JS and #protoPanel entirely — this comparison rig is not
   itself the deliverable. */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  background: var(--ink-900);
}
/* No overflow:hidden here on purpose: if overlay content is ever taller
   than the viewport (a short laptop screen, a browser zoom level), the
   section grows past 100vh (it's min-height, not height) and everything
   stays reachable by scrolling instead of being silently clipped off the
   top — a real bug that shipped once already. */
.board-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- prototype comparison panel (not production UI) ----------
   Hidden by default — only shown when script.js detects ?debug=1 in the
   URL (it adds .is-debug). Visitors never see this; it exists purely so
   the archived reveal/toggle variants stay reachable for reference. */
.proto-panel {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 8px;
  font-family: 'Courier New', monospace;
}
.proto-panel.is-debug { display: flex; }
.proto-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.proto-label {
  color: #9aa; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  width: 46px; flex-shrink: 0;
}
.proto-btn {
  background: #222;
  color: #ddd;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 10.5px;
  padding: 4px 7px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.proto-btn:hover { background: #333; border-color: #666; }
.proto-btn.is-active { background: var(--tally); border-color: var(--tally); color: #fff; }

/* Genuinely full-bleed: every layer fills the entire hero, edge to edge,
   no card border, no contained "poster," no visible dark surround. */
.hero-layer {
  position: absolute;
  inset: 0;
}
.hero-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* "Newspaper, slightly faded" — real, detailed, and recognizable, not a
     dark, nearly-illegible backdrop. Desaturation lives here (not baked
     into the asset) so it stays easy to tune. */
  filter: saturate(0.5) brightness(1.08) contrast(0.94);
}
.hero-layer-notes { z-index: 2; }
.hero-layer-board { z-index: 1; perspective: 2400px; }

.board-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.3s var(--ease-slow);
}
.board-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.board-face-front { transform: rotateY(0deg); }
.board-face-back { transform: rotateY(180deg); }
.board-anim[data-state="settled-flipped"] .board-flip-inner { transform: rotateY(180deg); }

/* ---- Variant: wipe (the previously-shipped direction, kept as a
   reference point) — a clip-path sweep with a parallax scale difference,
   the document lifting away to reveal the board underneath. ---- */
[data-variant="wipe"] .hero-layer-notes {
  clip-path: inset(0 0 0 0%);
  transform: scale(1);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45));
  transition: clip-path 1.2s var(--ease-slow), transform 1.2s var(--ease-slow);
}
[data-variant="wipe"]:not([data-state="document"]) .hero-layer-notes {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.06);
}
[data-variant="wipe"] .hero-layer-board {
  transform: scale(1.035);
  transition: transform 1.2s var(--ease-slow);
}
[data-variant="wipe"]:not([data-state="document"]) .hero-layer-board {
  transform: scale(1);
}

/* ---- Variant A: particle/tile dissolve (canvas-driven) — structured
   chaos resolving into order. See script.js `playVariantA`. The canvas
   owns both images itself during the reveal; the real img layers are
   hidden throughout and only the board layer is swapped back in once
   settled, so the manual flip control works exactly as in every other
   variant afterward. ---- */
[data-variant="a"] .hero-layer-notes,
[data-variant="a"] .hero-layer-board {
  display: none;
}
[data-variant="a"]:not([data-state="document"]):not([data-state="revealing"]) .hero-layer-board {
  display: block;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
}
[data-variant="a"][data-state="document"] .hero-canvas,
[data-variant="a"][data-state="revealing"] .hero-canvas {
  display: block;
}

/* ---- Variant B: slow cross-dissolve with depth — the document pulls
   back (scales up slightly, softens) as it fades, while the board
   sharpens and settles forward. ---- */
/* Note: opacity/blur use plain ease-in-out, NOT --ease-slow. --ease-slow
   is an ease-OUT curve (fast start, long slow settle) — correct for the
   scale "settling" motion below, but wrong for a fade: it was found to
   drop opacity to near-invisible within the first ~35% of the duration,
   so the "2.6s cross-dissolve" actually read as a fast fade plus a long
   invisible hold, not a genuinely slow, visible dissolve. */
[data-variant="b"] .hero-layer-notes {
  opacity: 1;
  transform: scale(1);
  transition: opacity 2.6s ease-in-out, transform 2.6s var(--ease-slow);
}
[data-variant="b"] .hero-layer-notes img {
  filter: saturate(0.5) brightness(1.08) contrast(0.94) blur(0px);
  transition: filter 2.6s ease-in-out;
}
[data-variant="b"]:not([data-state="document"]) .hero-layer-notes {
  opacity: 0;
  transform: scale(1.05);
}
[data-variant="b"]:not([data-state="document"]) .hero-layer-notes img {
  filter: saturate(0.5) brightness(1.08) contrast(0.94) blur(10px);
}
[data-variant="b"] .hero-layer-board {
  transform: scale(1.045);
  transition: transform 2.6s var(--ease-slow);
}
[data-variant="b"] .hero-layer-board img {
  filter: saturate(0.5) brightness(1.08) contrast(0.94) blur(7px);
  transition: filter 2.6s ease-in-out;
}
[data-variant="b"]:not([data-state="document"]) .hero-layer-board {
  transform: scale(1);
}
[data-variant="b"]:not([data-state="document"]) .hero-layer-board img {
  filter: saturate(0.5) brightness(1.08) contrast(0.94) blur(0px);
}

/* ---- Variant C: assembly / snap-into-place — the document fades out
   plainly while real board tiles (sliced via background-position, see
   `playVariantC`) fade + scale up into their grid positions with a
   staggered, semi-randomized order. ---- */
[data-variant="c"] .hero-layer-notes {
  transition: opacity 1.8s var(--ease-slow);
}
[data-variant="c"]:not([data-state="document"]) .hero-layer-notes {
  opacity: 0;
}
[data-variant="c"] .hero-layer-board { display: none; }
[data-variant="c"]:not([data-state="document"]):not([data-state="revealing"]) .hero-layer-board {
  display: block;
}
.hero-tiles {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
}
[data-variant="c"][data-state="revealing"] .hero-tiles,
[data-variant="c"][data-state="document"] .hero-tiles {
  display: block;
}
.hero-tile {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.82);
  /* Keep in sync with TILE_DURATION in script.js (playVariantC) if either changes. */
  transition: opacity 0.65s var(--ease-slow), transform 0.65s var(--ease-slow);
  filter: saturate(0.5) brightness(1.08) contrast(0.94);
}
.hero-tile.is-in { opacity: 1; transform: scale(1); }

/* ---------- board toggle (Part 2: a control, not board content) ----------
   Three visual-separation treatments, switchable for comparison. Common
   to all: appears only once the board settles, styled with a material
   (frosted glass / solid ribbon) deliberately different from the board's
   own flat print-graphic tags, so it never reads as part of the board. */
.board-toggle {
  position: absolute;
  z-index: 6;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.board-anim[data-state="settled"] .board-toggle,
.board-anim[data-state="settled-flipped"] .board-toggle {
  opacity: 1;
  pointer-events: auto;
}
.board-toggle-opt {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Option 1: header bar — a full-width strip clearly outside the board's
   own visual language, anchored to the very top of the frame.
   NOTE (real finding, not a hypothetical): the real board image bakes in
   its own "OFFENSE"/"DEFENSE" label in that exact top-right corner (part
   of the actual product, not decoration) — a thin gradient there let it
   bleed through behind our control, producing two competing labels. The
   bar is deliberately solid and tall enough to fully supersede that zone
   rather than merely dim it. */
[data-toggle="bar"] .board-toggle {
  top: 0; left: 0; right: 0;
  min-height: 72px;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 32px;
  background: linear-gradient(to bottom, rgba(11,15,26,0.94) 0%, rgba(11,15,26,0.94) 65%, rgba(11,15,26,0) 100%);
  transform: translateY(-8px);
}
[data-toggle="bar"] .board-anim[data-state="settled"] .board-toggle,
[data-toggle="bar"] .board-anim[data-state="settled-flipped"] .board-toggle {
  transform: translateY(0);
}
[data-toggle="bar"] .board-toggle-opt {
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 16px;
  color: var(--ink-muted);
  background: rgba(255,255,255,0.06);
}
[data-toggle="bar"] .board-toggle-opt:first-child { border-radius: 3px 0 0 3px; }
[data-toggle="bar"] .board-toggle-opt:last-child { border-radius: 0 3px 3px 0; }
[data-toggle="bar"] .board-toggle-opt[aria-pressed="true"] { background: var(--tally); color: #fff; }

/* Option 2: floating pill — off the board's content plane entirely via a
   frosted-glass material (matching the text panel, not the board's own
   flat print badges) plus a strong shadow, so it visibly floats above
   the surface rather than sitting flush with it.
   Positioned bottom-right, not top-right: the real board bakes in its
   own "OFFENSE"/"DEFENSE" label in the top-right corner (real product
   content), so a top-right pill duplicated it directly underneath —
   found while verifying this prototype, not a hypothetical risk. */
[data-toggle="pill"] .board-toggle {
  bottom: 24px; right: 24px;
  border-radius: 999px;
  padding: 4px;
  background: rgba(11, 15, 26, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  transform: scale(0.92);
}
[data-toggle="pill"] .board-anim[data-state="settled"] .board-toggle,
[data-toggle="pill"] .board-anim[data-state="settled-flipped"] .board-toggle {
  transform: scale(1);
}
[data-toggle="pill"] .board-toggle-opt {
  font-size: 11.5px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
[data-toggle="pill"] .board-toggle-opt[aria-pressed="true"] { background: var(--tally); color: #fff; }
/* The unpressed segment previously had zero hover feedback -- nothing
   signaled it was clickable until the click itself landed. Scoped to
   `pill` only (the shipped default); `bar`/`ribbon` stay frozen archived
   reference per DESIGN.md. */
[data-toggle="pill"] .board-toggle-opt:not([aria-pressed="true"]):hover { color: var(--ink-text); }

/* Option 3: corner ribbon — a single angled tab (one control, click to
   flip), attached to the corner like a physical ticket stub rather than
   floating or spanning — the diagonal cut itself signals "applied UI
   chrome," a shape the board's own content never uses.
   Anchored bottom-right, not top-right: the real board's own baked-in
   "OFFENSE"/"DEFENSE" label lives in the top-right corner, and (being
   the same solid tally-orange) a top-right ribbon would have visually
   merged with it — the exact failure mode this prototype exists to fix,
   caught by checking the real asset rather than assuming. */
[data-toggle="ribbon"] .board-toggle {
  bottom: 0; right: 0;
  clip-path: polygon(22% 100%, 100% 100%, 100% 0, 0 22%);
  padding: 10px 28px 14px 40px;
  background: var(--tally);
  box-shadow: -8px -8px 24px -10px rgba(0,0,0,0.55);
}
[data-toggle="ribbon"] .board-toggle-opt { display: none; }
[data-toggle="ribbon"] .board-toggle-opt[aria-pressed="true"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
}
[data-toggle="ribbon"] .board-toggle-opt[aria-pressed="true"]::after {
  content: '\21C4';
  font-size: 13px;
  opacity: 0.85;
}

/* A light scrim — just enough for the overlay panel to sit comfortably,
   not the heavy darkening that made the board unrecognizable before. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(11,15,26,0.6) 0%, rgba(11,15,26,0.22) 40%, rgba(11,15,26,0) 68%);
  pointer-events: none;
}

/* The headline/subhead/eyebrow are ALWAYS present from first paint — they
   are the constant; the background is what animates. Only the CTA row
   gets a deliberate, brief entrance (a polish signal, not a dramatic one)
   once the board has settled. This is the core difference from a
   cheap-feeling hero animation: text never "arrives" as its own beat. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding-bottom: 9vh;
  pointer-events: none;
}
.hero-overlay-inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.hero-overlay-band {
  max-width: 540px;
  padding: 26px 32px 30px;
  border-radius: 6px;
  background: rgba(11, 15, 26, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  pointer-events: auto;
}
/* A small magazine-issue-style masthead detail — quiet, not another loud
   chip competing with the eyebrow below it. Pure editorial-register
   polish; no fabricated data, just a knowing nod to "this is a real
   publication," matching the site's own Athletic-not-ESPN thesis. */
.hero-masthead {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.hero-actions .btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.board-anim[data-state="settled"] ~ .hero-overlay .hero-actions .btn,
.board-anim[data-state="settled-flipped"] ~ .hero-overlay .hero-actions .btn {
  opacity: 1;
  transform: translateY(0);
}
.hero-actions .btn-primary { transition-delay: 0.1s; }
.hero-actions .btn-ghost { transition-delay: 0.25s; }

.headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.headline .accent { color: var(--tally); }
.headline .strike { position: relative; white-space: nowrap; }
.headline .strike::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: 3px;
  background: var(--tally); transform: rotate(-2deg);
}
.subhead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink-muted);
  max-width: 42ch;
  margin: 0 0 24px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--tally); color: #fff; }
.btn-primary:hover { background: var(--tally-dim); }
.btn-ghost { border-color: var(--ink-line); color: var(--ink-text); }
.btn-ghost:hover { border-color: var(--ink-muted); }
/* A small tactile lift on hover -- same fast 0.15s "state feedback"
   bucket as the color/border transitions above it, not the slow
   cinematic easing. Skipped under reduced-motion below alongside the
   rest of the file's small-motion opt-outs. */
.btn:hover, .nav-cta:hover { transform: translateY(-1px); }
.btn-large { font-size: 16px; padding: 18px 34px; }

.scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s ease 1.2s;
  pointer-events: none;
}
.board-anim[data-state="settled"] ~ .scroll-cue,
.board-anim[data-state="settled-flipped"] ~ .scroll-cue {
  opacity: 0.6;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: var(--ink-muted);
  animation: scroll-cue-move 2.2s ease infinite;
}
@keyframes scroll-cue-move {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  65% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* script.js sets data-state="settled" immediately for every variant:
     board shown directly, no wipe/dissolve/canvas/tile animation. Text
     was already always-present regardless of motion preference. Only the
     CTA row and toggle's brief entrance is shortened rather than removed
     outright — a small opacity/position nudge, not the kind of motion
     prefers-reduced-motion is meant to stop. */
  .hero-layer-notes, .hero-canvas, .hero-tiles { display: none !important; }
  .hero-layer-board { display: block !important; }
  .hero-layer img { transition: none; filter: saturate(0.5) brightness(1.08) contrast(0.94) !important; }
  .hero-layer, .board-flip-inner { transition: none; transform: none !important; }
  .board-toggle { transition: opacity 0.3s ease; }
  [data-toggle="bar"] .board-toggle,
  [data-toggle="pill"] .board-toggle { transition: opacity 0.3s ease; transform: none !important; }
  .hero-actions .btn { transition: opacity 0.2s ease; transform: none; }
  .scroll-cue { transition: opacity 0.3s ease; }
  .scroll-cue span { animation: none; }
  /* This pass's two new hover micro-interactions (button lift, nav-link
     underline reveal) are small but still real transform/position
     motion -- opted out here alongside the rest of the file's motion,
     not just the cinematic hero sequence. */
  .btn:hover, .nav-cta:hover { transform: none; }
  .nav-links a::after { transition: none; }
}

/* Short viewports (real ones: mobile landscape, a browser window resized
   short, some laptops) — the overlay is absolutely positioned, so simply
   letting `.hero` grow taller doesn't help here: content would just render
   above y=0 and stay unreachable. Shrink it directly instead so it always
   fits within the actual available height. */
@media (max-height: 500px) {
  .hero-overlay { align-items: center; padding-bottom: 0; }
  .hero-overlay-band { padding: 16px 20px 18px; max-width: 460px; }
  .eyebrow { margin-bottom: 10px; }
  .headline { font-size: clamp(18px, 3.6vw, 26px); margin-bottom: 8px; }
  .subhead { font-size: 14px; margin-bottom: 14px; }
  .hero-actions { gap: 10px; }
  .btn { padding: 9px 16px; font-size: 12px; }
  .scroll-cue { display: none; }
}
@media (min-height: 501px) and (max-height: 700px) {
  .hero-overlay { padding-bottom: 5vh; }
  .hero-overlay-band { padding: 20px 26px 24px; }
  .headline { font-size: clamp(22px, 3.6vw, 34px); margin-bottom: 12px; }
  .subhead { font-size: 16px; margin-bottom: 18px; }
}

/* ============================================================
   Triad — "One matchup in. Three things back." (paper)
   Replaces the old 4-step rail: leads with the three deliverables,
   the board as table-stakes and the two differentiators flagged
   "Beyond the chart" (self-focused — no competitor contrast).
   ============================================================ */
.triad { background: var(--paper); color: var(--paper-text); padding: 150px 0; }
.triad-headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
  max-width: 18ch;
}
.triad-lead { font-size: 20px; line-height: 1.4; color: var(--paper-muted); max-width: 60ch; margin: 0 0 56px; }
.triad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.triad-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 32px 28px 28px;
  /* stagger the three cards on scroll-in via their inline --i */
  transition-delay: calc(var(--i, 0) * 0.12s);
}
.triad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
}
.triad-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--tally) 12%, transparent);
  color: var(--tally);
}
.triad-icon svg { width: 24px; height: 24px; }
.triad-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--paper-line);
  margin: 0;
}
.triad-card h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.triad-card > p { font-size: 16.5px; line-height: 1.45; color: var(--paper-muted); margin: 0 0 24px; }
.triad-flag {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tally);
  background: rgba(224, 71, 43, 0.08);
  border: 1px solid rgba(224, 71, 43, 0.28);
  padding: 6px 12px;
  border-radius: 999px;
}
.triad-flag.std { color: var(--paper-muted); background: rgba(24, 20, 15, 0.04); border-color: var(--paper-line); }

/* ============================================================
   Feature deep-dives — the storylines email and the study session.
   Real product screenshots framed in an app-chrome window and revealed
   top-to-bottom on scroll ("it arrives"), with a one-pass sheen. The
   study panel's 7 mode chips stagger in beneath. All motion is keyed off
   the .in-view class the existing reveal observer already sets, and is
   fully disabled under prefers-reduced-motion.
   ============================================================ */
.feature { padding: 96px 0; border-top: 1px solid var(--ink-line); }
.feature-dark { background: var(--ink-900); color: var(--ink-text); }
.feature-paper { background: var(--paper); color: var(--paper-text); border-top-color: var(--paper-line); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-grid-rev .feature-text { order: 2; }
.feature-grid-rev .feature-shot { order: 1; }
.feature-num {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tally);
  margin: 0 0 16px;
}
.feature-headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.feature-text p { font-size: 18px; line-height: 1.5; margin: 0 0 16px; }
.feature-dark .feature-text p { color: var(--ink-muted); }
.feature-paper .feature-text p { color: var(--paper-muted); }
.feature-micro { font-size: 13.5px; letter-spacing: 0.01em; opacity: 0.85; margin: 4px 0 0; }

/* app-chrome frame (dark, since both screenshots are dark-UI product shots) */
.feature-shot { position: relative; }
.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ink-800);
  border: 1px solid var(--ink-line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-line); flex: none; }
.shot-title { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-muted); margin-left: 10px; }
.shot-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 0 0 12px 12px;
  background: var(--ink-900);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.65);
}
.shot-window img { display: block; width: 100%; height: auto; }
/* the email is tall portrait: cap the window and fade its bottom into the
   email's own white body so it reads as "more below, in your inbox" */
.shot-window-tall { max-height: 720px; }
.shot-window-tall::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 2;
}
.shot-chip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--turf);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 1s;
}
.feature-grid.in-view .shot-chip { opacity: 1; transform: none; }

/* study modes, staggering in */
.mode-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 22px; }
.mode-chips li {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: var(--paper-raised);
  color: var(--paper-text);
  opacity: 0;
  transform: translateY(8px);
  /* reveal (opacity/transform) keeps its staggered entrance delay; the
     active-highlight colours ease with no delay so the cycling accent
     glides chip-to-chip. */
  transition:
    opacity 0.5s ease calc(0.3s + var(--i, 0) * 0.09s),
    transform 0.5s ease calc(0.3s + var(--i, 0) * 0.09s),
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}
.mode-chips li.is-active { color: #fff; background: var(--tally); border-color: var(--tally); box-shadow: 0 6px 18px -6px rgba(224, 71, 43, 0.5); }
.feature-grid.in-view .mode-chips li { opacity: 1; transform: none; }
/* dark ground (the study panel sits in the dark differentiator band) */
.feature-alt { background: var(--ink-800); }
.feature-dark .mode-chips li { background: var(--ink-700); border-color: var(--ink-line); color: var(--ink-text); }
.feature-dark .mode-chips li.is-active { background: var(--tally); border-color: var(--tally); color: #fff; }

/* --- Live study mockup (section 02) ----------------------------------------
   A hand-built, auto-playing click-through that replaces the old static study
   screenshot: flashcard reveal + self-grade, then a guess-the-player card, on
   real Texas/Georgia data. Sits inside .shot-window (browser-chrome frame). */
.study-mock {
  --amber: #c98a2e;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 470px;
}
.sm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sm-matchup { font-family: var(--font-headline); font-size: 20px; font-weight: 700; color: var(--ink-text); }
.sm-matchup b { color: #fff; }
.sm-progress { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-muted); }
.sm-modes { display: flex; align-items: center; justify-content: space-between; }
.sm-mode {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--tally);
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(198,58,34,0.5);
  transition: background-color 0.3s ease;
}
.sm-timer { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* the paper index card -- the one hero moment, matching the real app */
.sm-card {
  position: relative;
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.6);
  transform: rotate(-0.4deg);
  transition: opacity 0.28s var(--ease-slow), transform 0.28s var(--ease-slow);
}
.sm-card.sm-swap { opacity: 0; transform: rotate(-0.4deg) translateY(14px); }
.sm-kicker {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tally-dim); margin: 0 0 10px; min-height: 13px;
}
.sm-front { font-family: var(--font-body); font-size: 21px; line-height: 1.32; color: var(--paper-text); margin: 0; font-weight: 500; }
.sm-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sm-options.is-hidden { display: none; }
.sm-opt {
  font-family: var(--font-ui); font-size: 14.5px; color: var(--paper-text);
  border: 1px solid var(--paper-line); background: var(--paper-raised);
  border-radius: 10px; padding: 11px 14px; text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.sm-opt.is-correct { border-color: var(--turf); background: rgba(46,110,78,0.12); font-weight: 600; }
.sm-opt.is-wrong { border-color: var(--tally); background: rgba(198,58,34,0.1); }
.sm-back {
  margin-top: 18px; background: var(--paper-raised); border-radius: 12px; padding: 15px 16px;
  animation: sm-answer 0.32s var(--ease-slow) both;
}
.sm-back p { margin: 0; font-family: var(--font-body); font-size: 17.5px; line-height: 1.4; color: var(--paper-text); }
@keyframes sm-answer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sm-reveal {
  margin-top: 18px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--paper-text); border: 1px solid var(--paper-line); background: transparent;
  border-radius: 10px; padding: 9px 15px; transition: background-color 0.2s ease;
}
.sm-reveal.is-hidden { display: none; }
.sm-grades { display: flex; gap: 9px; margin-top: 18px; }
.sm-grade {
  flex: 1; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: #fff;
  border: none; border-radius: 10px; padding: 11px 8px;
  transition: transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
}
.sm-grade.sm-again { background: var(--tally); }
.sm-grade.sm-hard { background: var(--amber); }
.sm-grade.sm-easy { background: var(--turf); }
.sm-grade.sm-press { transform: scale(0.94); box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 8px 20px -8px rgba(0,0,0,0.4); }
.sm-foot { margin: 0; font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-muted); text-align: center; }
/* the [hidden] attribute must win over the flex/block display rules above --
   otherwise grades/back render at the front state (they set display:flex/block
   which would otherwise override [hidden]'s display:none). */
.study-mock [hidden] { display: none !important; }
@media (max-width: 560px) { .study-mock { min-height: 430px; } .sm-front { font-size: 18px; } }

/* the screenshot "arrives" top-to-bottom + a single sheen pass on reveal */
.shot-window img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-slow) 0.15s; }
.feature-grid.in-view .shot-window img { clip-path: inset(0 0 0 0); }
.shot-window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.16) 50%, transparent 66%);
  transform: translateX(-120%);
}
.feature-grid.in-view .shot-window::before { animation: shot-sheen 1.15s var(--ease-slow) 0.5s 1; }
@keyframes shot-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* the tall storylines email drifts slowly upward through its window once in
   view, so a visitor watches the whole brief scroll past. `--scroll-dist`
   (the negative overflow height) is measured + set in JS. `alternate` eases
   it back to the top instead of a hard jump; hovering the window pauses it
   so the reader can stop and read. Disabled under reduced motion below. */
.shot-window-tall.is-autoscroll img {
  animation: email-drift 24s ease-in-out 0.8s infinite alternate;
}
.shot-window-tall.is-autoscroll:hover img { animation-play-state: paused; }
@keyframes email-drift {
  0%, 6% { transform: translateY(0); }
  94%, 100% { transform: translateY(var(--scroll-dist, 0px)); }
}

@media (max-width: 900px) {
  .triad-grid { grid-template-columns: 1fr; gap: 16px; }
  .feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .feature-grid-rev .feature-text,
  .feature-grid-rev .feature-shot { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .triad-card { transition-delay: 0s; }
  .shot-window img { clip-path: none; transition: none; }
  .shot-window::before { display: none; }
  .shot-window-tall.is-autoscroll img { animation: none; transform: none; }
  .mode-chips li, .shot-chip { opacity: 1; transform: none; transition: none; }
}

/* ---------- trust (paper) ---------- */
.trust { background: var(--paper); color: var(--paper-text); padding: 160px 0; }
.trust-lead {
  font-size: 22px;
  line-height: 1.4;
  /* Width-aligned to .trust-body's own left column below (2026-08-07
     polish pass) instead of the site's usual 66ch editorial-measure cap:
     at 66ch this paragraph ran noticeably wider than the ledger column
     it sits above, leaving a dead whitespace wedge between the
     paragraph's ragged right edge and the blockquote. The calc mirrors
     .trust-body's own grid math exactly (same 64px gap, same 1.05fr-of-2fr
     share) since both elements are siblings inside the same
     .section-inner and share the same 100% reference width. */
  max-width: calc((100% - 64px) * 1.05 / 2);
  color: var(--paper-text);
  margin: 0 0 34px;
}
.trust-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
.ledger { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.ledger li {
  font-family: var(--font-body);
  font-size: 19px;
  padding: 14px 0;
  border-top: 1px solid var(--paper-line);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.ledger li:last-child { border-bottom: 1px solid var(--paper-line); }
/* Staggered scroll-reveal (DESIGN.md deferred item 3, built 2026-08-04):
   `.ledger` itself carries `.reveal` so the existing sitewide
   IntersectionObserver still fires once on the parent; each `<li>`
   animates independently once `.ledger` gets `.in-view`, offset by its
   own `--i` custom property (set inline per item in index.html) so each
   NEVER-guarantee lands as its own beat instead of the list appearing as
   one block. */
.ledger.reveal li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-slow), transform 0.6s var(--ease-slow);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.ledger.reveal.in-view li { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ledger.reveal li { opacity: 1; transform: none; transition: none; }
}
.ledger .tag {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tally-dim);
  white-space: nowrap;
}
/* Pull-quote treatment — deliberately given real visual weight (not a
   small caption) so it earns the column the ledger's two-column layout
   gives it, instead of leaving that space empty. */
.trust-example {
  margin: 6px 0 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--tally);
}
.trust-example p {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper-text);
  margin: 0 0 14px;
}
.trust-example cite {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--paper-muted);
}
@media (max-width: 900px) {
  .trust-body { grid-template-columns: 1fr; gap: 36px; }
  /* .trust-body collapses to a single column here, so the left-column
     calc() above no longer applies — fall back to the site's normal
     editorial measure rather than staying pinned to a now-meaningless
     half-width. */
  .trust-lead { max-width: 66ch; }
}

/* ---------- showcase (ink) ---------- */
/* Border-top + border-bottom completes the self-bracketing hairline
   convention every other ink-ground section already carries at its own
   seams (.problem, .style-learning, .practical) — this was the one ink
   section still missing it on both edges, a leftover inconsistency from
   iterative editing rather than a deliberate exception. Paper-ground
   sections intentionally never carry their own seam border (the hard
   color cut alone reads as the boundary on that side). */
.showcase { background: var(--ink-900); padding: 160px 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.showcase-lead {
  font-size: 20px;
  color: var(--ink-muted);
  max-width: 68ch;
  margin: 0 0 48px;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.showcase-grid figure { margin: 0; }
.showcase-zoom-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
}
.showcase-zoom-btn:focus-visible { outline: 2px solid var(--tally); outline-offset: 4px; }
.showcase-zoom-btn picture { display: block; position: relative; }
.showcase-grid img {
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  transition: transform 0.2s ease;
}
.showcase-zoom-btn:hover img,
.showcase-zoom-btn:focus-visible img { transform: scale(1.06); }
.showcase-grid figcaption {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}
/* Magnifier loupe — desktop/hover-capable only (script.js gates it via
   matchMedia). Reads the board's fine print (jersey numbers, capsule
   text) up close without leaving the section, addressing DESIGN.md's own
   "Deferred Future Enhancements" note that the thumbnails are too small
   to actually read a capsule. Touch devices keep the existing lightbox. */
.mag-lens {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(11, 15, 26, 0.35);
  background-repeat: no-repeat;
  background-color: var(--ink-900);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
}
.mag-lens.is-visible { opacity: 1; }
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .mag-lens { display: none !important; }
}

.showcase-note {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink-muted);
  margin-top: 32px;
  font-style: italic;
}

/* ---------- item E: density crops, gated full board, sport carousel ---------- */
/* Density crops of the real board (no full-res copyable layout in public HTML). */
.crop-collage {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 28px;
  align-items: start;
}
.crop { margin: 0; }
.crop .showcase-zoom-btn { cursor: zoom-in; }
.crop img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}
.crop .showcase-zoom-btn:hover img,
.crop .showcase-zoom-btn:focus-visible img { transform: scale(1.02); }
.crop figcaption {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}

/* Gated full board — the whole 11x17 shown blurred, unlocked with early access. */
.board-gate {
  position: relative;
  margin-top: 64px;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-gate-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.board-gate-blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: blur(15px) brightness(0.42) saturate(1.1);
  transform: scale(1.12);
}
.board-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(11, 15, 26, 0.55), rgba(11, 15, 26, 0.82));
}
.board-gate-panel {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 28px;
  max-width: 520px;
}
.board-gate-lock {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ink-line);
  background: rgba(11, 15, 26, 0.6);
  color: var(--tally);
  margin-bottom: 20px;
}
.board-gate-lock svg { width: 26px; height: 26px; }
.board-gate-title {
  font-family: var(--font-display, var(--font-ui));
  font-weight: 700;
  font-size: 27px;
  color: var(--ink-text);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.board-gate-sub {
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0 0 26px;
}

/* Cross-sport carousel. */
.carousel-head { margin-top: 96px; }
.carousel-headline {
  font-family: var(--font-display, var(--font-ui));
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink-text);
  margin: 14px 0 16px;
}
.carousel-lead { font-size: 18px; line-height: 1.45; color: var(--ink-muted); max-width: 60ch; margin: 0 0 32px; }
.sport-carousel { position: relative; }
.sport-track {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line) transparent;
}
.sport-track::-webkit-scrollbar { height: 8px; }
.sport-track::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; }
.sport-tile {
  flex: 0 0 auto;
  width: min(360px, 78vw);
  scroll-snap-align: start;
}
.sport-tile img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.6);
}
.sport-tile span {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.carousel-arrow {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink-line);
  background: rgba(19, 26, 43, 0.92);
  color: var(--ink-text);
  font-size: 20px;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.carousel-arrow:hover { border-color: var(--ink-muted); background: var(--ink-700); }
.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }
.carousel-arrow[hidden] { display: none; }
.carousel-note { margin-top: 18px; }
@media (hover: none), (pointer: coarse) {
  .carousel-arrow { display: none; }
}
@media (max-width: 760px) {
  .crop-collage { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- product walkthrough video ---------- */
/* Paper section between the dark showcase and dark designer for editorial
   rhythm (matches triad/trust). Reuses the .shot-bar app-chrome frame; the
   video sits in its own .demo-window (not .shot-window) so it never picks
   up that class's clip-path reveal animation. */
.demo {
  background: var(--paper);
  color: var(--paper-text);
  padding: 150px 0;
  border-top: 1px solid var(--paper-line);
}
.demo-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.demo-headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper-text);
  margin: 14px 0 20px;
}
.demo-lead {
  font-size: 20px;
  line-height: 1.45;
  color: var(--paper-muted);
  max-width: 60ch;
  margin: 0 auto 44px;
}
.demo-frame { text-align: left; max-width: 900px; margin: 0 auto; }
.demo-frame .shot-title { color: var(--ink-muted); }
.demo-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 0 0 12px 12px;
  background: var(--ink-900);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.55);
  line-height: 0;
}
.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink-900);
}
.demo-fallback {
  line-height: 1.5;
  color: var(--ink-text);
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 32px;
  margin: 0;
}
.demo-fallback a { color: var(--tally); }

/* ---------- design-your-own-layout showcase ---------- */
.designer {
  background: var(--ink-900);
  padding: 130px 0;
  border-bottom: 1px solid var(--ink-line);
}
.designer-inner { max-width: 760px; }
.designer-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-text);
  margin: 14px 0 22px;
}
.designer-lead {
  font-size: 20px;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0 0 30px;
}
.designer-points {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.designer-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-text);
}
.designer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  color: var(--tally);
  font-size: 15px;
  line-height: 1;
}

/* ---------- board lightbox (click-to-enlarge) ---------- */
.board-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 92vh;
}
.board-lightbox::backdrop {
  background: rgba(11, 15, 26, 0.88);
  backdrop-filter: blur(6px);
}
.board-lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 3px;
}
.board-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink-line);
  background: rgba(11, 15, 26, 0.7);
  color: var(--ink-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.board-lightbox-close:hover,
.board-lightbox-close:focus-visible { border-color: var(--ink-muted); }

/* ---------- faq (paper) ---------- */
.faq { background: var(--paper); color: var(--paper-text); padding: 150px 0; }
.faq-headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--paper-text);
  margin: 0 0 22px;
  max-width: 20ch;
}
.faq-lead {
  font-size: 20px;
  line-height: 1.4;
  color: var(--paper-muted);
  max-width: 68ch;
  margin: 0 0 30px;
}
.diff-list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.diff-list li {
  padding: 16px 0;
  border-top: 1px solid var(--paper-line);
  font-size: 18px;
  line-height: 1.4;
  color: var(--paper-text);
}
.diff-list li:last-child { border-bottom: 1px solid var(--paper-line); }
.diff-tag {
  display: block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tally);
  margin-bottom: 4px;
}

/* ---------- practical (ink, two-column) ---------- */
.practical { background: var(--ink-900); padding: 110px 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.practical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
}
@media (max-width: 1100px) {
  .practical-grid { grid-template-columns: 1fr 1fr; }
}
.practical-label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tally);
  margin: 0 0 10px;
}
.practical-body {
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- who ---------- */
.who { background: var(--paper); color: var(--paper-text); padding: 150px 0; }
.who-inner { max-width: 860px; }
.persona-statement {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin: 0;
  color: var(--paper-text);
}

/* ---------- cta ---------- */
.cta { background: var(--ink-900); padding: 170px 0 150px; text-align: center; border-top: 1px solid var(--ink-line); }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-headline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 54px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 22px;
}
.cta-sub { color: var(--ink-muted); font-size: 19px; max-width: 52ch; margin: 0 0 22px; }
/* Quiet pricing teaser — a small uppercase label register, not a loud
   price tag, so it reads as a considered aside above the CTA rather than
   a hard-sell. STAGED / held: see the HTML comment beside it in
   index.html (an entry tier this figure presumes isn't built yet). */
.cta-pricing {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 26px;
}
.cta-pricing::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--tally);
  margin-right: 9px;
  position: relative;
  top: -1px;
}
.cta button.btn { cursor: pointer; }
.cta-signup-note {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 18px 0 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cta-signup-note.is-visible { opacity: 1; transform: translateY(0); }
.cta-signup-note[hidden] { display: block; }

/* ---------- footer ---------- */
.footer { background: var(--ink-800); border-top: 1px solid var(--ink-line); padding: 60px 0; }
.footer-inner { display: flex; flex-direction: column; gap: 14px; }
.footer p { color: var(--ink-muted); font-size: 14px; max-width: 70ch; margin: 0; }
.footer-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.footer .footer-tagline {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tally);
  margin: 0;
}
/* Footer nav: contact + legal drafts. Kept as a plain uppercase-label row
   in the site's own UI-label register, not a heavy multi-column footer —
   the site is a single-page prototype with only two other pages. */
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 2px; }
.footer-links a {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--ink-text); }
.footer .footer-contact { font-size: 13px; color: var(--ink-muted); }
.footer .footer-contact a { color: var(--tally); text-decoration: none; }
.footer .footer-contact a:hover { text-decoration: underline; }
.footer-contact-note { color: var(--ink-muted); margin-left: 6px; font-style: italic; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .practical-grid { grid-template-columns: 1fr; gap: 32px; }
  .style-headline, .faq-headline { font-size: 28px; max-width: none; }
  .hero-overlay { padding-bottom: 7vh; }
  .nav-links {
    display: grid;
    grid-template-rows: 0fr;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink-800);
    overflow: hidden;
    transition: grid-template-rows 0.25s ease;
  }
  .nav-links.open { grid-template-rows: 1fr; border-bottom: 1px solid var(--ink-line); }
  .nav-links-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    min-height: 0;
  }
  .nav-links a { padding: 16px 32px; width: 100%; border-bottom: 1px solid var(--ink-line); }
  .nav-cta { margin: 16px 32px; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink-text); }
}
@media (max-width: 600px) {
  .rail { grid-template-columns: 1fr; }
  .cta-headline { font-size: 36px; }
  .persona-statement { font-size: 23px; }
  .subhead { font-size: 19px; }

  /* Full-bleed cover crops hard on narrow/tall phones — bias toward the
     board's real content-dense left two-thirds rather than a dead-center
     crop that can land on empty margin. */
  .hero-layer-board .board-face img { object-position: 30% top; }
  .scroll-cue { display: none; }
}

/* ---------- legal pages (terms.html / privacy.html) ----------
   Reuse the site's paper reading ground and type system for the standalone
   Terms/Privacy drafts, so they read as part of the same publication. */
.legal-page { background: var(--paper); color: var(--paper-text); min-height: 100vh; }
/* DRAFT banner — deliberately loud (solid Tally, sticky) so a reader
   always sees these are unreviewed drafts, per the review-flag requirement. */
.legal-draft-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tally);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.legal-header {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 32px 0;
}
.legal-header .wordmark { color: var(--paper-text); }
.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 32px 96px;
}
.legal-main h1 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 24px 0 8px;
}
.legal-effective {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 0 0 8px;
}
.legal-lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--paper-muted);
  max-width: 68ch;
  margin: 0 0 12px;
}
.legal-main h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
}
.legal-main h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 17px;
  margin: 24px 0 8px;
}
.legal-main p,
.legal-main li {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--paper-text);
  max-width: 70ch;
}
.legal-main ul { padding-left: 22px; margin: 0 0 16px; }
.legal-main li { margin-bottom: 8px; }
.legal-main a { color: var(--tally-dim); }
/* Reviewer-facing placeholder tokens ([LLC LEGAL NAME] etc.) rendered as a
   visible highlighted chip so they can't be missed before publishing. */
.legal-ph {
  background: rgba(224, 71, 43, 0.14);
  border-bottom: 1px dashed var(--tally);
  padding: 0 3px;
  font-weight: 600;
  white-space: nowrap;
}
.legal-footer {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 32px 60px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--paper-muted);
}
.legal-footer a { color: var(--paper-text); text-decoration: none; font-weight: 700; }
.legal-footer a:hover { color: var(--tally-dim); }
@media (max-width: 600px) {
  .legal-header, .legal-main, .legal-footer { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   PRICING PAGE (pricing.html) — item F, 2026-08-13
   ============================================================ */
/* Standalone page (no full-bleed hero to trigger the scroll-reveal nav), so
   the nav is forced solid + visible here. */
.nav.is-solid {
  position: fixed;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: var(--ink-900);
}
.nav-links a.is-current { color: var(--tally); }

.pricing-page { background: var(--ink-900); color: var(--ink-text); }

/* ---- hero ---- */
.pricing-hero { padding: 132px 0 72px; border-bottom: 1px solid var(--ink-line); }
.pricing-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 16px 0 22px;
  color: var(--ink-text);
}
.pricing-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ink-muted); max-width: 60ch; margin: 0 0 44px; }
.pricing-lead strong { color: var(--ink-text); font-weight: 700; }
.pricing-anchor { display: flex; flex-direction: column; gap: 10px; }
.anchor-price { display: flex; align-items: baseline; gap: 6px; color: var(--tally); line-height: 1; }
.anchor-cur { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 52px); }
.anchor-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(78px, 12vw, 148px); letter-spacing: -0.02em; }
.anchor-unit { font-family: var(--font-headline); font-weight: 600; font-size: clamp(20px, 2.4vw, 30px); color: var(--ink-muted); margin-left: 4px; }
.anchor-note { font-size: 15px; color: var(--ink-muted); margin: 0; }
.anchor-note a { color: var(--ink-text); text-decoration: underline; text-underline-offset: 3px; }
.anchor-note a:hover { color: var(--tally); }

/* ---- shared section bits ---- */
.pricing-h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 12px 0 14px;
  color: var(--ink-text);
}
.pricing-sub { font-size: 17px; line-height: 1.5; color: var(--ink-muted); max-width: 62ch; margin: 0 0 34px; }
.pricing-note { font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); margin-top: 22px; font-style: italic; }

/* ---- tiers ---- */
.pricing-tiers { padding: 84px 0; }
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.tier-card {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
}
.tier-featured { border-color: var(--tally); box-shadow: 0 0 0 1px var(--tally), 0 30px 70px -30px rgba(198, 58, 34, 0.4); }
.tier-flag, .pack-flag {
  position: absolute;
  top: -11px;
  left: 32px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tally);
  border-radius: 999px;
  padding: 4px 12px;
}
.tier-name { font-family: var(--font-headline); font-weight: 700; font-size: 24px; margin: 0 0 4px; color: var(--ink-text); }
.tier-tag { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 22px; }
.tier-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.tier-big { font-family: var(--font-display); font-weight: 900; font-size: 58px; line-height: 1; color: var(--ink-text); letter-spacing: -0.01em; }
.tier-per { font-family: var(--font-headline); font-weight: 600; font-size: 18px; color: var(--ink-muted); }
.tier-alt { font-size: 14px; color: var(--ink-muted); margin: 0 0 24px; }
.tier-alt strong { color: var(--ink-text); }
.tier-feats { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tier-feats li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-text);
}
.tier-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(198, 58, 34, 0.15);
  border: 1px solid var(--tally);
}
.tier-feats li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 4px;
  height: 7px;
  border: solid var(--tally);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tier-feats li strong { font-weight: 700; }
.tier-cta { align-self: flex-start; }

/* ---- packs ---- */
.pricing-packs { padding: 84px 0; background: var(--ink-800); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.pack-card {
  position: relative;
  background: var(--ink-900);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 30px 26px;
  text-align: center;
}
.pack-best { border-color: var(--tally); }
.pack-count { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: var(--ink-muted); margin: 0 0 12px; letter-spacing: 0.02em; }
.pack-price { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1; color: var(--ink-text); margin: 0 0 8px; }
.pack-each { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tally); margin: 0; }

/* ---- scale + custom ---- */
.pricing-scale { padding: 84px 0; }
.pricing-scale-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.scale-list { list-style: none; margin: 8px 0 0; padding: 0; }
.scale-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--ink-line);
  font-size: 15.5px;
}
.scale-list li:last-child { border-bottom: 1px solid var(--ink-line); }
.scale-list li span:first-child { color: var(--ink-text); }
.scale-list li span:last-child { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--tally); white-space: nowrap; }
.pricing-custom {
  background: var(--ink-800);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 40px 34px;
}

@media (max-width: 860px) {
  .tier-grid, .pricing-scale-grid { grid-template-columns: 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
  .pricing-hero { padding-top: 108px; }
}