/* styles.css. Fanish landing page
   Section 10: --near-black #0E0D0C, --warm-cream #FFF8F4, --electric-peach #FFA070
*/

:root {
  --near-black: #0E0D0C;
  --warm-cream: #FFF8F4;
  --electric-peach: #FFA070;
  --light-peach: #FFC4A0;
  --muted-cream: rgba(255, 248, 244, 0.6);
  --muted-cream-dim: rgba(255, 248, 244, 0.4);
  --muted-black: rgba(14, 13, 12, 0.65);
  --muted-black-dim: rgba(14, 13, 12, 0.45);

  /* Block C2: category pill / bar accent palette */
  --pill-peach: #FFA070;
  --pill-teal: #9CC9C7;
  --pill-cream: #E8DDC9;
  --pill-coral: #E27D6E;
  --pill-gold: #D4B872;
  /* Darker text shades for pills */
  --pill-peach-ink: #7a3a13;
  --pill-teal-ink: #2d5b59;
  --pill-cream-ink: #5c4a2c;
  --pill-coral-ink: #6e2a20;
  --pill-gold-ink: #5d4a1a;

  --serif: "Gelasio", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  --section-pad-y: 96px;
  --section-pad-y-mobile: 64px;
  --container-max: 1200px;
  --radius-card: 14px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--near-black);
  color: var(--warm-cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Mobile pinch-out fix (v=137): the user could pinch-zoom OUT and
     reveal blank space to the right of the page on iOS Safari. Caused
     by some child clipping past 100vw on narrow viewports (carousel
     marquee + staircase rotators). overflow-x: clip stops the page
     itself from being scrollable horizontally while still allowing
     `position: sticky` to work (unlike overflow: hidden). */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

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

/* Focus ring (Section 12.5) */
:focus-visible {
  outline: 2px solid var(--electric-peach);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--electric-peach); color: var(--near-black);
  padding: 10px 16px; border-radius: 6px; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ── Layout primitives ──────────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.section-dark { background: var(--near-black); color: var(--warm-cream); padding: var(--section-pad-y) 0; position: relative; }
.section-cream { background: var(--warm-cream); color: var(--near-black); padding: var(--section-pad-y) 0; position: relative; }

/* v=154: every section with an id is an anchor target. Offset its
   landing position by the fixed header height so the heading isn't
   buried under the floating header on anchor navigation. Side benefit:
   gives the browser a stable scroll target, which cuts down on WebKit's
   anchor-chase behavior when reveal animations fire on landing. */
section[id] { scroll-margin-top: 80px; }
@media (max-width: 720px) {
  section[id] { scroll-margin-top: 56px; }
}
@media (max-width: 720px) {
  .section-dark, .section-cream { padding: var(--section-pad-y-mobile) 0; }
}

.section-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
@media (max-width: 720px) {
  .section-h2 { font-size: 36px; }
}

.section-sub {
  font-size: 18px;
  margin: 0;
  color: var(--muted-cream);
}
.section-cream .section-sub { color: var(--muted-black); }
@media (max-width: 720px) {
  .section-sub { font-size: 16px; }
}

.section-head { margin-bottom: 56px; max-width: 720px; }
@media (max-width: 720px) { .section-head { margin-bottom: 40px; } }

.ish-italic { font-family: var(--serif); font-style: italic; color: var(--electric-peach); font-weight: 400; }
.ish-mark { color: var(--electric-peach); font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Local Gelasio Italic VariableFont — same-origin fallback for the
   italic 400-700 range. Google Fonts (loaded in <head>) covers the
   full family; this @font-face guarantees italic stays available if
   the Google CDN is blocked. */
@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Gelasio-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* ── Cursor reaction audit ──────────────────────────────────────────────
   Unified hover system across interactive elements. All transitions use
   the same easing curve (220ms cubic-bezier "ease-out-quart") so the
   page feels deliberate. Hover effects only apply on devices that
   actually have a hover-capable cursor — touch devices skip them. */
@media (hover: hover) {
  /* CTA pill — subtle lift + warm peach glow */
  .dl-btn {
    transition:
      transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      background 220ms ease;
  }
  .dl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 160, 112, 0.28);
  }
  .dl-btn:active { transform: translateY(0); transition-duration: 80ms; }

  /* Ish cards — match the lift rhythm, scale shadow with intent */
  .ish-card-grid {
    transition:
      transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .ish-card-grid:hover {
    transform: translateY(-4px);
    box-shadow:
      0 4px 8px rgba(14, 13, 12, 0.10),
      0 16px 40px rgba(14, 13, 12, 0.18),
      0 0 0 1px rgba(255, 160, 112, 0.12);
  }

  /* Hamburger — peach glow on hover */
  .hamburger {
    transition:
      background 200ms ease,
      color 200ms ease;
  }
  .hamburger:hover {
    background: rgba(255, 160, 112, 0.10);
    color: var(--electric-peach);
  }

  /* Header popover items — peach text on hover */
  .header-menu-item {
    transition: color 200ms ease, background 200ms ease;
  }
  .header-menu-item:hover {
    color: var(--electric-peach);
    background: rgba(255, 160, 112, 0.06);
  }

  /* Footer / inline links — peach with brighter underline */
  .contact-link, .footer-link, .placeholder-contact a {
    transition: color 200ms ease, border-color 200ms ease;
  }
  .contact-link:hover, .footer-link:hover, .placeholder-contact a:hover {
    color: var(--light-peach);
  }
}

/* Make sure every interactive element advertises itself */
button, .dl-btn, .ish-card-grid, .hamburger, .header-menu-item, [role="button"] {
  cursor: pointer;
}

/* ── Global scroll-reveal utility ────────────────────────────────────────
   Any element with [data-reveal] starts faded down. The IntersectionObserver
   in app.jsx adds .is-revealed when the element enters the viewport. Stagger
   each child by setting style="--reveal-delay: 120ms" inline. Uses !important
   to win over per-element rules with their own !important (e.g. .wyg-h2). */
[data-reveal]:not(.is-revealed) {
  opacity: 0 !important;
  transform: translateY(14px) !important;
}
[data-reveal] {
  transition:
    opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal]:not(.is-revealed) {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-reveal] { transition: none !important; }
}

/* ── Hero page-load entrance cascade ───────────────────────────────────
   Two beats:
     1. .hero-enter-fade — H1 fades in (no translate). Lands first as the
        thesis statement.
     2. .hero-enter-rise — Launch cluster + CTA buttons rise from below
        with a slight bounce easing. These are the "cherries" that drop
        in after the headline has landed.
   All gated by --enter-delay so callers can stagger. */
.hero-enter {
  opacity: 0;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: var(--enter-delay, 0ms);
}
.hero-enter-fade { animation-name: hero-fade-in; }
.hero-enter-rise {
  transform: translateY(24px);
  animation-name: hero-rise-in;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.18, 0.9, 0.32, 1.18);
}
@keyframes hero-fade-in {
  to { opacity: 1; }
}
@keyframes hero-rise-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.hero-launch-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}

/* ── Header ─────────────────────────────────────────────────────────────
   Borderless floating header. No bar, no backdrop, no border —
   wordmark (left) + hamburger (right) sit directly over the page
   content. The wordmark starts hidden (opacity 0) and fades in once
   the hero brand mark has scrolled out of view (.header-pinned body
   class, toggled by app.jsx). The hamburger is always visible.
   Both elements auto-invert to near-black over cream sections via
   the .header-on-cream body class. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  pointer-events: none; /* let scroll pass through the empty band */
}
.site-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.site-header-inner > * { pointer-events: auto; } /* but children are interactive */
@media (max-width: 720px) { .site-header-inner { padding: 18px 20px; min-height: 64px; gap: 12px; } }

.wordmark {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--warm-cream);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.wordmark .ish-mark { font-style: italic; font-weight: 400; color: var(--electric-peach); }
.wordmark-img { display: block; height: 38px; width: auto; }
.wordmark-header .wordmark-img { height: 34px; }
.wordmark-footer .wordmark-img { height: 56px; }
@media (max-width: 720px) {
  .wordmark-header .wordmark-img { height: 28px; }
}
/* Huge displays (≥ 1800px wide): bump header items so the wordmark and
   hamburger don't get lost in the negative space of a 4-5K viewport.
   Mid-step between "looks tiny" and "feels oversized" per user feedback. */
@media (min-width: 1800px) {
  .wordmark-header .wordmark-img { height: 42px; }
  .hamburger { width: 56px; height: 56px; }
  .hamburger svg { width: 34px; height: 34px; }
}
@media (min-width: 2800px) {
  .wordmark-header .wordmark-img { height: 50px; }
  .hamburger { width: 64px; height: 64px; }
  .hamburger svg { width: 40px; height: 40px; }
}

/* Pin handoff: header wordmark is invisible by default; fades in once
   the hero mark scrolls past the top. Easing matches the hero entrance
   so the rhythm reads continuous. */
.wordmark-header {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 200ms ease;
  will-change: opacity, transform;
}
body.header-pinned .wordmark-header {
  opacity: 1;
  transform: translateY(0);
}
/* Invert wordmark over cream — same image, just darken via filter so
   the cream "fan" reads as near-black and the peach "ish." darkens a
   touch but keeps its hue. */
body.header-on-cream .wordmark-header .wordmark-img {
  filter: invert(1) hue-rotate(180deg) saturate(1.3);
}

/* ── Liquid-glass scrim when pinned ──
   At the top of the page, the header is fully transparent — nothing
   to obscure. Once the user has scrolled (.header-pinned), a cloudy
   glass band fades in so the wordmark and hamburger don't fight the
   content scrolling underneath. Two tints — one for dark sections,
   one for cream — so the band reads "frosted" in either context
   without ever looking like an opaque black bar.
   Implemented as a ::before pseudo so the children (wordmark, ham)
   naturally paint above it via document order. */
.site-header { isolation: isolate; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  border-bottom: 0 solid transparent;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background 320ms ease,
    -webkit-backdrop-filter 320ms ease,
    backdrop-filter 320ms ease;
}
body.header-pinned .site-header::before {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    rgba(14, 13, 12, 0.38) 0%,
    rgba(14, 13, 12, 0.18) 80%,
    rgba(14, 13, 12, 0) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 0.5px solid rgba(255, 248, 244, 0.06);
}
body.header-pinned.header-on-cream .site-header::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 244, 0.55) 0%,
    rgba(255, 248, 244, 0.22) 80%,
    rgba(255, 248, 244, 0) 100%
  );
  border-bottom-color: rgba(14, 13, 12, 0.05);
}

.header-actions {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  position: relative; /* anchor for the right-aligned popover menu */
}
/* Removed header CTA pill (now hero-only). Class retained for safety. */
.header-cta-pill { display: none; }

.hamburger {
  display: inline-flex;
  background: transparent; border: 0; color: var(--warm-cream);
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  cursor: pointer; border-radius: 8px;
  transition: background 200ms ease, color 200ms ease;
}
body.header-on-cream .hamburger { color: var(--near-black); }
@media (hover: hover) {
  .hamburger:hover { background: rgba(255, 160, 112, 0.10); color: var(--electric-peach); }
  body.header-on-cream .hamburger:hover { background: rgba(14, 13, 12, 0.06); }
}

/* "Not ESPN." nav item — ESPN colored red as a callback to the section
   heading's intentional-brand-break treatment. Bold italic to match. */
.header-menu-espn {
  color: #D32228;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* CTA pill is hidden globally above; mobile-only override no longer needed. */

.header-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: 240px;
  /* Liquid-glass treatment per v=126: translucent dark base + blur +
     saturation pop so the popover reads as "frosted" against whatever
     content sits behind it. Matches the header band's glass treatment
     so the menu feels continuous with the header chrome. */
  background: rgba(14, 13, 12, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid rgba(255, 160, 112, 0.35);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.header-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--warm-cream);
  border-radius: 8px;
  transition: background 150ms ease, color 150ms ease;
}
.header-menu-item:hover { background: rgba(255, 160, 112, 0.10); color: var(--electric-peach); }
.header-menu-item + .header-menu-item { border-top: 0.5px solid rgba(255, 248, 244, 0.06); }
.header-menu-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--electric-peach);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Cool-to-warm vertical gradient with a single soft peach horizon glow at
   the bottom edge. No discrete orbs in the upper or mid canvas — mood
   comes entirely from the vertical gradient itself. Headline area sits
   in the darkest zone (~30–50% vertical) for maximum legibility. */
.hero {
  /* v=150: further tightened to close the gap between CTAs and the
     next chapter's headline. The earlier v=149 cut got the headline
     above the fold but the verifier measured ~270px of dead space
     between the CTAs (ending at ~509px) and the Familiar headline
     (at 783px on a 1440×842 viewport). Drop min-height + bottom
     padding further so the hero ends close to its actual content
     footprint. CTAs + Familiar headline now sit within ~120px of
     each other. */
  padding: 96px 0 32px;
  min-height: clamp(520px, 50vh, 620px);
  overflow: hidden;
  background-color: #0A0F1A;
  background-image:
    linear-gradient(180deg, #0A0F1A 0%, #0D1420 60%, #1A1410 100%),
    radial-gradient(ellipse 80% 30% at 50% 110%, rgba(255, 160, 112, 0.18) 0%, transparent 70%);
}
@media (max-width: 880px) { .hero { padding: 64px 0 80px; min-height: 0; } }

/* ── Mobile secondary CTA ("Or, why we built this." + bobbing chevron)
   Mobile-only element added below the download buttons. At ≤ 720px,
   the hero is forced to fill the small viewport (100vh) so the
   Familiar section's H2 + blue chip + green start fully below the fold;
   the secondary CTA anchors to the bottom of that viewport via
   margin-top: auto on a flex-column hero. On desktop, the element is
   hidden entirely — the desktop hero is untouched. */
.hero-secondary-cta { display: none; }
@media (max-width: 720px) {
  .hero {
    /* Fill the viewport so the Familiar section's H2 + blue chip start
       below the fold. The secondary CTA sits in NORMAL FLOW just below
       the download buttons (v=169 — no longer pinned to the viewport
       bottom), so it's always visible above the fold without scrolling. */
    min-height: 100vh;
    position: relative;
  }
  .hero-secondary-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: clamp(28px, 6vh, 60px) auto 0;
    padding: 6px 12px 0;
    color: var(--muted-cream);
    text-decoration: none;
    cursor: pointer;
    /* Enters after the primary CTA (badge lands ~2700ms). */
    animation: hero-secondary-cta-in 600ms cubic-bezier(0.2, 0.7, 0.3, 1) 3200ms both;
  }
  .hero-secondary-cta-text {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--muted-cream);
    transition: color 200ms ease;
  }
  /* Nested cascading chevrons (United-style): three stacked chevrons,
     each fading + drifting down on a staggered delay so the motion
     flows downward as one continuous wave. */
  .hero-secondary-cta-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--electric-peach);
  }
  .hero-secondary-cta-chevrons svg {
    width: 26px;
    height: 12px;
    margin-top: -4px;
    animation: chev-cascade 1.6s ease-in-out infinite;
  }
  .hero-secondary-cta-chevrons svg:nth-child(1) { animation-delay: 0s; }
  .hero-secondary-cta-chevrons svg:nth-child(2) { animation-delay: 0.18s; }
  .hero-secondary-cta-chevrons svg:nth-child(3) { animation-delay: 0.36s; }
  .hero-secondary-cta:active .hero-secondary-cta-text { color: var(--warm-cream); }
}
@keyframes chev-cascade {
  0%   { opacity: 0.2; transform: translateY(-3px); }
  50%  { opacity: 1;   transform: translateY(0); }
  100% { opacity: 0.2; transform: translateY(3px); }
}
@keyframes hero-secondary-cta-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-secondary-cta { animation: none; }
  .hero-secondary-cta-chevrons svg { animation: none; opacity: 0.85; }
}

