/* ---- Trusters 3.0 — waitlist landing ---- */
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Light.woff2') format('woff2'),url('fonts/GeneralSans-Light.otf') format('opentype');font-weight:200 300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Regular.woff2') format('woff2'),url('fonts/GeneralSans-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Medium.woff2') format('woff2'),url('fonts/GeneralSans-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Semibold.woff2') format('woff2'),url('fonts/GeneralSans-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2'),url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2'),url('fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ---- Colour System v3 (design system, 2026-08-05) ------------------------
     One hue. Every colour is a ramp stop or an opacity of a stop.
     The legacy names below are aliases onto the ramp so existing rules keep
     working; new work should use the ramp tokens directly.                   */

  /* the ramp: paper to abyss */
  --paper:#F7F5F1;          /* 0 */
  --mist:#DEEAEB;           /* 1 */
  --signal:#B8E0E8;         /* 2  authority moments on dark only */
  --signal-deep:#4A9BAA;    /* 3  links, small accents on light */
  --petrol:#2E6773;         /* 4  charts, depth */
  --deep:#1B444E;           /* 5  hover, borders on dark */
  --abyss:#0D1B1F;          /* 6  dark sections, primary text on light */

  /* derived: opacities of the ramp, never new hexes */
  --ink:rgba(13,27,31,1);
  --ink-soft:rgba(13,27,31,0.85);
  --ink-muted:rgba(13,27,31,0.7);
  --ink-faint:rgba(13,27,31,0.4);
  --rule-soft:rgba(13,27,31,0.08);
  --on-dark-1:#F7F5F1;
  --on-dark-2:rgba(247,245,241,0.6);
  --on-dark-3:rgba(247,245,241,0.35);
  --rule-dark:rgba(247,245,241,0.12);

  /* aliases retained so the existing sheet keeps resolving */
  --paper-warm:var(--mist);
  --bg-dark:var(--abyss);
  --blue-300:var(--signal);
  --blue-500:var(--signal-deep);
  --blue-700:var(--petrol);
  --blue-800:var(--deep);

  --err:#A0402C;            /* functional only; not part of the ramp */
  --r1:8px; --r2:12px; --r3:16px;
  --sans:'General Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:80px;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
.grain{position:fixed;inset:0;background-image:url('assets/grain-tile.png');background-repeat:repeat;
  mix-blend-mode:multiply;opacity:.16;pointer-events:none;z-index:9999}

/* ambient light: two soft spots that live behind the paper sections and
   shift gently with scroll (see motion.js), so the page never sits flat */
.aura{position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px circle at 16% 18%,rgba(107,171,186,.14),transparent 62%),
    radial-gradient(600px circle at 86% 64%,rgba(46,92,104,.09),transparent 60%)}
body{position:relative;z-index:0}
@media (prefers-reduced-motion:no-preference){
  .aura{animation:aura-breathe 18s ease-in-out infinite alternate}
  @keyframes aura-breathe{from{opacity:.85}to{opacity:1.0}}
}
img{max-width:100%;display:block}

/* inline icons */
.tico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fi .tico{width:21px;height:21px}
.tcard .mark .tico{width:22px;height:22px}
.qcard li .tico{width:18px;height:18px;margin-top:1px}
.btn .tico{width:15px;height:15px}
.qz-done .ic svg{width:30px;height:30px}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-muted)}
.num{color:var(--blue-500)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(240,243,242,.78);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav img{height:28px;width:auto}
.nav .links{display:flex;align-items:center;gap:26px}
.nav .links a:not(.btn){font-size:14px;color:var(--ink-soft);text-decoration:none;transition:opacity .2s}
.nav .links a:hover{opacity:.6}
.nav .links a.hide{display:inline}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:var(--r2);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:14px 22px;transition:opacity .2s,background .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--blue-700)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-soft);padding:13px 21px}
.btn-ghost:hover{background:var(--paper-warm)}
.btn-sm{padding:10px 16px;font-size:11px}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{opacity:.82}

/* sections */
html,body{overflow-x:clip}
section{padding:var(--pad) 0;position:relative}
.s-eyebrow{margin-bottom:18px}
h1,h2,h3{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02}
h2{font-size:clamp(34px,4.6vw,54px);margin-bottom:20px;max-width:22ch}
h2[style*="text-align:center"]{margin-left:auto;margin-right:auto}
h3{font-size:18px}

/* ghost numerals: oversized section numbers sitting behind the content */
.ghost-num{position:absolute;top:16px;right:-8px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--mono);font-weight:500;font-size:clamp(130px,17vw,230px);line-height:1;
  color:rgba(17,17,17,.05)}
.band-dark .ghost-num,.cta-band .ghost-num{color:rgba(247,245,241,.045)}
.band-blue .ghost-num{color:rgba(247,245,241,.07)}
.band-photo .ghost-num{color:rgba(247,245,241,.06)}
section > .wrap{position:relative;z-index:1}
p.lead{font-size:19px;color:var(--ink-soft);line-height:1.6}
.muted{color:var(--ink-muted)}

/* hero */
.hero{padding:72px 0 0}
.hero h1{font-size:clamp(54px,7.6vw,92px);line-height:.96;margin:18px 0 0;max-width:14ch}
.hero .sub{font-size:20px;color:var(--ink-soft);margin:24px 0 0;max-width:54ch;line-height:1.55}
.hero .cta{display:flex;gap:12px;margin:34px 0 20px;flex-wrap:wrap}
.assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:8px}
.assure span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-muted)}
.assure i{color:var(--blue-500);font-size:16px}
.scarcity{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:9px;background:var(--paper-warm);border-radius:var(--r2);padding:10px 15px}
.scarcity b{color:var(--blue-700);font-weight:500}

/* ---- humans in the loop ---- */
.avatars{display:flex;flex-shrink:0}
.av-s{width:36px;height:36px;border-radius:50%;border:2px solid var(--paper);margin-left:-10px;
  object-fit:cover;background:var(--paper-warm);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-muted)}
.avatars :first-child{margin-left:0}
.human-strip{display:flex;align-items:center;gap:16px;margin-top:24px}
.human-strip p{font-size:14.5px;color:var(--ink-soft);max-width:44ch;line-height:1.5}
.orbit-cap{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 40px}
.orbit-cap p{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-muted)}
.who{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.who span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;border:1px solid rgba(247,245,241,.3);color:var(--blue-300)}
.who span:first-child{background:var(--blue-300);color:var(--blue-800);border-color:var(--blue-300)}
.fnote{display:flex;gap:16px;align-items:flex-start;margin:24px 0 4px;padding:18px 20px;
  background:rgba(247,245,241,.06);border:1px solid var(--rule-dark);border-radius:var(--r3)}
