/* Compy landing — "luminous instrument noir" (R4b glow direction, spec 2026-06-12 §B0b).
   The Instrument DNA stays (charcoal, mono receipts, teal controls) but the dark gains light
   sources: an aurora field (teal flowing into violet/magenta), silk light streaks on long
   loops, glassmorphism cards with 1px luminous borders, a gradient sweep on the hero line,
   film grain. ZERO third-party requests — no webfonts, no analytics, no CDN; every glow is
   CSS. All motion is transform/opacity-only and fully static under prefers-reduced-motion. */

:root {
  --bg: #0a0b10;
  --bg-raised: #101218;
  --bg-card: #12141b;
  --glass: rgba(18, 20, 28, 0.55);
  --ink: #e8edf4;
  --ink-2: #9aa4b2;
  --ink-3: #58626f;
  --ink-foot: #7b8694; /* footer copyright — clears WCAG AA (5.3:1 on --bg); --ink-3 was 3.2:1 */
  --hairline: rgba(255, 255, 255, 0.09);
  --accent: #2ee6c0; /* controls + links ONLY — never copy decoration */
  --accent-ink: #06251e;
  --violet: #8b7bff;   /* aurora palette — light, not UI: backgrounds, borders, glows */
  --magenta: #f062c0;
  --real: #4ade80;
  --placebo: #fbbf24;
  --risky: #ff6b5e;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  --body: "Segoe UI", Seravek, Avenir, "Gill Sans Nova", Verdana, system-ui, sans-serif;
  --measure: 64ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keyboard-focus visibility on every interactive element across the site (a11y: the legal pages,
   content pages, and landing all rely on it). Mirrors the app's "no focus-invisible interactive"
   floor. :focus-visible only shows for keyboard users, never on mouse click. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  /* The aurora wash — present on every page (the debunk pages get this light touch and the
     glass chips; the heavier streak ambience is landing-only markup). */
  background-image:
    radial-gradient(1100px 560px at 75% -12%, rgba(46, 230, 192, 0.10), transparent 62%),
    radial-gradient(900px 620px at 8% 8%, rgba(139, 123, 255, 0.09), transparent 60%),
    radial-gradient(1000px 700px at 88% 38%, rgba(240, 98, 192, 0.05), transparent 65%);
  background-repeat: no-repeat;
}

/* Film grain — an inline SVG turbulence tile (data URI, still zero requests), blended so the
   flats aren't flat. Sits above the washes, under nothing interactive. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── Ambient aurora field (landing-only markup: <div class="aurora" aria-hidden>) ──
   Two silk light streaks drifting diagonally on long alternate loops — transform-only,
   blurred ribbons, whisper-quiet. Fixed, so the page scrolls over the light. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.aurora i {
  position: absolute;
  display: block;
  width: 130vmax;
  height: 16vmax;
  left: -15vmax;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform;
}
.aurora i:first-child {
  top: 16%;
  rotate: -16deg;
  background: linear-gradient(90deg, transparent 4%, rgba(46, 230, 192, 0.07) 32%,
    rgba(139, 123, 255, 0.09) 58%, transparent 94%);
}
.aurora i:last-child {
  top: 62%;
  rotate: 14deg;
  background: linear-gradient(90deg, transparent 6%, rgba(240, 98, 192, 0.05) 36%,
    rgba(46, 230, 192, 0.05) 66%, transparent 95%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurora i:first-child { animation: silk 34s ease-in-out infinite alternate; }
  .aurora i:last-child { animation: silk 46s ease-in-out infinite alternate-reverse; }
  @keyframes silk {
    from { transform: translate3d(-7vw, 3vh, 0); }
    to { transform: translate3d(7vw, -3vh, 0); }
  }
  /* Barely-there parallax on the wash where scroll-driven animation exists (paint-free). */
  @supports (animation-timeline: scroll()) {
    .aurora { animation: aurora-drift linear both; animation-timeline: scroll(); }
    @keyframes aurora-drift { to { transform: translate3d(0, -6vh, 0); } }
  }
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0 18px; border-bottom: 1px solid var(--hairline);
  gap: 10px; flex-wrap: wrap; /* 380px floor: the beta chip wraps under the wordmark cleanly */
}
.wordmark {
  font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}
.wordmark .pulse { color: var(--accent); text-shadow: 0 0 18px rgba(46, 230, 192, 0.55); }
.beta-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 11px;
  background: var(--glass);
}