/* ── Scroll hint (bottom of hero) ───────────────────────────────────────
   Editorial-quiet "Scroll" label + chevron at the bottom of the hero.
   Fades out (and lifts up) once the user scrolls past ~60px so it doesn't
   linger. Subtle bounce while visible to signal it's interactive. */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--electric-peach);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
  animation: hero-scroll-hint-pulse 1.5s ease-in-out infinite;
}
.hero-scroll-hint-hidden {
  opacity: 0 !important;
  transform: translate(-50%, 8px);
  animation-play-state: paused;
}
.hero-scroll-hint-arrow { width: 18px; height: 18px; }
@keyframes hero-scroll-hint-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, 5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint { animation: none; }
}
@media (max-width: 720px) {
  .hero-scroll-hint { bottom: 18px; font-size: 12px; }
  .hero-scroll-hint-arrow { width: 16px; height: 16px; }
}

.hero-grid {
  position: relative; z-index: 2;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: 48px; align-items: center;
}
/* Centered single-column composition: rotator-as-headline, no phone mock.
   justify-content: flex-start with vh-scaled top padding so the headline
   lands roughly a third of the way down the hero (user's compositional
   direction), while fanish settles at the visual center and the CTAs
   anchor the bottom third. Gap math:
     padding-top (~1/3)
     ── headline
     ── 5vh gap (sports ↔ fanish, the dominant breath)
     ── fanish (visual center)
     ── 4vh gap (fanish ↔ CTAs, smaller per user)
     ── CTAs
*/
.hero-grid-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(540px, 70vh, 920px);
  text-align: center;
  /* Pull the composition up so the hero composition + scroll hint fit
     in the upper 70% of viewport, leaving room for the next section's
     "If any of this sounds familiar…" headline to peek above the fold
     across MacBook (≥14") + standard 1080p sizes. */
  padding: clamp(48px, 10vh, 180px) 32px 0;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 20px; }
  .hero-grid-centered { padding: 56px 20px 0; min-height: auto; }
}

.hero-text { max-width: 720px; container-type: inline-size; }
.hero-grid-centered .hero-text { max-width: 1100px; width: 100%; text-align: center; }

/* ── Hero layout variants ──
   The unified hero mark is visually asymmetric (cream→peach split at
   ~28% of the SVG width), which creates tension when the rest of the
   hero (launch note, chips, CTAs) is centered. Three variants below;
   user picks via Tweaks. Default = "left" (commit to the asymmetry).

   "left"     → everything left-aligned to the mark's content edge
   "centered" → everything centered (legacy, breaks under the mark)
   "right"    → everything right-aligned to the headline's end period
*/
.hero-grid-centered.hero-layout-left {
  align-items: flex-start;
  text-align: left;
}
.hero-grid-centered.hero-layout-left .hero-text { text-align: left; }
.hero-grid-centered.hero-layout-left .hero-mark svg { margin: 0; }
.hero-grid-centered.hero-layout-left .hero-launch-cluster,
.hero-grid-centered.hero-layout-left .hero-launch-cluster > * {
  justify-content: flex-start;
  align-items: flex-start;
}
.hero-grid-centered.hero-layout-left .hero-scope { align-items: flex-start; }
.hero-grid-centered.hero-layout-left .hero-scope-events { justify-content: flex-start; }
.hero-grid-centered.hero-layout-left .dl-buttons,
.hero-grid-centered.hero-layout-left .hero-cta-row { justify-content: flex-start; }

.hero-grid-centered.hero-layout-right {
  align-items: flex-end;
  text-align: right;
}
.hero-grid-centered.hero-layout-right .hero-text { text-align: right; }
.hero-grid-centered.hero-layout-right .hero-mark svg { margin: 0 0 0 auto; }
.hero-grid-centered.hero-layout-right .hero-launch-cluster,
.hero-grid-centered.hero-layout-right .hero-launch-cluster > * {
  justify-content: flex-end;
  align-items: flex-end;
}
.hero-grid-centered.hero-layout-right .hero-scope { align-items: flex-end; }
.hero-grid-centered.hero-layout-right .hero-scope-events { justify-content: flex-end; }
.hero-grid-centered.hero-layout-right .dl-buttons,
.hero-grid-centered.hero-layout-right .hero-cta-row { justify-content: flex-end; }

/* Hero is now centered single-column with a clean H1 + supporting sub +
   CTAs. The rotator has moved to <PermissionInterstitial> between the
   Setup and IshCardsGrid sections. */

.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 8.2cqw, 96px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--warm-cream);
  white-space: nowrap;
}
.hero-h1 .ish-italic {
  font-style: italic;
  color: var(--electric-peach);
}
@media (max-width: 720px) {
  .hero-h1 { font-size: clamp(28px, 9vw, 44px); line-height: 1.08; }
}
@media (max-width: 380px) {
  .hero-h1 { font-size: clamp(24px, 9vw, 36px); }
}

.hero-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 3.0cqw, 28px);
  line-height: 1.3;
  color: var(--muted-cream);
  margin: 0 0 32px;
  text-wrap: pretty;
}
@media (max-width: 720px) { .hero-sub { font-size: 18px; margin-bottom: 24px; } }

/* ── Permission interstitial (between Setup and IshCardsGrid) ──────────
   The rotator beat. Quiet stack: stem → colored rotator → close line.
   Visually less weight than the hero but with presence. Centered on the
   existing dark surface. */
.permission-section {
  /* Match Setup's gradient bottom (#0F1318) so the seam between Setup and
     Permission is invisible. Setup ends cool slate; Permission picks it up
     and continues flat at the same temperature. */
  padding: 140px 0 !important;
  background-color: #0F1318 !important;
}
.permission-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  container-type: inline-size;
}
.permission-line {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
  line-height: 1.1;
  color: var(--warm-cream);
}
.permission-line-intro {
  /* New intro line per restructure. Reads as the section's thesis/bridge:
     "Wherever sports finds you." Sits above the rotator at a step smaller
     than the rotator so the rotator stays the focal point. Italic peach to
     echo the brand mechanic and announce a new editorial voice as the
     reader transitions from Setup. */
  font-size: clamp(24px, 4.0cqw, 48px);
  font-style: italic;
  color: var(--electric-peach);
  margin: 0 0 24px;
  opacity: 0.95;
}
.permission-line-rotator {
  font-size: clamp(40px, 8.0cqw, 88px);
  font-style: italic;
  letter-spacing: -0.025em;
  /* Asymmetric breathing room: more below than above so the eye glides
     from rotator into the closing line. */
  margin: 28px 0 56px;
}
.permission-line-close {
  font-size: clamp(32px, 6.4cqw, 72px);
  letter-spacing: -0.02em;
}
.permission-line-close .ish-italic {
  font-style: italic;
  color: var(--electric-peach);
}
@media (max-width: 720px) {
  .permission-section { padding: 88px 0 !important; }
  .permission-line-intro { font-size: 20px; margin-bottom: 16px; }
  .permission-line-rotator { font-size: 32px; margin: 18px 0 36px; }
  .permission-line-close { font-size: 26px; }
}
@media (max-width: 380px) {
  .permission-line-intro { font-size: 17px; }
  .permission-line-rotator { font-size: 26px; }
  .permission-line-close { font-size: 22px; }
}

/* ── Rotating segment clause (used by <PermissionInterstitial>) ────────
   The italic phrase rotates every 2s. Color is set inline per phrase
   (parallel index into segmentColors). Surrounding text stays put;
   <SegmentRotator>'s invisible measurer reserves the width of the
   longest phrase. */
.segment-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.segment-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.segment-rotator-measure {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.segment-rotator-active {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  animation: segment-tick 280ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
  /* Color is set inline by the component per tick. */
}
@keyframes segment-tick {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .segment-rotator-active { animation: none; }
}

.hero-incentive {
  font-size: 14px; font-weight: 500;
  color: var(--muted-cream);
  margin: 16px 0 4px;
}

.hero-launch-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-cream);
  letter-spacing: 0.01em;
  margin: 16px 0 0;
}
/* Pre-CTA variant: same styling but sits above the download buttons.
   Used as the "Out June 1." beat between H1 and CTAs. */
.hero-launch-note-pre { margin: 0 0 8px; }

/* ── Hero brand mark (unified SVG) ────────────────────────────────────
   Single SVG containing both the "fanish" wordmark (top row) and
   the "Sports, but for the rest of us." headline (bottom row) sharing
   one coordinate space. The cream→peach split lands at the same X
   coordinate on both rows so the entrance reads as one coherent
   graphic match. See components/hero-mark.jsx.

   Four-beat cadence (cream / peach / cream / peach):
     #g-fan     "fan"                     ← from left   200ms
     #g-ish     "ish." + dot              ← from right  650ms
     #g-sports  "Sports,"                 ← from left  1350ms
     #g-rest    "but for the rest of us." ← from right 1750ms
   Same 500ms duration + cubic-bezier(0.22, 1, 0.36, 1) easing
   everywhere so the rhythm reads as a single phrase. */
.hero-mark {
  display: block;
  width: 100%;
  margin: 0 0 clamp(36px, 5vh, 64px);
}
.hero-mark svg {
  display: block;
  width: 100%;
  max-width: clamp(420px, 88cqw, 1100px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.hero-mark #g-fan,
.hero-mark #g-ish,
.hero-mark #g-sports,
.hero-mark #g-rest {
  opacity: 0;
}
/* Four-beat entrance — headline first, then a deliberate pause, then the
   wordmark as a signature. Delays calibrated so each row reads as its
   own complete thought before the next begins. */
.hero-mark #g-sports {
  transform: translateX(-24px);
  animation: hero-mark-from-left 500ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
.hero-mark #g-rest {
  transform: translateX(24px);
  animation: hero-mark-from-right 500ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}
.hero-mark #g-fan {
  transform: translateX(-24px);
  animation: hero-mark-from-left 500ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both;
}
.hero-mark #g-ish {
  transform: translateX(24px);
  animation: hero-mark-from-right 500ms cubic-bezier(0.22, 1, 0.36, 1) 2200ms both;
}
@keyframes hero-mark-from-left {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hero-mark-from-right {
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark #g-fan,
  .hero-mark #g-ish,
  .hero-mark #g-sports,
  .hero-mark #g-rest {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
@media (max-width: 720px) {
  .hero-mark svg { max-width: 92vw; }
  .hero-mark { margin-bottom: 20px; }
}

/* Dev replay button — small floating control to re-trigger the hero
   entrance animations. Sits in the bottom-right of the hero only. */
.hero-replay {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 160, 112, 0.14);
  border: 1px solid rgba(255, 160, 112, 0.35);
  color: var(--electric-peach);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.hero-replay:hover {
  background: rgba(255, 160, 112, 0.22);
  transform: translateY(-1px);
}
.hero-replay svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .hero-replay { bottom: 14px; right: 14px; font-size: 11px; padding: 7px 12px 7px 10px; }
}
/* Scope strip below the launch note. "At launch:" + event chips.
   Defines what's available crisply without limiting future scope. */
.hero-scope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.hero-scope-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-cream);
}
.hero-scope-events {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.hero-scope-event {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 160, 112, 0.32);
  border-radius: 999px;
  background: rgba(255, 160, 112, 0.06);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Bare variant: chips alone under the CTAs, no "At launch:" label.
   Adds breathing room above so they sit cleanly beneath the buttons. */
.hero-scope-bare { gap: 0; margin: 22px 0 0; }
.hero-scope-bare .hero-scope-events { gap: 12px; }
.hero-scope-event-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--warm-cream);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.hero-scope-event-dates {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--electric-peach);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero-scope-event-name { font-size: 13px; }
  .hero-scope-event-dates { font-size: 10px; }
}
/* Smaller secondary scope line below the launch note ("World Cup + F1
   to start..."). Even quieter so visitors get the launch context
   without it competing with the H1 or CTAs. */
/* Center the download buttons under the H1 in the hero. Other uses
   (footer, final CTA, modal) keep their default left-aligned flex. */
.hero-text .dl-row { justify-content: center; }

.hero-social-line {
  font-size: 13px;
  color: var(--muted-cream-dim);
  margin: 8px 0 0;
}
.hero-social-handle {
  color: var(--electric-peach);
  font-weight: 500;
  border-bottom: 1px dashed rgba(255, 160, 112, 0.4);
  padding-bottom: 1px;
}
.hero-social-handle:hover { border-bottom-color: var(--electric-peach); }

/* Hero card frame & phone outline (Section 3.1.2 + 3.9.4) */
.hero-card-frame {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 600ms ease-out 100ms, transform 600ms ease-out 100ms;
}
.hero-card-frame.revealed { opacity: 1; transform: scale(1); }