.fnote img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.fnote p{font-size:14.5px;line-height:1.55;color:var(--on-dark-1)}
.fnote-who{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3)}
.book-av{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(27,58,66,.25)}

/* image / screenshot frames (placeholders) */
.shot{position:relative;border:1px solid var(--rule-soft);border-radius:var(--r3);background:var(--paper-warm);
  overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.shot .ph{padding:40px 24px;position:relative;z-index:1}
.shot .ph .pl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.shot .ph .pd{font-size:13px;color:var(--ink-faint);margin-top:8px;max-width:34ch;line-height:1.45}
.shot .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:multiply;opacity:.45}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.hero-shot{min-height:380px;margin-top:52px;margin-bottom:-130px;z-index:5}
.hero + .band-dark{padding-top:calc(var(--pad) + 150px)}
.shot.dark{background:var(--bg-dark)}
.shot.dark .pl{color:var(--on-dark-2)}.shot.dark .pd{color:var(--on-dark-3)}
.shot.dark .gd{mix-blend-mode:screen;opacity:.2}
.shot.r169{aspect-ratio:16/9}

/* frames holding a real screenshot: dark product frame + elevation so shots
   stand off the paper background instead of melting into it */
.shot.has-img{display:block;min-height:0;aspect-ratio:auto;align-items:stretch;
  background:var(--abyss);border:none;border-radius:14px;padding:34px 8px 8px;position:relative;
  box-shadow:0 1px 2px rgba(17,17,17,.10),0 14px 32px rgba(17,17,17,.16),0 36px 80px rgba(17,17,17,.16)}
.shot.has-img::before{content:"";position:absolute;top:13px;left:18px;width:8px;height:8px;border-radius:50%;
  background:rgba(247,245,241,0.22);box-shadow:16px 0 0 rgba(247,245,241,0.22),32px 0 0 rgba(247,245,241,0.22)}
.shot.has-img img{width:100%;height:auto;display:block;object-fit:unset;border-radius:7px}

/* problem band (dark) */
.band-dark{background:var(--bg-dark);color:var(--on-dark-1);position:relative;overflow:hidden}
.band-dark .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:screen;opacity:.18;pointer-events:none}
.band-dark .wrap{position:relative;z-index:1}
.band-dark h2{color:var(--on-dark-1)}
.band-dark .lead{color:var(--on-dark-2)}
.band-dark .eyebrow{color:var(--on-dark-3)}

/* ---- VERA orbit: the engine opens up as you scroll (jeton-style scrub) ---- */
.orbit-stage{height:190vh;margin:34px 0 26px}
.orbit{position:sticky;top:calc(50vh - 270px);height:540px}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.orbit-lines path{fill:none;stroke:var(--blue-500);stroke-width:1.5;opacity:.38;stroke-dasharray:1;stroke-dashoffset:1}
.orbit-lines path.hot{opacity:.9;stroke-width:2}

.vera{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.vera-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:128px;height:128px;border-radius:26px;background:var(--ink);color:var(--paper);
  font-weight:600;font-size:19px;letter-spacing:.06em;position:relative;
  box-shadow:0 2px 4px rgba(17,17,17,.14),0 18px 44px rgba(17,17,17,.26)}
.vera-in::before{content:"";position:absolute;inset:-26px;border-radius:40px;z-index:-1;
  background:radial-gradient(closest-side,rgba(107,171,186,.28),transparent 72%)}
.vera-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-300)}
.vera-sub{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-2)}

.tool{position:absolute;left:50%;top:50%;z-index:2;--tx:var(--dx);--ty:var(--dy);
  transform:translate(-50%,-50%) translate(var(--tx),var(--ty))}
