:root{
  --soft-grey:#F8F8F4; --warm-grey:#F1F1E7; --stone:#4B4947; --dark:#1C1C1C;
  /* The hero clips play back through the GPU's limited-range video path,
     which lifts their black to ~rgb(16,16,16) — while the pages/art sit on
     true near-zero blacks, so scrolling out of the hero visibly DROPPED the
     floor. Everything after the hero now shares this lifted floor (lighten
     overlay on the page stack + FAQ canvas bg). Tune the match by eye here;
     the FAQ canvas needs the same value in its data-anm-bg attribute. */
  --hero-black:#101010;
  --soft-orange:#FBAA85; --orange:#FE7233; --soft-purple:#C9CDF7; --soft-green:#95CCA2;
  --ink:var(--soft-grey);
  --rail:1440px;          /* shared by the layout and the mascot placement */
  --neon:#fd8bad;         /* sampled from the visor ring on frame 64 */
  /* Fluid type: every text role tracks the viewport from the same scale
     (html stays 16px so rem clamps do not compound). Approx at 375 → 1440:
     ui 13→15, body 16→18, lede 18→21, title 28→42, display 38→80. */
  --fs-ui:clamp(0.8125rem, 0.22vw + 0.73rem, 1rem);
  --fs-body:clamp(1rem, 0.28vw + 0.9rem, 1.25rem);
  --fs-lede:clamp(1.125rem, 0.4vw + 0.95rem, 1.5rem);
  --fs-title:clamp(1.75rem, 1.6vw + 1.15rem, 2.75rem);
  --fs-display:clamp(2.4rem, 5.4vw, 5.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
/* deliberately no overflow-x:hidden on the root: it is a known way to break
   position:fixed in some engines, and the hero is entirely pinned */
html,body{min-height:100%;background:var(--dark);color:var(--ink);
  font-family:'Clash Grotesk',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
/* Scroll snap is permanently OFF. Every use of it here broke something real:
   a snap point on the card screen swallowed the last third of the hero push,
   and one on the FAQ sat above the page's end on short viewports and bounced
   the bottom back up. Arrivals are geometric instead — the runway's height
   equals the card screen's offset, so the strip lands flush unassisted. */
html{scroll-snap-type:none}
/* The hero is pinned, so this spacer is the only thing that scrolls and its
   height is what sets the sequence length. Height comes from JS (see TRAVEL) so
   the spacer and the progress maths cannot drift apart. */
.runway{height:0;pointer-events:none}
/* The canvas draws the mascot on BLACK and the browser does the lighten against
   the page background, so --dark is painted in exactly one place. Doing the
   lighten inside the shader meant the canvas painted its own copy of the
   background, and the two only matched while their colour pipelines agreed —
   which is how the left and right halves ended up different blacks. */
#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;
  mix-blend-mode:lighten}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(28,28,28,.86) 0%,rgba(28,28,28,.6) 38%,rgba(28,28,28,.06) 68%,rgba(28,28,28,0) 100%)}
/* nav, copy and stats all ride the same centred rails — without this the copy
   stays pinned to the left edge while the figure drifts right on wide screens */
.shell{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;
  width:100%;max-width:var(--rail);margin:0 auto}

nav{display:flex;align-items:center;justify-content:space-between;padding:20px 24px}
/* full lockup (mark + outlined wordmark), 909x229 — height-driven, width auto */
.brand{display:flex;align-items:center}
.brand svg{height:clamp(28px,2.2vw,34px);width:auto;color:var(--soft-grey)}
.navlinks{display:none;gap:34px}
.navlinks a{color:rgba(248,248,244,.75);font-size:var(--fs-ui);letter-spacing:.02em;text-decoration:none;transition:color .2s}
.navlinks a:hover{color:#fff}
/* MCP: the one highlighted nav item — bold label plus the orange square
   used after "Incentiv Arena." and Arena's section titles */
.navlinks a.nav-mcp{color:var(--soft-grey);font-weight:600}
.navlinks a.nav-mcp:hover{color:var(--orange)}
.navlinks a.nav-mcp::after{content:"";display:inline-block;width:.36em;height:.36em;
  margin-left:.3em;background:var(--orange);vertical-align:.05em}
.navctas{display:none;align-items:center;gap:12px}
/* tablet: the bar holds logo, five links and two CTAs, so tighten the spacing */
@media(min-width:768px) and (max-width:1100px){.navlinks{gap:clamp(14px,2vw,24px)}.navctas{gap:10px}.navctas .btn{padding-inline:1.4em}}
.burger{display:flex;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.burger i{display:block;height:2px;background:var(--ink)}
.burger i:nth-child(1),.burger i:nth-child(2){width:24px}.burger i:nth-child(3){width:16px}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 24px 28px;width:100%;min-height:0}
/* the copy tracks the container: 50% of the rail, floored so it never gets
   narrower than it was, capped so the measure stays readable.
   Grid column 1 shrink-wraps to the stacked title; .sub shares that width
   so the paragraph's right edge matches "Incentivize." / "Settle." */
.copy{width:100%;max-width:clamp(34rem,50vw,44rem);
  display:grid;grid-template-columns:min-content minmax(0,1fr)}
.copy>h1,.copy>.sub{grid-column:1}
.copy>h1{white-space:nowrap}
.copy>.ctarow{grid-column:1/-1}
/* brand: Heading 1 is Clash Grotesk Bold at 90% leading, sentence case */
h1{line-height:.9;letter-spacing:-.025em;font-weight:700;font-size:clamp(2.6rem,8vw,7rem)}
h1 span{display:block}
h1 .accent{color:var(--orange)}
.sub{margin-top:26px;color:rgba(248,248,244,.7);font-size:var(--fs-lede);font-weight:400;line-height:1.4}
.sub b{color:#fff;font-weight:500}
.ctarow{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.btn{display:inline-flex;align-items:center;gap:.77em;background:var(--orange);color:var(--dark);
  padding:1.08em 2em;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;
  font-size:var(--fs-ui);font-weight:600;letter-spacing:.01em;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--soft-orange)}
.btn svg{width:1.15em;height:1.15em;transition:transform .25s}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-invert{background:transparent;color:var(--orange);border:1.5px solid var(--orange);
  padding:calc(1.08em - 1.5px) calc(2em - 1.5px)}
.btn-invert:hover{background:transparent;color:var(--soft-orange);border-color:var(--soft-orange)}
.btn-quiet{display:inline-flex;align-items:center;gap:.7em;color:rgba(248,248,244,.75);
  padding:1.08em 0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--fs-ui);font-weight:400;text-decoration:none;
  border-bottom:1px solid rgba(248,248,244,.28);transition:color .2s,border-color .2s}
.btn-quiet:hover{color:#fff;border-color:rgba(248,248,244,.7)}
.ctarow .btn-quiet,.navctas .btn-quiet{color:var(--orange);border-bottom-color:rgba(254,114,51,.4)}
.ctarow .btn-quiet:hover,.navctas .btn-quiet:hover{color:var(--soft-orange);border-color:var(--soft-orange)}
.btn-quiet svg{width:1.08em;height:1.08em;transition:transform .25s}
.btn-quiet:hover svg{transform:translate(2px,-2px)}
/* the only affordance that the hero goes anywhere; fades out as soon as the
   scroll is under way, so it never competes with the turn itself */
/* centred with flex, not translateX — the .fu entrance animates transform, and a
   translateY keyframe would wipe out a centring translateX */
.scrollcue{position:fixed;left:0;right:0;bottom:26px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
  color:rgba(248,248,244,.5);font-size:var(--fs-ui);font-weight:400;letter-spacing:.01em;
  transition:opacity .25s linear}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(
  to bottom,rgba(248,248,244,.45),rgba(248,248,244,0));overflow:hidden;position:relative}
.scrollcue i::after{content:'';position:absolute;left:0;top:-34px;width:1px;height:34px;
  background:linear-gradient(to bottom,rgba(254,114,51,0),var(--orange));
  animation:cue 2.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(68px)}}