.phone-frame {
  position: relative;
  width: 252px;
  border: 1.5px solid rgba(255, 160, 112, 0.55);
  border-radius: 28px;
  padding: 10px 9px 10px;
  background: rgba(14, 13, 12, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 160, 112, 0.08);
}
.phone-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 16px;
  background: rgba(14, 13, 12, 0.85);
  border-radius: 0 0 10px 10px;
  border-left: 0.5px solid rgba(255, 160, 112, 0.3);
  border-right: 0.5px solid rgba(255, 160, 112, 0.3);
  border-bottom: 0.5px solid rgba(255, 160, 112, 0.3);
}
.phone-screen { padding-top: 14px; }

/* ── Live carousel (hero phone-mock variant) ────────────────────────────
   Ports the iOS LoginPage match carousel into the marketing site's phone
   mock. Scoped under .phone-screen .live-carousel so it inherits the dark
   phone interior and clips to the phone outline. */
.live-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0 12px;
  /* Soft edge fade so cards dissolve at the phone-screen edges instead of clipping. */
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.live-carousel-track {
  display: flex;
  gap: 8px;
  padding: 6px 10px; /* TRACK_PADDING_X in JS */
  width: max-content;
  will-change: transform;
}
.live-card {
  flex-shrink: 0;
  width: 140px;
  background: rgba(255, 160, 112, 0.06);
  border: 1px solid rgba(255, 160, 112, 0.18);
  border-radius: 12px;
  padding: 9px 10px 8px;
  color: var(--warm-cream);
  font-family: var(--sans);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.live-card.imminent {
  border-color: rgba(255, 160, 112, 0.55);
}
.live-card.centered {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-color: var(--electric-peach);
}
.live-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}
.live-card-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 160, 112, 0.18);
  color: var(--electric-peach);
}
.live-card-badge-f1 { color: var(--electric-peach); }
.live-card-badge-wc { color: #8FB6FF; background: rgba(91, 141, 239, 0.18); }
.live-card-ready {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px 2px 5px;
  border-radius: 4px;
  background: rgba(122, 189, 140, 0.18);
  color: #9BD2AE;
  white-space: nowrap;
  flex-shrink: 0;
}
.live-card-ready svg { flex-shrink: 0; }
.live-card-name {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--warm-cream);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
  letter-spacing: -0.01em;
}
.live-card-tagline {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  line-height: 1.3;
  color: var(--electric-peach);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}
.live-card-divider {
  height: 0.5px;
  background: rgba(255, 160, 112, 0.2);
  margin: 0 0 5px;
}
.live-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.live-card-urgency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.live-card-urgency.hot {
  color: var(--electric-peach);
  font-weight: 700;
}
.live-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--electric-peach);
  flex-shrink: 0;
}
.live-card-dot.pulse {
  animation: live-card-pulse 1.2s ease-in-out infinite;
}
@keyframes live-card-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}
.live-card-date {
  font-size: 9px;
  color: var(--muted-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .live-card.centered { transform: none; box-shadow: none; }
  .live-card-dot.pulse { animation: none; }
}

.final-cta-carousel {
  width: 100%;
  max-width: 920px;
  /* Margin removed v=124 — parent .final-cta-inner uses gap: 32px
     for vertical rhythm now that the carousel sits beneath the
     download CTAs instead of above them. */
  margin: 0;
}
.final-cta-carousel-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted-cream);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── Live carousel: md variant (press + investors pages) ────────────────
   Larger cards with proportionally larger type. Inline width on each card
   is set by the component; this block only scales typography + padding. */
.live-carousel--md .live-card {
  padding: 12px 14px 11px;
  border-radius: 14px;
}
.live-carousel--md .live-card-badge { font-size: 9px; padding: 2px 6px; }
.live-carousel--md .live-card-ready { font-size: 9px; padding: 2px 7px 2px 6px; }
.live-carousel--md .live-card-ready svg { width: 10px; height: 10px; }
.live-carousel--md .live-card-name { font-size: 14px; min-height: 36px; margin-bottom: 4px; }
.live-carousel--md .live-card-tagline { font-size: 11px; min-height: 44px; margin-bottom: 8px; }
.live-carousel--md .live-card-divider { margin-bottom: 7px; }
.live-carousel--md .live-card-urgency { font-size: 11px; gap: 5px; }
.live-carousel--md .live-card-dot { width: 5px; height: 5px; }
.live-carousel--md .live-card-date { font-size: 10px; }
.live-carousel--md .live-carousel-track { padding: 6px 14px; }

/* ── Launch ticker block (press + investors sub-pages) ───────────────────
   Sits below the centered placeholder-page content on the same near-black
   surface. Widens past the 640px placeholder column to give the carousel
   more breathing room. */
.launch-ticker-wrap {
  width: 100%;
  max-width: 920px;
  margin: 48px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.launch-ticker-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--electric-peach);
  padding: 5px 11px 6px;
  border: 1px solid rgba(255, 160, 112, 0.4);
  border-radius: 999px;
  margin-bottom: 14px;
  white-space: nowrap;
}
.launch-ticker-h2 {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--warm-cream);
  letter-spacing: -0.005em;
}
.launch-ticker-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--muted-cream);
  font-variant-numeric: tabular-nums;
}
.launch-ticker-wrap .live-carousel {
  /* Carousel inherits container width directly here; no need to clip to a
     narrow phone-frame interior. Soft edge fade still applies. */
}
@media (max-width: 720px) {
  .launch-ticker-wrap { padding: 0 20px; margin-top: 32px; }
  .launch-ticker-h2 { font-size: 24px; }
  .launch-ticker-sub { font-size: 13px; margin-bottom: 16px; }
}

@media (max-width: 880px) {
  .hero-card-frame { display: flex; margin: 8px auto 0; }
  .phone-frame {
    width: 100%;
    max-width: calc(100vw - 48px);
    /* Size to content on mobile; the desktop aspect-ratio left a tall empty
       region below the card on narrow viewports (Round 11 E). */
    aspect-ratio: auto;
    padding: 10px 10px 14px;
  }
  .phone-screen {
    height: auto;
    overflow: visible;
  }
  .ish-card-hero { min-height: 0; }
}

/* ── Download buttons ───────────────────────────────────────────────────── */
.dl-row { display: flex; gap: 14px; flex-wrap: wrap; }
.dl-row-full .dl-btn { flex: 1; }
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--electric-peach);
  color: var(--near-black);
  border: 0;
  height: 76px;
  padding: 0 38px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 19px;
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  min-width: 260px;
}
.dl-btn .dl-btn-icon svg { width: 24px; height: 24px; }
.dl-btn:hover {
  background: var(--light-peach);
  box-shadow: 0 4px 12px rgba(255, 160, 112, 0.32);
  transform: translateY(-1px);
}
.dl-btn:active { transform: translateY(0); }
.dl-btn-icon { display: inline-flex; align-items: center; }

/* ── Live launch CTA (v=167) ──────────────────────────────────────────
   iOS shipped, so the primary CTA is the official Apple "Download on the
   App Store" badge; Android (not yet live) is a quiet secondary that
   opens the coming-soon modal. Badge + secondary stack vertically. */
.dl-row-launch {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Official Apple "Download on the App Store" lockup — WHITE variant for
   contrast on the dark navy hero. Apple permits the black OR white
   lockup; you pick for contrast and must not recolor it. ~56px tall. */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 11px 24px 11px 20px;
  text-decoration: none;
  min-width: 210px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 220ms ease;
}
.appstore-badge-apple {
  width: 27px; height: 32px;
  flex: 0 0 auto;
  color: #000;
  display: inline-flex;
  align-items: center;
}
.appstore-badge-apple svg { width: 100%; height: auto; }
.appstore-badge-txt { display: flex; flex-direction: column; line-height: 1; }
.appstore-badge-small {
  color: #000;
  font-family: -apple-system, "Helvetica Neue", var(--sans);
  font-size: 12px; font-weight: 400; letter-spacing: 0.01em;
  margin-bottom: 3px;
}
.appstore-badge-big {
  color: #000;
  font-family: -apple-system, "Helvetica Neue", var(--sans);
  font-size: 23px; font-weight: 600; letter-spacing: -0.01em;
}
@media (hover: hover) {
  .appstore-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36); }
}
.appstore-badge:active { transform: translateY(0); }

/* Android (not yet live) — subordinate but clearly tappable: outlined
   pill + chevron so it reads as an action (opens the follow-us modal),
   not a static status label. */
.android-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(255, 248, 244, 0.28);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500;
  color: var(--muted-cream);
  padding: 8px 16px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.android-secondary-arrow {
  font-size: 16px; line-height: 1;
  color: var(--electric-peach);
  transition: transform 180ms ease;
}
.android-secondary:hover {
  color: var(--warm-cream);
  border-color: rgba(255, 160, 112, 0.6);
  background: rgba(255, 160, 112, 0.08);
}
.android-secondary:hover .android-secondary-arrow { transform: translateX(2px); }

@media (max-width: 720px) {
  /* v=147 audit fix: breakpoint widened from 600 → 720 so all phones
     and small tablets (601–720px) get the narrowed CTAs. The earlier
     600px cap left iPad-mini portrait + landscape phones rendering
     the full-width form-field look. */
  .dl-row { flex-direction: column; align-items: center; }
  .dl-btn {
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }
}

/* ── Familiar (Section 2 — replaces Setup + Permission Interstitial) ────
   Editorial scroll module. Single dark section, gradient continuation
   from the hero's bottom warmth into cool slate then into a deeper blue
   for the editorial mood. Three staircase-aligned sentences (left /
   center / right) with one rotating highlighted phrase per line. See
   components/familiar-section.jsx and components/highlight-marker.jsx. */
/* Familiar → IshCards seam: gradient fade from blue to cream rather
   than a hard color cut. Achieved by extending the familiar gradient's
   final stops past Ink Blue toward cream, and adding a tall cream
   gradient zone at the very top of IshCards so the two halves overlap
   into a continuous fade. The bridge hairline rides this transition. */
.familiar {
  position: relative;
  /* Painted ABOVE the device frame so the play-sheet arrow that
     extends below the bridge can cross over into the device frame's
     Ink Blue padding zone. */
  z-index: 2;
  /* v=145: padding-top reduced so the "We've all found ourselves"
     heading lands well within the first scroll's visible area on
     desktop. Was clamp(96px, 12vh, 160px) which pushed the heading
     ~130px below the hero's end on a 1080p viewport, leaving the
     headline scraping the bottom of the fold. Halved roughly. */
  padding-top: clamp(40px, 5vh, 72px);
  padding-bottom: clamp(120px, 16vh, 240px);
  background-color: #0E1A2B;
  background-image: linear-gradient(
    180deg,
    #1A1410 0%,
    #131720 25%,
    #101728 55%,
    #0E1A2B 85%,
    #0E1A2B 100%
  );
}
.familiar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  container-type: inline-size;
}
.familiar-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2cqw, 56px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--warm-cream);
  text-align: center;
  margin: 0 0 clamp(56px, 8cqw, 96px);
}
.familiar-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6cqw, 72px);
}
.familiar-row {
  display: block;
}
.familiar-sentence {
  /* Italic across the board reinforces the deadpan, conspiratorial voice
     of the editorial moment. */
  font-family: "Gelasio", var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.6cqw, 42px);
  line-height: 1.5;
  color: var(--warm-cream);
  margin: 0;
  text-wrap: pretty;
}
.familiar-sentence-left { text-align: left; }
.familiar-sentence-center { text-align: center; }
.familiar-sentence-right { text-align: right; }
.familiar-frame { color: var(--warm-cream); }

/* Sentence 1 ("There's an art to" + stacked marker) hard-pinned to
   the left edge of the inner container so it reads as anchored, not
   slightly inset. Negative margin pulls it past the container's
   horizontal padding by a hair. */
.familiar-sentence-tactic {
  margin-left: clamp(-12px, -1cqw, -4px);
}

/* Coda — the closing fragment on its own line, with its own alignment.
   Slightly smaller + lower opacity so the marker line stays primary. */
.familiar-coda {
  font-family: "Gelasio", var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.2cqw, 36px);
  line-height: 1.35;
  color: var(--warm-cream);
  margin: clamp(8px, 1.2cqw, 16px) 0 0;
  opacity: 0.92;
}
.familiar-coda-left { text-align: left; }
.familiar-coda-center { text-align: center; }
.familiar-coda-right { text-align: right; }

@media (max-width: 720px) {
  .familiar { padding-top: 80px; padding-bottom: 96px; }
  .familiar-heading {
    font-size: clamp(26px, 7vw, 34px);
    margin-bottom: 44px;
    letter-spacing: -0.01em;
  }
  .familiar-sentence {
    font-size: clamp(19px, 5.4vw, 26px);
    line-height: 1.42;
  }
  .familiar-stack { gap: clamp(28px, 5vw, 40px); }
}

/* ── HighlightMarker ──────────────────────────────────────────────────
   Outer wrapper width = longest variant (reserves space; downstream text
   never jitters). Inner .hl-active is sized to the CURRENT variant only,
   centered within the reserved width. The stroke fills .hl-active so the
   swipe always wraps THESE words exactly. Width transitions 280ms so the
   resize reads as a soft morph rather than a snap. */
.hl-marker {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  text-align: center;
  white-space: nowrap;
  /* The wrapper width is set inline (longest variant). No CSS transition
     here — the wrapper is effectively static once measured. */
}
.hl-active {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  /* Generous vertical padding (v=138): the OUTER CSS background on this
     span is the guaranteed-coverage layer; padding-block sets how far
     past the glyph's content-box the bg extends. Italic Gelasio
     descenders + capital ascenders need ~0.18em margin to never clip,
     and the slight extra padding makes the highlight read as a
     hand-painted stroke rather than a tight chip. */
  padding: 0.18em 8px;
  border-radius: 3px;
  /* background is set inline by the component (per-color). The bg here
     is the OUTER (darker) tint. The INNER SVG paints the LIGHTER tint
     on top, inset enough that ~2px of the darker outer shows along the
     top + bottom edges. */
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Inner SVG: positioned absolute, stretching to fill the outer bbox
   completely. Width + height = 100% so the lighter inner tint covers
   every pixel of every glyph — including capital ascenders and italic
   descenders. The hand-drawn imperfect path has small ~1-3 unit edge
   variations; those variations let the slightly darker outer bg peek
   through at the wobbly corners + irregular top/bottom edges, which
   is exactly the "deeper ink at the edge" effect we want.
   (Previous values inset the inner by 2-4px, which is what forced
   ascenders + descenders into the darker outer rim.) */
.hl-stroke-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  transform-origin: center center;
  pointer-events: none;
  overflow: visible;
}
.hl-text {
  position: relative;
  display: inline-block;
  transition: opacity 140ms ease;
  /* v=134: solid neon fills + near-black text. The dark phrase reads
     directly out of the bright stripe; old cream-on-translucent gave
     under-contrast. Scoped to .hl-marker so any future generic .hl-text
     usage isn't accidentally restyled. */
  color: var(--near-black);
}
.hl-text-out { opacity: 0; }
.hl-text-in  { opacity: 1; }

