/* DW/Co. — The Build · experience.thedwco.com
   Design system ported from deck-partner-program-x (dark-only) +
   dwco-site tokens. The 3D canvas is the stage; these are the overlays. */
:root {
  --canvas-dark: #0a0a0a; --canvas-dark-2: #141414;
  --ink-inverse: #ffffff; --ink-inverse-mute: #a3a3a3;
  --hairline-dark: rgba(255,255,255,0.08); --hairline-dark-st: rgba(255,255,255,0.16);
  --violet: #6B4FFF; --orange: #FF5A1F;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.66,0,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--canvas-dark); color: var(--ink-inverse);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Persistent chrome (mirrors -x) ---- */
.chrome { position: fixed; z-index: 40; pointer-events: none; }
.brand-bar { top: clamp(22px,3vh,34px); left: clamp(26px,5vw,64px); color: #fff; }
.brand-bar svg { width: 64px; height: auto; display: block; fill: currentColor; }
.counter { top: clamp(24px,3vh,36px); right: clamp(26px,5vw,64px); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.dots { top: 50%; right: clamp(18px,2.4vw,30px); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; pointer-events: auto; }
.dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: transparent; cursor: pointer; transition: background .3s, transform .3s, border-color .3s; }
.dot.is-current { background: #fff; border-color: #fff; transform: scale(1.25); }
.dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.nudge { bottom: clamp(22px,3.4vh,38px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity .5s; }
.nudge .arrow { animation: bob 1.8s ease-in-out infinite; font-size: 14px; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
body.at-end .nudge { opacity: 0; }
/* Full 4-side rainbow frame around the whole experience. */
.rainbow { position: fixed; z-index: 60; pointer-events: none; }
.rainbow.top, .rainbow.bottom { left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,#7555CB 0%,#6261D7 11%,#F1597C 43%,#FFBEDB 65%,#D5E7D1 89%); }
.rainbow.left, .rainbow.right { top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,#7555CB 0%,#6261D7 11%,#F1597C 43%,#FFBEDB 65%,#D5E7D1 89%); }
.rainbow.top { top: 0; } .rainbow.bottom { bottom: 0; }
.rainbow.left { left: 0; } .rainbow.right { right: 0; }

/* ---- Station panels (content overlays) ---- */
.panel { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center;
  pointer-events: none; visibility: hidden; }
.panel.is-active { visibility: visible; pointer-events: auto; }
/* Legibility insurance: a barely-there scrim anchored on the left where copy
   sits, guaranteeing crisp white text over the dim dust field. */
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(95% 100% at 13% 50%, rgba(8,8,10,0.72) 0%, rgba(8,8,10,0.34) 34%, rgba(8,8,10,0) 52%),
    linear-gradient(90deg, rgba(8,8,10,0.86) 0%, rgba(8,8,10,0.66) 18%, rgba(8,8,10,0.32) 34%, rgba(8,8,10,0.06) 48%, rgba(8,8,10,0) 58%);
  opacity: 0; transition: opacity .6s ease; }
.panel.is-active::before { opacity: 1; }
.well { width: 100%; max-width: 1320px; margin: 0; padding: clamp(58px,7vh,90px) clamp(28px,6vw,96px) clamp(58px,7vh,90px) clamp(26px,5vw,64px);
  /* Readability over the particle field: a layered dark text-shadow acts as a soft per-glyph
     scrim — it darkens the particles right behind the copy without hiding them. Inherited by
     all copy; the headline overrides with its own. */
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.82), 0 0 28px rgba(0,0,0,.6); }
.well-col { max-width: 620px; }
#s1 .well-col { max-width: 820px; }   /* cover: room for the intro to run wider */
#s1 .blurb { max-width: 700px; }      /* pull the intro copy onto 2 lines, ~headline width */
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.66); margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hairline-dark-st); max-width: 220px; }
h1.headline, h2.headline { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.035em; text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.65); }   /* soft dark lift so headings stay crisp over the bright particle field */
h1.headline { font-size: clamp(46px,7.4vw,96px); line-height: .98; white-space: nowrap; }
h2.headline { font-size: clamp(36px,4.8vw,62px); line-height: 1.0; }
.headline .gray { color: var(--ink-inverse-mute); font-weight: 600; }   /* fully opaque muted grey — no transparency so particles never bleed through the heading */
.blurb { font-size: clamp(16px,1.55vw,18px); line-height: 1.55; color: rgba(255,255,255,.78);
  max-width: 500px; margin-top: 28px; }
.meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: .06em;
  color: rgba(255,255,255,.5); margin-top: 26px; }