@media(prefers-reduced-motion:reduce){.scrollcue{display:none}}

/* the page on the other side of the glass — a placeholder second section on
   the brand's light wash, faded in by the last stretch of the push. Sits above
   the shell/scrim but below the HUD, so tuning stays reachable. */
/* Full bleed: the light runs edge to edge so no screen space is lost to a
   margin, and the neon sits ON the viewport edge. Nothing is visible beyond it
   because there is no beyond — which means the bloom has to go INWARD. Square,
   not rounded: at inset 0 a radius would cut corners out of the light and show
   the layer underneath, which is exactly the black-past-the-neon we are killing.
   Ring colour sampled off frame 64 (#fd8bad); the white-hot core #feeff9 is
   dropped because a near-white line cannot read on a light field. */
/* Once through the glass this stays for the rest of the site: the light screen
   and its neon edge are the surface every following section sits on, so the
   whole page reads as being INSIDE the visor. Fixed, so the frame stays welded
   to the viewport while the real content scrolls over it. */
/* Was var(--soft-grey) — the "light screen" concept died when the FAQ went
   dark (2026-08-12): the cream backdrop's only remaining sighting was the
   overscroll rubber-band below the footer flashing white. Site black now. */
.next{position:fixed;inset:0;z-index:5;background:var(--hero-black);opacity:0;pointer-events:none}
/* The bezel rides ABOVE the scrolling content (the light screen sits below it),
   so the neon stays welded to the viewport edge and frames whatever is passing
   through — including the dark strip — instead of being covered by it. */
.bezel{position:fixed;inset:0;z-index:7;opacity:0;pointer-events:none;
  /* Full intensity at the edge, but a MUCH shorter reach. The wide layer was
     150px blur + 34px spread (~184px of travel), which washed pink across the
     whole page rather than reading as an edge glow. Cutting reach to ~70px
     keeps the neon bright where the light actually is and leaves the page
     clean; dropping alpha instead only made it dimmer AND still tinted. */
  border:2px solid var(--neon);
  box-shadow:
    inset 0 0 10px 1px rgba(253,139,173,.92),
    inset 0 0 26px 4px rgba(253,139,173,.46),
    inset 0 0 60px 10px rgba(253,139,173,.16)}

/* ---- the scrolling site, from step 2 on -------------------------------- */
/* Normal flow, above the fixed light screen and below the bezel. The runway is
   exactly TRAVEL viewports tall, so this block's top lands at the top of the
   viewport at the very frame the push completes: the cards ARE the arrival,
   not something you scroll to find. Hidden until then, or it would show
   through the lower half of the screen during the hero. */
/* .pages is a <main>, so it was silently inheriting the HERO's main rule
   (flex centring, 64px side gutters, 34px bottom padding) — which is why the
   strip could never reach the viewport edge no matter what its own width said.
   Reset it: this main is a plain scrolling block, not the hero's flex column. */
.pages{position:relative;z-index:6;color:var(--dark);opacity:0;
  display:block;flex:none;padding:0;min-height:0}
.section{max-width:var(--rail);margin:0 auto;padding:clamp(80px,12vh,150px) 24px}
@media(min-width:768px){.section{padding-left:44px;padding-right:44px}}
@media(min-width:1024px){.section{padding-left:64px;padding-right:64px}}

/* .s-title / .blocks / .reach lived on the intro section that used to precede
   the cards; removed with it so the dead rules do not outlive the markup. */

/* ---- Expanding strip (step 2 cards) ------------------------------------
   A viewport-filling row of tall panels, edge to edge. Hovering one grows it
   while every neighbour compresses on a gaussian falloff, so the row reads as
   one organism. Title + label rise from a mask once a panel passes an
   expansion threshold; collapsed panels show a vertical sliver word.
   Retheme of the supplied component: Clash Grotesk, brand palette, and the
   image layer is a COLOUR PLACEHOLDER until the art arrives. */
/* ---- Idea pages (replaced the card strip; archive in
   hero-glitch-cards-version.html) ----------------------------------------
   One full-viewport page per idea. Wide art with the subject on one side
   and text on the other. Page 1 is the arrival — pinned through push +
   dwell. */