/* Mobile-only line break inside rotator phrases. The data file uses \n
   to mark where certain long phrases should wrap to 2 lines on mobile;
   the HighlightMarker renderer emits a <br class="hl-mobile-break" />
   at each break. Hidden on desktop so phrases read as one line (the
   preserved space carries the spacing); inline on mobile so the break
   forces a wrap. */
.hl-mobile-break { display: none; }
@media (max-width: 720px) {
  .hl-mobile-break { display: inline; }
}
/* Hidden mirrors used purely for offsetWidth measurement of every variant.
   v=148 fix: must occupy 1×1 in the document flow with overflow:hidden.
   Even though the wrapper is position:absolute + visibility:hidden, its
   children (.hl-measure-item) render at width:max-content — the longest
   variant ("Because you literally can't leave") was ~538px wide, which
   contributed to body.scrollWidth past 100vw on mobile. iOS Safari's
   pinch-zoom-out then revealed that overflow as dead space, even with
   `overflow-x: clip` on html/body. Clamping the wrapper to 1×1 +
   overflow:hidden eliminates the layout contribution. offsetWidth on
   the children — read by the layoutEffect for variant measurement —
   is unaffected by parent overflow, so width measurement still works. */
.hl-measures {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.hl-measure-item {
  display: block;
  width: max-content;
  white-space: nowrap;
}

/* Stack variant — sentence 1's marker is a 2-line "text box" instead of
   a thin horizontal stroke. Max-width sized so the longest phrase wraps
   to exactly 2 lines. Slightly smaller font so the box reads as a compact
   typographic block sitting in the sentence's vertical center. */
.hl-marker-stack {
  white-space: normal;
  text-align: center;
  max-width: clamp(280px, 32cqw, 420px);
  line-height: 1.05;
  vertical-align: middle;
  font-size: 0.82em;
}
.hl-marker-stack .hl-active {
  display: inline-block;
  width: auto !important;        /* override the JS-set width entirely */
  padding: 10px 16px;
  white-space: normal;
  text-align: center;
}
.hl-marker-stack .hl-stroke {
  height: 100%;
  top: 0;
  transform: rotate(-0.5deg);
  transform-origin: center;
}
.hl-marker-stack .hl-text {
  display: inline;
  vertical-align: baseline;
}

/* Re-add the reduced-motion override that got lost in an earlier edit. */
@media (prefers-reduced-motion: reduce) {
  .hl-marker,
  .hl-active,
  .hl-stroke,
  .hl-text { transition: none !important; }
}

/* ── Familiar layout variants ─────────────────────────────────────────
   Four typographic treatments switchable via Tweak (familiarVariant).
   Each defines per-sentence size/style so the trio doesn't read as three
   uniform back-to-back lines. See content/copy.js → familiar.sentences
   for the L/C/R alignment ordering (tactic / context / kicker). */

/* Right-aligned sentences (.familiar-sentence-right) pin the marker
   to the right edge — both the reserved space AND the active variant
   anchor right. The right edge becomes the constant; shorter variants
   simply extend less to the left. Without this, the marker wrapper sits
   centered in its sentence's text-align: right context but shorter
   variants float center-of-reserved, which made the right edge appear
   to drift between variants. */
.familiar-sentence-right .hl-marker {
  text-align: right;
  display: inline-flex;
  justify-content: flex-end;
}
.familiar-sentence-right .hl-marker .hl-active {
  margin-left: auto;
  text-align: right;
}
.familiar-sentence-left  .hl-marker { text-align: left;  }
.familiar-sentence-center .hl-marker { text-align: center; }

/* ── Device frame ─────────────────────────────────────────────────────
   Wraps the cream "breath" zone (IshCards + WhatYouGet + FAQ) in a
   soft phone-screen treatment: 8px Ink Blue side slivers, rounded
   cream corners top + bottom. Children sections become transparent so
   the frame's cream bg shows through; their content keeps its own
   padding. The metaphor: dark sections are "outside the phone," cream
   is "inside the app." */
.device-frame {
  background: #0E1A2B;
  /* Side slivers per v=129: 30px desktop. Bumped from 22 to bring the
     cream zone in slightly so the Ink Blue band reads more clearly as
     a phone-frame band on wide displays. Tablet/mobile track the same
     step-down rhythm. */
  padding: 0 30px;
  position: relative;
}
.device-frame-inner {
  background: var(--warm-cream);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  /* Glass-bevel cue (v=142, deepened). Top inner highlight + bottom
     inset shadow + a faint hairline + outside drop-shadow combine to
     read as a phone-glass surface lifted off the bezel. The previous
     version was too subtle; this adds a stronger top highlight and an
     external drop shadow so the cream zone actually feels recessed
     into the surrounding Ink Blue. */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(14, 26, 43, 0.10),
    inset 0 0 0 0.5px rgba(14, 26, 43, 0.18),
    0 0.5px 0 rgba(255, 255, 255, 0.45),
    0 12px 28px rgba(14, 26, 43, 0.28);
}
.device-frame-inner .section-cream { background: transparent; }
@media (max-width: 1024px) {
  .device-frame { padding: 0 18px; }
  .device-frame-inner { border-radius: 28px; }
}
@media (max-width: 720px) {
  .device-frame { padding: 0 10px; }
  .device-frame-inner { border-radius: 22px; }
}

/* A — Crescendo. Each sentence bigger than the last. Builds to the kicker. */
.familiar-variant-crescendo .familiar-sentence-tactic {
  font-size: clamp(22px, 2.8cqw, 32px);
}
.familiar-variant-crescendo .familiar-sentence-context {
  font-size: clamp(28px, 3.8cqw, 44px);
}
.familiar-variant-crescendo .familiar-sentence-kicker {
  font-size: clamp(36px, 5.2cqw, 60px);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* B — Pull-quote sandwich. Outer two large, middle holds its weight as
   a stand-alone declarative beat. Earlier pass had the middle as a
   whisper; user pushed back — middle now reads at near-parity so the
   trio has rhythm without losing momentum. */
.familiar-variant-sandwich .familiar-sentence-tactic {
  font-size: clamp(34px, 4.8cqw, 56px);
}
.familiar-variant-sandwich .familiar-sentence-context {
  font-size: clamp(34px, 4.4cqw, 50px);
  letter-spacing: -0.005em;
  line-height: 1.5;
}
/* Pad the gap between "Obviously, it happens" and the green rotating
   marker so the two-line composition reads as a deliberate beat rather
   than a tightly-wrapped sentence. */
.familiar-variant-sandwich .familiar-sentence-context > .hl-marker {
  margin-top: 14px;
}
.familiar-variant-sandwich .familiar-sentence-kicker {
  font-size: clamp(36px, 5.2cqw, 60px);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Codas track the marker line size so the rhythm reads consistent. */
.familiar-variant-sandwich .familiar-coda-tactic { font-size: clamp(26px, 3.4cqw, 38px); }
.familiar-variant-sandwich .familiar-coda-context { font-size: clamp(22px, 2.8cqw, 32px); }
.familiar-variant-sandwich .familiar-coda-kicker { font-size: clamp(26px, 3.6cqw, 40px); }

/* C — Editorial collage. Mixed font/style/indent. Looks like a magazine
   spread, intentional asymmetry. */
.familiar-variant-collage .familiar-sentence-tactic {
  font-size: clamp(28px, 3.8cqw, 42px);
  margin-left: 4%;
}
.familiar-variant-collage .familiar-sentence-context {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.9cqw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-cream);
}
.familiar-variant-collage .familiar-sentence-kicker {
  font-size: clamp(36px, 5.4cqw, 60px);
  font-weight: 500;
  margin-right: 4%;
}

/* D — Middle as rebel. Outer two uniform italic serif. The middle line
   breaks register entirely — sans-serif, heavy, uppercase, peach. */
.familiar-variant-rebel .familiar-sentence-tactic,
.familiar-variant-rebel .familiar-sentence-kicker {
  font-size: clamp(30px, 4.2cqw, 46px);
}
.familiar-variant-rebel .familiar-sentence-context {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(22px, 2.8cqw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--electric-peach);
}

/* ── Familiar bridge — "Fanish is for that." ──────────────────────────
   Closing italic peach line + a thin hairline that drops past the
   section's bottom edge into the cream IshCards section below. Reads as
   a continuation: the thought doesn't end with the period, it carries
   over into the cream "breath" of the page. */
.familiar-bridge {
  text-align: center;
  /* v=144: tightened top margin so the bridge sits more centrally
     in the dark seam between Familiar and the cream device frame
     below. Was clamp(120px, 16cqw, 220px) — too much push from above
     made the line feel like it was floating at one end. */
  margin-top: clamp(80px, 10cqw, 140px);
  margin-bottom: clamp(40px, 6cqw, 80px);
  position: relative;
}
/* .familiar-play-arrow rules were removed in v=124 — the crayon arrow
   experiment was abandoned. Bridge stands alone as the section closer. */
@media (max-width: 720px) {
  .familiar-play-arrow {
    width: 96vw;
    top: calc(100% - 4px);
  }
  .familiar-bridge { margin-top: 88px; }
}
.familiar-bridge-text {
  font-family: "Gelasio", var(--serif);
  font-style: italic;
  font-weight: 400;
  /* v=144: bumped from clamp(28px, 4.4cqw, 48px). The bridge is the
     closing thesis of the whole Familiar section + the entry into the
     cream zone — it should land with weight, not feel like body copy. */
  font-size: clamp(36px, 6.2cqw, 68px);
  line-height: 1.1;
  color: var(--warm-cream);
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Organic double underline below "Fanish is for that." (v=140).
   Two hand-drawn wobble strokes in brand peach. Anchored as a block
   below the text so it follows the text's center. Width tracks the
   text size via clamp so it stays proportional across viewports.
   v=144: bumped wider in step with the larger headline. */
.familiar-bridge-underline {
  display: block;
  margin: 8px auto 0;
  width: clamp(240px, 30vw, 380px);
  height: clamp(22px, 2.6vw, 30px);
  overflow: visible;
}
.familiar-bridge-fan {
  color: var(--warm-cream);
  font-style: normal;
}
.familiar-bridge-ish {
  color: var(--electric-peach);
  font-style: italic;
}
.familiar-bridge-line {
  display: block;
  width: 1px;
  /* Tall enough to bleed past the section's bottom padding into the
     cream IshCards section below. Gradient fades out so the line reads
     as "thought continuing" rather than a hard rule. */
  height: clamp(120px, 18vh, 220px);
  background: linear-gradient(
    to bottom,
    rgba(255, 160, 112, 0.85) 0%,
    rgba(255, 160, 112, 0.55) 35%,
    rgba(255, 160, 112, 0.28) 70%,
    rgba(255, 160, 112, 0) 100%
  );
  margin: 28px auto 0;
}
/* No bleed-past needed anymore: the bridge sits cleanly in the Ink Blue
   half, and the device frame below provides the transition. */
.familiar { overflow: visible; }

@media (max-width: 720px) {
  .familiar-bridge-text { font-size: clamp(22px, 6vw, 30px); }
  .familiar-bridge-line { height: clamp(80px, 12vh, 140px); }
}

/* ── Setup ──────────────────────────────────────────────────────────────── */
/* Continues the hero's bottom warmth (#1A1410) and cools back toward Slate.
   No horizon glow — that lives only in the hero. Visual continuation of
   the dark base; no hard cut between sections. */
/* Connector + bridge JSX was dropped — Permission interstitial below now
   carries the section's resolution at hero scale. Setup ends cleanly on
   the pain row + section padding. */
.setup {
  padding-top: 96px;
  padding-bottom: 96px;
  background-color: #0D1420;
  background-image: linear-gradient(180deg, #1A1410 0%, #131720 55%, #0F1318 100%);
}
.setup-heading {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 760px;
  text-wrap: balance;
}
/* Block C: A+B treatment — editorial typography + committed asymmetric scale.
   Outer pains read as flanking whispers; middle pain is the section's
   pull-quote at notably larger scale. No card chrome, no padding, no
   border-radius — pure typesetting. */
.setup-stack {
  display: grid;
  grid-template-columns: 1fr 1.65fr 1fr;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.setup-stack.revealed .setup-pain {
  opacity: 1;
  transform: translateY(0);
}
.setup-pain {
  padding: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
  transition-delay: var(--stagger-delay, 0ms);
}
.setup-pain-1 {
  /* Middle pain — the section's pull-quote. No chrome, just larger type. */
  padding: 0;
}
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.setup-pain {
  padding: 24px 28px;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  transition-delay: var(--stagger-delay, 0ms);
}
.setup-stack.revealed .setup-pain {
  opacity: 1;
  transform: translateY(0);
}
.setup-pain-1 {
  /* Middle pain. Longer text, visually larger block. */
  padding: 32px 32px;
  background: rgba(255, 160, 112, 0.06);
  border-radius: 16px;
}
.setup-pain-text {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.32;
  margin: 0;
  color: var(--warm-cream);
  text-wrap: pretty;
  text-align: left;
}
.setup-pain-1 .setup-pain-text {
  font-size: 36px;
  line-height: 1.2;
}

/* Block C4: thin peach connecting line. Draws downward after the pains
   have animated in, sits between the pain row and the bridge line.
   Round 9: extended ~40% to draw the eye further down the page. */
.setup-connector {
  display: flex;
  justify-content: center;
  margin: 32px auto 0;
  height: 78px;
  max-width: 1080px;
}
.setup-connector-line {
  display: block;
  width: 1.5px;
  height: 0;
  background: linear-gradient(180deg, rgba(255, 160, 112, 0.6), rgba(255, 160, 112, 0.1));
  transition: height 400ms ease-out;
  transition-delay: 410ms;
  border-radius: 1px;
}
.setup-connector.revealed .setup-connector-line {
  height: 100%;
}

/* Block C3: bridge — the section's punchline. Treat it that way. */
.setup-bridge {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  color: var(--electric-peach);
  margin: 0 auto;
  padding: 8px 0 32px;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  transition-delay: 525ms;
}
.setup-bridge.revealed { opacity: 1; transform: translateY(0); }
.setup-bridge-text {
  font-style: italic;
  font-weight: 400;
}
.setup-bridge-dot {
  font-style: normal;
}

@media (max-width: 880px) {
  .setup-stack { grid-template-columns: 1fr; gap: 36px; }
  .setup-pain { padding: 0; }
  .setup-pain-1 { padding: 0; }
  .setup-pain-text { font-size: 18px; }
  .setup-pain-1 .setup-pain-text { font-size: 26px; }
  .setup-connector { height: 40px; margin-top: 16px; }
  .setup-bridge { font-size: 26px; padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-pain { transition: none; opacity: 1; transform: none; }
  .setup-bridge { transition: none; opacity: 1; transform: none; }
  .setup-connector-line { transition: none; height: 100%; }
}

/* ── How It Works (Block D: compact 3-column layout) ────────────────────── */
.how-compact { padding: 80px 0; }
@media (max-width: 880px) { .how-compact { padding: 56px 0; } }

.how-list-compact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.how-step-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how-step-num {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--electric-peach);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.how-step-title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--warm-cream);
  text-wrap: balance;
}
.how-step-body {
  font-size: 16px;
  color: var(--muted-cream);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 880px) {
  .how-list-compact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .how-step-compact {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
  }
  .how-step-compact .how-step-num {
    grid-row: 1 / span 3;
    align-self: start;
    font-size: 16px;
    margin-top: 4px;
  }
  .how-step-compact .how-step-title { grid-column: 2; font-size: 22px; }
  .how-step-compact .how-step-body  { grid-column: 2; font-size: 15px; }
}

/* ── Ish Cards Grid ─────────────────────────────────────────────────────── */
/* Round 9: tighten the seam between Setup and the cards grid.
   Setup now has padding-bottom 32px; pull the cards section up to match. */
.cards-section { padding-top: 56px; }
.cards-section .section-head { text-align: left; }
.cards-grid {
  display: grid;
  /* 2x2 grid per v=130 — four formatted ish cards (image_header,
     pull_quote, highlight_quote) replace the previous six paragraph
     cards. */
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 720px) { .cards-grid { grid-template-columns: 1fr; gap: 20px; } }

.ish-card {
  background: var(--near-black);
  color: var(--warm-cream);
  border: 0.5px solid rgba(255, 248, 244, 0.06);
  border-radius: 16px;
  padding: 22px 24px 20px 28px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(14, 13, 12, 0.06), 0 8px 24px rgba(14, 13, 12, 0.10);
  transition: transform 200ms ease, box-shadow 200ms ease;
  min-height: 240px;
}
.ish-card-grid { cursor: default; }
.ish-card-grid:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(14, 13, 12, 0.10), 0 16px 40px rgba(14, 13, 12, 0.18);
}
/* Hero card variant. Sized to fit a slim phone frame. */
.ish-card-hero {
  min-height: 0;
  padding: 16px 16px 14px 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  cursor: default;
}

/* C1: vertical color bar on the LEFT EDGE of the card, mirrors actual app cards. */
.ish-card-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 22%;
  width: 4px;
  border-radius: 0 2px 2px 0;
}
.ish-card-bar-peach  { background: var(--pill-peach); }
.ish-card-bar-teal   { background: var(--pill-teal); }
.ish-card-bar-cream  { background: var(--pill-cream); }
.ish-card-bar-coral  { background: var(--pill-coral); }
.ish-card-bar-gold   { background: var(--pill-gold); }

/* Category pill (top of card, colored to match the bar) */
.ish-card-pill {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  margin-bottom: 14px;
}
.ish-card-pill-peach  { background: rgba(255, 160, 112, 0.20); color: var(--pill-peach); }
.ish-card-pill-teal   { background: rgba(156, 201, 199, 0.20); color: var(--pill-teal); }
.ish-card-pill-cream  { background: rgba(232, 221, 201, 0.18); color: var(--pill-cream); }
.ish-card-pill-coral  { background: rgba(226, 125, 110, 0.20); color: var(--pill-coral); }
.ish-card-pill-gold   { background: rgba(212, 184, 114, 0.20); color: var(--pill-gold); }

/* Paragraph */
.ish-card-paragraph {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 248, 244, 0.82);
  margin: 0 0 18px;
  text-wrap: pretty;
  flex: 1;
}
.ish-card-hero .ish-card-paragraph { font-size: 13px; }

/* Round 6 follow-up: items[] mode (numbered Smart Lines list).
   Big peach Gelasio numbers on the left, paragraph body on the right,
   thin warm-cream divider between items. */
.ish-card-headline {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--warm-cream);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.ish-card-hero .ish-card-headline { font-size: 19px; margin-bottom: 12px; }

.ish-card-items {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.ish-card-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(232, 221, 201, 0.18);
}
.ish-card-item:first-child { border-top: 0; padding-top: 4px; }
.ish-card-item:last-child { padding-bottom: 4px; }
.ish-card-item-num {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--electric-peach);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* Optical alignment with first text line. */
  padding-top: 1px;
}
.ish-card-hero .ish-card-item-num { font-size: 22px; }
.ish-card-hero .ish-card-item {
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 8px 0;
}
.ish-card-hero .ish-card-item:first-child { padding-top: 2px; }
.ish-card-hero .ish-card-item:last-child { padding-bottom: 2px; }
.ish-card-hero .ish-card-items { margin-bottom: 10px; }
.ish-card-item-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--warm-cream);
  text-wrap: pretty;
}
.ish-card-hero .ish-card-item-body { font-size: 11.5px; line-height: 1.45; }
@media (max-width: 720px) {
  .ish-card-headline { font-size: 20px; }
  .ish-card-item { grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; }
  .ish-card-item-num { font-size: 24px; }
  .ish-card-item-body { font-size: 13px; }
}