/* JS-driven scrub takes over from a closed start (only when the engine is running) */
.orbit-js .orbit .tool{opacity:0;transform:translate(-50%,-50%) scale(.55)}
.tool-in{display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 11px;
  background:#fff;border:1px solid var(--rule-soft);border-radius:var(--r2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 10px 26px rgba(17,17,17,.09);white-space:nowrap;cursor:default}
.ti-tile{width:30px;height:30px;border-radius:9px;background:var(--blue-300);
  display:inline-flex;align-items:center;justify-content:center;color:var(--blue-800);flex-shrink:0}
.ti-tile .tico{width:16px;height:16px}

@media (prefers-reduced-motion:no-preference){
  .tool-in{transition:box-shadow .35s ease,border-color .3s ease}
  .tool-in:hover{border-color:var(--blue-500);box-shadow:0 2px 4px rgba(17,17,17,.06),0 16px 36px rgba(17,17,17,.14)}
  .vera-in::before{animation:vpulse 4.5s ease-in-out infinite}
  @keyframes vpulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
}
@media (prefers-reduced-motion:reduce){
  .orbit-stage{height:auto}
  .orbit{position:relative;top:0}
  .orbit-lines path{stroke-dashoffset:0}
}

/* ---- channel rows: expand on hover, background goes to ink ---- */
.chans{margin-top:22px;border-bottom:1px solid var(--rule-soft)}
.chan{border-top:1px solid var(--rule-soft);padding:22px 24px;border-radius:var(--r3);outline:none;
  transition:background .5s cubic-bezier(.16,1,.3,1),border-color .4s ease,color .4s ease}
.chan-head{display:flex;align-items:center;gap:20px}
.chan-head h3{font-size:26px;flex:1;transition:color .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.chan .ti-tile{width:40px;height:40px;border-radius:11px;transition:background .4s ease,color .4s ease}
.chan .ti-tile .tico{width:19px;height:19px}
.chan-more{width:18px;height:18px;color:var(--ink-faint);transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s ease}
.chan-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.chan-desc{overflow:hidden}
.chan-desc p{padding:16px 0 8px 60px;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--ink-muted);transition:color .4s ease}
.chan.openrow,.chan:focus-visible{background:var(--ink);border-color:var(--ink)}
.chan.openrow h3,.chan:focus-visible h3{color:var(--paper);transform:translateX(6px)}
.chan.openrow .ti-tile,.chan:focus-visible .ti-tile{background:rgba(247,245,241,.12);color:var(--blue-300)}
.chan.openrow .chan-desc p,.chan:focus-visible .chan-desc p{color:var(--on-dark-2)}
.chan.openrow .chan-more,.chan:focus-visible .chan-more{transform:rotate(45deg);color:var(--blue-300)}
.chan.openrow .chan-body,.chan:focus-visible .chan-body{grid-template-rows:1fr}
.chan.openrow + .chan,.chan:focus-visible + .chan{border-top-color:transparent}
@media (hover:hover){
  .chan:hover{background:var(--ink);border-color:var(--ink)}
  .chan:hover h3{color:var(--paper);transform:translateX(6px)}
  .chan:hover .ti-tile{background:rgba(247,245,241,.12);color:var(--blue-300)}
  .chan:hover .chan-desc p{color:var(--on-dark-2)}
  .chan:hover .chan-more{transform:rotate(45deg);color:var(--blue-300)}
  .chan:hover .chan-body{grid-template-rows:1fr}
  .chan:hover + .chan{border-top-color:transparent}
}
@media (prefers-reduced-motion:reduce){
  .chan-body{grid-template-rows:1fr;transition:none}
}

/* pillars / feature grid (legacy) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.feature{background:#fff;border:1px solid var(--rule-soft);border-radius:var(--r3);padding:26px 24px;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 10px 28px rgba(17,17,17,.06)}
.feature .fi{width:42px;height:42px;border-radius:var(--r2);background:var(--paper-warm);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);margin-bottom:16px}
.feature .fi i{font-size:21px}
.feature h3{margin-bottom:10px;font-size:17px}
.feature p{font-size:15px;color:var(--ink-muted);line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .sn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--blue-500);margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:15px;color:var(--ink-muted);line-height:1.55}

/* feature rows (alternating) — screenshots break the column for depth */
.frow{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;margin-top:64px}
.frow:first-of-type{margin-top:40px}
.frow .shot{margin-right:-5vw}
.frow.flip{grid-template-columns:1.1fr 1fr}
.frow.flip .shot{margin-right:0;margin-left:-5vw}
.frow .copy h3{font-size:24px;margin-bottom:14px;text-transform:uppercase}
.frow .copy p{font-size:16px;color:var(--ink-muted);line-height:1.6}
.frow .shot{min-height:300px}
.frow.flip .copy{order:2}

/* deep blue band (how it works) */
.band-blue{background:var(--blue-800);color:var(--paper)}
.band-blue h2{color:var(--paper)}
.band-blue .eyebrow{color:#8FB3BC}
.band-blue .num{color:var(--blue-300)}
.band-blue .step{border-top-color:rgba(247,245,241,.28)}
.band-blue .step:hover{border-top-color:var(--blue-300)}
.band-blue .sn{color:var(--blue-300)}
.band-blue .step p{color:#AEC6CC}

/* photographic proof band: the stage shot, duotoned to ink */
.band-photo{background:
  linear-gradient(rgba(14,14,14,.86),rgba(20,22,23,.93)),
  url('assets/bg-proof-ensemble.jpg') center 42%/cover no-repeat;color:var(--on-dark-1)}
.band-photo h2{color:var(--on-dark-1)}
.band-photo .eyebrow{color:var(--on-dark-3)}
.band-photo .lead{color:var(--on-dark-2)}
.band-photo .tcard{border-color:transparent}

/* who for / not for */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.qcard{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r3);padding:28px 28px}
.qcard h3{font-size:15px;margin-bottom:16px}
.qcard ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.qcard li{display:flex;gap:11px;font-size:15px;color:var(--ink-soft);line-height:1.45}
.qcard li i{flex-shrink:0;font-size:18px;margin-top:1px}
.qcard.yes li i{color:var(--blue-500)}
.qcard.no{background:var(--paper-warm)}
.qcard.no li{color:var(--ink-muted)}
.qcard.no li i{color:var(--ink-faint)}

/* founders */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.founder{display:flex;gap:18px;align-items:flex-start}
.founder .av{width:64px;height:64px;border-radius:50%;background:var(--paper-warm);border:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-muted);flex-shrink:0;text-align:center;line-height:1.2;overflow:hidden}
.founder .av img{width:100%;height:100%;object-fit:cover}
.founder h3{font-size:17px;text-transform:none;letter-spacing:0}
.founder .role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);margin:3px 0 9px}
.founder p{font-size:14.5px;color:var(--ink-muted);line-height:1.55}

/* social proof — testimonials */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.tcard{border:1px solid var(--rule-soft);border-radius:var(--r3);padding:26px 24px;background:var(--paper);
  display:flex;flex-direction:column;gap:18px}
.tcard .mark{color:var(--blue-500);font-size:22px;line-height:1}
.tcard .quote{font-size:15px;line-height:1.6;color:var(--ink-soft);flex:1}
.tcard .who{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tcard .who .role{display:block;color:var(--ink-faint);margin-top:3px}

/* faq */
.faq{max-width:780px;margin:0 auto}
.qa{border-top:1px solid var(--rule-soft);padding:22px 0}
.qa:last-child{border-bottom:1px solid var(--rule-soft)}
.qa h3{font-size:17px;text-transform:none;letter-spacing:0;margin-bottom:10px}
.qa p{font-size:15.5px;color:var(--ink-muted);line-height:1.6}

/* waitlist form */
.cta-band{background:var(--bg-dark);color:var(--on-dark-1);position:relative;overflow:hidden}
.cta-band .gd{position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:screen;opacity:.18;pointer-events:none}
.cta-band h2{color:var(--on-dark-1)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;position:relative;z-index:1}
.cta-grid .intro .lead{color:var(--on-dark-2);font-size:17px}
.cta-grid .assure span{color:var(--on-dark-2)}
.form{background:var(--paper);border-radius:var(--r3);padding:28px}
.form .fl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin:0 0 7px}
.form .field{margin-bottom:16px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--rule-soft);border-radius:var(--r2);
  background:#fff;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--blue-500)}
.form textarea{min-height:74px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .fine{font-size:12px;color:var(--ink-muted);margin-top:12px;line-height:1.5;text-align:center}
.form .ferr{color:var(--err);font-size:13.5px;line-height:1.45;margin:-6px 0 14px}
.form input.invalid{border-color:var(--err)}

/* booking — a light-blue surface so the page ends on color */
.book{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--blue-300);
  border-radius:var(--r3);padding:34px 38px;flex-wrap:wrap}
.book .bt h3{font-size:22px;margin-bottom:8px;color:var(--blue-800)}
.book .bt p{font-size:15px;color:var(--blue-700);max-width:46ch}

/* footer */
footer{border-top:1px solid var(--rule-soft);padding:56px 0 64px}
footer .frow2{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
footer img{height:28px;width:auto;margin-bottom:16px}
footer .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);line-height:1.8}
footer .fl{display:flex;gap:24px;flex-wrap:wrap}
footer .fl a{font-size:13px;color:var(--ink-soft);text-decoration:none}
footer .fl a:hover{opacity:.6}
footer .legal{font-size:12px;color:var(--ink-faint);margin-top:32px}

/* ---- score page ---- */
.score-hero{padding:80px 0 84px}
.shero{display:grid;grid-template-columns:1.05fr .9fr;gap:56px;align-items:center}
.score-hero h1{font-size:50px;line-height:1;margin:18px 0 0}
.score-hero .sub{font-size:18px;color:var(--ink-soft);margin:22px 0 0;line-height:1.6}
.score-hero .cta{margin:30px 0 0}
.band-fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--on-dark-2)}