.idea{position:relative;height:100vh;height:100dvh;overflow:hidden;
  display:flex;align-items:center;background:#050505}
/* THE "APPEAR" STACK: pages don't scroll past — they hold the frame while the
   scroll position crossfades them (out through near-black, next page appears
   with a 3.5% settle-scale). .ideastack's height is n × 100vh (set from JS
   off the page count; 600vh here is the six-page fallback so layout is
   correct before the script runs). The sticky hold owns the viewport while
   the stack has height left. Driven per-frame from scroll in the stack
   script — a pure function of scroll like the bezel and the FAQ cover. */
.ideastack{position:relative;height:600vh}
.ideastack_hold{position:sticky;top:0;height:100vh;height:100dvh;
  overflow:hidden;background:#050505}
/* black-floor match with the hero (see --hero-black): lighten = per-channel
   max, so it raises only pixels darker than the floor — art shadows, the
   page bg, the video's true black — and passes text/orange through intact */
.ideastack_hold::after{content:'';position:absolute;inset:0;z-index:10;
  background:var(--hero-black);mix-blend-mode:lighten;pointer-events:none}

/* ---- ROADMAP overlay ---------------------------------------------------- */
/* PrecisionSection skeleton (chip -> falling line -> items, pillars rising
   left to right), reskinned: lifted-black ground, dark chips, orange
   pinwheel + numerals, one-hue orange gradient line. NOT part of the scroll
   journey (user, 2026-08-12): it opens full-screen from the nav's "Roadmap"
   link and closes on Esc / the X — reference material, not a narrative beat. */
/* SPLIT COMPOSITION (user, 2026-08-13): the text never fights the vista.
   Top ~54vh: solid black band with the title and the whole staircase.
   Bottom ~46vh: the vista as a panorama strip (duo + clouds featured).
   The gradient lines fall out of the band INTO the scene, and a gradient
   horizon softens the seam. */
.roadmap{position:fixed;inset:0;z-index:60;background:var(--hero-black);
  overflow:hidden;display:none}
.roadmap.open{display:flex;flex-direction:column}
/* posY 73%: the duo's feet sit at 77.9% of the source — this window ends at
   ~86%, giving them ground to stand on (58% cut them at the ankles) */
.rd_vista{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:46vh;
  object-fit:cover;object-position:center 73%;z-index:0;pointer-events:none}
/* soft horizon where the band meets the vista — no hard cut line */
.rd_scrim{position:fixed;left:0;right:0;bottom:36vh;top:auto;height:10vh;z-index:0;
  pointer-events:none;
  background:linear-gradient(var(--hero-black),rgba(16,16,16,0))}
.rd_reveal{position:relative;z-index:1;height:54vh;display:flex;flex-direction:column;
  padding:clamp(28px,4.5vh,56px) clamp(20px,4vw,60px) 0}
.rd_stair .rd_items{text-shadow:0 1px 8px rgba(0,0,0,.85)}
/* the ember clouds churn under zones 1 and 4, so a static scrim can never
   guarantee the item text — each row gets its own glass plate instead
   (measured: worst cloud pixel 205 -> ~57 behind a .6 plate, text at 158) */
.roadmap .rd_items div{background:rgba(10,8,6,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:.3vw .55vw;border-radius:9px}
.roadmap .rd_items{color:rgba(255,255,255,.72)}
@media(max-width:767px){.roadmap .rd_items div{padding:5px 10px}}
.rd_close{position:fixed;top:22px;right:26px;z-index:61;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  border-radius:999px;background:var(--dark);color:rgba(255,250,242,.85);
  font-size:18px;line-height:1;transition:color .2s,background .2s}
.rd_close:hover{color:var(--orange);background:#2a2a28}
.rd_close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.rd_reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(0,0,.58,1),transform .8s cubic-bezier(0,0,.58,1)}
.rd_reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rd_reveal{opacity:1;transform:none;transition:none}}
.rd_head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;margin-bottom:0}
.rd_title{color:rgba(255,250,242,.94);font-weight:700;letter-spacing:-.025em;
  line-height:1.08;font-size:var(--fs-title);margin:0}
.rd_title .accent{color:var(--orange)}
.rd_sub{margin:0;font-size:var(--fs-lede);font-weight:500;
  color:rgba(255,255,255,.66)}
.rd_sub .accent{color:var(--orange)}

.rd_chip{display:flex;align-items:center;gap:10px;background:var(--dark);
  border-radius:18px;padding:clamp(10px,.95vw,16px) clamp(14px,1.4vw,24px);
  font-size:var(--fs-body);font-weight:500;white-space:nowrap;
  color:rgba(255,250,242,.94)}
.rd_chip svg{height:1em;width:auto;flex-shrink:0;color:var(--orange)}
.rd_num{color:var(--orange);font-size:.85em;font-weight:500}
.rd_line{width:1px;background:linear-gradient(rgba(254,114,51,.9),
  rgba(251,170,133,.55) 55%,rgba(254,114,51,0))}
.rd_items{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  font-size:var(--fs-ui);color:rgba(255,255,255,.62)}

/* desktop staircase: absolute pillars, geometry inline per pillar. The stair
   hugs the bottom of the black band (margin-top:auto), and its lines run out
   of the container into the vista strip below. */
.rd_stair{position:relative;width:90vw;height:min(24vw,38vh);
  margin:auto auto 0;max-width:1800px}
.rd_pillar{position:absolute;display:flex;flex-direction:column;align-items:center}
.rd_stair .rd_drop{position:relative;display:flex;flex-direction:column;align-items:center}
.rd_stair .rd_line{height:12vw}
.rd_stair .rd_items{position:absolute;top:.6vw;left:.8vw;gap:.55vw;white-space:nowrap}

/* mobile: alternating single column */
.rd_flow{display:none}
@media(max-width:767px){
  .roadmap{overflow:auto}
  .roadmap.open{display:block}
  .rd_reveal{height:auto;min-height:60vh;padding-bottom:36vh}
  .rd_vista{height:32vh}
  .rd_scrim{bottom:22vh;height:10vh}
  .rd_stair{display:none}
  .rd_flow{display:flex;flex-direction:column;width:100%}
  .rd_step{display:flex;flex-direction:column;align-items:flex-start;width:100%;
    padding-bottom:8px}
  .rd_step--right{align-items:flex-end}
  .rd_step .rd_chip{display:inline-flex;font-size:var(--fs-body);padding:10px 18px;gap:7px}
  .rd_steprow{display:flex;align-items:stretch;width:100%}
  .rd_step--right .rd_steprow{flex-direction:row-reverse}
  .rd_steprow .rd_line{flex-shrink:0;min-height:120px;margin-left:22px}
  .rd_step--right .rd_steprow .rd_line{margin-left:0;margin-right:22px}
  .rd_steprow .rd_items{padding:8px 0 8px 20px;gap:10px;font-size:var(--fs-ui)}
  .rd_step--right .rd_steprow .rd_items{padding:8px 20px 8px 0;align-items:flex-end;text-align:right}
}
.ideastack .idea{position:absolute;inset:0;height:100%;
  will-change:opacity,transform}
.idea_bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;user-select:none;
  -webkit-user-drag:none;pointer-events:none}
.idea_art{position:absolute;inset:0;z-index:0}
#idea-network .idea_bg{object-position:100% center;transform:scale(.82);transform-origin:100% 52%}
#idea-economy .idea_bg{object-position:0% center}
#idea-commerce .idea_bg{object-position:30% center}
#idea-compound .idea_bg{object-position:15% center}
#idea-expand .idea_bg{object-position:0% center}
/* TV treatment OFF for comparison (was: scanline raster + phosphor vignette
   at z3, over the text). To bring it back, restore on .idea::after —
   content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
   background:
     radial-gradient(125% 125% at 50% 50%,
       rgba(0,0,0,0) 55%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.35) 100%),
     repeating-linear-gradient(to bottom,
       rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
       rgba(255,255,255,.035) 1px, rgba(255,255,255,.035) 2px); */
.idea::after{content:none}
/* Pulled toward the subject: at 7vw inset there was ~290px of dead black
   between the text and the bot at 1920. 13vw closes it to ~180px — but no
   further, because cover-fit crops the image's SIDES as the window narrows,
   which slides the subject inward: at 1440 the bot's body edge is at ~784px
   and the text must stay clear of it. Measured, not eyeballed. */
/* hidden until its first decoded frame is actually painting ('playing'
   event), so a slow fetch can never flash black over the still */
.idea_vid{opacity:0;transition:opacity .4s linear}
.idea_vid.live{opacity:1}
.idea_text{position:relative;z-index:2;max-width:560px;
  margin-left:clamp(28px,13vw,270px);
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(0,0,.58,1),transform .8s cubic-bezier(0,0,.58,1)}
.idea_text.in{opacity:1;transform:none}
.idea--right .idea_text{margin-left:auto;margin-right:clamp(28px,13vw,270px);text-align:left}
.idea_eyebrow{font-size:var(--fs-ui);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.52);margin:0 0 14px}
.idea_title{color:rgba(255,250,242,.94);font-weight:700;letter-spacing:-.025em;
  line-height:1.08;font-size:var(--fs-title);margin:0 0 16px}