.stat-row { margin-top: 40px; display: grid; grid-template-columns: repeat(5,1fr); gap: 0;
  border-top: 1px solid var(--hairline-dark-st); max-width: 1000px; }
.stat { padding: 22px 30px 0 0; border-right: 1px solid var(--hairline-dark); }
.stat:not(:first-child) { padding-left: 30px; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-num { font-size: clamp(26px,2.6vw,38px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.stat-label { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.66); margin-top: 10px; }

/* ---- Station 03: the six disciplines (left-half, tight 2-col grid) ---- */
.sys-col { max-width: 1040px; }                /* wide enough for a 3-up grid that uses the width (per CD) */
.sys-col .headline { max-width: 1040px; }      /* let the headline flow across the full width — no forced/awkward breaks */
.sys-col .blurb { max-width: 640px; }
.disc-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 30px; row-gap: 24px; }
.disc { min-width: 0; }
.disc .d-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: 7px; }
.disc h4 { font-family: var(--font-sans); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.2; color: #fff; margin-bottom: 5px; }
.disc p { font-size: 12.75px; line-height: 1.42; color: rgba(255,255,255,.6); }

/* ---- Station 04: the six-step process (reuses .disc-grid; num + desc only) ---- */
.proc-grid { margin-top: 28px; row-gap: 20px; }
.proc-grid .disc .d-num { margin-bottom: 6px; }
.proc-grid .disc p { font-size: 12.75px; line-height: 1.45; }
/* "Up and running in weeks" callout with a subtle eyebrow-style pill. */
.callout { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.callout-lead { font-family: var(--font-sans); font-size: clamp(16px,1.7vw,19px); font-weight: 600;
  letter-spacing: -.01em; color: #fff; }
.callout-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); padding: 6px 12px; border: 1px solid var(--hairline-dark-st); border-radius: 999px;
  background: rgba(255,255,255,.04); white-space: nowrap; }

/* ---- Station 05: two engagement lanes (denser → compact, legible) ---- */
.ways-col { max-width: 760px; }                /* slightly wider — two columns of copy */
.lanes { margin-top: 30px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; column-gap: 26px; }
.lane { min-width: 0; padding: 20px 22px; border: 1px solid var(--hairline-dark-st); border-radius: 14px;
  background: rgba(255,255,255,.03); }
.lane-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 12px; }
.lane-h { font-family: var(--font-sans); font-size: clamp(16px,1.5vw,18px); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.22; color: #fff; margin-bottom: 10px; }
.lane-tag { font-size: 12.75px; line-height: 1.5; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.lane-fits { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.52); margin-bottom: 14px; }
.lane-price { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; line-height: 1.45;
  color: rgba(255,255,255,.82); padding-top: 12px; border-top: 1px solid var(--hairline-dark); }
.or { align-self: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5); padding: 0 2px; }

/* ---- Station 06: three practice lanes (3-card grid → compact, legible) ---- */
.practice-col { max-width: 920px; }            /* three columns of copy → a touch wider */
.practice-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr);
  align-items: stretch; column-gap: 22px; }
.practice-card { min-width: 0; padding: 20px 20px 18px; border: 1px solid var(--hairline-dark-st);
  border-radius: 14px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; }
.pc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 12px; }
.pc-h { font-family: var(--font-sans); font-size: clamp(15px,1.4vw,17px); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.22; color: #fff; margin-bottom: 9px; }
.pc-tag { font-size: 12.25px; line-height: 1.48; color: rgba(255,255,255,.68); margin-bottom: 14px; }
.pc-list { list-style: none; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--hairline-dark);
  display: flex; flex-direction: column; gap: 6px; }
.pc-list li { font-size: 11.75px; line-height: 1.36; color: rgba(255,255,255,.6); padding-left: 16px;
  position: relative; }
.pc-list li::before { content: "›"; position: absolute; left: 0; top: -1px; color: rgba(255,255,255,.5);
  font-family: var(--font-mono); }
.pc-list.check li::before { content: "✓"; color: var(--orange); opacity: .8; font-size: 10.5px; top: 1px; }