/* designed video placeholder (swaps for the real <video> when recorded) */
.video-ph{position:relative;aspect-ratio:16/11;border-radius:16px;background:var(--bg-dark);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(17,17,17,.10),0 18px 44px rgba(17,17,17,.20)}
.video-ph::before{content:"";position:absolute;inset:0;background-image:url('assets/grain-tile.png');mix-blend-mode:screen;opacity:.2}
.video-ph::after{content:"";position:absolute;inset:-30%;background:radial-gradient(520px circle at 68% 30%,rgba(107,171,186,.22),transparent 62%)}
.vp-play{width:74px;height:74px;border-radius:50%;background:var(--paper);color:var(--ink);z-index:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.vp-play .tico{width:26px;height:26px;margin-left:3px;fill:currentColor;stroke:none}
.vp-cap{position:absolute;left:22px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:3px}
.vp-t{color:var(--on-dark-1);font-weight:600;font-size:15px}
.vp-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}

/* what-comes-back: centered intro, dashboard as the star, deliverables below */
.sback-head{max-width:660px}
.sback-head h2{margin-bottom:16px}
.dash-shot{position:relative;margin:40px 0 0;text-align:center}
.dash-shot img{width:100%;height:auto;border-radius:16px;border:1px solid var(--rule-soft);
  box-shadow:0 1px 2px rgba(17,17,17,.08),0 24px 54px rgba(17,17,17,.16),0 56px 110px rgba(17,17,17,.12)}
.dash-shot figcaption{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);text-align:center}
.sback-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;padding-top:36px;border-top:1px solid var(--rule-soft)}
.sbi-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--blue-500)}
.sbi h3{font-size:17px;margin:12px 0 8px;text-transform:none;letter-spacing:0}
.sbi p{font-size:14.5px;line-height:1.55;color:var(--ink-muted)}
.sback-note{margin-top:34px;font-size:14px;color:var(--ink-muted);max-width:70ch}
@media (max-width:860px){.sback-grid{grid-template-columns:1fr;gap:22px}}

/* form band */
.score-grid{align-items:start}
.score-form{padding:30px 30px 26px}
.sf-head{margin-bottom:24px}
.sf-dots{display:flex;gap:26px;margin-bottom:14px}
.sf-dot{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.sf-dot i{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.sf-dot.on{color:var(--ink)}
.sf-dot.done{color:var(--blue-700)}
.sf-prog{height:3px;background:var(--paper-warm);border-radius:99px;overflow:hidden}
.sf-prog i{display:block;height:100%;width:100%;background:var(--blue-500);border-radius:99px;
  transform-origin:left;transform:scaleX(.333);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sf-title{font-weight:600;font-size:17px;margin-bottom:18px}
.sf-lede{font-size:14.5px;color:var(--ink-muted);line-height:1.55;margin:-8px 0 20px}
.sf-sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
  margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.sf-note{color:var(--ink-faint);text-transform:none;letter-spacing:.04em}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.score-form .field{margin-bottom:15px}
.score-form .fl{font-size:11px}
.score-form input,.score-form select{font-size:15.5px}
.score-form select{width:100%;border:1px solid var(--rule-soft);border-radius:var(--r2);background:#fff;
  padding:12px 14px;font-family:var(--sans);color:var(--ink);outline:none}
.score-form select:focus{border-color:var(--blue-500)}
.sf-add{display:inline-flex;align-items:center;gap:7px;background:none;border:1px dashed var(--rule-soft);
  border-radius:var(--r2);padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);cursor:pointer}
.sf-add:hover{border-color:var(--blue-500);color:var(--blue-700)}
.sf-next{width:100%;justify-content:center;margin-top:8px}
.sf-back{display:block;margin:12px auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.sf-back:hover{color:var(--ink)}
.score-form .ferr{color:var(--err);font-size:13.5px;line-height:1.45;margin:0 0 12px}
.score-form .fine{font-size:12px;color:var(--ink-muted);line-height:1.5}

.trow{padding:15px 0;border-top:1px solid var(--rule-soft)}
.trow:first-of-type{border-top:none;padding-top:0}
.tq{display:block;font-size:15px;font-weight:500;margin-bottom:10px;line-height:1.4}
.trow .cond{display:none;margin-top:10px}
.opt-line{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-soft);line-height:1.5;
  cursor:pointer;margin:20px 0 16px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.opt-line input{margin-top:3px;accent-color:var(--blue-700);width:16px;height:16px;flex-shrink:0}

.fstep{display:none}
.fstep.on{display:block}
@media (prefers-reduced-motion:no-preference){
  .fstep.on{animation:stepin .5s cubic-bezier(.16,1,.3,1)}
  @keyframes stepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

@media (max-width:860px){
  .shero{grid-template-columns:1fr;gap:32px}
  .score-hero h1{font-size:36px}
  .f2{grid-template-columns:1fr}
  .sf-dot i{display:none}
}

/* questionnaire (step 2) */
.qz{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:48px 0}
.qz-card{width:100%;max-width:700px;background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r3);padding:44px}
.qz-step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin-bottom:14px}
.qz-card h1{font-size:30px;margin-bottom:10px}
.qz-card .qz-sub{color:var(--ink-muted);font-size:16px;margin-bottom:14px}
.qz-prog{height:4px;background:var(--paper-warm);border-radius:99px;margin-bottom:30px;overflow:hidden}
.qz-prog i{display:block;height:100%;width:85%;background:var(--blue-500);border-radius:99px}
.q{margin-bottom:26px}
.q .ql{font-size:15.5px;font-weight:500;margin-bottom:12px;display:block;line-height:1.4}
.q .ql .opt-note{font-weight:400;color:var(--ink-faint);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.opt span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-soft);border-radius:var(--r2);padding:10px 15px;font-size:14px;color:var(--ink-soft);background:var(--paper-warm);transition:background .15s,color .15s,border-color .15s}
.opt input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--blue-500);outline-offset:1px}
.q input[type=text],.q input[type=url],.q textarea{width:100%;border:1px solid var(--rule-soft);border-radius:var(--r2);background:#fff;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.q input:focus,.q textarea:focus{border-color:var(--blue-500)}
.q textarea{min-height:70px;resize:vertical}
.qz-actions{margin-top:32px}
.qz-actions .btn{width:100%;justify-content:center}
.qz-fine{font-size:12.5px;color:var(--ink-muted);text-align:center;margin-top:14px}
.qz-done{text-align:center;padding:24px 10px}
.qz-done .ic{width:58px;height:58px;border-radius:50%;background:var(--blue-300);color:var(--blue-700);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:30px}
.qz-done h1{font-size:28px;margin-bottom:12px}
.qz-done p{color:var(--ink-muted);max-width:44ch;margin:0 auto 24px;font-size:16px;line-height:1.6}

/* ---- Motion: entrance choreography, directional reveals, depth ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),
               transform .75s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}

  /* living film grain (the synapser video-overlay feel, in CSS) */
  .grain{animation:grainshift .9s steps(1,end) infinite}
  @keyframes grainshift{
    0%{background-position:0 0}12%{background-position:-64px 40px}
    25%{background-position:48px -72px}37%{background-position:-24px 88px}
    50%{background-position:80px 24px}62%{background-position:-88px -32px}
    75%{background-position:32px 64px}87%{background-position:-48px -56px}
  }

  /* masked word reveals: each word slides up out of its own mask */
  .ws .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
  .ws .wi{display:inline-block;transform:translateY(112%);
    transition:transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--wd,0s)}
  .ws.in .wi{transform:none}

  /* cursor-repel candidates ease back when the cursor leaves */
  .video-ph{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
  .shot.has-img.settle{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .75s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}

  /* directional + scale variants (assigned by motion.js) */
  .reveal.rv-l{transform:translateX(-34px)}
  .reveal.rv-r{transform:translateX(34px)}
  .reveal.rv-s{transform:translateY(30px) scale(.965)}
  .reveal.rv-o{transform:none}         /* opacity only — parallax owns transform */
  .reveal.in{transform:none}
  .reveal.rv-o.in{transform:none}

  /* living dark bands: a slow drifting light source */
  .band-dark::after,.cta-band::after{content:"";position:absolute;inset:-45%;pointer-events:none;z-index:0;
    background:radial-gradient(640px circle at 32% 42%,rgba(107,171,186,.16),transparent 62%);
    animation:drift 26s ease-in-out infinite alternate}
  @keyframes drift{
    from{transform:translate3d(-7%,-5%,0)}
    to{transform:translate3d(9%,7%,0)}
  }

  /* buttons feel physical */
  .btn{transition:opacity .2s,background .2s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,17,17,.16)}
  .btn:active{transform:translateY(0) scale(.985);box-shadow:0 2px 6px rgba(17,17,17,.12)}

  /* hover lift on cards */
  .tcard,.qcard,.feature{transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .4s ease}
  .tcard:hover{transform:translateY(-4px);border-color:var(--blue-500);box-shadow:0 14px 34px rgba(17,17,17,.10)}
  .qcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(17,17,17,.08)}
  .feature:hover{transform:translateY(-4px);border-color:var(--blue-500);box-shadow:0 2px 4px rgba(17,17,17,.05),0 16px 38px rgba(17,17,17,.10)}

  /* feature icon comes alive on hover */
  .feature .fi{transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
  .feature:hover .fi{background:var(--blue-300);color:var(--blue-800);transform:translateY(-3px) rotate(-3deg)}

  /* step accent + founder avatar */
  .step{transition:border-top-color .3s ease}
  .step:hover{border-top-color:var(--blue-500)}
  .founder .av{transition:border-color .3s ease,color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
  .founder:hover .av{border-color:var(--blue-500);color:var(--blue-700);transform:scale(1.05)}

  /* framed screenshots: shadow deepens on hover; once entrance finishes,
     transform belongs to the parallax (plx-live drops it from transitions) */
  .shot.has-img{transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .75s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;will-change:transform}
  .shot.has-img:hover{box-shadow:0 2px 4px rgba(17,17,17,.10),0 22px 44px rgba(17,17,17,.20),0 48px 100px rgba(17,17,17,.18)}
  .shot.has-img.plx-live{transition:opacity .75s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
}

/* button arrow slides on hover (both motion prefs — tiny, no reduced-motion concern) */
.btn i.ti-arrow-right{transition:transform .25s ease}
.btn:hover i.ti-arrow-right{transform:translateX(4px)}

/* ---- Inline content editor (admin mode) ---- */
#admin-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10000;
  display:none;align-items:center;gap:10px;background:var(--ink);color:var(--on-dark-1);
  padding:10px 12px;border-radius:var(--r2);box-shadow:0 10px 34px rgba(0,0,0,.28)}
#admin-bar.on{display:flex}
#admin-badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-300);padding-right:2px}
#admin-bar button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule-dark);background:transparent;color:var(--on-dark-1);
  padding:8px 12px;border-radius:var(--r1);cursor:pointer;transition:background .2s,border-color .2s}