.idea_title .accent{color:var(--orange)}
/* Title + subtitle pair (page 1): both single-line, sized so their rendered
   widths MATCH. vw-linked at 2.65 : 1.347 (ratio 1.967, same as the measured
   2.45 : 1.245 pair, scaled ~8% with the new type tokens). Caps 51 / 25.9
   keep the match at the clamp boundary. */
.idea_title--one{font-size:clamp(31px,2.65vw,51px);white-space:nowrap;margin:0 0 12px}
.idea_sub{color:rgba(255,250,242,.88);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(16px,1.347vw,25.9px);line-height:1.4;white-space:nowrap;
  margin:0 0 18px}
.idea_sub .accent{color:var(--orange)}
/* page 2's sub is a full sentence, not a title-matched one-liner. Wrap to the
   same measure as the body so it stays in the left black, off the bot. */
#idea-control .idea_sub{white-space:normal;max-width:46ch}
/* network / economy: wrapping lede sentences over the free black,
   clear of the bot. */
#idea-network .idea_title,#idea-economy .idea_title{white-space:normal}
#idea-network .idea_sub,#idea-economy .idea_sub{white-space:normal;max-width:46ch}
.idea_body{color:rgba(255,255,255,.78);font-size:var(--fs-body);
  line-height:1.6;margin:0;max-width:46ch}
.idea--right .idea_body{margin-left:0}
/* idea pages share body token; the pair pages used to run a hair larger */
#idea-network .idea_body,#idea-economy .idea_body,#idea-control .idea_body,#idea-commerce .idea_body,#idea-compound .idea_body,#idea-expand .idea_body{font-size:var(--fs-body)}
/* page 3's swarm reaches further left (x .41) than the single bots (.53), so
   its paragraph takes a narrower measure to stay off the kneeling row */
#idea-compound .idea_body{max-width:33ch}
/* page 4: the rover's right wheel reaches x .473, so the paragraph stays
   narrower than the title to keep clear of it */
#idea-expand .idea_body{max-width:32ch}
@media(prefers-reduced-motion:reduce){
  .idea_text{opacity:1;transform:none;transition:none}}
/* stacked idea pages: art + copy as one centred column. 1023 matches the
   hero so ~816 tablets are included. Copy still uses the .in translateY
   rise from below — overflow stays visible so that motion is not clipped.
   Art height tracks the ~16:9 stills so cover cannot crop the subjects;
   contain is the fallback when the vh cap wins (short landscape). */
@media(max-width:1023px){
  .idea_title--one,.idea_sub{white-space:normal}
  .idea{--idea-art:min(56.25vw,46vh);
    display:flex;flex-direction:column;justify-content:center;align-items:stretch}
  .idea_art{position:relative;inset:auto;width:100%;height:var(--idea-art);
    flex-shrink:0;overflow:hidden}
  .idea_art::after{content:'';position:absolute;left:0;right:0;bottom:0;
    height:16%;z-index:1;pointer-events:none;
    background:linear-gradient(transparent,var(--hero-black))}
  .idea_bg{inset:0;width:100%;height:100%}
  #idea-network .idea_bg,#idea-economy .idea_bg,#idea-control .idea_bg,
  #idea-commerce .idea_bg,#idea-compound .idea_bg,#idea-expand .idea_bg{
    object-fit:contain;object-position:center;transform:none}
  .idea_text,.idea--right .idea_text{
    position:relative;margin:0;width:100%;max-width:100%;text-align:left;
    padding:14px 22px 0;overflow:visible;flex-shrink:0}
  #idea-compound .idea_body,#idea-expand .idea_body{max-width:46ch}
}
@media(max-width:767px){
  /* Image + copy as one stacked column, vertically centred. The art box
     is taller than 16:9 so cover can zoom the subject instead of showing
     the full still (bot + empty black) at postage-stamp size. Pin cover
     to the subject's side so the empty black is what gets cropped. */
  .idea{--idea-art:min(80vw,50vh);
    display:flex;flex-direction:column;justify-content:center;align-items:stretch}
  .idea_art{position:relative;inset:auto;width:100%;height:var(--idea-art);
    flex-shrink:0;margin:0}
  .idea_text,.idea--right .idea_text{
    position:relative;left:auto;right:auto;top:auto;padding:14px 22px 0}
  #idea-network .idea_bg,#idea-economy .idea_bg,#idea-control .idea_bg,
  #idea-commerce .idea_bg,#idea-compound .idea_bg,#idea-expand .idea_bg{
    object-fit:cover;transform:none}
  #idea-network .idea_bg{object-position:100% center}
  #idea-economy .idea_bg{object-position:0% center}
  /* hand + bot sit on the right edge; center-crop cut the hand */
  #idea-control .idea_bg{object-position:100% center}
  /* bot in the left third (x .178-.498) */
  #idea-commerce .idea_bg{object-position:0% center}
  /* pyramid on the right (x .485-.866); 15% kept the empty left and
     sliced the kneeling row */
  #idea-compound .idea_bg{object-position:100% center}
  #idea-expand .idea_bg{object-position:0% center}
}
@media(max-width:767px) and (max-height:700px){
  .idea{--idea-art:min(70vw,40vh)}
}

/* retired with the strip (kept for the archived version): */
.cardstage{height:100vh;height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(18px,3vh,32px);
  padding:clamp(26px,4vh,52px) clamp(20px,3.5vw,56px)}

/* PLACEHOLDER copy — swap when the real line lands. Dark ink on the light
   screen, hero accent grammar (the orange full stop). */
.cs_head{text-align:center;color:var(--dark)}
.cs_eyebrow{font-size:var(--fs-ui);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);margin:0 0 10px}
.cs_title{font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;
  font-size:var(--fs-title)}
.cs_title .accent{color:var(--orange)}

.exs_wrap{
  --exs-fg:rgba(255,250,242,.94);
  --exs-fg-soft:rgba(255,255,255,.82);
  --exs-margin:clamp(18px,1.8vw,30px);
  position:relative;display:flex;align-items:stretch;
  /* a component on the page, not the page: capped both ways so the light
     screen breathes around it and the heading reads as part of one slide */
  width:100%;max-width:min(1180px,90vw);flex:1 1 auto;min-height:0;
  max-height:min(62vh,660px);
  border-radius:clamp(10px,1.1vw,18px);
  overflow:hidden;background:#141210;
  -webkit-font-smoothing:antialiased;outline:none;touch-action:pan-y}
.exs_wrap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

.exs_panel{position:relative;flex:1 1 0;min-width:0;height:100%;
  overflow:hidden;cursor:pointer}
.exs_panel:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;z-index:5}

/* Scale + pan are GSAP-owned; no static transform here or the channels fight.
   PLACEHOLDER: a dark field with one accent light from upper left, matching
   the art direction the real renders are being made to. Swap this div for an
   <img class="exs_img"> and nothing else changes. */