/* ---- Station 07: pricing (reuses .practice-grid; adds price block + featured card) ---- */
.pricing-col { max-width: 940px; }
.pc-price { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  color: rgba(255,255,255,.7); margin-bottom: 4px; }
.pc-price .pc-amt { font-size: clamp(24px,2.3vw,30px); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.pc-total { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.4;
  color: rgba(255,255,255,.55); margin-bottom: 2px; }
.practice-card.is-featured { background: rgba(255,255,255,.06); border-color: var(--hairline-dark-st);
  box-shadow: 0 0 0 1px rgba(241,89,124,.28), 0 8px 40px rgba(107,79,255,.16); }
.practice-card.is-featured .pc-label { color: rgba(255,190,219,.9); }

/* ---- Station 08: proof · case studies (DENSEST slide — 5 stats + 28-name roster) ---- */
/* The .well scrolls internally if content runs tall on short screens. Type is compact so it
   aims to fit at 1440×900 and 1280×800; the recessive peaks shape stays pure background. */
.proof-col { max-width: 1280px; }              /* roster uses almost the entire slide width (per CD) */
.well .proof-col, .well .incl-col { /* allow the tall proof/included wells to scroll cleanly */ }
.proof-stats { margin-top: 30px; max-width: 1000px; }
.proof-stats .stat { padding-top: 18px; }
.proof-stats .stat-num { font-size: clamp(24px,2.3vw,33px); }
.proof-stats .stat-label { font-size: 11.75px; margin-top: 8px; }
.stat-client { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: rgba(255,190,219,.78); margin-top: 9px; }
.roster { margin-top: 28px; }
.roster-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.roster-label::after { content: ""; flex: 1; height: 1px; background: var(--hairline-dark); max-width: 1120px; }
.client-grid { display: grid; grid-template-columns: repeat(4,1fr); column-gap: 24px; row-gap: 9px;
  max-width: 1240px; }
/* Proof roster uses almost the entire slide width (per CD) — let this well break past the
   1320 cap while the headline/intro/stats stay tight; only the bottom roster goes full-bleed. */
#s8 .well { max-width: 95vw; }
#s8 .proof-col { max-width: 100%; }
#s8 .proof-col .headline { max-width: 900px; }
#s8 .proof-col .blurb { max-width: 580px; }
#s8 .proof-stats { max-width: 1120px; }
#s8 .client-grid { max-width: 100%; }
#s8 .roster-label::after { max-width: 1320px; }
.client-item { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.35; letter-spacing: .01em;
  color: rgba(255,255,255,.62); padding-left: 13px; position: relative; }
.client-item::before { content: "·"; position: absolute; left: 0; top: -1px; color: rgba(255,255,255,.4); }

/* ---- Station 09: what every build includes (3 commit cards + callout) ---- */
.incl-col { max-width: 920px; }
.incl-grid { margin-top: 32px; }
.incl-grid .pc-tag { margin-bottom: 0; }
.incl-callout { margin-top: 30px; }
.incl-callout .callout-tag { white-space: normal; line-height: 1.7; }

/* ---- Station 10: onboarding (3 forward steps reuse .disc-grid; + a CTA card) ---- */
.onboard-col { max-width: 720px; }
.onboard-grid { margin-top: 34px; grid-template-columns: repeat(3,1fr); column-gap: 26px; row-gap: 0; }
.onboard-grid .disc h4 { font-size: 17px; margin-bottom: 6px; }
.onboard-grid .disc p { font-size: 12.5px; line-height: 1.46; }
.cta-card { margin-top: 32px; max-width: 720px; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 18px 22px; border: 1px solid var(--hairline-dark-st); border-radius: 14px;
  background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(241,89,124,.18), 0 8px 36px rgba(107,79,255,.12); }
.cta-card .cta-h { font-family: var(--font-sans); font-size: clamp(16px,1.6vw,19px); font-weight: 600;
  letter-spacing: -.015em; color: #fff; margin-bottom: 5px; }
.cta-card .cta-tag { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.7); }
.cta-pill { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: rgba(255,255,255,.92); padding: 10px 16px; border: 1px solid var(--hairline-dark-st); border-radius: 999px;
  background: rgba(255,255,255,.06); white-space: nowrap; }

/* ---- Station 11: close (contact + configurator cards + footer line) ---- */
.close-col { max-width: 760px; }
.close-grid { margin-top: 32px; max-width: 720px; display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; column-gap: 22px; }
.close-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--hairline-dark-st); border-radius: 14px;
  background: rgba(255,255,255,.03); display: flex; flex-direction: column; }