#admin-bar button:hover{background:rgba(247,245,241,.1)}
#admin-save{background:var(--blue-300);color:var(--ink);border-color:var(--blue-300)}
#admin-save:hover{opacity:.85;background:var(--blue-300)}
body.admin-mode [contenteditable]{outline:2px dashed rgba(107,171,186,.5);outline-offset:2px;border-radius:2px}
body.admin-mode [contenteditable]:focus{outline:2px solid var(--blue-500);background:rgba(107,171,186,.08)}
body.admin-mode img.editable-img{cursor:pointer;outline:2px dashed rgba(107,171,186,.45);outline-offset:3px}
body.admin-mode img.editable-img:hover{outline-color:var(--blue-500)}
body.admin-mode #flogo-trigger{cursor:pointer !important}

@media (max-width:860px){
  .shot.hero-shot{margin-bottom:-64px}
  .hero + .band-dark{padding-top:calc(var(--pad) + 84px)}
  .frow,.frow.flip{grid-template-columns:1fr}
  .frow .shot,.frow.flip .shot{margin-left:0;margin-right:0}
  .ghost-num{font-size:110px;top:10px;right:-4px}
  .orbit{height:330px;margin:22px 0 10px}
  .tool{--tx:var(--mx);--ty:var(--my)}
  .tool-in{padding:8px 11px 8px 8px;font-size:9.5px;gap:7px}
  .ti-tile{width:24px;height:24px;border-radius:7px}
  .ti-tile .tico{width:13px;height:13px}
  .vera-in{width:92px;height:92px;border-radius:20px;font-size:15px}
  .qz-card{padding:28px 22px}
  :root{--pad:56px}
  .nav .links a.hide{display:none}
  .hero h1{font-size:42px}
  h2{font-size:28px}
  .grid3,.steps,.frow,.cols2,.founders,.wall,.cta-grid{grid-template-columns:1fr;gap:20px}
  .frow.flip .copy{order:0}
  .hero .shot.hero-shot{min-height:240px}
}


/* ============================================================
   HERO + SECTION 01 REBUILD
   Centred hero with the typed headline, the scroll-scrubbed
   answer-box stage, the band sweep and the screenshot reveals.
   ============================================================ */
/* ============================================================
   HERO PREVIEW — two-column hero with the AI-answer proof panel
   Additive only. Nothing in landing.css is modified.
   ============================================================ */

