:root{
  --ink:#ffffff;
  --bg:#0a0a0a;
  --muted:#bdbdbd;
  --soft:#cfcfcf;   /* light gray: content already read (settled lines) */
  --dim:#8f8f8f;    /* mid gray: waiting its turn, or chrome */
  --hot:#ff3b1f;
  --measure:min(100%,960px);
  --pad-y:clamp(20px,3vh,38px);
  --pad-x:clamp(20px,4vw,60px);
  --sans:"Helvetica Neue",Helvetica,"Inter",Arial,"Nimbus Sans","Hiragino Sans","Apple SD Gothic Neo","Noto Sans JP","Noto Sans KR",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; /* indices, status lines, small metadata */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---- Hero backdrop: one image per charge, under a black tint -------
   Scoped to the hero panel — every panel owns its own background. */
/* oversized above the panel so the parallax drift never shows a seam */
.backdrop{position:absolute;top:-35%;right:0;bottom:0;left:0;z-index:0;background:var(--bg);overflow:hidden;will-change:transform}
.backdrop .bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(.35) contrast(1.05);
  opacity:0;
  transition:opacity 1.1s ease;
}
.backdrop .bg.on{opacity:1}
.backdrop::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(6,6,6,.86);
}

/* ---- Panels -------------------------------------------------------
   The page is a vertical stack of full-width panels. The hero panel
   fills the viewport at load; later panels take whatever height their
   content needs (or set a min-height per panel). */
.panels{position:relative;z-index:1}

.panel{
  width:100%;
  padding:var(--pad-y) var(--pad-x);
}

:root{--ctabar-pad:clamp(78px,12vh,104px)} /* room for the fixed bottom bar */

.panel--hero{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* fixed top and bottom bars overlay the panel; keep content clear */
  padding-top:var(--bar-h);
  padding-bottom:var(--ctabar-pad);
}
.panel--hero>*:not(.backdrop){position:relative;z-index:1}

/* ---- Top bar ------------------------------------------------------- */
/* fixed site-wide bar: logo + language menu over every panel */
:root{--bar-h:clamp(54px,9vh,74px)}
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--bar-h);
  padding:0 var(--pad-x);
  /* invisible bar: the logo and language menu float over the page */
  background:transparent;
}
.masthead img{
  height:clamp(26px,4.2vh,42px);
  width:auto;
  display:block;
}

.brand{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px)}

/* small faded language code beside the logo; opens the language menu */
.langmenu{position:relative}
.langbtn{
  display:flex;align-items:center;gap:4px;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:#6f6f6f;
  background:transparent;
  border:0;
  padding:6px 4px;
  cursor:pointer;
  transition:color .15s ease;
}
.langbtn:hover,.langbtn[aria-expanded=true]{color:var(--ink)}
.langbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.langbtn .caret{font-size:8px;line-height:1;transform:translateY(1px)}