/* ── Hero: the identity ── */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 56px); align-items: center;
  padding: clamp(52px, 11vw, 96px) 0 clamp(48px, 9vw, 80px);
  position: relative;
}
/* Soft radial bloom behind the hero copy — the first light source the eye meets. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%; top: -18%;
  width: 70%; height: 130%;
  background: radial-gradient(closest-side, rgba(46, 230, 192, 0.10), rgba(139, 123, 255, 0.05) 55%, transparent);
  filter: blur(8px);
  pointer-events: none;
}
.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 18px;
}
h1 {
  font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; margin: 0 0 24px;
}
/* Oversized display line with an animated gradient sweep — a luminous band travels through
   near-white text. Static gradient (no sweep) under reduced motion; plain ink without clip. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 {
    background: linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 32%,
      var(--accent) 44%, var(--violet) 52%, var(--magenta) 58%,
      var(--ink) 70%, var(--ink) 100%);
    background-size: 300% 100%;
    background-position: 82% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero h1 { animation: sweep 9s linear infinite; }
    @keyframes sweep {
      0% { background-position: 120% 0; }
      100% { background-position: -180% 0; }
    }
  }
}
h1 .strike { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--risky); }
.hero-sub { color: var(--ink-2); max-width: var(--measure); margin: 0 0 30px; font-size: 18.5px; }
.hero-sub strong { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 15px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #25c9d6);
  color: var(--accent-ink); border: 0; border-radius: 9px;
  padding: 13px 22px; text-decoration: none; display: inline-block;
  box-shadow: 0 4px 18px rgba(46, 230, 192, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn:hover {
  filter: brightness(1.06); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(46, 230, 192, 0.42), 0 0 56px rgba(139, 123, 255, 0.22);
}
.link-quiet { color: var(--accent); text-decoration: none; font-size: 15.5px; }
.link-quiet:hover { text-decoration: underline; text-shadow: 0 0 16px rgba(46, 230, 192, 0.45); }

/* ── THE LIVING BLACKBOOK — the hero visual is the product's own render (the owner-approved
   landing-blackbook mock, wired in). A self-hosted <video> (poster paints first, never blocks)
   framed in glass over a breathing aurora glow, the verdict ribbon pulsing at the edge, and the
   proof strip floating over the lower edge: judge → measure → receipt → undo. ALL ambient motion
   is transform/opacity-only and opts IN under prefers-reduced-motion:no-preference, so the
   reduced-motion path is fully static (the page script also pauses the video there). ── */
.stage {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 440px;
}
.book-glow {
  position: absolute; width: 78%; height: 78%; border-radius: 50%; filter: blur(60px);
  background: radial-gradient(circle, rgba(46, 230, 192, 0.28), rgba(139, 123, 255, 0.18) 45%, transparent 70%);
}
.book-frame {
  position: relative; width: min(420px, 86%); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--bg-card);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}
.book-frame video, .book-frame img { display: block; width: 100%; height: auto; }

/* Verdict ribbon — the book's judgment, breathing at the frame's edge. Decorative (the verdict
   key section carries the accessible text); desktop pointers get a hover label so the three dots
   decode (Real / Placebo / Risky — refused). */
.verdicts {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 3;
}
.vd { width: 15px; height: 15px; border-radius: 50%; position: relative; }
.vd::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; opacity: 0.5; }
.vd.real { background: var(--real); }
.vd.real::after { box-shadow: 0 0 18px 4px var(--real); }
.vd.placebo { background: var(--placebo); }
.vd.placebo::after { box-shadow: 0 0 18px 4px var(--placebo); }
.vd.risky { background: var(--risky); }
.vd.risky::after { box-shadow: 0 0 18px 4px var(--risky); }
@media (hover: hover) {
  .vd::before {
    content: attr(data-label); position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--ink);
    background: var(--glass); border: 1px solid var(--hairline); border-radius: 6px;
    padding: 3px 9px; opacity: 0; pointer-events: none; transition: opacity 160ms ease;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .vd:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .book-glow { animation: breathe 6s ease-in-out infinite; }
  .vd::after { animation: pulse 3.2s ease-in-out infinite; }
  .vd.real::after { animation-delay: 0s; }
  .vd.placebo::after { animation-delay: -1s; }
  .vd.risky::after { animation-delay: -2s; }
  @keyframes breathe {
    0%, 100% { opacity: 0.7; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.35; }
    50% { transform: scale(1.15); opacity: 0.7; }
  }
}