.exs_img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;transform-origin:center;
  will-change:transform;user-select:none;-webkit-user-drag:none;pointer-events:none;
  background:
    radial-gradient(120% 88% at 26% 16%, rgb(var(--c) / .55), transparent 62%),
    radial-gradient(88% 68% at 78% 90%, rgb(var(--c) / .16), transparent 72%),
    #141210}
/* Real art: --c is gone with the placeholder, which makes the gradient above
   invalid at computed-value time and takes the #141210 fallback down with it.
   Restate the ground so there is dark under the picture while it loads. */
img.exs_img{background:#141210}

/* Focus-pull on non-active panels. The element's own opacity must STAY 1:
   fading an element carrying a backdrop-filter composites the blurred result
   over the SHARP original at that alpha, so the blur reads as nothing. JS
   tweens the blur radius var and the tint alpha instead. */
.exs_shade{position:absolute;inset:0;z-index:1;background:rgba(10,10,10,0);
  -webkit-backdrop-filter:blur(var(--exs-blur-live,0px));
  backdrop-filter:blur(var(--exs-blur-live,0px));pointer-events:none}

.exs_scrim{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.62) 0%,rgba(10,10,10,.05) 45%,rgba(10,10,10,.2) 100%)}

/* ---- CRT raster --------------------------------------------------------- */
/* Taken from the supplied image-glitch shader's REST state, which is where its
   TV look actually lives — everything else in that component is driven by
   uIntensity, i.e. the glitch. The raster is these two lines:
     float scan = 0.5 + 0.5 * sin(uv.y * uResolution.y * 3.14159);
     col *= 1.0 - uScanlines * 0.22 * scan;
   sin(y·π) gives a 2px period, and at the shipped uScanlines of 0.45 the
   trough takes 0.45 × 0.22 = 9.9% of the light. That is the whole effect and
   it never animates, so it needs no WebGL, no texture and no render loop —
   which also means it works NOW, on the colour placeholders. A shader would
   render black until the real art lands, because it has nothing to sample.
   z-index 1 puts it over the picture and over the dim/blur, but under the
   type — matching the demo, where .ig_label sits outside the canvas. */
/* .099 was the shader's own trough — mathematically faithful and invisible
   here: this art is 40-60% near-black, and a multiplicative raster darkens
   a 9/255 pixel to 8/255. Real CRTs read as lined on dark screens because
   the lit rows EMIT, so the raster gained a faint glow phase (--exs-glow)
   and a deeper trough. Compared at .099/.16/.22 over the real art. */
.exs_wrap{--exs-scan:.16;--exs-glow:.035;--exs-vig:0}
.exs_panel::after{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:
    /* phosphor vignette, from the same rest state: col *= mix(1, vig, 0.35).
       pow(vg,0.28) is near-flat across the middle and falls away only in the
       last fifth, so the stops sit late. OFF by default — you asked for the
       lines; set --exs-vig:.35 for the shader's full rest look. */
    radial-gradient(125% 125% at 50% 50%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,calc(var(--exs-vig) * .4)) 82%,
      rgba(0,0,0,var(--exs-vig)) 100%),
    /* the raster: 2px period — a 1px trough, then a 1px emission line, so
       the lines survive on near-black art where darkening alone vanishes */
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--exs-scan)) 0px,
      rgba(0,0,0,var(--exs-scan)) 1px,
      rgba(255,255,255,var(--exs-glow)) 1px,
      rgba(255,255,255,var(--exs-glow)) 2px)}

.exs_text{position:absolute;left:var(--exs-margin);right:var(--exs-margin);
  bottom:var(--exs-margin);z-index:2;display:flex;flex-direction:column;gap:8px;
  pointer-events:none}
.exs_title{position:relative;display:block;margin:0;overflow-y:hidden;overflow-x:visible;
  padding-bottom:.18em;margin-bottom:-.18em;
  font-size:var(--fs-title);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--exs-fg);white-space:nowrap}
.exs_title_inner{display:block;transform:translateY(110%)}
.exs_label{position:relative;display:block;overflow-y:hidden;overflow-x:visible;
  padding-bottom:.2em;margin-bottom:-.2em;
  font-size:var(--fs-ui);font-weight:500;letter-spacing:.01em;color:var(--exs-fg-soft);
  white-space:nowrap}
.exs_label_inner{display:block;transform:translateY(110%)}

/* Body copy, same masked-reveal grammar as the title but allowed to WRAP, so
   no white-space:nowrap here. The mask is the <p>; the inner block slides up
   through it, however many lines it runs to. */
.exs_body{position:relative;display:block;overflow-y:hidden;overflow-x:visible;
  padding-bottom:.3em;margin:10px 0 -.3em;
  /* 14px at 60% white was legible in isolation but not over a photograph;
     both size and contrast were the problem, so both moved. */
  font-size:var(--fs-body);font-weight:400;line-height:1.55;
  color:rgba(255,255,255,.80);max-width:40ch}
.exs_body_inner{display:block;transform:translateY(110%)}

/* Collapsed panel's word, reading bottom-up. The outer element is the MASK
   (static rotation, never tweened); the inner span slides through it. */
.exs_vlabel{position:absolute;left:var(--exs-margin);bottom:var(--exs-margin);z-index:2;
  transform:rotate(180deg);writing-mode:vertical-rl;overflow:hidden;pointer-events:none}
/* The sliver word is the ONLY label a closed card shows, and at a flat 18px it
   read as a caption on a 1080px-tall panel — "Settle" occupied 4.4% of the
   card. Scales with the viewport now; the floor keeps it legible on a laptop,
   the ceiling stops it dominating the art on a large screen. */
.exs_vlabel_inner{display:block;font-size:var(--fs-title);font-weight:500;
  letter-spacing:.005em;color:var(--exs-fg-soft);white-space:nowrap}

/* ---- Morphing accordion (step 3, FAQ) ----------------------------------
   Two stacked shapes share an SVG goo filter so the panel pours out of the
   pill. Text is never inside the filtered layer (the threshold matrix
   destroys type), so each filtered shape has a crisp twin that owns the
   visible edge. Retheme of the supplied component: brand ink, Clash Grotesk,
   transparent page so the fixed light screen shows through. */
.macc_wrap{
  --ga-ink:var(--dark);
  --ga-fg:rgba(255,250,242,.94);
  --ga-fg-soft:rgba(255,255,255,.80);
  --ga-fg-dim:rgba(255,255,255,.55);
  --ga-margin:clamp(20px,4vw,40px);
  /* NOT align-items:center. Centring meant every height change slid the whole
     component by half the delta — opening row 3 moved question 1 by 79.5px.
     The stage's top is placed by faq.js instead (see placeStage) and never
     moves; rows grow downward into the space below it.
     Content-height, NOT a forced viewport: 100vh wrapped a 419px component in
     ~660px of dead screen. placeStage degrades cleanly here — with no spare
     height its centring maths lands on marginTop 0 and the padding rules. */
  /* NO snap-align. The snap point sat ~100px above the page's end on real
     screens (browser chrome shortens the viewport), so resting at the bottom
     made proximity snap yank the page back up — the "small bump". The FAQ is
     the final screen; there is nothing below it to align to. */
  position:relative;display:flex;align-items:flex-start;justify-content:center;
  width:100%;
  /* generous but not a forced viewport — and sized so that sitting on the FAQ
     puts the WHOLE footer inside the same screen: FAQ wrap + footer stage must
     stay within ~100vh (at 1080p: 689 + 387 = 1076). The bottom padding leans
     smaller than the top because the footer band brings its own dark air. */
  padding:clamp(110px,14vh,170px) var(--ga-margin) clamp(90px,11vh,140px);
  background:transparent;
  -webkit-font-smoothing:antialiased}