.langlist{
  position:absolute;
  top:calc(100% + 8px);left:0;
  margin:0;padding:6px 0;
  list-style:none;
  min-width:150px;
  background:#101010;
  border:1px solid #2a2a2a;
  z-index:20;
}
.langlist button{
  display:block;width:100%;
  text-align:left;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:#bdbdbd;
  background:transparent;
  border:0;
  padding:8px 14px;
  cursor:pointer;
}
.langlist button:hover{color:var(--ink);background:#1b1b1b}
.langlist button[aria-selected=true]{color:var(--ink);box-shadow:inset 3px 0 0 var(--hot)}

/* ---- The charges --------------------------------------------------- */
.charges{
  list-style:none;
  margin:clamp(20px,3.6vh,46px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.2vh,26px) clamp(28px,4vw,64px);
}
.charges li{
  position:relative;
  padding-left:clamp(13px,1.2vw,20px);
  font-size:clamp(15px,1.42vw,21px);
  line-height:1.34;
  font-weight:400;
  letter-spacing:-.011em;
  max-width:42ch;
}
.charges li::before{
  content:"";
  position:absolute;
  left:0;top:.28em;bottom:.18em;
  width:3px;
  background:#3f3f3f;
  transition:background .5s ease;
}
.charges strong{font-weight:700;color:inherit}

/* one charge is lit at a time — rotates on a timer, follows the cursor;
   the waiting ones sit well back so the lit charge owns the block */
.charges li{color:#616161;transition:color .55s ease}
.charges li.on{color:#ffffff}
.charges li.on strong{color:#fff}
.charges li.on::before{background:var(--hot)}
@media (prefers-reduced-motion:reduce){
  .charges li{color:#e6e6e6;transition:none}
  .charges li strong{color:#fff}
  .charges li::before{background:var(--hot)}
}

/* ---- Full-bleed headline -------------------------------------------
   Auto margins split the hero's free height evenly above and below the
   headline; the padding is the guaranteed minimum on short screens. */
.banner{
  margin:auto 0;
  padding:clamp(22px,4vh,52px) 0;
  width:100%;
  max-width:var(--measure);
}
.banner svg{display:block;width:100%;height:auto}
.banner text{
  font-family:var(--sans);
  font-weight:700;
  font-size:108px;
  fill:var(--ink);
}

/* ---- Verdict + CTA ------------------------------------------------- */
.closer{
  width:100%;
  display:grid;
  justify-items:start;
  gap:clamp(16px,2.4vh,26px);
}

/* The verdict is its own hero block. Its auto bottom margin matches the
   banner's auto margins, so the gap below "control you." equals the gap
   between the headline and the verdict; the padding is the fixed minimum,
   identical to the banner's. */
.answer{
  margin:0 0 auto;
  /* smaller fixed minimum than the banner's, so the verdict→email gap
     lands slightly tighter than the gaps around the headline */
  padding-bottom:clamp(12px,2.2vh,30px);
  font-size:clamp(26px,3.1vw,48px);
  line-height:1.24;
  font-weight:500;
  letter-spacing:-.02em;
}
.answer .owners{display:block;color:#f5f5f5}
.answer .ghost{display:block;color:#f5f5f5;font-weight:500}
.answer .notyou{display:block;color:#f5f5f5}
.answer .notyou strong{color:var(--hot)} /* the verdict is the panel's red */
.answer strong{font-weight:700}
.answer .owners strong{color:#fff}

/* ---- Red & underline policy ----------------------------------------
   1. RED UNDERLINE (.em) marks the three recurring actors — billionaires,
      your data, AI — every time they appear in a statement line (the
      ladders, the verdict), in every panel and language. Only those
      three; never a whole sentence. The SVG headline and the small print
      (charges, form notes) stay plain.
   2. RED TEXT is each panel's single payoff, nothing else:
      hero: "control you." and "now." · build panel: "to become
      trillionaires" · uses panel: the rotating "to XXX" line.
   3. GREEN is reserved for the one good use ("cure cancer").
   4. Everything else speaks in white (active statement) and the grays
      (--soft settled, --dim waiting/chrome). */
.em{text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:.07em;text-underline-offset:.12em}
[hidden]{display:none!important}

/* stand-in call to action while the signup/socials bar is hidden */
.rallycry{
  margin:0;
  font-size:clamp(20px,2vw,30px);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--ink); /* red is reserved for the one word doing the work */
}
.rallycry strong{color:var(--hot)}

/* email form + social logos share one row; the icons center on the input */
.ctarow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px clamp(18px,2.4vw,40px);
  width:100%;
}

.socials{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,22px);
}
.socials a{
  display:block;
  color:var(--dim);
  transition:color .15s ease;
}
.socials a:hover{color:var(--ink)}
.socials a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.socials svg{display:block;width:clamp(19px,1.5vw,23px);height:auto}

.signup{
  --ctl:clamp(46px,6.2vh,56px); /* shared height: email field + arrow button */
  display:flex;justify-content:flex-start;flex:0 1 480px;min-width:280px;
}
.signup input[type=email]{
  flex:1 1 200px;
  min-width:0;
  height:var(--ctl);
  font-family:inherit;
  font-size:clamp(15px,1.1vw,17px);
  font-weight:500;
  color:var(--ink);
  background:rgba(10,10,10,.55);
  border:1.5px solid #3a3a3a;
  border-right:0; /* the red button is the field's end cap */
  border-radius:0;
  padding:0 16px;
}
.signup input[type=email]::placeholder{color:var(--dim)}
.signup input[type=email]:focus{outline:none;border-color:var(--ink)}
/* square arrow submit — NYC-subway style */
.signup button{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:var(--ctl);
  height:var(--ctl);
  padding:0;
  color:#0a0a0a;
  background:var(--hot);
  border:1.5px solid var(--hot);
  border-radius:0;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.signup button svg{width:clamp(20px,1.6vw,24px);height:auto;display:block}
.signup button:hover{background:var(--ink);border-color:var(--ink)}
.signup button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* only speaks up on error/success — the box explains itself otherwise */
.formnote{display:none;margin:0;font-size:clamp(11px,.85vw,13px);line-height:1.45;color:var(--muted)}
.formnote[data-state]{display:block}
.formnote[data-state=sent]{color:var(--hot);font-weight:600}
.formnote a{color:inherit;font-weight:700;text-decoration:underline}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Narrow viewports ---------------------------------------------- */
@media (max-width:820px){
  .charges{grid-template-columns:1fr;gap:clamp(13px,2vh,20px)}
  .charges li{font-size:clamp(15px,4vw,19px);max-width:none}
  .closer{gap:clamp(18px,3vh,26px);margin-top:auto;padding-top:clamp(20px,3.5vh,32px)}
  .answer{font-size:clamp(19px,5.2vw,26px);line-height:1.18;margin-bottom:0;padding-bottom:0}
  .signup{flex:1 1 100%;min-width:0}
  /* headline flows right after the bullets — its top gap only a bit larger
     than the gap to the verdict below; the free height sits between the
     verdict and the bottom-pinned call to action */
  .banner{margin:0;padding:clamp(26px,4.6vh,38px) 0 clamp(25px,4.4vh,40px)}
}

@media (prefers-reduced-motion:no-preference){
  .panel--hero>*{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
  .panel--hero>*:nth-child(2){animation-delay:.06s}
  .panel--hero>*:nth-child(3){animation-delay:.12s}
  .panel--hero>*:nth-child(4){animation-delay:.18s}
  .panel--hero>*:nth-child(5){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---- Bottom bar: newsletter + socials, always visible -------------- */
.ctabar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;
  align-items:center;justify-content:space-between;
  gap:12px clamp(18px,3vw,44px);
  padding:11px var(--pad-x) max(11px,env(safe-area-inset-bottom));
  /* a real surface, not a fog: near-black glass with a hairline edge */
  background:rgba(10,10,10,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid #202020;
}
/* order on the bar: the call left, socials center, email right */
.ctabar .rallycry{order:1}
.ctabar .socials{order:2}
.ctabar .action{order:3}
.ctabar .action{display:flex;align-items:center;gap:14px;min-width:0}
.ctabar .signup{--ctl:44px;gap:0}
/* the field and the arrow read as one control on the bar */
.ctabar .signup input[type=email]{
  flex:1 1 190px;
  background:#151515;
  border-color:#2c2c2c;
  border-right:0;
}
.ctabar .signup input[type=email]:focus{border-color:var(--ink)}
.ctabar .formnote{display:none}
.ctabar .formnote[data-state]{display:block;max-width:230px}
/* the call rides the bar, centered between email and socials */
.ctabar .rallycry{font-size:clamp(14px,1.3vw,19px);white-space:nowrap;letter-spacing:-.01em}
.ctabar .socials{gap:clamp(12px,1.3vw,18px)}
.ctabar .socials a{color:#7a7a7a}
.ctabar .socials a:hover{color:var(--ink)}
.ctabar .socials svg{width:clamp(17px,1.3vw,20px)}
@media (max-width:960px){
  .ctabar .signup{min-width:230px} /* squeeze so the call fits on tablets */
}
@media (max-width:700px){
  .ctabar{flex-direction:column;align-items:stretch;gap:10px}
  .ctabar .rallycry{display:block;order:-1;font-size:17px} /* top line of the stack */
  .ctabar .socials{justify-content:flex-start}
  .ctabar .action{width:100%}
  .ctabar .signup{flex:1 1 auto;width:100%}
  .ctabar .formnote[data-state]{position:absolute;right:var(--pad-x);bottom:100%;padding-bottom:6px}
  :root{--ctabar-pad:178px}
}

/* ---- Panel 2: cumulative sentence build ----------------------------
   The section is several viewports tall; .data-stick pins while scroll
   reveals one phrase per stage (see initDataPanel in main.js). Reveals
   are one-way — once the sentence is built it stays built. */
.panel--data{padding:0;height:320vh;position:relative;background:#0d0d0d;--good:#00a651}
.data-stick{
  position:sticky;top:0;
  height:100svh;
  display:flex;flex-direction:column;
  justify-content:flex-start;
  padding:clamp(76px,22svh,220px) var(--pad-x) var(--ctabar-pad);
  overflow:hidden;
}
/* 80% gray halftone screen — slides in as the panel enters (JS-driven) */
/* the halftone is a canvas: dots shimmer between grays and sparse dots
   flash red (initDataDots in main.js); oversized for the parallax drift */
.data-bg{
  position:absolute;inset:-80px -80px;z-index:0;
  width:calc(100% + 160px);height:calc(100% + 160px);
  opacity:0;
  will-change:transform,opacity;
}
.data-stick .ladder{position:relative;z-index:1}

/* the lineup: labeled mugshot placeholders — swap each .ph for a photo */
.billmugs{
  margin-top:auto;
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px);
}
.mug{margin:0;display:flex;flex-direction:column;gap:6px}
.mug .ph{
  width:clamp(56px,6.4vw,92px);
  aspect-ratio:3/4;
  border:1.5px dashed #4b4b4b;
  background:
    linear-gradient(to top right,transparent calc(50% - .75px),#3a3a3a calc(50% - .75px),#3a3a3a calc(50% + .75px),transparent calc(50% + .75px)),
    linear-gradient(to bottom right,transparent calc(50% - .75px),#3a3a3a calc(50% - .75px),#3a3a3a calc(50% + .75px),transparent calc(50% + .75px));
}
.mug img{width:clamp(56px,6.4vw,92px);aspect-ratio:3/4;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08)} /* photos join the b/w poster world */
.mug figcaption{
  font-size:clamp(10px,.8vw,12px);
  font-weight:700;
  letter-spacing:.02em;
  
  color:var(--dim,#8f8f8f);
}
/* on wide screens the lineup stands beside the sentence, top-aligned
   with line 1; narrower screens keep it as a bottom row */
@media (min-width:1200px){
  .billmugs{
    position:absolute;
    right:var(--pad-x);
    top:clamp(76px,22svh,220px);
    margin:0;
    display:grid;grid-template-columns:repeat(2,auto);
    gap:14px;
  }
}

.ladder{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.02em;
  font-size:clamp(30px,4.2vw,64px);
  --step:clamp(22px,3vw,54px); /* uniform indent between lines */
}
/* lines never change size — settled lines just go gray while the newest
   (.now) is white; only color moves */
.line{
  display:block;max-width:100%;
  color:var(--soft);
  line-height:1.14;
  margin-block:clamp(3px,1.1vh,14px);
  opacity:0;
  transform:translateY(.2em);
  transition:color .45s ease,opacity .45s ease,transform .45s ease;
}
.line.on{opacity:1;transform:none}
.line.now{color:var(--ink)}
.ladder .l1{color:var(--ink)} /* line 1 is the spine — it never dims */
.ladder .l4.now{color:var(--hot)}
.panel--data .l4.on{color:var(--hot)} /* the payoff stays red for good */
.ladder .l2{padding-left:var(--step)}
.ladder .l3{padding-left:calc(var(--step)*2)}
.ladder .l4{padding-left:calc(var(--step)*3)}

/* line 2 holds both phrases: "your data without your consent".
   The second half fades in on its own stage */
.ladder .part{transition:color .45s ease,opacity .45s ease}
.ladder .pconsent{opacity:0}
.ladder .l2.consented .pconsent{opacity:1}

.ladder .to{color:inherit}
.ladder .what{display:inline-block;transition:opacity .25s ease,transform .25s ease}
.ladder .what.swap{opacity:0;transform:translateY(.25em)}

/* ---- Panel 3: what the AI is for — timed, not scroll-driven --------
   Its own background in a lighter gray so the panel reads as a new room. */
.panel--uses{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(28px,6vh,64px);
  background:#1b1b1b;
  --good:#00a651;
  /* poster layout: the blister pack on top, big; the sentence under it */
  padding:calc(var(--bar-h) + var(--pad-y)) var(--pad-x) var(--ctabar-pad);
}
/* line 1 lands at exactly the same screen position as the build panel's
   line 1 (its top offset minus this panel's own padding), so the two
   "The billionaires are using" read as one sentence carrying over */
.uses-head{
  order:2;align-self:flex-start;margin:0;
  flex:0 1 auto;min-width:0;
}
.panel--uses .l4{padding-left:var(--step)}
.panel--uses .l4.now{color:var(--hot)}
.panel--uses .l4.good .what{color:var(--good)}

/* the list as a blister pack of capsules: every use is a dose of AI —
   almost all of them poison, one actual medicine. Drawn flat, like a
   pharmacy pictogram: the pack (.usegrid) is a 1px rounded card; each .sq
   is one tear-off cell between dashed perforations: ::before is the
   pocket outline, ::after the two-tone capsule (colored cap, pale body
   carrying the mark). The full-strength capsule is the use on screen;
   hover any cell to read what's in it. */
.usegrid{
  /* above the sentence: the pack is the picture, the sentence is the caption */
  order:1;align-self:flex-start;margin:0;flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(4,max-content); /* blister pack, not a strip */
  gap:0;
  justify-content:start;
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:clamp(10px,1.3vw,18px);
  background:rgba(255,255,255,.025);
  --line:rgba(255,255,255,.24);
  --body:#ebe6da;
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b1b1b' fill-rule='evenodd' d='M12 2a8 7.5 0 0 0-8 7.5c0 2.6 1.3 4.8 3.3 6.1V21h9.4v-5.4c2-1.3 3.3-3.5 3.3-6.1A8 7.5 0 0 0 12 2zM6.6 10a2.2 2.2 0 1 0 4.4 0 2.2 2.2 0 1 0-4.4 0zM13 10a2.2 2.2 0 1 0 4.4 0 2.2 2.2 0 1 0-4.4 0zM12 12.6l1.3 2.4h-2.6zM10 17.6h1V21h-1zM13 17.6h1V21h-1z'/%3E%3C/svg%3E");
}
.usegrid .sq{
  position:relative;
  width:clamp(88px,9.6vw,138px);
  aspect-ratio:1.8;
  cursor:pointer;
  /* perforations: each dose tears off on its own */
  border-right:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
  --cap:var(--hot);
}
.usegrid .sq:nth-child(4n){border-right-color:transparent}
.usegrid .sq:nth-last-child(-n+4){border-bottom-color:transparent}
/* the pocket: a thin outline around the dose */
.usegrid .sq::before{
  content:"";
  position:absolute;inset:14% 8%;
  border-radius:999px;
  border:1px solid var(--line);
  transition:border-color .2s ease;
}
/* the capsule — flat cap | crisp seam | flat body with the mark on it */
.usegrid .sq::after{
  content:"";
  position:absolute;inset:28% 16%;
  border-radius:999px;
  background:
    var(--mark) 80% 50%/auto 68% no-repeat,
    linear-gradient(90deg,var(--cap) calc(50% - 1px),#1b1b1b calc(50% - 1px) calc(50% + 1px),var(--body) calc(50% + 1px));
  opacity:.45;
  transition:transform .2s ease,opacity .2s ease;
}
/* the one clean capsule is the medicine: green cap, a cross for a skull */
.usegrid .sq.good{
  --cap:var(--good);
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300a651' d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E");
}
.usegrid .sq.good::after{background-size:auto 60%,auto;opacity:.7}
/* the dose on screen: full strength, its pocket outlined in its colour */
.usegrid .sq.now::after,.usegrid .sq:hover::after{opacity:1;transform:scale(1.08)}
.usegrid .sq.now::before,.usegrid .sq:hover::before{border-color:var(--cap);outline:1px solid var(--cap)}

@media (max-width:820px){
  .panel--data{height:300vh}
  .ladder{font-size:clamp(23px,6.4vw,34px);--step:clamp(12px,3.4vw,24px)}
  /* tablet/phone: the sentence block centers itself in the free height
     and in the row — lines keep their left-aligned steps inside it */
  .data-stick{align-items:center;padding-top:calc(var(--bar-h) + 10px)}
  .data-stick .ladder{width:max-content;max-width:100%;margin-block:auto}
  /* phone: same stack, pills first, pack fills the width */
  .panel--uses{gap:clamp(24px,5vh,44px)}
  .usegrid{grid-template-columns:repeat(4,1fr);width:100%}
  .usegrid .sq{width:100%}
}
/* ---- Panel 1, version B: question rises, then pins to the top -------
   Beat 1 fills the fold with the charges; the headline (next in flow)
   lands at the bottom edge. Scrolling carries it up until it STICKS
   under the top bar, and the verdict scrolls in below it.
   --h2bh approximates the rendered headline height (SVG is 1000:104). */
.panel--hero2{
  position:relative;overflow:clip;
  padding:0 var(--pad-x);
  --h2bh:calc(min(100vw - 2*var(--pad-x),960px)*0.104);
}
.panel--hero2>*:not(.backdrop){position:relative;z-index:1}
.h2-beat1{
  height:calc(100svh - var(--bar-h) - var(--ctabar-pad) - var(--h2bh));
  padding-top:calc(var(--bar-h) + clamp(20px,3.6vh,46px));
}
.banner2{
  position:sticky;top:var(--bar-h);
  margin:0;padding:0;
  width:100%;max-width:var(--measure);
}
.h2-beat2{
  min-height:calc(100svh - var(--bar-h) - var(--h2bh) - var(--ctabar-pad));
  padding:clamp(26px,6vh,64px) 0 var(--ctabar-pad);
}
/* the verdict fades up as it arrives under the pinned question */
.panel--hero2 .answer2{
  margin:0;padding:0;
  opacity:0;transform:translateY(.25em);
  transition:opacity .55s ease,transform .55s ease;
}
.panel--hero2 .answer2.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .line,.ladder .part,.ladder .what,.usegrid .sq,.usegrid .sq::before,.usegrid .sq::after,.data-bg{transition:none}
}

/* ==== TEMP: bottom bar with the .action (email signup) removed ========
   index.html has temporarily dropped the .action block (form#signup),
   leaving only .socials and .rallycry in .ctabar. The order/spacing
   above was tuned for three children (call, socials, form); this scopes
   a fix to only apply while .action is absent. Restore the .action
   markup from main and delete this whole block instead of editing it. */
@media (min-width:701px){
  /* icons left, rally line right (was: rally left, icons right) */
  .ctabar:not(:has(.action)) .socials{order:1}
  .ctabar:not(:has(.action)) .rallycry{order:2}
}
/* Phones. Icons a little larger, each with a 44px tap area that does not
   move the layout (padding cancelled by an equal negative margin). */
@media (max-width:700px),(orientation:landscape) and (max-height:500px){
  .ctabar:not(:has(.action)) .socials svg{width:22px}
  .ctabar:not(:has(.action)) .socials a{padding:11px;margin:-11px}
}
/* upright: the five icons span the bar edge to edge */
@media (max-width:700px){
  .ctabar:not(:has(.action)) .socials{justify-content:space-between}
}
/* on its side: one row, icons held left at about the upright spacing,
   the call on the right */
@media (orientation:landscape) and (max-height:500px){
  .ctabar:not(:has(.action)){flex-direction:row;align-items:center}
  .ctabar:not(:has(.action)) .socials{order:1;justify-content:flex-start;gap:56px}
  .ctabar:not(:has(.action)) .rallycry{order:2}
}
/* Checked --ctabar-pad against the shorter bar at phone widths: below
   820px .answer sits at a fixed distance from .banner (no auto margins
   there — see the base @media (max-width:820px) block above), so any
   leftover space already collects, unchanged, below .answer rather than
   being controlled by --ctabar-pad. The unmodified site already leaves
   a comparably large gap above its (taller) bar there — e.g. ~226px
   above a 125px-tall bar at 390-wide — so the ~260px gap above this
   71px-tall bar is in keeping with the existing design, not a new
   regression, and --ctabar-pad is left as-is. */