/* Proof strip — floats over the book's lower edge: judge → measure → receipt → undo. */
.proof {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: min(380px, 92%); z-index: 4;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); border-radius: 13px; padding: 13px 15px;
  font-family: var(--mono); font-size: 12.5px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}
.proof-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); padding: 2px 0; }
.proof-row .k { color: var(--ink); }
.proof-row .ok { color: var(--real); }
.proof-cap {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline);
  color: var(--ink-3); font-family: var(--body); font-size: 11.5px; line-height: 1.4;
}

/* Doctrine ribbon under the hero — the whole loop in four words. */
.ribbon {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 6px 28px 56px; font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.ribbon b { color: var(--accent); font-weight: 600; }
.ribbon span { opacity: 0.4; }

/* ── Three receipts-style value cards — glass mini-receipts with luminous borders ── */
.value-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px;
}
.value-card {
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(160deg, rgba(46, 230, 192, 0.30), rgba(255, 255, 255, 0.06) 45%, rgba(139, 123, 255, 0.16)) border-box;
  border: 1px solid transparent; border-radius: 6px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 22px 24px 20px; position: relative;
}
.value-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 0;
  border-top: 2px dashed var(--hairline);
}
.value-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); display: flex; justify-content: space-between; margin-bottom: 12px;
}
.value-card h3 { font-family: var(--mono); font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
.value-card h3 em { font-style: normal; color: var(--accent); }
.value-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ── Verdict key ── */
.verdict-key {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px;
  background: var(--hairline); border-block: 1px solid var(--hairline);
}
.verdict-cell { background: var(--bg); padding: 26px 22px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 999px; padding: 3px 11px; display: inline-block;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chip-real {
  color: var(--real); border: 1px solid color-mix(in srgb, var(--real) 45%, transparent);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.14);
}
.chip-placebo {
  color: var(--placebo); border: 1px solid color-mix(in srgb, var(--placebo) 45%, transparent);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.12);
}
.chip-risky {
  color: var(--risky); border: 1px solid color-mix(in srgb, var(--risky) 45%, transparent);
  box-shadow: 0 0 18px rgba(255, 107, 94, 0.14);
}
/* Non-tweak entry types (full-library pages) — quiet, never verdict-colored. */
.chip-term, .chip-trick, .chip-guide { color: var(--ink-2); border: 1px solid var(--hairline); }
.verdict-cell p { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }

/* ── Sections ── */
section { padding: clamp(44px, 8vw, 72px) 0; }
h2 {
  font-family: var(--mono); font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.section-sub { color: var(--ink-2); margin: 0 0 36px; max-width: var(--measure); }

/* ── Debunk cards — glass, lit on hover ── */
.debunks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.card {
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04) 50%, rgba(139, 123, 255, 0.10)) border-box;
  border: 1px solid transparent; border-radius: 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.card:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(165deg, rgba(46, 230, 192, 0.45), rgba(255, 255, 255, 0.08) 50%, rgba(240, 98, 192, 0.30)) border-box;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4), 0 0 44px rgba(46, 230, 192, 0.10);
}
.card h3 { font-family: var(--mono); font-size: 17px; line-height: 1.35; margin: 0; color: var(--ink); }
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; flex: 1; }
.card .read { font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* ── Waitlist — the brightest pool of light on the page ── */
.waitlist {
  background:
    radial-gradient(640px 280px at 50% -30%, rgba(46, 230, 192, 0.13), transparent 70%),
    radial-gradient(520px 300px at 85% 110%, rgba(139, 123, 255, 0.12), transparent 70%),
    linear-gradient(var(--glass), var(--glass)) padding-box;
  border: 1px solid transparent; border-radius: 16px;
  background-clip: padding-box, padding-box, padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 90px rgba(46, 230, 192, 0.07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 48px clamp(24px, 5vw, 56px); text-align: center;
}
.waitlist h2 { margin-bottom: 8px; }
.waitlist .section-sub { margin: 0 auto 28px; }
.waitlist-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.waitlist-form input {
  font-family: var(--mono); font-size: 15px; color: var(--ink);
  background: rgba(10, 11, 16, 0.7); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 12px 16px; width: min(340px, 80vw);
}
.waitlist-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.waitlist-note { font-size: 13.5px; color: var(--ink-3); margin: 18px 0 0; }
.waitlist-pending {
  display: none; font-family: var(--mono); font-size: 14px; color: var(--placebo); margin-top: 16px;
}

/* ── Article (debunk page) ── */
.article { max-width: 720px; margin: 0 auto; padding: 64px 0 80px; }
.article .chip { margin-bottom: 18px; }
.article h1 { font-size: clamp(28px, 4.2vw, 42px); }
.aliases { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin: 0 0 36px; }
.article h2 { font-size: 19px; margin-top: 44px; }
.article p { color: var(--ink-2); max-width: var(--measure); }
.article .stance {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; color: var(--ink);
  margin-top: 10px;
}
.crumb { font-family: var(--mono); font-size: 13.5px; }
.crumb a { color: var(--accent); text-decoration: none; }
.cta-box {
  margin-top: 56px; border: 1px dashed var(--hairline); border-radius: 12px;
  padding: 28px; text-align: center;
  background: var(--glass);
}
.cta-box p { margin: 0 auto 18px; }

/* ── Full-library index (site/library/index.html) ── */
.article ul.toc { list-style: none; padding: 0; margin: 0; }
.article ul.toc li { margin: 7px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.article ul.toc a { color: var(--ink); text-decoration: none; }
.article ul.toc a:hover { color: var(--accent); }
.article dl dt { font-family: var(--mono); color: var(--ink); margin-top: 14px; }
.article dl dd { margin: 2px 0 0; color: var(--ink-2); }
.browse-all { margin-top: 28px; }

/* ── Future-download placeholder (honest: text, never a dead button) ── */
.download-note {
  border: 1px dashed var(--hairline); border-radius: 12px; padding: 26px 28px;
  background: var(--glass);
}
.download-note h2 { margin: 0 0 6px; font-size: 20px; }
.download-note p { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--hairline); padding: 36px 0 48px;
  color: var(--ink-3); font-size: 13.5px;
  background: radial-gradient(720px 200px at 50% 120%, rgba(139, 123, 255, 0.07), transparent 70%);
}
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer .promise { font-family: var(--mono); }

/* ── Honesty-creed footer ── */
footer .creed { display: block; }
.creed-line { font-family: var(--mono); font-size: 17px; color: var(--ink); margin: 0 0 12px; }
.creed-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.creed-list li { color: var(--ink-2); font-size: 13.5px; }
.creed-list li::before { content: "— "; color: var(--ink-3); }
.foot-meta { color: var(--ink-foot); display: flex; gap: 18px; flex-wrap: wrap; }
/* Footer legal links (Privacy · Terms) — present on every page so the policy is always reachable. */
.foot-legal a { color: var(--accent); text-decoration: none; }
.foot-legal a:hover { text-decoration: underline; }

/* ── Legal pages (privacy.html / eula.html — rendered from the .md, shown inside .article) ── */
.article blockquote {
  border-left: 3px solid var(--hairline); margin: 18px 0; padding: 2px 0 2px 18px;
  color: var(--ink-2); background: var(--glass); border-radius: 0 8px 8px 0;
}
.article blockquote p { margin: 8px 0; }
.article hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
.article ul:not(.toc) { padding-left: 20px; margin: 12px 0; }
.article ul:not(.toc) li { margin: 6px 0; color: var(--ink-2); }
.article code {
  font-family: var(--mono); font-size: 0.9em; color: var(--ink);
  background: var(--glass); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px;
  word-break: break-word;
}
.article strong { color: var(--ink); }

/* ── Load reveal — one orchestrated stagger, honored off for reduced motion ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 14px; animation: rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .reveal:nth-child(2) { animation-delay: 90ms; }
  .reveal-late { animation-delay: 180ms; }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
}

/* ── Scroll reveals — armed ONLY when the page script adds html.rv (IntersectionObserver
   present AND reduced-motion off); otherwise everything is simply visible. ── */
html.rv .sr, html.rv .sr-kids > * {
  opacity: 0; translate: 0 24px;
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.rv .sr.in, html.rv .sr-kids.in > * { opacity: 1; translate: 0 0; }
html.rv .sr-kids.in > :nth-child(2) { transition-delay: 90ms; }
html.rv .sr-kids.in > :nth-child(3) { transition-delay: 180ms; }
html.rv .sr-kids.in > :nth-child(4) { transition-delay: 250ms; }
html.rv .sr-kids.in > :nth-child(5) { transition-delay: 310ms; }
html.rv .sr-kids.in > :nth-child(n + 6) { transition-delay: 360ms; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .hero::before { width: 110%; }
  .stage { min-height: 380px; order: 2; }
  .verdict-key, .debunks { grid-template-columns: 1fr; }
}