/* Cards -> FAQ: the scroll-driven FADE (the keeper — the static gradient
   bands were the ugly part, and they are gone for good; the bottom seam into
   the footer stays a clean cut). The cover is the strip's own dark laid over
   the whole FAQ, opacity a pure function of scrollY: hold dark deep into the
   arrival, then clear in a short throw — an aggressive pop, not a long
   dissolve. Scrolling back re-darkens it exactly. z2 keeps it ABOVE the
   questions; a fade the pills float on top of isn't a fade. */
.macc_fade{position:absolute;inset:0;z-index:2;background:#141210;
  opacity:1;pointer-events:none;will-change:opacity}

/* Reactive Lines live behind the accordion. z-index 1 on the stage keeps every
   pill, panel and click above the canvas; the canvas itself never takes
   pointer events. */
.macc_lines{position:absolute;inset:0;z-index:0;pointer-events:none}
.macc_lines canvas{width:100%;height:100%;display:block}
.macc_stage{position:relative;z-index:1;width:100%;max-width:620px}
/* light ink on the dark screen — same register as the idea-page titles */
.macc_title{color:rgba(255,250,242,.94);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:var(--fs-title);margin-bottom:clamp(24px,3vh,38px)}
/* hero accent grammar carried over: the headline's orange full stop, the index
   numerals as the accent ink, and the open state answering in orange */
