/* ══════════════════════════════════════════════════════════════════════════════
   BA-RIVER-01 — "the life of one invoice"
   One continuous river of light carries one invoice down the whole page. The
   canvas paints the atmosphere: the deep troughs, the ribbon, every glow. CSS
   paints the paper, the type and the stations. Nothing here animates anything
   but transform and opacity.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — warm, luminous, paper not screen */
  --paper:#f8f6f2;
  --paper-2:#fffefb;
  --ink:#111621;
  --ink-2:#434b5c;
  --ink-3:#737d90;
  --hair:rgba(17,22,33,.13);
  --hair-2:rgba(17,22,33,.07);

  /* deep acts — the drama budget */
  --deep:#070c1c;
  --deep-ink:#e9eeff;
  --deep-ink-2:#9fb0d4;
  --deep-hair:rgba(180,205,255,.19);

  /* the river's hues — kept in sync with river.js NODE colours */
  --c-cool:#5566ff;
  --c-cyan:#13c6ea;
  --c-lime:#a8e44d;
  --c-gold:#ffcb53;
  --c-mint:#17e3a2;
  --c-rose:#ff4d78;
  --c-violet:#a855f7;
  --c-blue:#4f8cff;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope','Space Grotesk',system-ui,-apple-system,sans-serif;
  --geo:'Space Grotesk','Manrope',system-ui,sans-serif;

  --e:cubic-bezier(.16,.86,.24,1);
  --e-s:cubic-bezier(.33,.92,.2,1);
  --e-o:cubic-bezier(.3,1.3,.45,1);

  --gut:clamp(16px,4.4vw,72px);
  --rail:44px;
  --max:1320px;
  --nav:62px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,.42vw + 14px,17.2px);
  line-height:1.64;
  letter-spacing:-.003em;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(118% 70% at 50% -8%, #fffdf8 0%, rgba(255,253,248,0) 62%),
    radial-gradient(84% 48% at 8% 42%, rgba(101,130,255,.055) 0%, rgba(101,130,255,0) 70%),
    radial-gradient(74% 44% at 96% 76%, rgba(255,186,80,.06) 0%, rgba(255,186,80,0) 70%);
  -webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;font-family:var(--serif);letter-spacing:-.016em}