.hero{padding:64px 0 0}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:start}
.hero-copy{padding-top:2px}
.hero .hero-copy h1{font-size:clamp(40px,4.6vw,62px);line-height:.98;max-width:14ch;margin:16px 0 0;text-wrap:balance}
.hero .hero-copy .sub{font-size:18px;max-width:44ch;margin:20px 0 0;line-height:1.55}
.hero .hero-copy .cta{margin:30px 0 0;gap:10px}
.hero .hero-copy .cta .btn{font-size:11px;padding:13px 17px}
.hero .hero-copy .cta .btn-ghost{padding:12px 16px}

/* the answer panel */
.hero-proof{padding-top:26px}
.hero .shot.hero-shot{margin:0;min-height:0;border-radius:12px;padding:26px 6px 6px}
.hero .shot.hero-shot::before{top:10px;left:14px;width:7px;height:7px;box-shadow:13px 0 0 rgba(247,245,241,0.22),26px 0 0 rgba(247,245,241,0.22)}
.answer{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r3);overflow:hidden;
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 12px 28px rgba(17,17,17,.07),0 30px 64px rgba(17,17,17,.06)}
.answer-bar{display:flex;align-items:center;gap:9px;padding:12px 18px;background:var(--paper-warm);
  border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-muted)}
.answer-dot{width:6px;height:6px;border-radius:50%;background:var(--blue-500);flex-shrink:0}
.answer-body{padding:24px 24px 4px}
.answer-q{font-size:15.5px;line-height:1.5;color:var(--ink-muted);padding-left:15px;
  border-left:2px solid var(--blue-300)}
.answer-a{font-size:15px;color:var(--ink-soft);margin:22px 0 6px}
.answer-list{list-style:none;display:flex;flex-direction:column}
.answer-list li{display:flex;gap:15px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.answer-list li:last-child{border-bottom:none}
.an{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--blue-500);flex-shrink:0}
.am{display:flex;flex-direction:column;gap:4px}
.am b{font-weight:500;font-size:16.5px;color:var(--ink);letter-spacing:-.005em}
.ac{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.answer-foot{display:flex;align-items:center;gap:11px;margin:0 24px;padding:16px 0 18px;
  border-top:1px solid var(--rule-soft);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);font-weight:500}
.answer-foot .tico{width:15px;height:15px;color:var(--err);stroke-width:2.5}
.answer-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:13px;text-align:right}
.answer-note a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--rule-soft)}
.answer-note a:hover{color:var(--ink)}


/* the screenshot is now supporting, not the hero event */
.hero .shot.hero-shot{min-height:0;margin-top:64px;margin-bottom:-120px}

@media (max-width:1080px){
  .hero-grid{gap:44px}
  .hero-proof{padding-top:26px}
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero .hero-copy h1{max-width:16ch}
  .hero .hero-copy .sub{max-width:52ch}
  .hero-proof{padding-top:0;max-width:520px}
  .answer-note{text-align:left}
}
@media (max-width:860px){
  .hero{padding-top:44px}
  .hero .hero-copy h1{font-size:40px}
  .answer-body{padding:20px 19px 4px}
  .answer-foot{margin:0 19px}
  .am b{font-size:15.5px}
}

/* ============================================================
   BAND RISE — dark bands fill upward as you scroll into them,
   outrunning their own content. Scroll-linked (not time-based),
   runs off the main thread, and degrades to today's solid bands
   anywhere it isn't supported.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){

    .band-rise{position:relative;overflow:hidden;isolation:isolate;
      background-color:transparent}
    /* A fixed 100vh cue pinned to the band's top edge drives the timeline, so
       the sweep takes the same amount of scroll whether the section is 900px
       or 3900px tall. Anchoring to the section itself made the fill arrive
       later and later as sections grew. */
    .band-cue{position:absolute;top:0;left:0;right:0;height:100vh;
      pointer-events:none;z-index:-1;
      view-timeline-name:--band;view-timeline-axis:block}
    .band-photo.band-rise{background-image:none}

    /* Section 01 sits under the hero screenshot. Its fill has to rise past
       its own top edge to reach the top of the screen behind the shot, so it
       overshoots upward by --rise-lead and the band stops clipping it. The
       hero shot keeps z-index:5, so the black passes behind it, not over it.
       Because this is scroll-linked it retreats again on the way back up,
       so the hero copy is never covered. */
    .band-dark.band-rise{overflow:visible;--rise-lead:0vh}
    .band-dark.band-rise::after{top:calc(-1 * var(--rise-lead))}
    .band-dark.band-rise > .gd{top:calc(-1 * var(--rise-lead))}

    /* the fill itself */
    .band-rise::after{
      content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      animation:band-fill linear both;
      animation-timeline:--band;
      animation-range:cover 0% cover 46%}
    .band-dark.band-rise::after,
    .cta-band.band-rise::after{background:var(--bg-dark)}
    .band-blue.band-rise::after{background:var(--blue-800)}
    .band-photo.band-rise::after{background:
      linear-gradient(rgba(14,14,14,.86),rgba(20,22,23,.93)),
      url('assets/bg-proof-ensemble.jpg') center 42%/cover no-repeat}

    /* grain rides with the fill so it never sits on bare paper */
    .band-rise > .gd{z-index:1;
      animation:band-fill linear both;
      animation-timeline:--band;
      animation-range:cover 0% cover 46%}

    .band-rise > .ghost-num{z-index:1}

    /* the copy follows more slowly — this is the differential */
    .band-rise > .wrap{position:relative;z-index:2;
      animation:band-copy linear both;
      animation-timeline:--band;
      animation-range:cover 0% cover 66%}

    @keyframes band-fill{from{transform:translateY(118vh)}to{transform:translateY(0)}}
    @keyframes band-copy{from{transform:translateY(44px)}to{transform:translateY(0)}}
  }
}

/* ============================================================
   SECTION 02 — the black carries through from section 01, VERA
   sits alone in it, and the paper light bursts out from behind
   her, outrunning the cards. Rides engine.js's existing scrub
   progress; no new scroll system.
   ============================================================ */
#value{padding-top:0}
.orbit-stage{margin-top:0;position:relative;background:var(--bg-dark);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  clip-path:inset(0)}            /* clips the disc without breaking sticky */
#value .ghost-num{color:rgba(247,245,241,.05)}
.orbit-light{position:absolute;left:50%;top:50%;
  width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;
  border-radius:50%;background:var(--paper);
  z-index:0;pointer-events:none;transform-origin:50% 50%;
  transform:scale(1);will-change:transform}
.orbit-js .orbit-light{transform:scale(0)}
#value .wrap > .s-eyebrow{margin-top:var(--pad)}

/* ============================================================
   HERO — centred. This is what lets the black sweep work: the copy
   sits mid-screen, so one viewport of scroll clears it entirely and
   the fill has an empty screen to rise into. No overshoot hacks.
   ============================================================ */