/* Tag pills at the bottom */
.ish-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.ish-card-tag {
  display: inline-block;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 248, 244, 0.08);
  color: rgba(255, 248, 244, 0.72);
  border: 0.5px solid rgba(255, 248, 244, 0.10);
}
.ish-card-tag-primary {
  background: rgba(255, 160, 112, 0.18);
  color: var(--electric-peach);
  border-color: rgba(255, 160, 112, 0.32);
}

@media (max-width: 720px) {
  .ish-card { padding: 20px 20px 18px 24px; min-height: 0; }
  .ish-card-paragraph { font-size: 14px; }
}

/* ── New ish-card formats (v=130) ──────────────────────────────────────
   Recreates the in-app ish-feed formats on the marketing surface:
     image_header   — image on top, dark caption panel below (Manon, Antonelli)
     pull_quote     — eyebrow + recessed serif-italic quote + body (Pulisic origin)
     highlight_quote — eyebrow + recessed quote + body + More + footer (Pulisic Time)

   Shared chrome: full-height left accent bar, eyebrow icon + caps label,
   recessed quote box with peach curly-quote glyph, divider+footer with
   "Read full article →" coral link.

   Card surface follows the in-app coral-ish scheme rather than the
   marketing slate (cards are inside the device frame — "inside the app"
   per the device-frame comment), so the warm dark brown bg matches the
   screenshots. */

/* Card surface override for all three new formats. Warm brown gradient,
   subtle inner top highlight, hairline edge border — same lift pattern
   as the design-system note ("gradient surface, inset top highlight,
   0.5px edge border"). */
.ish-card-fmt-image-header,
.ish-card-fmt-quote {
  background:
    linear-gradient(180deg, #2a1f1a 0%, #1f1614 42%, #1c1311 100%);
  border: 0.5px solid rgba(255, 248, 244, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(14, 13, 12, 0.10),
    0 14px 32px rgba(14, 13, 12, 0.18);
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

/* Full-height left accent bar (quote formats — bar sits behind the
   eyebrow and runs the full card height). 3px wide. */
.ish-card-bar-full {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  height: auto;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

/* ── image_header ───────────────────────────────────────────────────── */
.ish-card-fmt-image-header { display: flex; flex-direction: column; }

.ish-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.ish-card-image-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when image === null. Stylized warm-brown gradient with a
   soft radial wash so it reads as "documentary photo coming" rather
   than a flat color block. The data-subject attr is decorative — the
   card's title carries the meaning. */
.ish-card-image-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 35% 30%, rgba(255, 160, 112, 0.10) 0%, transparent 55%),
    radial-gradient(140% 100% at 80% 75%, rgba(20, 14, 12, 0.85) 0%, rgba(28, 19, 17, 0) 60%),
    linear-gradient(155deg, #3a2620 0%, #1f1310 100%);
  position: relative;
}
.ish-card-image-placeholder::after {
  /* Faint film-grain stand-in: layered radial dots low-opacity. Keeps the
     placeholder from looking like a flat brown rect. */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 248, 244, 0.06) 0, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(255, 248, 244, 0.05) 0, transparent 100%),
    radial-gradient(1px 1px at 45% 65%, rgba(255, 248, 244, 0.05) 0, transparent 100%);
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
}

/* Outlined pill — coral border, transparent bg, sits over the image
   at top-left. Floats with a subtle backdrop so it remains legible
   over any photo. */
.ish-card-pill-outlined {
  position: absolute;
  top: 14px; left: 14px;
  margin: 0;
  background: rgba(20, 14, 12, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 160, 112, 0.75);
  color: var(--electric-peach);
  padding: 6px 12px;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  font-weight: 700;
}

/* Caption panel — title, description, divider, source row.
   Holds the left peach accent bar (3px) on its left edge. */
.ish-card-caption {
  position: relative;
  padding: 20px 22px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ish-card-caption .ish-card-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.ish-card-title {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--warm-cream);
  margin: 0 0 10px;
  text-wrap: balance;
}
.ish-card-description {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 248, 244, 0.62);
  margin: 0 0 18px;
  text-wrap: pretty;
  /* Clamp to 2 lines so cards in a row stay close in height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── quote formats (pull_quote + highlight_quote) ───────────────────── */
.ish-card-fmt-quote {
  position: relative;
  padding: 22px 22px 20px 26px;
  display: flex;
  flex-direction: column;
}

/* Eyebrow (icon + uppercase letter-spaced category label) */
.ish-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
  align-self: flex-start;
}
.ish-card-eyebrow-icon { display: block; }
.ish-card-eyebrow-peach  { color: var(--electric-peach); }
.ish-card-eyebrow-gold   { color: var(--pill-gold); }
.ish-card-eyebrow-coral  { color: var(--pill-coral); }
.ish-card-eyebrow-teal   { color: var(--pill-teal); }
.ish-card-eyebrow-cream  { color: var(--pill-cream); }

/* Recessed quote box. Slightly darker fill than the card body + 0.5px
   inset highlight at the top creates the "carved in" feel. */
.ish-card-quote-box {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.18) 100%);
  border: 0.5px solid rgba(255, 248, 244, 0.06);
  border-radius: 12px;
  padding: 18px 22px 18px 20px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.ish-card-quote-glyph {
  /* Large peach Gelasio curly open-quote. Top-left aligned. */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  line-height: 0.75;
  color: var(--electric-peach);
  display: block;
  margin-top: 4px;
  letter-spacing: -0.04em;
  user-select: none;
}
.ish-card-quote-body { min-width: 0; }
.ish-card-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--warm-cream);
  margin: 6px 0 0;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.ish-card-quote-attribution {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 248, 244, 0.55);
  letter-spacing: 0;
}

/* Body paragraph below the quote box (highlight_quote + pull_quote). */
.ish-card-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 248, 244, 0.62);
  margin: 16px 0 0;
  text-wrap: pretty;
}
/* highlight_quote: clamp body to keep the row heights aligned with the
   image_header cards. pull_quote lets the body flow free since the whole
   passage is the card. */
.ish-card-fmt-highlight-quote .ish-card-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* More-affordance (coral link with downward chevron) */
.ish-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  align-self: flex-start;
  transition: opacity 200ms ease;
}
.ish-card-more-peach   { color: var(--electric-peach); }
.ish-card-more-gold    { color: var(--pill-gold); }
@media (hover: hover) {
  .ish-card-more:hover { opacity: 0.78; }
}