.macc_title .accent{color:var(--orange)}
.macc_filter_svg{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.macc_list{display:flex;flex-direction:column;gap:8px}
.macc_row{position:relative}

/* filtered layer: solid ink shapes only, never text */
.macc_goo{position:absolute;inset:0;z-index:0;pointer-events:none}
.macc_goo_trigger,.macc_goo_panel{position:absolute;top:0;left:0;width:100%;
  background-color:var(--ga-ink);will-change:transform}
.macc_goo_panel{border-radius:16px}

/* crisp twins, OUTSIDE the filter: while the blur is live the threshold
   reshapes every filtered edge, so these own the visible outline and the
   filtered originals only supply goo mass */
.macc_trigger_crisp{position:absolute;top:0;left:0;right:0;z-index:3;
  background-color:var(--ga-ink);pointer-events:none;
  transition:background-color .3s cubic-bezier(.7,0,.16,1)}
.macc_trigger:hover + .macc_trigger_crisp{background-color:#2a2a28}
.macc_panel_crisp{position:absolute;top:0;left:0;z-index:1;
  background-color:var(--ga-ink);border-radius:16px;pointer-events:none;
  will-change:transform}

.macc_trigger{position:relative;z-index:4;display:flex;align-items:center;gap:16px;
  width:100%;min-height:62px;padding:18px 24px;background:transparent;border:none;
  cursor:pointer;text-align:left;color:var(--ga-fg);font-family:inherit}
.macc_trigger:focus{outline:none}
.macc_trigger:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:999px}
.macc_index{flex-shrink:0;min-width:24px;font-size:var(--fs-ui);font-weight:500;
  color:var(--orange);transition:color .3s}
.macc_trigger:hover .macc_index{color:var(--soft-orange)}
.macc_question{flex:1;font-size:var(--fs-body);font-weight:500;letter-spacing:-.015em;
  line-height:1.35;color:var(--ga-fg)}
.macc_icon{width:17px;height:17px;flex-shrink:0;color:var(--ga-fg-soft);
  transform-origin:50% 50%;will-change:transform;transition:color .3s}
/* the plus rotates to an x when open — it turns orange as it does, the same
   "active = orange" rule as the hero CTA */
.macc_trigger[aria-expanded="true"] .macc_icon{color:var(--orange)}

.macc_panel{position:relative;z-index:2;height:0;overflow:hidden;will-change:height}
/* margin-top must match PANEL_GAP in faq.js: it is the rest gap the goo
   bridges during the pour */
.macc_panel_inner{margin-top:10px;padding:18px 24px 22px}
.macc_answer{margin:0;font-size:var(--fs-body);font-weight:400;line-height:1.6;
  letter-spacing:-.005em;color:var(--ga-fg-soft)}
.macc_answer_line{overflow-x:visible;overflow-y:clip;
  padding-bottom:.18em;margin-bottom:-.18em}

@media(max-width:767px){
  .macc_trigger{padding:16px 18px;gap:12px;min-height:56px}
  .macc_panel_inner{padding:14px 18px 18px}
}
@media(max-width:479px){ .macc_index{display:none} }

/* ---- STEP 4 — footer ---------------------------------------------------- */
/* The liquid-glass recipe below is used EXACTLY as supplied. It is built for a
   dark backdrop: the fill is a 1% white wash and the entire edge treatment is
   white, so over the light screen both the border and the copy would vanish.
   The band therefore brings its own dark ground — which also closes the site
   on the same ink it opened with. */
/* flow-root, or the footer's mt-32/md:mt-64 collapses straight out through the
   band and becomes a gap of LIGHT screen above it — leaving the glass panel
   welded to the top edge of the dark with no ground around it. */
.footerstage{position:relative;background:var(--dark);display:flow-root;
  padding:0 clamp(20px,3.5vw,56px) clamp(14px,2vh,24px);
  content-visibility:auto;contain-intrinsic-size:auto 420px}
.footerstage .ft_inner{max-width:80rem;margin:0 auto}      /* max-w-7xl */

/* Glass panel RETIRED (user, 2026-08-12): the white gradient edge read as a
   frame and made the footer a bombastic object. The footer now sits flat on
   the dark ground — content, a hairline divider, done. The class stays in the
   markup so the old recipe can be restored from git/archives if wanted. */
.liquid-glass{position:relative}

/* motion.footer: {opacity:0,y:40} -> {opacity:1,y:0}, duration 1, delay .4,
   ease "easeOut". Framer's named easeOut IS cubic-bezier(0,0,.58,1), so this is
   the same curve rather than an approximation. React would fire it on MOUNT;
   here the footer is three screens below the fold at load, so it would be over
   long before anyone saw it — it runs on first sight instead. */
/* NOT the spec's mt-32/md:mt-64. Those 128/256px existed to clear the CTA the
   spec put above the footer; with nothing there it was 256px of dead black
   against 43px below the panel — a 6:1 band. This is breathing room, not a gap. */
.site-footer{width:100%;padding:16px 0 0;
  color:rgba(255,255,255,.7);margin-top:clamp(12px,2vh,20px);
  opacity:0;transform:translateY(40px);
  transition:opacity 1s cubic-bezier(0,0,.58,1) .4s,
             transform 1s cubic-bezier(0,0,.58,1) .4s}
.site-footer.in{opacity:1;transform:none}
@media(min-width:768px){.site-footer{padding:20px 0 0;margin-top:clamp(14px,2vh,24px)}}
@media(prefers-reduced-motion:reduce){
  .site-footer{opacity:1;transform:none;transition:none}}

.ft_top{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:26px}
@media(min-width:768px){
  .ft_top{grid-template-columns:repeat(12,minmax(0,1fr));gap:36px}
  .ft_brand{grid-column:span 5/span 5}
  .ft_linkgrid{grid-column:span 7/span 7}}

.ft_mark{display:flex;align-items:center;gap:10px;color:#fff}
/* the pinwheel in brand orange — the footer's one solid accent, mirroring the
   hero where orange belongs to the brand moments (Settle., the CTA) */
.ft_mark svg{height:24px;width:auto;flex-shrink:0;color:var(--orange)}
.ft_name{font-size:var(--fs-lede);font-weight:500;letter-spacing:-.01em;line-height:1}
.ft_desc{font-size:var(--fs-ui);line-height:1.55;max-width:24rem;margin:10px 0 0}

.ft_linkgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media(max-width:600px){.ft_linkgrid{grid-template-columns:repeat(2,1fr)}}
/* items with no destination yet: click pops the coming-soon chip */
.ft_soon{cursor:pointer;position:relative}
.ft_soon::after{content:'COMING SOON';position:absolute;left:50%;bottom:calc(100% + 7px);
  transform:translateX(-50%) translateY(4px);background:#1C1C1C;color:var(--orange);
  font-size:calc(var(--fs-ui) * 0.75);font-weight:500;letter-spacing:.09em;padding:6px 10px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.ft_soon:focus{outline:none}
.ft_soon:hover::after,.ft_soon:focus::after,.ft_soon.show::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ft_col h3{font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.05em;
  color:#fff;font-weight:500;margin:0 0 10px}
.ft_col ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;font-size:calc(var(--fs-ui) * 0.92)}
.ft_col a{color:inherit;text-decoration:none;transition:color .2s}
.ft_col a:hover{color:var(--soft-orange)}
.ft_col a:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}

.ft_bottom{padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;gap:14px;padding-bottom:2px}
@media(min-width:768px){.ft_bottom{flex-direction:row;gap:16px}}
.ft_meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px}
@media(min-width:768px){.ft_meta{justify-content:flex-start}}
.ft_legal{display:flex;align-items:center;gap:16px}
.ft_legal a{font-size:calc(var(--fs-ui) * 0.75);text-transform:uppercase;letter-spacing:.1em;
  color:inherit;text-decoration:none;opacity:.5;transition:opacity .2s,color .2s}
.ft_legal a:hover{opacity:1;color:var(--orange)}
.ft_legal a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.ft_fine{font-size:calc(var(--fs-ui) * 0.75);text-transform:uppercase;letter-spacing:.1em;
  opacity:.5;margin:0}
.ft_socialwrap{display:flex;align-items:center;gap:16px}
.ft_social{display:flex;align-items:center;gap:16px}
.ft_social a{color:inherit;opacity:.7;display:inline-flex;
  transition:opacity .2s,color .2s}
.ft_social a:hover{opacity:1;color:var(--orange)}
.ft_social a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.ft_social svg{width:16px;height:16px;overflow:visible}
@media(max-width:479px){.ft_linkgrid{gap:20px}.ft_col ul{font-size:calc(var(--fs-ui) * 0.85)}}

@media(max-width:767px){
  .exs_wrap{flex-direction:column;--exs-margin:18px}
  /* rows are wide and short here, so a vertical word has no axis to run on */
  .exs_vlabel{display:none}
  .exs_panel{min-height:0}
  .exs_title{font-size:var(--fs-title)}
  /* rows are short here; the paragraph has to stay inside one */
  .exs_body{font-size:var(--fs-body);line-height:1.5;max-width:46ch}
  .exs_label{font-size:var(--fs-ui)}
}
.next p{font-size:var(--fs-ui);color:var(--stone);margin-bottom:16px}
.next h2{font-weight:700;letter-spacing:-.025em;line-height:.95;font-size:var(--fs-display)}
.next h2 em{font-style:normal;color:var(--orange)}

@keyframes fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fu{opacity:0;animation:fade-up .8s ease-out forwards}
.fu1{animation-delay:.2s}.fu2{animation-delay:.4s}.fu3{animation-delay:.6s}.fu4{animation-delay:.8s}
@media(prefers-reduced-motion:reduce){.fu{animation:none;opacity:1}}

@media(min-width:768px){nav{padding:26px 44px}main{padding:0 44px 34px}.navlinks,.navctas{display:flex}.burger{display:none}}
@media(min-width:1024px){nav{padding:28px 64px}main{padding:0 64px 34px}}

/* stacked hero: copy under the nav, dog in the lower half. 1023 covers phones
   and the ~816 tablet width where a 34rem copy column sat on the figure. */
@media(max-width:1023px){
  /* center the copy in the band above the dog, not flush under the nav */
  .shell main{justify-content:center;padding-top:clamp(8px,2vh,20px);padding-bottom:36vh}
  .copy{max-width:100%;container-type:inline-size}
  /* fill the longest stacked line ("Incentivize." is 5.30em in Clash Grotesk Bold);
     cqw tracks the padded column so the word cannot run off the screen.
     vh cap keeps the stack off the dog on short phones */
  h1{font-size:clamp(2.4rem,min(18.7cqw,9.5vh),5.25rem)}
  .sub{margin-top:16px}
  .ctarow{margin-top:22px}
  .scrim{background:linear-gradient(to bottom,
    rgba(28,28,28,.95) 0%,rgba(28,28,28,.9) 40%,rgba(28,28,28,.55) 62%,
    rgba(28,28,28,.82) 84%,rgba(28,28,28,.95) 100%)}
}

/* portrait: the figure sits low and small, so the scrim has to run top-to-bottom
   rather than left-to-right, and the stats need a tighter track */
@media(max-width:767px){
  /* larger .sub type cannot sit in the title's min-content column without
     stacking into a skinny rag; use the full copy width instead */
  .copy{grid-template-columns:minmax(0,1fr)}
  /* the bloom is in absolute px, so at 375 wide it swallowed far more of the
     screen than it does at 1280 — scaled back to stay proportional */
  .bezel{box-shadow:
    inset 0 0 8px 1px rgba(253,139,173,.92),
    inset 0 0 20px 3px rgba(253,139,173,.44),
    inset 0 0 44px 8px rgba(253,139,173,.14)}

  /* beats .rdwrap nav { z-index:10 } on vision/roadmap so the overlay covers page content.
     .shell is z-index:2 and .scrollcue is z-index:3, so without lifting the shell the
     overlay (a shell descendant) paints under the scroll cue. */
  body.nav-open .shell{z-index:40}
  body.nav-open .scrollcue{opacity:0!important}
  body nav.nav-open{z-index:40}
  .brand,.burger{position:relative;z-index:30}
  .burger i{transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s,width .4s;transform-origin:center}
  nav.nav-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  nav.nav-open .burger i:nth-child(2){opacity:0}
  nav.nav-open .burger i:nth-child(3){width:24px;transform:translateY(-8px) rotate(-45deg)}
  .navlinks,.navctas{animation:none}
  .navlinks{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:fixed;inset:0;z-index:25;overflow:auto;
    padding:88px 28px 120px;background:var(--hero-black);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s cubic-bezier(.22,.61,.36,1),visibility 0s linear .4s}
  .navctas{
    display:flex;flex-direction:column;align-items:stretch;gap:12px;
    position:fixed;left:28px;right:28px;bottom:32px;z-index:26;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px);
    transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s linear .4s}
  .navctas .btn,
  .navctas .btn-quiet{justify-content:center;width:100%}
  .navlinks > a,
  .navlinks > .navdrop{
    opacity:0;transform:translateY(12px);
    transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1),color .2s}
  nav.nav-open .navlinks,
  nav.nav-open .navctas{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s}
  nav.nav-open .navctas{transform:none}
  nav.nav-open .navlinks > a,
  nav.nav-open .navlinks > .navdrop{opacity:1;transform:none}
  nav.nav-open .navlinks > :nth-child(1){transition-delay:.05s}
  nav.nav-open .navlinks > :nth-child(2){transition-delay:.1s}
  nav.nav-open .navlinks > :nth-child(3){transition-delay:.15s}
  nav.nav-open .navlinks > :nth-child(4){transition-delay:.2s}
  nav.nav-open .navlinks > :nth-child(5){transition-delay:.25s}
  nav.nav-open .navlinks > a,
  nav.nav-open .navdrop_t{font-size:18px;padding:14px 0;color:rgba(248,248,244,.9)}
  nav.nav-open .navdrop_t{
    display:inline-flex;align-items:center;gap:8px}
  nav.nav-open .navdrop_t::after{
    content:"";width:14px;height:14px;flex-shrink:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform:rotate(0deg);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
  nav.nav-open .navdrop.open .navdrop_t::after{transform:rotate(180deg)}
  nav.nav-open .navdrop{flex-direction:column;align-items:flex-start;width:100%}
  nav.nav-open .navdrop_p,
  nav.nav-open .navdrop:hover .navdrop_p,
  nav.nav-open .navdrop:focus-within .navdrop_p{
    position:static;left:auto;top:auto;transform:none;min-width:0;
    display:flex;flex-direction:column;gap:0;padding:0 0 0 16px;
    background:transparent;border-radius:0;opacity:1;visibility:visible;
    max-height:0;overflow:hidden;pointer-events:none;
    transition:max-height .35s cubic-bezier(.22,.61,.36,1),padding .35s cubic-bezier(.22,.61,.36,1)}
  nav.nav-open .navdrop_p::before{content:none}
  nav.nav-open .navdrop.open .navdrop_p{
    max-height:280px;padding:4px 0 8px 16px;pointer-events:auto}
  nav.nav-open .navlinks .navdrop_p a{font-size:16px;padding:10px 0;border-radius:0;text-align:left}
  nav.nav-open .navlinks .navdrop_p a:hover{background:transparent}
  @media(prefers-reduced-motion:reduce){
    .navlinks,.navctas,
    .navlinks > a,.navlinks > .navdrop,
    nav.nav-open .navlinks,nav.nav-open .navctas,
    nav.nav-open .navdrop_t::after,
    nav.nav-open .navdrop_p,
    nav.nav-open .navdrop:hover .navdrop_p,
    nav.nav-open .navdrop:focus-within .navdrop_p{transition:none}
  }
}
@media(max-width:767px) and (max-height:700px){
  /* a taller title + stacked CTAs would otherwise center up into the lockup */
  .shell main{justify-content:flex-start;padding-top:8px}
}