.hero{min-height:100vh;padding:0;position:relative;z-index:1}
.hero > .wrap{min-height:100vh;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:center;text-align:center;padding-top:14vh}
.hero-copy{max-width:960px}
.hero .hero-copy h1{font-size:clamp(44px,6.6vw,100px);line-height:.95;
  max-width:16ch;margin:20px auto 0;text-wrap:balance;position:relative}
.hero .hero-copy .sub{font-size:19px;max-width:54ch;margin:26px auto 0;line-height:1.55}
.hero .hero-copy .cta{margin:34px 0 0;justify-content:center;gap:12px}
.hero .hero-copy .cta .btn{font-size:11.5px;padding:14px 20px}

/* typed runs */
html.hero-intro .hero-copy h1 .ch{opacity:0}
html.hero-intro .hero-copy h1 .ch.on{opacity:1}
.caret{position:absolute;width:3px;background:var(--ink);opacity:.9;
  pointer-events:none;transition:opacity .25s ease}
.caret.blink{animation:caret-blink 1s steps(1) infinite}
.caret.gone{opacity:0}
@keyframes caret-blink{0%,49%{opacity:.9}50%,100%{opacity:0}}

html.hero-intro .nav{opacity:0}
.nav{transition:opacity 1.4s cubic-bezier(.33,1,.68,1)}
html.hero-intro .hero .eyebrow,
html.hero-intro .hero .sub,
html.hero-intro .hero .cta{opacity:0}

@media (prefers-reduced-motion:reduce){
  html.hero-intro .hero .eyebrow,
  html.hero-intro .hero .sub,
  html.hero-intro .hero .cta,
  html.hero-intro .nav{opacity:1}
}

/* ---- framed screenshots lift in from below (wrapper owns it, so the
       inner .shot keeps motion.js's parallax) ---- */
.shot-rise{position:relative}
.frow .shot-rise{margin-right:-5vw}
.frow.flip .shot-rise{margin-right:0;margin-left:-5vw}
.frow .shot-rise > .shot,
.frow.flip .shot-rise > .shot{margin-left:0;margin-right:0}
.shot-rise > .shot.reveal{opacity:1}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .shot-rise{animation:shot-rise linear both;animation-timeline:view();
      animation-range:entry 4% entry 62%}
    @keyframes shot-rise{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:none}}
  }
}
@media (max-width:860px){.frow .shot-rise,.frow.flip .shot-rise{margin-left:0;margin-right:0}}

/* ============================================================
   SECTION 01 — pinned stage. The box rises from the bottom into the
   centre, asks, answers, delivers the verdict; then the scroll drives
   into it and the argument comes through the other side. Box and copy
   share one grid cell, so the zoom can never push layout around.
   ============================================================ */
/* The hero stays entirely paper. What reaches up into it is the BOX, carrying
   its own dark bezel — so the black around it reads as the device frame, not as
   the band arriving early. The band keeps its full sweep below. */
.wn-stage{height:250vh;position:relative;z-index:2}
.wn-stage > .wn{position:sticky;top:0;height:100vh;display:grid;place-items:center;z-index:2}
.wn-stage > .wn > *{grid-area:1/1}
/* the box is its own fixed layer, so its timing is independent of where any
   section starts or ends — that is what kept mis-timing before */
.wn-proof{align-self:start;justify-self:center;width:min(600px,42vw);
  /* margin-top is measured in JS: a fixed gap under the CTAs, so it holds
     on any viewport instead of assuming one height */
  transform-origin:50% 0;z-index:6;will-change:transform}
.wn-copy{justify-self:start;max-width:min(520px,46%);text-align:left;will-change:opacity}
.wn-proof .answer{box-shadow:0 26px 70px rgba(0,0,0,.42)}
.band-dark .answer-note{color:var(--on-dark-3);text-align:center;margin-top:16px}
.band-dark .answer-note a{color:var(--on-dark-2);border-bottom-color:var(--rule-dark)}
.band-dark .wn-copy h2{font-size:clamp(30px,3.2vw,42px);max-width:16ch;margin:14px 0 20px}
.band-dark .wn-copy .lead{font-size:16.5px;max-width:52ch;margin:0 0 16px}
.band-dark .wn-copy .cta{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px}

.tc{opacity:0}
.tc.on{opacity:1}
.tcar{display:inline-block;width:2px;height:.92em;background:currentColor;
  vertical-align:-.08em;margin-left:2px;opacity:.85}
.tcar.blink{animation:caret-blink 1s steps(1) infinite}
.tcar.gone{display:none}

@media (max-width:940px){
  .wn-stage{height:auto}
  .wn-stage > .wn{position:static;height:auto;display:block;padding:var(--pad) 0}
  .wn-stage > .wn > *{grid-area:auto}
  .wn-proof{align-self:auto;justify-self:auto;transform:none;width:auto;margin:0 auto 40px !important}
}
@media (prefers-reduced-motion:reduce){
  .wn-stage{height:auto}
  .wn-stage > .wn{position:static;height:auto;display:block;padding:var(--pad) 0}
  .wn-stage > .wn > *{grid-area:auto}
  .wn-proof{align-self:auto;justify-self:auto;transform:none;width:auto;margin:0 auto 40px !important}
}

/* ---- dot cursor + magnetic CTAs -------------------------------------------
   Difference blend so one dot reads on --paper and on --abyss with no new
   colour. Native cursor is kept over text inputs, where the I-beam matters. */
.has-dot,.has-dot a,.has-dot button,.has-dot .btn,.has-dot .chan{cursor:none}
.has-dot input,.has-dot textarea,.has-dot select{cursor:auto}
.dot{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.85);mix-blend-mode:difference;
  opacity:0;transition:opacity .2s ease,width .22s cubic-bezier(.16,1,.3,1),
              height .22s cubic-bezier(.16,1,.3,1);
  will-change:transform}
.dot.on{opacity:1}
.dot.big{width:34px;height:34px;background:rgba(255,255,255,.55)}
/* buttons ease back when the pointer leaves their field */
.btn{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .2s,background .2s}
@media (prefers-reduced-motion:reduce){ .dot{display:none}
  .has-dot,.has-dot a,.has-dot button,.has-dot .btn,.has-dot .chan{cursor:auto} }

/* ---- 03 · YOUR TEAM ---- */
#team .lead{max-width:640px}

