/* ── Perf: skip render/layout/paint for off-screen sections.
     content-visibility: auto tells the browser to defer the rendering
     work for these elements until they scroll near the viewport. On
     a ~530KB page with thousands of off-screen DOM nodes this cuts
     initial paint cost AND keeps off-screen sections out of the
     layout/style-recalc loop. Anchor-link scrolls (e.g. "Watch a
     sample ballot" → #live-proof, jumpnav → #faq) still work —
     Chromium auto-renders the target section before scrolling.
     Gated behind @supports so older browsers just see normal layout. */
  @supports (content-visibility: auto) {
    /* 2026-07-27: placeholder sizes re-measured per section at 1280px
       and 375px (gate open, fully rendered). The old blanket 800px was
       off by up to ~1000px on #faq, which made a first anchor jump land
       short until the sections above it rendered at real height. The
       `auto` keyword keeps the last-rendered size once a section has
       been on screen, so these only steer the first paint and the first
       far-anchor jump. Dead selectors from the 2026-05-27 expansion
       pruned (.price-compare, #founder-video, #overview, #debate-ai,
       .topics-edu-pair, .landing-guides-block, .landing-compare-block,
       #philosophy no longer exist in this document). */
    #live-proof,
    #stream-it,
    #why-this-exists,
    #floor-band,
    #mode-select,
    #engine-select,
    #credential-path,
    #community-band,
    #ranked-band,
    #creator-sweepstakes,
    #reviews,
    #waitlist {
      content-visibility: auto;
      contain-intrinsic-size: auto 800px;
    }
    #live-proof{contain-intrinsic-size:auto 910px}
    #stream-it{contain-intrinsic-size:auto 910px}
    #why-this-exists{contain-intrinsic-size:auto 460px}
    #floor-band{contain-intrinsic-size:auto 740px}
    #mode-select{contain-intrinsic-size:auto 590px}
    /* Measured at 1280px, not estimated. */
    #engine-select{contain-intrinsic-size:auto 860px}
    #credential-path{contain-intrinsic-size:auto 810px}
    #community-band{contain-intrinsic-size:auto 1440px}
    #ranked-band{contain-intrinsic-size:auto 900px}
    #creator-sweepstakes{contain-intrinsic-size:auto 1650px}
    #reviews{contain-intrinsic-size:auto 770px}
    #waitlist{contain-intrinsic-size:auto 260px}
    @media (max-width:760px){
      #live-proof{contain-intrinsic-size:auto 1680px}
      #stream-it{contain-intrinsic-size:auto 1360px}
      #why-this-exists{contain-intrinsic-size:auto 750px}
      #floor-band{contain-intrinsic-size:auto 1410px}
      #mode-select{contain-intrinsic-size:auto 820px}
      #engine-select{contain-intrinsic-size:auto 1330px}
      #credential-path{contain-intrinsic-size:auto 2080px}
      #community-band{contain-intrinsic-size:auto 2630px}
      #ranked-band{contain-intrinsic-size:auto 1050px}
      #creator-sweepstakes{contain-intrinsic-size:auto 2000px}
      #reviews{contain-intrinsic-size:auto 1250px}
      #waitlist{contain-intrinsic-size:auto 450px}
    }
  }

  /* CSS containment on the illustrated hero. The stage is a tight
     visual unit — its animations (map pulses, judge-meter sweeps,
     the speaking waveform) shouldn't trigger layout/style work on
     the rest of the page when they tick. `contain: layout paint`
     isolates that work. Style + size kept un-contained because
     the rotators swap text that needs to participate in the parent's
     intrinsic size. */
  :root[data-hero-ab="illustrated"] .hero-illustrated .hi-stage{
    contain:layout paint;
  }

  /* Pause-when-off-screen for the illustrated stage's CSS animations.
     The hero's map pulses + waveform + judge-meter sweeps + lobby
     float run on @keyframes; even off-screen Chrome
     keeps the compositor ticking them. JS adds .hi-paused to
     .hero-illustrated when an IntersectionObserver below reports
     0% intersection, and the rule freezes every animation on the
     stage subtree. Negligible code; meaningful main-thread relief
     when the user has scrolled past the hero. */
  .hero-illustrated.hi-paused *,
  .hero-illustrated.hi-paused{
    animation-play-state:paused !important;
  }