/* ---- Ecosystem dropdown + nav coming-soon chip -------------------------- */
nav{position:relative;z-index:20}
.navdrop{position:relative;display:flex}
.navdrop_t{cursor:pointer}
/* 12px visual gap is padding, so :hover holds on the way into the menu. */
.navdrop_p{position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-4px);min-width:200px;
  display:flex;flex-direction:column;gap:2px;padding:20px 8px 8px;
  background:transparent;border-radius:12px;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:30}
.navdrop_p::before{content:'';position:absolute;top:12px;left:0;right:0;bottom:0;
  background:#2C2C2A;border-radius:12px;pointer-events:none}
.navdrop:hover .navdrop_p,.navdrop:focus-within .navdrop_p{opacity:1;
  visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.navdrop_p a{position:relative;padding:9px 14px;border-radius:8px;font-size:var(--fs-ui);
  color:rgba(248,248,244,.75);font-weight:500;text-decoration:none;white-space:nowrap;text-align:center}
.navdrop_p a:hover{background:#3A3A38;color:#fff}
/* the bar sits at the viewport top, so its chip drops BELOW the item */
.navlinks .ft_soon::after{bottom:auto;top:calc(100% + 9px);
  transform:translateX(-50%) translateY(-4px)}
.navlinks .ft_soon:hover::after,.navlinks .ft_soon:focus::after,
.navlinks .ft_soon.show::after{transform:translateX(-50%) translateY(0)}

/* ---- No scrollbar -------------------------------------------------------
   The native scrollbar was the last piece of unstyled OS chrome on the site:
   a light-grey slab down the edge of a #101010 page, the same leak the .next
   rule already went black to stop. No indicator replaces it — the edge is
   meant to be empty; the hero's .scrollcue is the only affordance.
   Vertical only, so a horizontal overflow bug still shows its bar — the root
   deliberately has no overflow-x:hidden and hiding both axes would mask that.
   Side effect worth keeping: #stage is width:100vw, which included the
   scrollbar gutter while the client area did not, so the canvas was ~15px
   wider than the page. With no gutter the two finally agree. */
html{scrollbar-width:none}
html::-webkit-scrollbar:vertical{width:0}

/* narrow tablets (768-959): logo, five links and both CTAs only just fit,
   so trim the side padding */
@media(min-width:768px) and (max-width:959px){
  nav{padding-left:24px;padding-right:24px}
  .navctas .btn-quiet{white-space:nowrap}
}

/* Phone proportions follow the available width, including larger phone views.
   The heading itself stays inline via heading-styles.js. */
@media (max-width:767px) {
  :root {
    --fs-ui:clamp(0.8125rem,3.34vw,1.6rem);
    --fs-lede:clamp(1.125rem,4.615vw,2.25rem);
  }
  nav {padding:5.13vw 6.154vw;}
  .brand svg {height:7.18vw;}
  .burger {gap:1.54vw;padding:1.54vw;}
  .burger i {height:max(2px,.513vw);}
  .burger i:nth-child(1),.burger i:nth-child(2) {width:6.154vw;}
  .burger i:nth-child(3) {width:4.103vw;}
  .shell main {padding-left:6.154vw;padding-right:6.154vw;}
  .sub {margin-top:4.103vw;}
  .ctarow {margin-top:5.64vw;gap:5.13vw;}
}