.cc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 12px; }
.cc-h { font-family: var(--font-sans); font-size: clamp(16px,1.5vw,19px); font-weight: 600; letter-spacing: -.015em;
  line-height: 1.2; color: #fff; margin-bottom: 6px; }
.cc-role, .cc-tag { font-size: 12.5px; line-height: 1.48; color: rgba(255,255,255,.66); margin-bottom: 14px; }
.cc-rows { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--hairline-dark);
  display: flex; flex-direction: column; gap: 8px; }
.cc-row { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .02em; }
.cc-k { flex: none; width: 64px; color: rgba(255,255,255,.5); text-transform: uppercase; font-size: 9.5px;
  letter-spacing: .12em; }
.cc-v { color: rgba(255,255,255,.85); }
.cc-url { color: rgba(255,190,219,.9); }
.cc-link { color: rgba(255,190,219,.92); text-decoration: none; border-bottom: 1px solid rgba(255,190,219,.32);
  pointer-events: auto; transition: color .25s, border-color .25s; }
.cc-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.cc-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.close-foot { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1.6;
  color: rgba(255,255,255,.5); margin-top: 28px; }

/* ---- Station 12: lead form (final get-started slide) ---- */
.form-col { max-width: 880px; }                 /* uses the width per CD; left half for the form */
.lead-form { margin-top: 30px; max-width: 720px; display: flex; flex-direction: column; gap: 16px;
  pointer-events: auto; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lf-field > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }
.lf-field input, .lf-field textarea { font-family: var(--font-sans); font-size: 15px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid var(--hairline-dark-st); border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color .2s, background .2s; }
.lf-field input::placeholder, .lf-field textarea::placeholder { color: rgba(255,255,255,.34); }
.lf-field input:focus, .lf-field textarea:focus { border-color: rgba(241,89,124,.7);
  background: rgba(255,255,255,.06); }