/* ── Shared footer (divider + source + read-link) ───────────────────── */
.ish-card-footer {
  margin-top: auto;
  padding-top: 14px;
}
.ish-card-footer .ish-card-divider {
  border-top: 0.5px solid rgba(255, 248, 244, 0.10);
  margin: 0 0 12px;
}
.ish-card-source {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 248, 244, 0.50);
  font-variant-numeric: tabular-nums;
}
.ish-card-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.ish-card-read-link-peach   { color: var(--electric-peach); }
.ish-card-read-link-gold    { color: var(--pill-gold); }
.ish-card-read-link-coral   { color: var(--pill-coral); }
.ish-card-read-link-arrow { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (hover: hover) {
  .ish-card-read-link:hover { opacity: 0.88; }
  .ish-card-read-link:hover .ish-card-read-link-arrow {
    transform: translateX(3px);
  }
}

/* Hover on the whole quote/image card — lift, no border darkening. */
.ish-card-fmt-image-header,
.ish-card-fmt-quote {
  cursor: default;
}
@media (hover: hover) {
  .ish-card-fmt-image-header:hover,
  .ish-card-fmt-quote:hover {
    transform: translateY(-6px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 4px 8px rgba(14, 13, 12, 0.12),
      0 22px 48px rgba(14, 13, 12, 0.22);
  }
}

@media (max-width: 720px) {
  .ish-card-fmt-image-header,
  .ish-card-fmt-quote { padding: 0; }
  .ish-card-fmt-quote { padding: 20px 18px 18px 22px; }
  .ish-card-caption { padding: 18px 18px 18px 22px; }
  .ish-card-title { font-size: 18px; }
  .ish-card-quote-text { font-size: 17px; }
  .ish-card-quote-glyph { font-size: 44px; }
  .ish-card-quote-box {
    grid-template-columns: 30px 1fr;
    padding: 16px 18px 16px 18px;
  }
  .ish-card-image-wrap { aspect-ratio: 16 / 11; }
}

/* ── Screenshot cards (v=131) ─────────────────────────────────────────
   Each card is the original in-app screenshot rendered at uniform size.
   Aspect-ratio normalized to 3/2; `object-fit: contain` so no card
   content is cropped — the screenshots' built-in cream/light padding
   blends with the device-frame cream so any letterboxing reads as part
   of the natural margin around each card.

   v=143: cover-glass bevel — same grammar as the outer device-frame bevel
   so the cards rhyme with their container without doubling up the
   metaphor. Top inner highlight + bottom inset shadow + faint hairline
   + outside drop-shadow + a top-left diagonal sheen on ::before. Reads
   as a glass-fronted tile lifted off the cream surface — differentiates
   the four screenshots as captured app moments without painting a
   literal phone bezel around them. */
.ish-card-screenshot {
  aspect-ratio: 3 / 2;
  background: var(--warm-cream);
  border-radius: 18px;
  overflow: hidden;
  cursor: default;
  display: block;
  position: relative;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(14, 26, 43, 0.10),
    0 0 0 0.5px rgba(14, 26, 43, 0.16),
    0 10px 28px rgba(14, 26, 43, 0.22);
}
.ish-card-screenshot::before {
  /* Top-left diagonal cover-glass sheen. Decorative; sits above the
     image but below any future hover overlay. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%);
  z-index: 1;
}
.ish-card-screenshot > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 0;
}
@media (hover: hover) {
  .ish-card-screenshot:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(14, 26, 43, 0.12),
      0 0 0 0.5px rgba(14, 26, 43, 0.18),
      0 18px 38px rgba(14, 26, 43, 0.28);
  }
}
@media (max-width: 720px) {
  .ish-card-screenshot { aspect-ratio: auto; }
  .ish-card-screenshot > img { height: auto; }
}

/* ── What You Get ───────────────────────────────────────────────────────── */
/* "Not ESPN. Not trying to be." heading — intentional brand break.
   Heavy bold italic sans, uppercase, ESPN-red (Pantone 199 approximation).
   The first line ("Not ESPN.") wears the ESPN-style white flare slash
   through it — a callback to the white horizontal cut through the actual
   ESPN wordmark. The second line ("Not trying to be.") stays clean so
   the brand voice has a moment without the gag chrome. */
.wyg-h2 {
  font-family: var(--sans) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: clamp(48px, 6.4vw, 84px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
  color: #D32228 !important;
}
/* ── ESPN headline entrance (V4 stadium-light pan) ───────────────────
   When .wyg-h2 enters the viewport (via data-reveal IntersectionObserver):
     1. First line ("Not ESPN.") fades in.
     2. Warm, blurred stadium-light beam pans L→R across the whole first
        line via .wyg-h2-slam::after.
     3. White flare slash draws across "ESPN." — the static brand-break
        treatment that always lives on the word.
     4. "Not trying to be." rises slowly from below — brand voice asserting
        itself after the broadcast moment.
*/

.wyg-h2[data-reveal]:not(.is-revealed) { transform: none !important; opacity: 0 !important; }
.wyg-h2[data-reveal].is-revealed { transform: none !important; }
.wyg-h2 { transition: opacity 80ms ease; }
.wyg-h2.is-revealed { opacity: 1; }

/* v=137: animations stripped per user direction. The slam-in + warm
   light pan + flare draw-in read as the brand voice flexing twice;
   letting "Not ESPN." sit static lets the line2 rise carry the whole
   reveal. The static white sports-tape strip on "ESPN." stays — it's
   a brand mark, not motion. Only .wyg-h2-line2 still animates. */
.wyg-h2-slam {
  display: inline-block;
  position: relative;
  opacity: 1; /* was 0 + animation; now static */
}
.wyg-h2.is-revealed .wyg-h2-slam { animation: none; }
.wyg-h2-slam::after { display: none; }
.wyg-h2.is-revealed .wyg-h2-slam::after { animation: none; }
  content: "";
  position: absolute;
  inset: -8px -40px;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 20%,
    rgba(255, 230, 200, 0.0) 35%,
    rgba(255, 240, 220, 0.55) 50%,
    rgba(255, 230, 200, 0.0) 65%,
    transparent 80%,
    transparent 100%);
  filter: blur(8px);
  transform: translateX(-110%);
  mix-blend-mode: screen;
  opacity: 0;
}
.wyg-h2.is-revealed .wyg-h2-slam::after {
  animation: espn-pan 1600ms cubic-bezier(0.4, 0, 0.2, 1) 320ms forwards;
}
@keyframes espn-pan {
  0% { transform: translateX(-110%); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

/* Static white flare slash on "ESPN." — draws after the pan completes
   its first quarter so the slash reads as the broadcast graphic locking
   into place. */
/* White sports-tape strip on "ESPN." — reads as someone slapped a piece
   of athletic tape over the word to "fix" it. Woven cross-hatch texture
   via layered repeating gradients. Ragged tape-end edges via a CSS mask
   that nibbles the left + right edges. Slight downward-right tilt (-7deg)
   so the tape looks applied by hand, mid-correction. Same draw-in
   transition as the previous flare, but faster (260ms duration) and
   earlier (520ms after the section reveals). */
/* White line slash on "ESPN." — clean broadcast-graphic callback. Slight
   rotation (-1deg) + subtle drop shadow gives it a hint of "tape" feel
   without the texture noise that hurt readability at heading scale. Draws
   on left-to-right after the section reveals. */
.wyg-h2-flare {
  position: relative;
  display: inline-block;
}
.wyg-h2-flare::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: clamp(5px, 0.5vw, 7px);
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 0 10px rgba(255, 255, 255, 0.35);
  /* v=137: static, no draw-in. Per user: "Not ESPN" has no animation,
     only the slash brand mark stays. */
  transform: translateY(-50%) rotate(-1deg) scaleX(1);
  transform-origin: left center;
  pointer-events: none;
  opacity: 1;
}
.wyg-h2.is-revealed .wyg-h2-flare::after {
  /* No animation — slash is always at rest. */
  animation: none;
}
@keyframes espn-flare {
  0% { transform: translateY(-50%) rotate(-1deg) scaleX(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-50%) rotate(-1deg) scaleX(1); opacity: 1; }
}

/* "Not trying to be." — rises slowly from below after the broadcast lands. */
.wyg-h2-line2 {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
}
.wyg-h2.is-revealed .wyg-h2-line2 {
  /* v=141: delay slashed from 1100ms → 120ms (was timed to follow the
     old slam-in + warm-light-pan + flare draw on line 1, all of which
     were removed). Duration trimmed 900ms → 620ms so the rise lands
     promptly after the section enters the viewport. */
  animation: espn-line2-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms forwards;
}
@keyframes espn-line2-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wyg-h2-slam,
  .wyg-h2-slam::after,
  .wyg-h2-line2,
  .wyg-h2-flare::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
/* Update reduced-motion flare resting state to match -1deg. */
  .wyg-h2-flare::after {
    transform: translateY(-50%) rotate(-1deg) !important;
    opacity: 1 !important;
  }
  .wyg-h2-slam::after { opacity: 0 !important; }
}
@media (max-width: 720px) {
  /* v=146: hero → Familiar gap tightened on mobile. Was leaving a
     large dead-air band between the CTAs and "We've all found
     ourselves" — both halves had generous padding designed for desktop.
     Bottom of hero + top of familiar both compressed so the headline
     of the next chapter is visible without a long scroll. */
  .hero { padding: 64px 0 40px !important; }
  .familiar { padding-top: 32px !important; padding-bottom: 64px !important; }
  .familiar-heading { margin-bottom: 28px; }
}

/* ── Orphan rule cleanup (v=146) ──────────────────────────────────
   .hero-replay was a build-time animation re-trigger removed from
   hero.jsx in v=133 but its CSS rules sat orphaned in styles.css.
   The deployed site (showing the button) is on an earlier build that
   still mounts <button.hero-replay>; explicitly hiding the class
   neutralizes the button even if a stale JSX bundle ever ships
   alongside the latest CSS. Defensive cleanup. */
.hero-replay { display: none !important; }

@media (max-width: 720px) {
  /* Preserved from earlier rule blocks. */
  .wyg-h2 { letter-spacing: -0.025em !important; }
  .wyg-h2-flare::after { height: 4px; }

  /* ── Mobile rotator re-centering (v=137, hardened v=146) ─────────
     Drop the desktop L/C/R staircase at narrow viewports. All three
     lines stack centered with a clamped max-width so the rotating
     marker never overflows the screen edge. The staircase is a
     desktop reading rhythm; mobile can't carry the diagonal without
     clipping the right-aligned kicker.

     v=146 hardening: HighlightMarker sets an inline pixel `width` on
     the .hl-marker wrapper and .hl-active equal to the LONGEST variant
     ("Because you literally can't leave" — ~400px). That JS-set width
     beats any CSS max-width because inline > stylesheet. So we force
     `width: auto !important` here, then clamp via max-width. Phrases
     wrap to multiple lines on mobile rather than overflowing the
     viewport. The SVG marker stretches with the wrapped text. */
  .familiar-sentence,
  .familiar-sentence-left,
  .familiar-sentence-center,
  .familiar-sentence-right {
    text-align: center !important;
    margin-inline: auto;
    max-width: min(88vw, 360px);
  }
  .familiar-sentence .hl-marker {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    display: inline-block;
  }
  /* v=157: tactic (blue) rotator inherits text-align: left from
     .familiar-sentence-left .hl-marker (desktop rule). On mobile we
     want it to match the centered treatment of the other two
     rotators, so override the marker text-align to center. */
  .familiar-sentence-left .hl-marker { text-align: center; }
  .familiar-sentence .hl-active {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    display: inline-block;
    padding: 0.22em 10px;
  }
  /* SVG marker height behavior: with wrapped text the marker now
     covers multiple lines. Stretch the inner SVG to fill the wrapped
     block height, not just a single line-height. */
  .familiar-sentence .hl-stroke-inner {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
  }
  /* The right-aligned kicker's special flex anchoring on desktop
     pins the marker to the right edge. On mobile that anchoring
     produces a right-justified marker inside a narrow line, which
     creates the off-screen visual. Reset to inline-block so the
     marker centers with the surrounding text. */
  .familiar-sentence-right .hl-marker {
    text-align: center;
    display: inline-block;
    justify-content: center;
  }
  .familiar-sentence-right .hl-marker .hl-active {
    margin-left: 0;
    text-align: center;
  }

  /* ── Mobile ish cards (v=137): show only positions 1 and 3 ───────
     User direction — four screenshot cards is too much scroll on a
     phone. Cards 1 (Manon F1 image_header) + 3 (Pulisic highlight
     quote) form the L column of the 2x2 grid; format variety + half
     the scroll. Cards stay in the DOM (so layouts on rotation back
     to landscape work) but are display:none. */
  .cards-grid > :nth-child(2),
  .cards-grid > :nth-child(4) { display: none; }
}
.wyg .section-h2 { margin-bottom: 32px; max-width: 640px; }

/* Eyebrow line sitting above the 3 rejection cards. "About sports." —
   a flat declarative counter to the slammed ESPN-style heading above. */
.wyg-eyebrow {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 32px);
  font-style: italic;
  color: var(--electric-peach);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.wyg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.wyg-card {
  background: rgba(14, 13, 12, 0.04);
  border: 0.5px solid rgba(14, 13, 12, 0.10);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  /* Was display:flex column — that combined with the section-h2 reveal
     state (opacity 0) was leaving the h3 in a state where its measured
     height collapsed to 1 line even when content wrapped to 2, so the
     body's first line overlapped with the title's second line.
     Block flow + clear stacking fixes it; the card has no need for flex. */
  display: block;
}
.wyg-card-h {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--near-black);
  line-height: 1.15;
  /* Belt-and-braces: explicit block + clear so the body always lands
     strictly below the title's bottom edge regardless of font-load order. */
  display: block;
  clear: both;
}
.wyg-card-body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(14, 13, 12, 0.7);
  margin: 0;
  text-wrap: pretty;
}
.wyg-card-body + .wyg-card-body { margin-top: 12px; }
.wyg-card-aside {
  font-family: var(--serif);
  font-style: italic;
  /* v=137: deepened from --electric-peach (#FFA070) to a higher-contrast
     burnt peach so the aside is legible on the warm-cream card bg.
     Original failed AA at ~2.5:1; this lands at ~5.4:1. Same hue family,
     same brand peach signal — just dense enough to actually read. */
  color: #C8542B;
  font-size: 17px !important;
  line-height: 1.4 !important;
}

/* ── Rejection card 2: fake ESPN-style headline being corrected ──────── */
/* The card wears a red, italic, uppercase "STOP SHOUTING." line up top that
   gets line-through struck — reads as Fanish literally fixing an ESPN tone.
   The real cream headline + body sit below. */
.wyg-card-espn-correction { position: relative; }
.wyg-card-reject {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: #D32228;
  margin: 0 0 16px;
  display: inline-block;
  position: relative;
  text-decoration: line-through;
  text-decoration-color: rgba(14, 13, 12, 0.7);
  text-decoration-thickness: 2.5px;
  text-decoration-skip-ink: none;
  opacity: 0.85;
}