p,dl,dd,dt{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:2px solid #2f6bff;outline-offset:3px;border-radius:3px}

/* micro-labels: geometric sans with tracking. never a typewriter face. */
.kicker,.tag,.mini-h,.mini-f,.ohead,.flab,.fl-h,.fl-st,.lk,.fl-parts dt,
.cue-t,.cue-s,.foot-b,.mo-lbl,.rail-n,.film-lbl,.veil-word{
  font-family:var(--geo);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.165em;
  font-size:clamp(9.8px,.22vw + 9.2px,11.4px);
  line-height:1.5;
}
/* every number on the page is in the sans, never the serif */
.num,.fnum,.onum,.done-copy{font-family:var(--sans);font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ── the painter ───────────────────────────────────────────────────────────── */
.river-canvas{
  position:fixed;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;
}
.no-js .river-canvas{display:none}
/* every band of content sits above the river */
.nav,main,.foot,.rail{position:relative;z-index:1}

/* the geometry anchors. laid out, measured, invisible. */
.nd{display:block;width:1px;height:1px;opacity:0;pointer-events:none}

/* ── the grand opening ─────────────────────────────────────────────────────── */
.veil{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:
    radial-gradient(70% 50% at 50% 46%, #fffefb 0%, rgba(255,254,251,0) 72%),
    var(--paper);
  transition:opacity .76s var(--e),transform .76s var(--e);
}
.no-js .veil,.veil.off{display:none}
.veil.gone{opacity:0;transform:scale(1.035);pointer-events:none}
.veil-in{display:grid;justify-items:center;gap:26px}
.veil-art{width:26px;height:min(44vh,300px)}
.veil-path{stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 7px rgba(90,130,255,.45))}
.veil.run .veil-path{animation:vdraw 1.15s var(--e) forwards}
@keyframes vdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.veil-word{overflow:hidden;color:var(--ink-2);letter-spacing:.3em}
.veil-word span{display:block;transform:translateY(110%)}
.veil.run .veil-word span{animation:vword .78s var(--e) .62s forwards}
@keyframes vword{to{transform:translateY(0)}}
.veil-skip{
  position:absolute;right:18px;bottom:18px;color:var(--ink-3);
  font-family:var(--geo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--hair);border-radius:999px;
}
.veil-skip:hover{color:var(--ink);border-color:var(--ink-3)}

/* ── nav ───────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;height:var(--nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);
  background:linear-gradient(to bottom,rgba(248,246,242,.985) 0%,rgba(248,246,242,.93) 48%,rgba(248,246,242,.6) 76%,rgba(248,246,242,0));
  backdrop-filter:saturate(1.3) blur(9px);
  -webkit-backdrop-filter:saturate(1.3) blur(9px);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand img{width:26px;height:26px;border-radius:6px;opacity:.95}
.brand-t{font-family:var(--geo);font-weight:600;font-size:12.4px;letter-spacing:.1em;text-transform:uppercase}
.brand-c{
  font-family:var(--geo);font-weight:600;font-size:10px;letter-spacing:.17em;
  padding:3px 7px 2px;border-radius:5px;color:#063;
  background:linear-gradient(140deg,rgba(23,227,162,.3),rgba(19,198,234,.28));
  box-shadow:inset 0 0 0 1px rgba(16,160,120,.3);
}
.navlinks{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.navlinks a{
  text-decoration:none;font-family:var(--geo);font-size:11.6px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  transition:color .3s var(--e),transform .3s var(--e);
}
.navlinks a:hover{color:var(--ink);transform:translateY(-1px)}
.navcta{
  color:var(--ink)!important;padding:7px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--hair),0 2px 10px rgba(20,30,60,.07);
  background:rgba(255,255,255,.7);
}
.navcta:hover{box-shadow:inset 0 0 0 1px rgba(47,107,255,.5),0 5px 18px rgba(30,60,140,.14)}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:min(94vh,860px);
  display:grid;grid-template-rows:1fr auto;align-items:end;
  max-width:var(--max);margin:0 auto;padding:calc(var(--nav) + 4vh) var(--gut) clamp(32px,7vh,76px);
}
.hero>.nd{grid-row:1;justify-self:center;align-self:start}
.hero-mid{position:absolute;left:50%;top:46%;width:1px;height:1px}
.hero-type{grid-row:2;max-width:min(54ch,100%)}
.hero .kicker{color:var(--ink-3);margin-bottom:clamp(14px,2.4vh,22px)}
.hero h1{
  font-size:clamp(38px,7.1vw,86px);line-height:.98;font-weight:300;
  letter-spacing:-.034em;margin-bottom:clamp(16px,2.6vh,26px);
}
.hero h1 em{
  font-style:italic;font-weight:300;
  background:linear-gradient(96deg,#2b3cf0 0%,#12b6e0 38%,#f0a516 74%,#13c58d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-lede{max-width:46ch;color:var(--ink-2);font-size:clamp(15px,.5vw + 14px,18.4px)}
.cue{
  position:absolute;right:var(--gut);bottom:clamp(32px,7vh,76px);
  display:flex;align-items:center;gap:11px;color:var(--ink-3);
}
.cue-r{width:clamp(34px,6vw,62px);height:1px;background:linear-gradient(90deg,var(--hair),rgba(47,107,255,.6));position:relative;overflow:hidden}
.cue-r::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#2f6bff,transparent)}
.motion .cue-r::after{animation:cueslide 2.3s var(--e-s) infinite}
@keyframes cueslide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── the spine: beats and their cards ─────────────────────────────────────── */
.beat{
  position:relative;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.6vw,26px);
  align-content:center;min-height:min(88vh,800px);
  padding:clamp(34px,7vh,92px) var(--gut);
}
.beat>.nd{grid-row:1;justify-self:center;align-self:center}
.beat>.card{grid-row:1}
.b1>.nd{grid-column:3}    .b1>.card{grid-column:5/12}
.b2>.nd{grid-column:10}   .b2>.card{grid-column:2/9}
.b3>.nd{grid-column:5}    .b3>.card{grid-column:7/13}
.b5>.nd{grid-column:2}    .b5>.card{grid-column:4/13}

.card{
  position:relative;border-radius:18px;
  padding:clamp(20px,2.6vw,36px) clamp(20px,2.8vw,40px) clamp(22px,2.8vw,38px);
  background:linear-gradient(176deg,rgba(255,255,255,.975),rgba(253,253,255,.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    0 0 0 1px var(--hair-2),
    0 1px 2px rgba(18,26,48,.05),
    0 18px 46px -22px rgba(18,30,66,.22);
}
.card::after{  /* one surface recipe: a light rim along the top edge */
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.kicker{color:var(--ink-3);display:flex;align-items:baseline;gap:9px}
.kicker .num{
  font-weight:600;font-size:1.02em;letter-spacing:.04em;color:var(--ink);
  padding-right:9px;margin-right:1px;border-right:1px solid var(--hair);
}
.card h2{
  font-size:clamp(24px,2.7vw,40px);line-height:1.07;font-weight:300;
  margin:clamp(12px,1.6vh,18px) 0 clamp(11px,1.5vh,16px);max-width:22ch;
}
.lede{color:var(--ink-2);max-width:54ch}

/* ── the minis: small built illustrations, each labelled ──────────────────── */
.mini{
  margin-top:clamp(18px,2.4vh,26px);padding:16px 18px 14px;border-radius:13px;
  background:linear-gradient(170deg,rgba(247,249,255,.96),rgba(242,245,252,.9));
  box-shadow:inset 0 0 0 1px rgba(30,48,96,.07);
}
.mini-h,.mini-f{color:var(--ink-3)}
.mini-f{margin-top:12px;color:#9a6418}
.docrows{margin-top:12px;display:grid;gap:9px}
.docrows li{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:12px}
.docrows span{font-family:var(--geo);font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.docrows .bar{
  display:block;height:7px;border-radius:4px;
  background:linear-gradient(90deg,rgba(60,78,120,.19),rgba(60,78,120,.07));
  transform-origin:left center;
}
.motion .lit .docrows .bar{animation:barsweep 3.4s var(--e-s) infinite}
.docrows li:nth-child(2) .bar{animation-delay:.22s!important}
.docrows li:nth-child(3) .bar{animation-delay:.44s!important}
@keyframes barsweep{0%,70%,100%{transform:scaleX(1);opacity:1}35%{transform:scaleX(.86);opacity:.74}}

.lifts{display:grid;gap:10px}
.lifts li{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.8);
  box-shadow:inset 0 0 0 1px rgba(30,48,96,.08);
  transform:translateX(0);transition:transform .6s var(--e),box-shadow .6s var(--e);
}
.motion .lit .lifts li{box-shadow:inset 0 0 0 1px rgba(19,198,234,.42),0 4px 14px -8px rgba(19,150,234,.4)}
.motion .lit .lifts li:nth-child(1){transition-delay:.1s}
.motion .lit .lifts li:nth-child(2){transition-delay:.22s}
.motion .lit .lifts li:nth-child(3){transition-delay:.34s}
.lk{color:var(--ink-3);min-width:74px}
.lv{font-size:14.2px;color:var(--ink)}

.ruleset{display:grid;gap:10px;counter-reset:r}
.ruleset li{
  position:relative;padding-left:26px;font-size:15px;color:var(--ink-2);
}
.ruleset li b{color:var(--ink);font-weight:600}
.ruleset li::before{
  counter-increment:r;content:counter(r);position:absolute;left:0;top:.18em;
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--geo);font-size:9.6px;font-weight:600;color:#7a4a05;
  background:linear-gradient(140deg,rgba(255,203,83,.55),rgba(255,160,36,.3));
  box-shadow:inset 0 0 0 1px rgba(160,110,12,.3);
}
.tag{
  margin-top:14px;color:var(--ink-3);opacity:.9;
  display:inline-flex;align-items:center;gap:7px;
}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex:none}

/* ── 04 the fork: the deep act ────────────────────────────────────────────── */
.act{position:relative;padding:clamp(52px,11vh,132px) 0}
.act-head{max-width:62ch;margin:0 auto clamp(18px,3vh,34px);text-align:center}
.act-head.tight{text-align:left;margin:0}
.act-head h2{font-size:clamp(25px,3.1vw,46px);line-height:1.05;margin:14px auto 14px;max-width:24ch}
.act-head.tight h2{margin-left:0}
.act-head .kicker{justify-content:center}
.act-head.tight .kicker{justify-content:flex-start}
.act-head .lede{margin:0 auto;text-align:center}
.act-head.tight .lede{margin:0;text-align:left}

.deep{color:var(--deep-ink)}
/* without the canvas (no JS, or a failed context) the dark ground is CSS's job */
.deep{background:radial-gradient(120% 86% at 50% 42%,#101a3a 0%,#070c1c 68%)}
.canvasbg .deep{background:none}
.deep .kicker,.deep .tag,.deep .mini-h{color:var(--deep-ink-2)}
.deep .kicker .num{color:#fff;border-right-color:var(--deep-hair)}
.deep .lede{color:#b9c8ea}
.deep .card{
  background:linear-gradient(176deg,rgba(13,21,48,.9),rgba(8,13,33,.84));
  box-shadow:
    inset 0 0 0 1px rgba(150,185,255,.17),
    0 0 0 1px rgba(0,0,0,.2),
    0 26px 70px -30px rgba(0,0,0,.8);
}
.deep .card::after{background:linear-gradient(90deg,transparent,rgba(190,215,255,.5),transparent)}

.forkgap,.fangap,.endgap{display:flex;align-items:center;justify-content:center;height:clamp(58px,10vh,122px)}
.forkgap,.fangap.tall,.endgap.tall{height:clamp(84px,14vh,176px)}
.forkhead{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(130px,15vw,250px);
  gap:clamp(18px,4vw,64px);align-items:center;
}
.forkhead>.nd{justify-self:center;align-self:center}
.forkgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3.6vw,72px)}
.out{display:grid;align-items:center;gap:clamp(12px,2.2vw,40px)}
.out.a{grid-template-columns:auto 1fr}
.out.a>.nd{grid-column:1;grid-row:1}
.out.a>.card{grid-column:2;grid-row:1}
.out.b{grid-template-columns:1fr auto}
.out.b>.nd{grid-column:2;grid-row:1}
.out.b>.card{grid-column:1;grid-row:1}
.ocard{display:grid;gap:4px}
.ohead{color:var(--deep-ink-2)}
.out.a .ohead{color:#5fe9bd}
.out.b .ohead{color:#ff8ca8}
.onum{
  font-size:clamp(40px,5.6vw,76px);line-height:1;font-weight:300;letter-spacing:-.04em;
  margin:4px 0 6px;
}
.onum b{font-size:.42em;font-weight:500;letter-spacing:-.01em;margin-left:.08em;opacity:.8}
.out.a .onum{color:#2ef0ae;text-shadow:0 0 34px rgba(23,227,162,.42)}
.out.b .onum{color:#ff5f86;text-shadow:0 0 34px rgba(255,77,120,.4)}
.olede{color:#b9c8ea;font-size:15px;max-width:34ch}
.forktag{
  display:flex;justify-content:center;margin:clamp(18px,3vh,32px) auto 0;width:max-content;
  padding:7px 15px;border-radius:999px;color:#c3d2f2;
  background:rgba(6,11,26,.7);box-shadow:inset 0 0 0 1px rgba(150,185,255,.2);
}

/* ── 05 settled: the measured figures ─────────────────────────────────────── */
.figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(20px,2.8vh,30px);
}
.figs li{
  padding:14px 16px 13px;border-radius:12px;
  background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(246,249,255,.76));
  box-shadow:inset 0 0 0 1px rgba(30,48,96,.08);
}
.figs.split{margin-top:12px}
.figs .good{box-shadow:inset 0 0 0 1px rgba(19,197,141,.4),0 8px 22px -14px rgba(19,197,141,.5)}
.figs .warn{box-shadow:inset 0 0 0 1px rgba(255,150,60,.42),0 8px 22px -14px rgba(255,150,60,.5)}
.fnum{
  display:block;font-size:clamp(24px,2.5vw,34px);font-weight:500;line-height:1.05;
  letter-spacing:-.028em;margin-bottom:7px;
}
.figs .good .fnum{color:#0f9a71}
.figs .warn .fnum{color:#b3680c}
.flab{display:block;color:var(--ink-3);letter-spacing:.11em;line-height:1.45}

/* ── 06 the fleet ─────────────────────────────────────────────────────────── */
.fleetgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.1vw,16px);align-items:stretch}
.fl{display:grid;grid-template-rows:30px 1fr 30px;justify-items:center}
.fl>.nd{justify-self:center;align-self:center;grid-row:1}
.fl.f3>.nd{grid-row:3}
.fl>.card{grid-row:2}
.fcard{
  width:100%;height:100%;border-radius:15px;padding:16px 15px 15px;
  display:grid;align-content:start;gap:7px;
  background:linear-gradient(176deg,rgba(255,255,255,.985),rgba(252,253,255,.96));
}
.fl.f3>.card{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.9),
  0 0 0 1.5px rgba(23,227,162,.45),
  0 1px 2px rgba(18,26,48,.05),
  0 22px 54px -24px rgba(16,160,120,.45)}
.fl-h{font-size:11.4px;letter-spacing:.14em}
.f1 .fl-h{color:#a9670a}
.f2 .fl-h{color:#2d63c9}
.f3 .fl-h{color:#0d9d74}
.f4 .fl-h{color:#c23a63}
.f5 .fl-h{color:#7c3fd0}
.fl-who{font-size:13px;color:var(--ink);line-height:1.32;min-height:2.6em}
.fl-parts{display:grid;gap:5px;margin-top:4px;padding-top:10px;border-top:1px solid var(--hair-2)}
.fl-parts dt{color:var(--ink-3);font-size:9.4px;letter-spacing:.13em}
.fl-parts dd{font-size:12.6px;line-height:1.38;color:var(--ink-2);margin-bottom:3px}
.fl-st{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:9.6px;letter-spacing:.14em;color:var(--ink-3);
}
.fl-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.fl-st.on{color:#0d9d74}
.fl-st.soon{color:#a9670a}
.fl-st.build{color:#2d63c9}
.fl-st.demo{color:var(--ink-3)}

/* ── proof: the recording ─────────────────────────────────────────────────── */
.proofgrid{display:grid;grid-template-columns:minmax(300px,1fr) 1.3fr;gap:clamp(22px,3.2vw,52px);align-items:center}
.proof-side{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5.4vw,96px);align-items:center}
.film{margin:0;display:grid;gap:12px}
.film-frame{
  position:relative;border-radius:14px;overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(160,195,255,.2),
    0 30px 80px -34px rgba(0,0,0,.9);
  background:#05070f;
}
.film-frame video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.97}
.film-btn{
  position:absolute;inset:auto auto 14px 14px;display:flex;align-items:center;gap:10px;
  padding:10px 16px 10px 13px;border-radius:999px;color:#eaf1ff;
  background:rgba(8,13,30,.68);
  box-shadow:inset 0 0 0 1px rgba(170,200,255,.28);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:transform .4s var(--e),box-shadow .4s var(--e),background .4s var(--e);
}
.film-btn:hover{transform:translateY(-2px);background:rgba(10,18,42,.8);box-shadow:inset 0 0 0 1px rgba(23,227,162,.5),0 10px 26px -12px rgba(23,227,162,.5)}
.film-ico{width:11px;height:13px;flex:none;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.film-btn[aria-pressed="true"] .film-ico{clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0);box-shadow:inset -7px 0 0 0 currentColor}
.film figcaption{color:var(--deep-ink-2)}

/* ── start: the warm light at the end ────────────────────────────────────── */
.start{padding-bottom:clamp(40px,8vh,100px)}
.startcard{max-width:720px;margin:0 auto}
.startcard h2{font-size:clamp(23px,2.6vw,38px);max-width:24ch}
.start-form .lede,.start-done .lede{max-width:50ch}
form{display:grid;gap:14px;margin-top:clamp(18px,2.6vh,28px)}
.frow{display:grid;gap:7px}
.frow label{font-family:var(--geo);font-size:10.6px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.frow input,.frow textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:0;resize:vertical;
  background:rgba(252,253,255,.92);
  box-shadow:inset 0 0 0 1px rgba(30,48,96,.14);
  transition:box-shadow .34s var(--e),transform .34s var(--e);
}
.frow input:focus,.frow textarea:focus{
  outline:none;transform:translateY(-1px);
  box-shadow:inset 0 0 0 1.5px rgba(47,107,255,.65),0 8px 22px -12px rgba(47,107,255,.5);
}
.frow textarea::placeholder{color:#a4adbf}
.ferr{color:#b3261e;font-size:13.6px}
.btn{
  justify-self:start;padding:13px 24px;border-radius:999px;color:#06130f;font-weight:600;
  font-family:var(--geo);font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(135deg,#2ef0ae,#ffd05a);
  box-shadow:0 10px 30px -12px rgba(30,200,150,.7),inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .36s var(--e-o),box-shadow .36s var(--e),filter .36s var(--e);
}
.btn:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 16px 40px -14px rgba(30,200,150,.85),inset 0 0 0 1px rgba(255,255,255,.55)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.ghost{
  background:none;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.btn.ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.fnote{color:var(--ink-3);font-size:13.4px;max-width:46ch}
.fnote a,.start-done a{color:#1f5bd8;text-decoration-thickness:1px;text-underline-offset:3px}
.start-done{display:grid;gap:12px;justify-items:start}
.done-mark{width:46px;height:46px;color:#14b584}
.dm-ring{stroke:rgba(20,181,132,.35)}
.dm-tick{stroke:#14b584;stroke-dasharray:1 1;stroke-dashoffset:0}
.motion .start-done .dm-tick{stroke-dashoffset:1;animation:tick .62s var(--e) .08s forwards}
.motion .start-done .dm-ring{transform-origin:50% 50%;animation:ring .7s var(--e-o) forwards}
@keyframes tick{to{stroke-dashoffset:0}}
@keyframes ring{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.done-copy{
  margin:4px 0 6px;padding:14px 16px;border-radius:11px;width:100%;
  font-size:12.8px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  color:var(--ink-2);background:rgba(246,249,255,.92);
  box-shadow:inset 0 0 0 1px rgba(30,48,96,.09);
}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot{padding:0 0 clamp(96px,14vh,150px)}
.footin{display:grid;gap:10px;justify-items:center;text-align:center}
.foot-b{color:var(--ink)}
.foot-n{color:var(--ink-3);font-size:13.4px;max-width:58ch}
.foot-l a{color:#1f5bd8;font-size:14px;text-underline-offset:3px}

/* ── the narrator's controls ──────────────────────────────────────────────── */
.rail{
  position:fixed;left:50%;bottom:clamp(12px,2.4vh,22px);z-index:40;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;
  padding:6px 8px;border-radius:999px;max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px var(--hair-2),0 14px 40px -16px rgba(16,28,60,.4),inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter:saturate(1.4) blur(13px);-webkit-backdrop-filter:saturate(1.4) blur(13px);
}
.no-js .rail{display:none}
.rail-steps{display:flex;align-items:center;gap:2px;min-width:0}
.rail-steps li{display:flex}
.rail-b{
  display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  color:var(--ink-3);transition:color .34s var(--e),background .34s var(--e),transform .34s var(--e);
}
.rail-b:hover{color:var(--ink);transform:translateY(-1px)}
.rail-dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;opacity:.42;transition:opacity .34s var(--e),transform .34s var(--e-o)}
.rail-n{display:none;white-space:nowrap}
.rail-b[aria-current="true"]{color:var(--ink);background:rgba(20,32,66,.065)}
.rail-b[aria-current="true"] .rail-dot{opacity:1;transform:scale(1.42)}
.rail-b[aria-current="true"] .rail-n{display:inline}
.rail-arrow{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ink-3);
  transition:color .3s var(--e),background .3s var(--e)
}
.rail-arrow:hover{color:var(--ink);background:rgba(20,32,66,.07)}
.rail-arrow svg{width:15px;height:15px}
.rail-arrow[disabled]{opacity:.3;cursor:default}
.rail-mo{
  display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;
  margin-left:4px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:color .3s var(--e),box-shadow .3s var(--e)
}
.rail-mo:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.mo-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;transition:opacity .3s var(--e),box-shadow .3s var(--e)}
.rail-mo[aria-pressed="true"]{color:#0d9d74}
.rail-mo[aria-pressed="true"] .mo-dot{opacity:1;box-shadow:0 0 9px 1px rgba(23,227,162,.8)}
.rail-live{position:absolute;left:-9999px}

/* ══ motion states ═════════════════════════════════════════════════════════
   Default (no JS, no class) = everything fully visible. JS opts in to one of
   the two cuts. Neither cut ever hides content: the dimmest a station gets is
   still readable body text.                                                  */
.motion .card,.motion .act-head,.motion .figs li,.motion .mini{
  transition:opacity .72s var(--e),transform .72s var(--e);
}
.motion .beat>.card,.motion .act:not(.lit) .act-head{opacity:.56}
.motion .beat>.card{transform:translateY(16px)}
.motion .beat.lit>.card{opacity:1;transform:translateY(0)}
.motion .beat.past>.card{opacity:.68;transform:translateY(0)}
.motion .act .act-head{transform:translateY(14px)}
.motion .act.lit .act-head{opacity:1;transform:translateY(0)}
.motion .act.past .act-head{opacity:.62;transform:translateY(0)}
.motion .out>.card,.motion .fl>.card,.motion .film,.motion .startcard,.motion .forktag{
  opacity:.52;transform:translateY(18px);
  transition:opacity .76s var(--e),transform .76s var(--e);
}
.motion .out.lit>.card,.motion .fl.lit>.card,.motion .lit .film,
.motion .lit.startcard,.motion .lit .forktag{opacity:1;transform:translateY(0)}
.motion .out.past>.card,.motion .fl.past>.card,.motion .past .film{opacity:.74;transform:translateY(0)}
/* staggered sequential entrances — never an instant load */
.motion .out.a>.card{transition-delay:.06s}
.motion .out.b>.card{transition-delay:.2s}
.motion .f1>.card{transition-delay:.04s}
.motion .f2>.card{transition-delay:.13s}
.motion .f3>.card{transition-delay:.22s}
.motion .f4>.card{transition-delay:.31s}
.motion .f5>.card{transition-delay:.4s}
.motion .figs li{opacity:0;transform:translateY(12px)}
.motion .lit .figs li{opacity:1;transform:translateY(0)}
.motion .lit .figs li:nth-child(1){transition-delay:.12s}
.motion .lit .figs li:nth-child(2){transition-delay:.22s}
.motion .lit .figs li:nth-child(3){transition-delay:.32s}
.motion .hero-type>*{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.motion.ready .hero-type>*{opacity:1;transform:translateY(0)}
.motion.ready .hero-type>*:nth-child(1){transition-delay:.1s}
.motion.ready .hero-type>*:nth-child(2){transition-delay:.22s}
.motion.ready .hero-type>*:nth-child(3){transition-delay:.38s}
.motion .cue{opacity:0;transition:opacity .9s var(--e) .8s}
.motion.ready .cue{opacity:1}

/* the stepped cut: discrete states, no transitions, nothing hidden */
.stepped{scroll-behavior:auto}
.stepped .beat>.card,.stepped .act .act-head,.stepped .out>.card,
.stepped .fl>.card,.stepped .film,.stepped .forktag{opacity:.7}
.stepped .lit>.card,.stepped .lit .act-head,.stepped .out.lit>.card,
.stepped .fl.lit>.card,.stepped .lit .film,.stepped .lit .forktag{opacity:1}
.stepped .beat.lit>.card{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.8),
  0 0 0 1.5px rgba(47,107,255,.34),
  0 18px 46px -22px rgba(18,30,66,.22)}
.stepped .deep .lit>.card{box-shadow:
  inset 0 0 0 1px rgba(150,185,255,.3),
  0 0 0 1.5px rgba(23,227,162,.4),
  0 26px 70px -30px rgba(0,0,0,.8)}

/* ── responsive: the river becomes a transit line down the left rail ─────── */
@media (max-width:1100px){
  .proofgrid{grid-template-columns:1fr;gap:clamp(20px,4vh,40px)}
  .fleetgrid{grid-template-columns:repeat(3,1fr);row-gap:clamp(14px,2.4vh,24px)}
  .fl:nth-child(4){grid-column:1}
}
@media (max-width:860px){
  :root{--nav:56px}
  .beat{grid-template-columns:var(--rail) 1fr;min-height:auto;column-gap:clamp(10px,2.6vw,18px);padding:clamp(26px,5vh,54px) var(--gut)}
  .beat>.nd{grid-column:1!important}
  .beat>.card{grid-column:2!important}
  .hero{min-height:min(88vh,760px)}
  .hero-mid{top:40%}
  .cue{position:static;grid-row:3;margin-top:22px;justify-content:flex-start}
  .forkgrid{grid-template-columns:1fr;gap:clamp(14px,3vh,26px)}
  .out.a,.out.b{grid-template-columns:var(--rail) 1fr;column-gap:clamp(10px,2.6vw,18px)}
  .out.a>.nd,.out.b>.nd{grid-column:1;grid-row:1}
  .out.a>.card,.out.b>.card{grid-column:2;grid-row:1}
  .fleetgrid{grid-template-columns:1fr;gap:12px}
  .fl{grid-template-columns:var(--rail) 1fr;grid-template-rows:auto;column-gap:clamp(10px,2.6vw,18px);align-items:center}
  .fl>.nd,.fl.f3>.nd{grid-column:1;grid-row:1;justify-self:center}
  .fl>.card{grid-column:2;grid-row:1}
  .fl:nth-child(4){grid-column:auto}
  .fl-who{min-height:0}
  .proof-side{grid-template-columns:var(--rail) 1fr;column-gap:clamp(10px,2.6vw,18px)}
  .forkhead{grid-template-columns:var(--rail) 1fr;column-gap:clamp(10px,2.6vw,18px)}
  .forkhead>.nd{grid-column:1;grid-row:1}
  .forkhead>.act-head{grid-column:2;grid-row:1}
  .act-head,.act-head .lede{text-align:left;margin-left:0;margin-right:0}
  .act-head .kicker{justify-content:flex-start}
  .act-head h2{margin-left:0}
  /* every act header clears the transit rail */
  .fleet .act-head,.forktag{margin-left:calc(var(--rail) + clamp(10px,2.6vw,18px))}
  .forktag{margin-right:0}
  .figs{grid-template-columns:1fr 1fr}
  .forkgap,.fangap,.endgap{justify-content:flex-start;padding-left:calc(var(--rail)/2);height:clamp(46px,8vh,80px)}
  .forkgap,.fangap.tall,.endgap.tall{height:clamp(62px,11vh,110px)}
  .foot .endgap{padding-left:calc(var(--gut) + var(--rail)/2)}
  .rail{gap:2px;padding:5px 6px}
  .rail-mo .mo-lbl{display:none}
  .rail-mo{padding:7px 10px}
}
@media (max-width:620px){
  .navlinks a:not(.navcta){display:none}
  .brand-t{font-size:11.2px}
}
@media (max-width:380px){
  .brand-t{display:none}
}
@media (max-width:420px){
  :root{--rail:38px}
  .figs{grid-template-columns:1fr}
  .card{border-radius:15px}
  .onum{font-size:clamp(36px,13vw,54px)}
}

/* a last-resort net: if JS never runs, honour the OS setting by killing the
   decorative loops outright. nothing is hidden either way. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .veil{display:none}
  .cue-r::after,.docrows .bar{animation:none!important}
  .motion .card,.motion .act-head,.motion .figs li,.motion .mini,
  .motion .out>.card,.motion .fl>.card,.motion .film,.motion .startcard{transition-duration:.001s}
}