/* ---- SCORE CHART (04) ---- */
.score-chart{margin:56px 0 0;position:relative}
.score-chart svg{width:100%;height:auto;display:block;overflow:visible}
.sc-grid line{stroke:rgba(247,245,241,.10);stroke-width:1}
.sc-grid text,.sc-x text{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  fill:rgba(247,245,241,.38)}
.sc-grid text{text-anchor:end}
.sc-x text{text-anchor:middle}
.sc-flat{fill:none;stroke:rgba(247,245,241,.28);stroke-width:1.5;stroke-dasharray:3 5}
.sc-flatlab{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  fill:rgba(247,245,241,.38);text-anchor:end}
.sc-line{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round}
.sc-area{opacity:0}
.sc-s0{stop-color:var(--signal);stop-opacity:.30}
.sc-s1{stop-color:var(--signal);stop-opacity:0}
.sc-mk circle{fill:var(--signal)}
.sc-mk line{stroke:rgba(184,224,232,.5);stroke-width:1}
.sc-mk text{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  fill:var(--signal);text-anchor:middle}
.sc-mk{opacity:0}
.sc-end circle{fill:var(--paper);opacity:0}
.sc-read{position:absolute;right:0;top:-10px;display:flex;align-items:baseline;gap:10px}
.sc-num{font-family:var(--mono);font-size:44px;line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums}
.sc-unit{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal)}
.score-chart figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:rgba(247,245,241,.38);margin-top:18px}

@media (prefers-reduced-motion:no-preference){
  .sc-line{stroke-dasharray:var(--sc-len,2000);stroke-dashoffset:var(--sc-len,2000)}
  .score-chart.on .sc-line{transition:stroke-dashoffset 2.2s cubic-bezier(.22,.8,.3,1);
    stroke-dashoffset:0}
  .sc-area{transition:opacity .9s ease 1.1s}
  .score-chart.on .sc-area{opacity:1}
  .sc-end circle{transition:opacity .4s ease 2.0s}
  .score-chart.on .sc-end circle{opacity:1}
  .sc-mk{transition:opacity .5s ease}
  .score-chart.on .sc-mk{opacity:1}
  .sc-mk:nth-of-type(1){transition-delay:.75s}
  .sc-mk:nth-of-type(2){transition-delay:1.25s}
  .sc-mk:nth-of-type(3){transition-delay:1.75s}
}
@media (prefers-reduced-motion:reduce){
  .sc-area,.sc-mk,.sc-end circle{opacity:1}
}
@media (max-width:720px){
  .score-chart{margin-top:40px}
  .sc-read{position:static;margin-top:16px}
  .sc-num{font-size:34px}
  .sc-mk text{font-size:9px}
}

/* ---- 03 · TEAM PHOTOGRAPH ---- */
.team-shot{margin:44px 0 0;max-width:100%}
.team-shot img{width:100%;height:auto;display:block;border-radius:var(--r3);
  /* pulled toward the page palette so the frame sits inside the world
     rather than reading as a rectangle dropped onto paper */
  filter:saturate(.92) contrast(1.02)}
.team-shot figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-faint);margin-top:14px;display:flex;align-items:center;gap:10px}
.ts-mark{display:inline-block;padding:3px 7px;border:1px solid var(--rule-soft);
  border-radius:4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
@media (max-width:720px){.team-shot{margin-top:32px}}

/* ---- HERO: STUDIO SWEEP ----
   Not an image. The hero ground is lit like a photographic cyclorama —
   mist wash high on the wall, light pooling where the sweep meets the
   floor, the faintest falloff at the corners. Gives the hero the air of
   the reference photography at zero contrast cost to the headline.
   Safe against the rising black band: --rise-lead is 0vh, so section 01's
   fill never travels up into the hero box. */
.hero::before{
  content:"";position:absolute;top:-72px;left:0;right:0;bottom:0;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(118% 76% at 50% 34%,
      rgba(13,27,31,0) 60%, rgba(13,27,31,.040) 100%),
    radial-gradient(92% 44% at 50% 103%,
      rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 64%),
    linear-gradient(to bottom,
      rgba(222,234,235,.60) 0%,
      rgba(222,234,235,.33) 38%,
      rgba(222,234,235,.07) 70%,
      rgba(222,234,235,0)   88%);
}
.hero > .wrap{position:relative;z-index:1}
@media (max-width:720px){
  .hero::before{background:
    radial-gradient(120% 40% at 50% 102%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(222,234,235,.5) 0%, rgba(222,234,235,0) 82%)}
}

/* ---- 03 · WHAT MAKES US DIFFERENT ---- */
.diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:34px}
.diff{border-top:2px solid var(--ink);padding-top:18px}
.diff h3{font-size:17px;margin-bottom:9px}
@media (min-width:1001px){.diff h3{min-height:2.5em}}
.diff p{font-size:15px;color:var(--ink-muted);line-height:1.55}
#different .lead{max-width:640px}
@media (prefers-reduced-motion:no-preference){
  .diff{transition:border-top-color .3s ease}
  .diff:hover{border-top-color:var(--signal-deep)}
}
@media (max-width:1000px){.diffs{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:720px){.diffs{grid-template-columns:1fr;gap:20px}}

/* ---- FLOATING IMAGE ON PILLAR HOVER ----
   One shared frame, moved with a transform written from rAF. Position, tilt
   and scale all live in that one transform string, so none of them can be
   given a CSS transition (the cascade would fight the loop). Opacity is a
   separate property, so it is safe to transition here. */
.hov-img{position:fixed;top:0;left:0;z-index:9990;pointer-events:none;
  width:300px;opacity:0;transition:opacity .32s ease;will-change:transform,opacity}
.hov-img.on{opacity:1}
.hov-img img{display:block;width:100%;height:auto;border-radius:var(--r2);
  box-shadow:0 24px 60px rgba(13,27,31,.34),0 2px 8px rgba(13,27,31,.18);
  filter:saturate(.9) contrast(1.02)}

/* Only where there is a real pointer to follow. */
@media (hover:none),(pointer:coarse){.hov-img{display:none}}
@media (prefers-reduced-motion:reduce){.hov-img{display:none}}
@media (max-width:900px){.hov-img{display:none}}

/* ---- accordion: an explicit close has to outrank :hover ----
   Same specificity as the .chan:hover rules above, so these win on order.
   Cleared on mouseleave, which makes the latch last exactly as long as the
   pointer stays on the row it closed. */
.chan.chan-shut{background:transparent;border-color:var(--rule-soft)}
.chan.chan-shut h3{color:var(--ink);transform:none}
.chan.chan-shut .ti-tile{background:var(--signal);color:var(--deep)}
.chan.chan-shut .chan-desc p{color:var(--ink-muted)}
.chan.chan-shut .chan-more{transform:none;color:var(--ink-faint)}
.chan.chan-shut .chan-body{grid-template-rows:0fr}
.chan.chan-shut + .chan{border-top-color:var(--rule-soft)}

/* the floating preview steps aside while a row is deliberately open */
body.chan-latched .hov-img{opacity:0}

/* ---- hero: the queue note under the two CTAs ---- */
.hero-fine{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-faint);margin:20px auto 0;max-width:52ch;line-height:1.6}
@media (max-width:720px){.hero-fine{font-size:11px;margin-top:16px}}