.lf-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.lf-full { width: 100%; }
.lf-actions { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.lf-submit { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: #0a0a0a;
  background: #fff; border: 1px solid #fff; border-radius: 999px; padding: 12px 26px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s; }
.lf-submit:hover { background: transparent; color: #F1597C; border-color: #F1597C; transform: translateY(-1px); }
.lf-submit:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lf-alt { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,.5); }
.lf-alt a { color: rgba(255,190,219,.9); text-decoration: none; border-bottom: 1px solid rgba(255,190,219,.3); }
.lf-alt a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.lf-done { font-family: var(--font-sans); font-size: 15px; color: #D5E7D1; margin-top: 4px; }

/* ════ Unified dark-glass content cards (per CD) ════════════════════════════════
   Every content block below the headline + subhead is a heavy dark-glass card — a
   near-opaque dark fill + a strong backdrop blur, so the bright particle field behind
   each card softens to a glow and the copy stays crisp on every slide. */
.disc, .lane, .practice-card, .cta-card, .close-card, .stat, .lead-form {
  /* Readability leans on the near-opaque dark FILL (cheap); the backdrop blur is light + only
     ever runs on the active slide's handful of cards (inactive panels are visibility:hidden).
     Kept small (10px, no saturate) so it stays smooth on older integrated-GPU MacBook Airs. */
  background: rgba(9,10,14,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
}
.disc { padding: 20px 20px 18px; }                 /* discipline / process / step blocks → cards */
.disc-icon { display: block; margin-bottom: 14px; color: #fff; line-height: 0; }
.disc-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }   /* thin-stroke Lucide → refined/high-end */
.lead-form { padding: 26px 24px; }                 /* the get-started form → one glass card */
.stat-row { border-top: 0; column-gap: 16px; row-gap: 16px; }   /* glass tiles, not a divided strip */
.stat { padding: 18px 20px; border-right: 0; }
.stat:not(:first-child) { padding-left: 20px; }
.stat:last-child { padding-right: 20px; }
#s2 .stat-row { grid-template-columns: repeat(3, 1fr); }        /* 500+ / 99.99% / +13% — then 24/7 + 6 below */
.proof-stats { grid-template-columns: repeat(3, 1fr); max-width: 1040px; }   /* 3 across, 2 rows (6 case studies) */
#s8 .blurb { max-width: 1100px; }                                            /* let the proof subhead sit on one line */
.proof-stats .stat { padding: 15px 18px; }
.practice-card.is-featured { background: rgba(22,13,28,.78); }  /* featured keeps its accent over the glass */
/* subheads run wider — close to the width of the headline above them */
.blurb, .sys-col .blurb, .ways-col .blurb, .practice-col .blurb, .pricing-col .blurb,
.proof-col .blurb, .incl-col .blurb, .onboard-col .blurb, .close-col .blurb, .form-col .blurb { max-width: 760px; }

@media (max-width: 760px) { .lf-row { grid-template-columns: 1fr; } }

/* ---- Reveal stagger (keyed to .is-active, same pattern as -x) ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.panel.is-active .reveal { opacity: 1; transform: none; transition-delay: calc(.25s + var(--rd,0)*.1s); }

/* ---- Fallbacks ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity .45s ease; }
  .nudge .arrow { animation: none; }
}
html.no-webgl #gl { display: none; }
html.no-webgl body, html.no-webgl { overflow: auto; }
html.no-webgl .panel { position: relative; inset: auto; min-height: 100vh; visibility: visible;
  pointer-events: auto; border-top: 1px solid var(--hairline-dark); }
html.no-webgl .reveal { opacity: 1; transform: none; }
html.no-webgl .dots, html.no-webgl .nudge { display: none; }

@media (max-width: 860px) {
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .stat, .stat:not(:first-child) { border-bottom: 1px solid var(--hairline-dark); padding: 18px 0 0 0; }
  .stat:nth-child(even) { border-right: 0; padding-left: 18px; }
  .dots { display: none; }
}
@media (max-height: 700px) {
  h1.headline { font-size: clamp(38px,6vh,64px); white-space: normal; }
  h2.headline { font-size: clamp(28px,5vh,48px); }
  .disc-grid { margin-top: 22px; row-gap: 16px; }
  .disc p { font-size: 12px; }
  .proc-grid { margin-top: 18px; row-gap: 12px; }
  .callout { margin-top: 18px; }
  .lanes { margin-top: 18px; }
  .lane { padding: 14px 16px; }
  .lane-tag { margin-bottom: 8px; }
  .lane-fits { margin-bottom: 10px; }
  .practice-grid { margin-top: 18px; column-gap: 16px; }
  .practice-card { padding: 14px 15px 13px; }
  .pc-tag { margin-bottom: 10px; }
  .pc-list { padding-top: 10px; gap: 4px; }
  .pc-list li { font-size: 11.25px; }
  .pc-price { margin-bottom: 2px; }
  /* proof slide — tighten on short screens so 5 stats + roster fit / scroll cleanly */
  .proof-stats { margin-top: 18px; }
  .proof-stats .stat { padding-top: 14px; }
  .stat-client { margin-top: 6px; }
  .roster { margin-top: 18px; }
  .roster-label { margin-bottom: 10px; }
  .client-grid { row-gap: 6px; }
  .incl-grid { margin-top: 18px; }
  .incl-callout { margin-top: 18px; }
  /* onboarding + close — tighten on short screens */
  .onboard-grid { margin-top: 20px; }
  .onboard-grid .disc p { font-size: 12px; }
  .cta-card { margin-top: 18px; padding: 14px 18px; }
  .close-grid { margin-top: 18px; }
  .close-card { padding: 14px 16px; }
  .cc-role, .cc-tag { margin-bottom: 10px; }
  .cc-rows { padding-top: 10px; gap: 6px; }
  .close-foot { margin-top: 16px; }
}
@media (max-width: 980px) {
  .lanes { grid-template-columns: 1fr; row-gap: 16px; }
  .or { display: none; }
  .ways-col { max-width: 560px; }
}
@media (max-width: 860px) {
  .disc-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .sys-col { max-width: 100%; }
}
@media (max-width: 980px) {
  .practice-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .practice-col, .pricing-col { max-width: 560px; }
  .pc-list { margin-top: 12px; }
  .incl-grid { grid-template-columns: 1fr; }
  .incl-col, .proof-col { max-width: 560px; }
  .client-grid { grid-template-columns: repeat(2,1fr); }
  .onboard-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .onboard-col { max-width: 560px; }
  .cta-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  .close-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .close-col { max-width: 560px; }
}