/* ── App-shaped Ish card (one card in the grid wears phone-screen chrome) ── */
.ish-card-app-shaped {
  /* Override default IshCard chrome — the phone frame inside carries the
     visual treatment. Outer article is just a vertical stack: phone + caption. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}
.ish-card-app-frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 28px;
  background: var(--near-black);
  border: 1.5px solid rgba(255, 160, 112, 0.4);
  padding: 12px 10px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 160, 112, 0.08);
}
.ish-card-app-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 16px;
  background: rgba(14, 13, 12, 0.85);
  border-radius: 0 0 10px 10px;
  border-left: 0.5px solid rgba(255, 160, 112, 0.3);
  border-right: 0.5px solid rgba(255, 160, 112, 0.3);
  border-bottom: 0.5px solid rgba(255, 160, 112, 0.3);
}
.ish-card-app-screen {
  padding: 22px 14px 12px;
  position: relative;
  color: var(--warm-cream);
}
.ish-card-app-screen .ish-card-bar {
  top: 22px; left: 0;
  height: 22%;
}
.ish-card-app-caption {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted-cream);
  text-align: center;
  margin: 0;
  letter-spacing: 0.02em;
}
.wyg-card-link {
  margin-top: 20px;
  font-size: 13px;
  color: var(--electric-peach);
  font-weight: 500;
  border-bottom: 1px dashed rgba(255, 160, 112, 0.4);
  padding-bottom: 1px;
  align-self: flex-start;
  cursor: pointer;
}
.wyg-card-link:hover { border-bottom-color: var(--electric-peach); }
@media (max-width: 880px) { .wyg-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ── Dark-mode WYG (v=142) ─────────────────────────────────────────────
   WYG moved out of the cream device frame; section is now .section-dark.
   These overrides invert the on-cream surface tokens to on-dark
   equivalents — card surface darker, headline + body cream, italic
   aside back to its lighter brand peach (deepened-peach was for the
   cream bg only). */
.section-dark.wyg .wyg-card {
  background: rgba(255, 248, 244, 0.04);
  border-color: rgba(255, 248, 244, 0.10);
}
.section-dark.wyg .wyg-card-h {
  color: var(--warm-cream);
}
.section-dark.wyg .wyg-card-body {
  color: rgba(255, 248, 244, 0.72);
}
.section-dark.wyg .wyg-card-aside {
  /* Revert to lighter brand peach now that the bg is dark. The
     deepened-peach #C8542B was for AA contrast on cream; on dark it
     reads muddy. */
  color: var(--electric-peach);
}
.section-dark.wyg .wyg-card-reject {
  text-decoration-color: rgba(255, 248, 244, 0.7);
}
.section-dark.wyg .wyg-card-link {
  color: var(--electric-peach);
  border-bottom-color: rgba(255, 160, 112, 0.40);
}

/* ── Dark-mode FAQ (v=142) ────────────────────────────────────────────
   Section moved out of the cream zone alongside WYG. */
.section-dark.faq .faq-tab { color: var(--muted-cream); }
.section-dark.faq .faq-tab:hover { color: var(--warm-cream); }
.section-dark.faq .faq-tab.active { color: var(--warm-cream); }
.section-dark.faq .faq-tabs-divider { background: rgba(255, 248, 244, 0.18); }
.section-dark.faq .faq-item { border-bottom-color: rgba(255, 248, 244, 0.12); }
.section-dark.faq .faq-item.open { background: rgba(255, 160, 112, 0.06); }
.section-dark.faq .faq-q { color: var(--warm-cream); }
.section-dark.faq .faq-q-chev { color: var(--muted-cream); }
.section-dark.faq .faq-a { color: var(--muted-cream); }
.section-dark.faq .faq-cs-prompt { color: var(--muted-cream); }
.section-dark.faq .faq-coming-soon { background: rgba(255, 160, 112, 0.08); }
.section-dark.faq .faq-give-it-a-try { color: var(--warm-cream); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 32px;
  border-bottom: 0.5px solid rgba(14, 13, 12, 0.12);
  padding-bottom: 0;
}
.faq-tab {
  background: transparent;
  border: 0;
  padding: 0 16px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-black);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.faq-tab:hover { color: var(--near-black); }
.faq-tab.active {
  color: var(--near-black);
  border-bottom-color: var(--electric-peach);
}

/* Block E2: subtle divider between World Cup tabs and other-sport tabs (Formula 1, US Open). */
.faq-tabs-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: rgba(14, 13, 12, 0.18);
  margin: 0 8px;
  align-self: center;
}
@media (max-width: 720px) {
  .faq-tabs-divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}

/* Block B: bottom-of-FAQ "Give it a try." CTA. */
.faq-give-it-a-try {
  margin: 40px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--near-black);
  text-align: center;
}
.faq-give-it-a-try-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--electric-peach);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 200ms ease;
}
.faq-give-it-a-try-link:hover { color: var(--light-peach); }
.faq-give-it-a-try-link:focus-visible { outline: 2px solid var(--electric-peach); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 720px) {
  .faq-give-it-a-try { font-size: 18px; margin-top: 32px; }
}

.faq-panel { max-width: 820px; }
.faq-coming-soon {
  padding: 32px 28px;
  background: rgba(255, 160, 112, 0.10);
  border: 0.5px solid rgba(255, 160, 112, 0.28);
  border-radius: var(--radius-card);
  font-size: 16px;
  color: var(--near-black);
  line-height: 1.55;
}
.faq-coming-soon p { margin: 0; }
.faq-cs-prompt { margin-top: 16px; font-size: 14px; color: var(--muted-black); }

.faq-item {
  border-bottom: 0.5px solid rgba(14, 13, 12, 0.12);
  border-left: 2px solid transparent;
  padding-left: 0;
  transition: border-left-color 200ms ease, background-color 200ms ease, padding-left 200ms ease;
}
.faq-item.open {
  border-left-color: var(--electric-peach);
  background: rgba(255, 160, 112, 0.06);
  padding-left: 14px;
}
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 18px 4px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 500;
  color: var(--near-black);
  cursor: pointer;
  transition: color 200ms ease;
}
.faq-item.open .faq-q { color: var(--electric-peach); }
.faq-q-text { flex: 1; }
.faq-q-chev {
  color: var(--muted-black);
  display: inline-flex;
  transition: color 200ms ease;
  pointer-events: none;
}
.faq-q-text { pointer-events: none; }
.faq-item.open .faq-q-chev { color: var(--electric-peach); }

/* Smooth height transition for the answer reveal/collapse (Block E4).
   grid-template-rows 0fr -> 1fr trick avoids needing a fixed pixel height. */
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease-out, opacity 200ms ease-out;
  opacity: 0;
}
.faq-a-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-a {
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-black);
  max-width: 700px;
}
.faq-a p { margin: 0; }
.faq-a-mail {
  color: var(--electric-peach);
  text-decoration: underline;
  text-decoration-color: rgba(255, 160, 112, 0.5);
  text-underline-offset: 2px;
  font-weight: 500;
}
.faq-a-mail:hover { text-decoration-color: var(--electric-peach); }

@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap { transition: none; }
  .faq-item { transition: none; }
}

.contact-link {
  color: var(--near-black);
  border-bottom: 1px dashed rgba(14, 13, 12, 0.4);
  font-weight: 500;
}
.contact-link:hover { border-bottom-color: var(--near-black); }

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.final-cta { text-align: center; }
.final-cta-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.final-cta-h { margin: 0; }
.countdown-label {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
  margin: 0;
}
.countdown-row { display: flex; gap: 14px; }
.countdown-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  background: rgba(255, 248, 244, 0.04);
  border: 0.5px solid rgba(255, 248, 244, 0.12);
  border-radius: 14px;
}
.countdown-num {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  color: var(--electric-peach);
  font-variant-numeric: tabular-nums;
}
.countdown-unit {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
  margin-top: 8px;
}
@media (max-width: 720px) {
  .countdown-box { width: 88px; height: 88px; }
  .countdown-num { font-size: 40px; }
}

.final-cta-social { font-size: 14px; }

.share-block { margin-top: 16px; }
.share-heading {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--warm-cream);
  margin: 0 0 6px;
}
.share-sub {
  font-size: 14px;
  color: var(--muted-cream-dim);
  margin: 0 0 16px;
}
.share-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--electric-peach);
  color: var(--near-black);
  border: 0;
  padding: 0 24px;
  height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  min-width: 160px;
  text-decoration: none;
}
.share-cta-pill:hover {
  background: var(--light-peach);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 160, 112, 0.32);
}
.share-cta-pill:active { transform: translateY(0); }

/* Toast that appears below the share pill after copying the IG link.
   Hidden by default; .show fades it in. */
.share-toast {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.share-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.share-toast-msg { font-style: italic; }
.share-toast-link {
  color: var(--electric-peach);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.share-toast-link:hover { color: var(--light-peach); }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 248, 244, 0.06);
  border: 0.5px solid rgba(255, 248, 244, 0.16);
  color: var(--warm-cream);
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease;
  min-width: 44px;
}
.share-btn:hover { background: rgba(255, 248, 244, 0.10); }
.share-ack {
  font-size: 12px;
  color: var(--electric-peach);
  opacity: 0;
  transition: opacity 200ms ease;
}
.share-ack.show { opacity: 1; }

/* ── Footer (Block F: single horizontal stripe) ─────────────────────────── */
.site-footer {
  background: var(--near-black);
  color: var(--muted-cream);
  border-top: 0.5px solid rgba(255, 248, 244, 0.08);
  padding: 40px 0 0;
}
.site-footer-inner {
  display: flex;
  align-items: center;
  /* Centered horizontally per v=124 — wordmark was removed, so links +
     social are the only remaining children. Both sit in the middle. */
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 32px;
  text-align: center;
}

.footer-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14px;
  color: var(--muted-cream);
  transition: color 200ms ease;
}
.footer-link:hover { color: var(--warm-cream); }
.footer-link-sep {
  color: var(--muted-cream-dim);
  user-select: none;
  font-size: 13px;
}

.footer-social { display: inline-flex; gap: 10px; }
.footer-social-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 248, 244, 0.06);
  border-radius: 50%;
  color: var(--warm-cream);
  transition: background 200ms ease;
}
.footer-social-icon:hover { background: rgba(255, 248, 244, 0.12); }

@media (max-width: 720px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer-links {
    gap: 0 8px;
  }
  .footer-link { padding: 6px 4px; min-height: 36px; }
  .footer-social { margin-top: 4px; }
}

.footer-bottom {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 0.5px solid rgba(255, 248, 244, 0.08);
  text-align: center;
}
.footer-bottom p { margin: 0; font-size: 12px; color: var(--muted-cream-dim); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 13, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: backdrop-in 200ms ease;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--warm-cream);
  color: var(--near-black);
  border-radius: 20px;
  padding: 44px 32px 28px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: modal-in 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-black);
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease;
}
.modal-x:hover { background: rgba(14, 13, 12, 0.06); color: var(--near-black); }

.modal-headline {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 14px;
  outline: none;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) { .modal-headline { font-size: 26px; } }
.modal-body {
  font-size: 15px;
  color: var(--muted-black);
  line-height: 1.55;
  margin: 0 0 22px;
  text-wrap: pretty;
}
/* Modal-scoped CTA pills. Override the hero .dl-btn dimensions so the
   follow buttons read as supporting actions inside the dialog, not as
   primary hero buttons. */
.modal-cta-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.modal-cta-row .dl-btn {
  width: 100%;
  min-width: 0;
  height: 52px;
  font-size: 15px;
  padding: 0 22px;
  border-radius: 10px;
  gap: 10px;
}
.modal-cta-row .dl-btn .dl-btn-icon svg { width: 18px; height: 18px; }

/* Event chips inside the download modal. Same pill shape + colors as the
   hero scope chips that lived under the buttons before — moved here so
   each platform tap reveals what's actually shipping. Centered + tighter
   than the hero chips since they share the dialog with body copy + CTAs. */
.modal-events {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
  justify-content: center;
}
.modal-event {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 160, 112, 0.45);
  border-radius: 999px;
  background: rgba(255, 160, 112, 0.10);
  white-space: nowrap;
  flex: 0 0 auto;
}
.modal-event-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--near-black);
  letter-spacing: -0.005em;
}
.modal-event-dates {
  font-family: var(--sans);
  font-size: 11px;
  color: #B86A38; /* darker peach for legibility on the cream modal */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .modal-event { padding: 7px 12px; gap: 6px; }
  .modal-event-name { font-size: 13px; }
  .modal-event-dates { font-size: 10px; }
}
.modal-close-link {
  display: inline-block;
  background: transparent; border: 0;
  font-size: 13px;
  color: var(--muted-black-dim);
  cursor: pointer;
  padding: 10px 12px 4px;
  min-height: 36px;
  border-bottom: 1px dashed transparent;
}
.modal-close-link:hover { border-bottom-color: rgba(14, 13, 12, 0.3); color: var(--muted-black); }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--near-black);
  color: var(--warm-cream);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: toast-in 200ms ease, toast-out 200ms ease 2s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; } }

/* ── Viewport simulation (Tweaks) ───────────────────────────────────────── */
.viewport-sim {
  min-height: 100vh;
  background:
    repeating-linear-gradient(45deg, #0a0908 0 1px, transparent 1px 12px),
    #16110d;
  padding: 24px 0;
  display: flex; justify-content: center;
}
.viewport-frame {
  background: var(--near-black);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  border: 0.5px solid rgba(255, 248, 244, 0.08);
  /* Force the inner content to compute as if viewport is narrower. */
  container-type: inline-size;
  position: relative;
}
.viewport-content {
  /* CSS @media queries don't respond to container width, so we apply the same
     mobile rules forcibly when the simulated viewport is narrow. The .vp-narrow
     class on body would do this fully. For the prototype the container clipping
     gives the visual cue while real responsive testing should resize the iframe. */
}

/* ── Back link (sub-page nav, mirrors iOS app ChevronLeft) ──────────────── */
.back-bar {
  background: var(--near-black);
  padding: 28px 0 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--warm-cream);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 10px 14px 10px 6px;
  margin-left: -6px; /* optical-align chevron with content edge */
  border-radius: 999px;
  min-height: 44px;
  transition: color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.back-link:hover,
.back-link:focus-visible {
  color: var(--electric-peach);
  outline: none;
}
.back-link:focus-visible {
  background: rgba(255, 160, 112, 0.12);
}
.back-link-chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.back-link:hover .back-link-chevron,
.back-link:focus-visible .back-link-chevron {
  transform: translateX(-2px);
}
.back-link-label {
  line-height: 1;
}
@media (max-width: 720px) {
  .back-bar { padding: 18px 0 0; }
  .back-link { font-size: 14px; padding: 10px 12px 10px 4px; }
  .back-link-chevron { width: 20px; height: 20px; }
}

/* ── Placeholder pages ──────────────────────────────────────────────────── */
.placeholder-page-main {
  min-height: 60vh;
  padding: 64px 0 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.placeholder-page {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 0 32px;
}
.placeholder-h1 {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--warm-cream);
}
.placeholder-body {
  font-size: 18px;
  color: var(--muted-cream);
  margin: 0 0 32px;
  line-height: 1.55;
  text-wrap: pretty;
}
.placeholder-contact {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--muted-cream-dim);
}
.placeholder-contact .contact-link {
  color: var(--electric-peach);
  border-bottom-color: rgba(255, 160, 112, 0.4);
}
.placeholder-contact .contact-link:hover { border-bottom-color: var(--electric-peach); }

/* Structured privacy doc. Long-form policy with section headings.
   Same outer placeholder-page container, just adds typographic rhythm
   for h2/intro/section bodies. */
.privacy-doc { text-align: left; max-width: 720px; }
.privacy-doc .placeholder-h1 { text-align: left; }
.privacy-meta {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
  margin: -16px 0 28px;
}
.privacy-meta strong { font-weight: 600; color: var(--muted-cream); }
.privacy-doc .placeholder-body { text-align: left; margin-bottom: 8px; }
.privacy-section { margin: 32px 0 0; }
.privacy-h2 {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--warm-cream);
  margin: 0 0 12px;
  font-weight: 400;
}
.privacy-body {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted-cream);
  text-wrap: pretty;
  margin: 0;
}
.privacy-doc .placeholder-contact { margin-top: 40px; }
@media (max-width: 720px) {
  .privacy-h2 { font-size: 22px; }
  .privacy-body { font-size: 15px; }
  .privacy-section { margin-top: 24px; }
}
@media (max-width: 720px) {
  .placeholder-page-main { padding: 40px 0 64px; }
  .placeholder-h1 { font-size: 36px; }
  .placeholder-body { font-size: 16px; }
}

/* ── Supplemental page background (help, legal, press, investors, 404) ──
   Replace the near-black background with the hero's dark navy so the
   supplemental pages share the home page's color identity. The body
   gets the navy via :has() so header + back-bar + footer also sit on
   the new color; the page <main> gets it explicitly as a backup. */
body:has(.legal-page-main),
body:has(.help-page-main),
body:has(.placeholder-page-main) {
  background-color: #0A0F1A;
  background-image: linear-gradient(180deg, #0A0F1A 0%, #0D1420 100%);
  background-attachment: fixed;
}
.legal-page-main,
.help-page-main,
.placeholder-page-main {
  /* Same gradient as the body, applied here too so we override
     .section-dark's near-black bg (.section-dark and these classes
     are equal specificity, but these come later in the file so they
     win — explicit is better than implicit). */
  background-color: transparent;
  background-image: none;
}
/* Back-bar and footer have their own near-black backgrounds that
   would otherwise paint a darker band over the navy. Strip them on
   supplemental pages so the surrounding navy reads through. The
   site-header pseudo bg is already responsive to scroll, so no
   override needed there. */
body:has(.legal-page-main) .back-bar,
body:has(.help-page-main) .back-bar,
body:has(.placeholder-page-main) .back-bar,
body:has(.legal-page-main) .site-footer,
body:has(.help-page-main) .site-footer,
body:has(.placeholder-page-main) .site-footer {
  background: transparent;
}

/* ── Help page (/help) ────────────────────────────────────────────────
   Lighter-weight than the legal pages: no sticky TOC, no tables. A
   single centered article column with a primary email card, a 3-up
   inbox grid, a stack of Q&As, and a checklist. */
.help-page-main {
  padding: 64px 0 96px;
  display: block;
}
.help-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}
.help-header { margin-bottom: 48px; }
.help-h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--warm-cream);
  margin: 0 0 18px;
  font-weight: 400;
}
.help-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--warm-cream);
  margin: 0 0 32px;
  text-wrap: pretty;
  max-width: 580px;
}
/* New appreciation line sits above the lead. Slightly smaller, muted
   cream so it reads as a quiet preamble rather than competing with the
   lead's CTA-introduction job. */
.help-appreciation {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted-cream);
  margin: 0 0 14px;
  max-width: 580px;
  text-wrap: pretty;
}

/* Primary email card. Large peach pill — the page's main CTA. */
.help-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--electric-peach);
  color: var(--near-black);
  padding: 14px 26px 14px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--sans);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 4px 16px rgba(255, 160, 112, 0.20);
}
.help-primary-cta:hover {
  background: var(--light-peach);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 160, 112, 0.32);
}
.help-primary-cta:focus-visible {
  outline: 2px solid var(--electric-peach);
  outline-offset: 4px;
}
.help-primary-cta-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}
.help-primary-cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.7;
}
.help-primary-cta-address {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.help-section {
  padding-top: 56px;
  border-top: 0.5px solid rgba(255, 248, 244, 0.10);
  margin-top: 56px;
}
.help-section:first-of-type { margin-top: 0; }
.help-h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--warm-cream);
  margin: 0 0 14px;
  font-weight: 400;
}
.help-section-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted-cream);
  margin: 0 0 28px;
  max-width: 560px;
  text-wrap: pretty;
}

/* 3-up inbox grid. Stacks at 720px. */
.help-inbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .help-inbox-grid { grid-template-columns: 1fr; gap: 12px; }
}
.help-inbox-card {
  background: rgba(255, 248, 244, 0.04);
  border: 0.5px solid rgba(255, 248, 244, 0.12);
  border-radius: 14px;
  padding: 20px 18px 18px;
  transition: border-color 180ms ease, background 180ms ease;
}
.help-inbox-card:hover {
  border-color: rgba(255, 160, 112, 0.32);
  background: rgba(255, 248, 244, 0.06);
}
.help-inbox-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
  margin: 0 0 6px;
}
.help-inbox-address {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--electric-peach);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 160, 112, 0.4);
  padding-bottom: 1px;
  margin-bottom: 10px;
  transition: color 180ms ease, border-color 180ms ease;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.help-inbox-address:hover {
  color: var(--light-peach);
  border-bottom-color: var(--electric-peach);
}
.help-inbox-body {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-cream);
  margin: 0;
  text-wrap: pretty;
}

/* FAQ stack — open by default, no accordion. Five items, kept short. */
.help-faq-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.help-faq-item { scroll-margin-top: 96px; }
.help-faq-q {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--warm-cream);
  margin: 0 0 8px;
  text-wrap: pretty;
}
.help-faq-a {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-cream);
  margin: 0;
  text-wrap: pretty;
}

/* "Include..." checklist. Peach checkmark, muted body. */
.help-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-checklist-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted-cream);
  text-wrap: pretty;
}
.help-checklist-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 160, 112, 0.18);
  color: var(--electric-peach);
  margin-top: 1px;
}
.help-checklist-mark svg { width: 12px; height: 12px; }

.help-faq-backlink {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 0.5px solid rgba(255, 248, 244, 0.10);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-cream);
  text-align: center;
  text-wrap: pretty;
}

.help-link {
  color: var(--electric-peach);
  border-bottom: 1px solid rgba(255, 160, 112, 0.4);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.help-link:hover {
  color: var(--light-peach);
  border-bottom-color: var(--electric-peach);
}

@media (max-width: 720px) {
  .help-page-main { padding: 32px 0 64px; }
  .help-article { padding: 0 22px; }
  .help-h1 { font-size: 40px; }
  .help-h2 { font-size: 26px; }
  .help-lead { font-size: 17px; }
  .help-section { padding-top: 40px; margin-top: 40px; }
  .help-primary-cta { padding: 12px 22px 12px 18px; gap: 12px; }
  .help-primary-cta-address { font-size: 19px; }
  .help-faq-q { font-size: 16px; }
  .help-faq-a, .help-checklist-item { font-size: 15.5px; }
  .help-inbox-card { padding: 18px 16px 16px; }
  .help-inbox-address { font-size: 16px; }
  .help-inbox-body { font-size: 14px; }
}

/* ── Long-form legal pages (Privacy Policy, Terms of Service) ────────────
   Structured article + sticky desktop TOC sidebar. Re-uses
   .placeholder-page-main as the outer dark surface, then overrides the
   narrow-centered .placeholder-page geometry with a two-column layout. */
.legal-page-main {
  padding: 56px 0 96px;
  display: block;
}
.legal-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1100px) {
  .legal-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 64px;
  }
}
.legal-article {
  max-width: 760px;
  min-width: 0;
}
.legal-header { margin-bottom: 40px; }
.legal-h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--warm-cream);
  margin: 0 0 20px;
  text-align: left;
}
.legal-dates {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
  margin: 0 0 28px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
}
.legal-dates dt {
  font-weight: 600;
  color: var(--muted-cream);
  margin: 0;
}
.legal-dates dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted-cream);
  text-transform: none;
}
.legal-intro {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--warm-cream);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal-intro--bold {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--warm-cream);
  margin: 18px 0 0;
}
.legal-intro--bold strong { font-weight: 600; }

.legal-section {
  padding-top: 44px;
  margin-top: 8px;
  scroll-margin-top: 96px;
}
.legal-section:first-of-type { padding-top: 24px; }
.legal-h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--warm-cream);
  margin: 0 0 18px;
  font-weight: 400;
}
.legal-h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--warm-cream);
  margin: 28px 0 12px;
  scroll-margin-top: 96px;
}
.legal-p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-cream);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal-p:last-child { margin-bottom: 0; }
.legal-p strong, .legal-list-item strong, .legal-table strong {
  color: var(--warm-cream);
  font-weight: 600;
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-list-item {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-cream);
  text-wrap: pretty;
}
.legal-list-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric-peach);
  opacity: 0.7;
}

.legal-link {
  color: var(--electric-peach);
  border-bottom: 1px solid rgba(255, 160, 112, 0.4);
  padding-bottom: 1px;
  transition: border-color 180ms ease, color 180ms ease;
}
.legal-link:hover {
  color: var(--light-peach);
  border-bottom-color: var(--electric-peach);
}
.legal-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(255, 248, 244, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--warm-cream);
}

/* Tables — service providers, CCPA notice at collection */
.legal-table-wrap {
  margin: 0 0 18px;
  border: 0.5px solid rgba(255, 248, 244, 0.12);
  border-radius: 12px;
  overflow: hidden;
  /* horizontal scroll only when content overflows */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
  min-width: 480px;
}
.legal-table thead th {
  background: rgba(255, 248, 244, 0.05);
  color: var(--warm-cream);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 248, 244, 0.14);
  vertical-align: bottom;
}
.legal-table tbody td {
  padding: 14px 16px;
  color: var(--muted-cream);
  vertical-align: top;
  border-bottom: 0.5px solid rgba(255, 248, 244, 0.08);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table tbody tr:nth-child(even) td {
  background: rgba(255, 248, 244, 0.025);
}

/* ALL-CAPS legal blocks (Disclaimers §13, Liability §14) — boxed and
   slightly muted so the shouting reads as legal convention, not noise. */
.legal-legalese {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: rgba(255, 248, 244, 0.78);
  background: rgba(255, 248, 244, 0.04);
  border-left: 2px solid rgba(255, 160, 112, 0.5);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal-legalese + .legal-legalese { margin-top: -4px; }

/* Warning header (Arbitration §17 "PLEASE READ...") — coral inline call. */
.legal-warning {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--electric-peach);
  margin: 0 0 18px;
  padding: 12px 16px;
  background: rgba(255, 160, 112, 0.10);
  border: 1px solid rgba(255, 160, 112, 0.30);
  border-radius: 8px;
}

/* Sticky desktop TOC */
.legal-toc {
  display: none;
}
@media (min-width: 1100px) {
  .legal-toc {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 12px;
    /* subtle scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 248, 244, 0.16) transparent;
  }
  .legal-toc::-webkit-scrollbar { width: 4px; }
  .legal-toc::-webkit-scrollbar-thumb {
    background: rgba(255, 248, 244, 0.16);
    border-radius: 4px;
  }
}
.legal-toc-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-cream-dim);
  margin-bottom: 14px;
  padding-left: 12px;
}
.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(255, 248, 244, 0.10);
}
.legal-toc-link {
  display: block;
  padding: 6px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted-cream);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 180ms ease, border-color 180ms ease;
  text-wrap: pretty;
}
.legal-toc-link:hover {
  color: var(--warm-cream);
}
.legal-toc-link--active {
  color: var(--electric-peach);
  border-left-color: var(--electric-peach);
  font-weight: 500;
}

/* Mobile typography tuning */
@media (max-width: 720px) {
  .legal-page-main { padding: 32px 0 64px; }
  .legal-layout { padding: 0 22px; }
  .legal-h1 { font-size: 36px; }
  .legal-h2 { font-size: 24px; }
  .legal-section { padding-top: 36px; }
  .legal-p, .legal-list-item { font-size: 15.5px; }
  .legal-intro { font-size: 16.5px; }
  .legal-intro--bold { font-size: 15.5px; }
  .legal-table { font-size: 13.5px; }
  .legal-legalese { font-size: 12.5px; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ish-card-grid {
    transition: none !important;
    animation: none !important;
  }
}

/* ── B2: Cookie banner ──────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  background: var(--near-black);
  color: var(--warm-cream);
  border: 1px solid rgba(255, 248, 244, 0.16);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  animation: cookie-in 0.4s ease-out both;
  max-width: 880px;
  margin: 0 auto;
}
@keyframes cookie-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.cookie-copy {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 248, 244, 0.85);
}
.cookie-heading {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--electric-peach);
  font-size: 16px;
  margin-right: 4px;
}
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms ease;
  border: 1px solid transparent;
}
.cookie-btn-primary {
  background: var(--electric-peach);
  color: var(--near-black);
}
.cookie-btn-primary:hover { background: var(--light-peach); }
.cookie-btn-secondary {
  background: transparent;
  color: var(--warm-cream);
  border-color: rgba(255, 248, 244, 0.3);
}
.cookie-btn-secondary:hover { border-color: var(--warm-cream); }

/* Manage modal rows */
.cookie-manage { max-width: 480px; }
.cookie-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 248, 244, 0.1);
}
.cookie-row:last-of-type { border-bottom: none; }
.cookie-row-text { flex: 1; }
.cookie-row-label {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--warm-cream);
}
.cookie-row-hint {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 248, 244, 0.6);
  line-height: 1.4;
}
.cookie-toggle {
  background: none; border: none; padding: 4px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.cookie-toggle.disabled { cursor: not-allowed; opacity: 0.5; }
.cookie-toggle-track {
  display: inline-block;
  width: 44px; height: 24px;
  background: rgba(255, 248, 244, 0.15);
  border-radius: 999px;
  position: relative;
  transition: background 180ms ease;
}
.cookie-toggle-track.on { background: var(--electric-peach); }
.cookie-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--warm-cream);
  border-radius: 50%;
  transition: transform 180ms ease;
}
.cookie-toggle-track.on .cookie-toggle-knob { transform: translateX(20px); }
.cookie-save { width: 100%; margin-top: 16px; }

@media (max-width: 480px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; }
}

/* ── C2: Placeholder markers (toggled via body.show-placeholders) ───────── */
body.show-placeholders .ph-mark {
  outline: 2px dashed var(--electric-peach);
  outline-offset: -2px;
  position: relative;
}
body.show-placeholders .ph-mark::before {
  content: attr(data-ph);
  position: absolute;
  top: 4px; left: 4px;
  z-index: 5;
  background: var(--electric-peach);
  color: var(--near-black);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  pointer-events: none;
}