/* ============================================================
   The AI Adoption — home, GRANOLA-SPACE (full page).
   Same locked system (white editorial · navy trust · DM Sans ·
   square geometry · motion). What changed vs the live home:
   no framed column, doubled vertical air, one idea per screen,
   two soft cream breathers instead of hard lines, centred
   statements at the reveal moments.
   ============================================================ */

@font-face{
  font-family:"DM Sans";
  src:url("fonts/DMSans.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/DMSans-Italic.woff2") format("woff2-variations");
  font-weight:400 700; font-style:italic; font-display:swap;
}

:root{
  --white:#ffffff;
  --cream:#f4f1ea;
  --cream-2:#efe9dd;
  --night:#04141f;
  --navy:#003049;
  --navy-2:#1d3557;
  --navy-3:#193c5a;
  --steel:#457b9d;
  --slate:#778da9;
  --petrol:#62919f;
  --azure:#1891c5;
  --teal:#005f73;
  --sky:#b7cedd;
  --sky-soft:#e6eef4;
  --text:#233642;
  --muted:#5d7080;
  --faint:#8ba0ac;
  --line:rgba(0,48,73,0.12);
  --line-strong:rgba(0,48,73,0.20);

  --sans:"DM Sans","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(1.35rem,5vw,4.5rem);
  --col:78rem;
  /* GRANOLA MOVE #1 — vertical air roughly doubled */
  --section:clamp(4.8rem,8vw,8.8rem);
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;background:var(--white);scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--sans);font-size:1.05rem;line-height:1.65;font-weight:420;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3{color:var(--navy);margin:0;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-0.025em;max-width:17ch}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--azure)}
h2{font-size:clamp(1.85rem,3.4vw,3rem);line-height:1.07;letter-spacing:-0.022em;max-width:20ch}
h3{font-size:clamp(1.2rem,0.7vw + 1rem,1.55rem);line-height:1.25;letter-spacing:-0.015em;font-weight:600}
p{margin:0;max-width:62ch}

.lede{font-size:clamp(1.16rem,1vw + 0.85rem,1.45rem);line-height:1.5;letter-spacing:-0.006em;
  color:var(--muted);max-width:46ch;font-weight:430}

/* ---------- layout: OPEN column, GRANOLA MOVE #2 — no border-inline frame ---------- */
.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad);position:relative}
.section > .wrap{padding-block:var(--section)}
.section-head{margin-bottom:clamp(2rem,4vw,3.2rem)}

/* ---------- skip ---------- */
.skip{position:fixed;top:1rem;left:1rem;transform:translateY(-300%);background:var(--navy);color:#fff;
  padding:0.6em 1.1em;text-decoration:none;font-size:0.92rem;font-weight:560;z-index:60;
  transition:transform 0.25s var(--ease)}
.skip:focus{transform:translateY(0)}

/* ---------- header ---------- */
.site-head{position:fixed;top:clamp(0.7rem,2vw,1.15rem);left:0;right:0;z-index:50;pointer-events:none}
.masthead{pointer-events:auto;max-width:calc(var(--col) - 2rem);margin-inline:auto;
  width:calc(100% - 2*clamp(1rem,3vw,2rem));display:flex;align-items:center;gap:1rem;
  padding:0.5rem 0.5rem 0.5rem 1.05rem;background:transparent;border:0;
  transition:box-shadow 0.45s var(--ease),background-color 0.45s var(--ease),backdrop-filter 0.45s var(--ease)}
.is-scrolled .masthead{background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 16px 40px -24px rgba(0,48,73,0.3)}
.brand{display:inline-flex;align-items:center;gap:0.6rem;font-weight:600;font-size:1rem;
  letter-spacing:-0.015em;color:var(--navy);text-decoration:none;white-space:nowrap}
.brand-mark{width:1.5rem;height:1.5rem;flex:none;display:block}
.site-nav{display:flex;align-items:center;gap:clamp(0.15rem,1vw,0.5rem);margin-left:auto}
.site-nav > a:not(.btn){color:var(--text);text-decoration:none;font-size:0.95rem;font-weight:470;
  padding:0.45em 0.8em;transition:color 0.18s var(--ease),background-color 0.18s var(--ease)}
.site-nav > a:not(.btn):hover{color:var(--navy);background:rgba(0,48,73,0.05)}

.nav-drawer{display:none;position:relative;margin-left:auto}
.nav-drawer summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:2.6rem;height:2.6rem}
.nav-drawer summary::-webkit-details-marker{display:none}
.drawer-icon{position:relative;width:1.05rem;height:0.7rem}
.drawer-icon::before,.drawer-icon::after{content:"";position:absolute;left:0;width:100%;height:1.6px;
  background:var(--navy);transition:transform 0.35s var(--ease)}
.drawer-icon::before{top:0}.drawer-icon::after{bottom:0}
.nav-drawer[open] .drawer-icon::before{transform:translateY(0.31rem) rotate(45deg)}
.nav-drawer[open] .drawer-icon::after{transform:translateY(-0.31rem) rotate(-45deg)}
.drawer-panel{position:absolute;top:calc(100% + 0.8rem);right:-0.25rem;min-width:13.5rem;display:grid;gap:0.15rem;
  background:rgba(255,255,255,0.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line);padding:0.6rem;box-shadow:0 24px 48px -28px rgba(0,48,73,0.4)}
.drawer-panel a{text-decoration:none;color:var(--navy);font-weight:500;font-size:1rem;padding:0.7em 0.9em;
  transition:background-color 0.18s var(--ease)}
.drawer-panel a:hover{background:rgba(0,48,73,0.05)}
.drawer-cta{display:none;background:var(--navy)!important;color:#fff!important;text-align:center;margin-top:0.35rem;font-weight:560}
@media(max-width:47.99em){
  .site-nav > a:not(.btn){display:none}
  .nav-drawer{display:block}
}
@media(max-width:26.24em){
  .site-nav > .btn{display:none}
  .drawer-cta{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:0.65rem;background:var(--navy);color:#fff;
  font-size:0.98rem;font-weight:540;letter-spacing:-0.004em;text-decoration:none;white-space:nowrap;
  padding:0.85rem 1.25rem;line-height:1.15;border:1px solid var(--navy);
  transition:transform 0.2s var(--ease),background-color 0.2s var(--ease),border-color 0.2s var(--ease)}
.btn:hover{background:var(--navy-3);border-color:var(--navy-3);transform:translate(1px,-1px)}
.btn:active{transform:none}
.btn svg{width:0.85rem;height:0.85rem;transition:transform 0.25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{padding:0.56rem 1rem;font-size:0.9rem}
.btn-light{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-light:hover{background:var(--sky-soft);border-color:var(--sky-soft);color:var(--navy)}
.textlink{font-weight:530;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;
  gap:0.5rem;padding-bottom:0.16rem;border-bottom:1px solid var(--line-strong);transition:border-color 0.2s var(--ease),color 0.2s var(--ease)}
.textlink:hover{border-color:var(--azure);color:var(--azure)}
.textlink svg{width:0.8rem;height:0.8rem;transition:transform 0.25s var(--ease)}
.textlink:hover svg{transform:translateX(3px)}

/* ---------- hero: more air, no frame ---------- */
.hero{position:relative;min-height:94svh;display:grid;align-content:center;overflow:hidden}
.hero > .wrap{position:relative;z-index:2;padding-top:clamp(8rem,15vh,11rem);padding-bottom:clamp(4rem,9vh,7rem);
  display:grid;gap:clamp(1.8rem,3.5vw,2.8rem)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:0.2rem}
.hero-cta{display:flex;align-items:center;gap:clamp(1rem,3vw,1.8rem);flex-wrap:wrap;margin-top:0.9rem}
@media(max-width:34em){.hero-cta{flex-direction:column;align-items:flex-start;gap:1.1rem}}

.hero-bird{position:absolute;z-index:1;pointer-events:none;user-select:none;
  top:clamp(3rem,15vh,10.5rem);right:clamp(-7vw,-3vw,-1rem);width:min(72vw,70rem);opacity:.95}
.hero-bird img{display:block;width:100%;height:auto}
@media(max-width:60em){.hero-bird{top:4vh;right:-8vw;width:96vw;opacity:.8}}
@media(max-width:47.99em){.hero-bird{top:3vh;right:-6vw;width:108vw;opacity:.55}}

/* ---------- proof bar: quieter, more air, no hard block borders ---------- */
.proof{background:var(--white)}
.proof > .wrap{display:flex;align-items:center;gap:clamp(1.2rem,4vw,3.5rem);flex-wrap:wrap;
  padding-block:clamp(2.4rem,4vw,3.4rem);border-top:1px solid var(--line)}
.proof .lab{font-size:0.85rem;color:var(--faint);font-weight:460;max-width:15ch;line-height:1.35}
.marks{display:flex;align-items:center;gap:clamp(1.4rem,4vw,3.4rem);flex-wrap:wrap}
.logo{height:clamp(31px,3vw,42px);width:auto;display:block;opacity:0.9;transition:opacity 0.25s var(--ease)}
.logo:hover{opacity:1}
.lg-mck{height:clamp(24px,2.4vw,32px)}
.lg-rk{height:clamp(34px,3.4vw,46px)}

/* ============================================================
   BREATHER — full-bleed cream, one idea, centred, huge air,
   product isolated below. Used for problem + live register.
   ============================================================ */
.breather{background:var(--cream)}
.breather > .wrap{padding-block:clamp(5.6rem,9.6vw,10.4rem);text-align:center;display:grid;
  justify-items:center;gap:clamp(1.4rem,2.6vw,2.1rem)}
.breather .statement{font-size:clamp(2.1rem,2.6vw + 1.1rem,3.5rem);line-height:1.1;
  letter-spacing:-0.024em;font-weight:600;color:var(--navy);max-width:24ch;margin:0;text-wrap:balance}
.breather .statement em{font-style:italic;font-weight:500;color:var(--azure)}
.breather .say{color:var(--muted);font-size:clamp(1.1rem,0.6vw + 0.95rem,1.32rem);
  line-height:1.5;max-width:46ch;margin:0;text-wrap:pretty}
.breather-visual{margin-top:clamp(3rem,7vw,5.5rem);width:min(100%,54rem);justify-self:center;
  border:1px solid var(--line);background:var(--white);box-shadow:0 50px 100px -60px rgba(0,48,73,0.5)}
.breather-visual img{width:100%;height:auto;display:block}

/* ============================================================
   WHAT CHANGES — before / after + gains. Same content, loosened:
   more air around the block, gains breathe more.
   ============================================================ */
.changes .section-head h2{max-width:16ch}
.changes .ba{margin-top:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);
  background:linear-gradient(180deg,#fbfdfe,#f3f7fb);padding:clamp(1.6rem,3.5vw,3.25rem);
  display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
@media(min-width:64em){
  .changes .ba{grid-template-columns:minmax(0,1fr) clamp(5rem,10vw,9rem) minmax(0,1.18fr);align-items:center;gap:clamp(1.2rem,2.8vw,2.4rem)}
}
.ba-cap{font-size:0.85rem;color:var(--muted);margin:0 0 1.1rem;display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;line-height:1.3}
.ba-tag{font-size:0.7rem;font-weight:600;letter-spacing:0.02em;color:var(--slate);background:rgba(0,48,73,0.06);padding:0.28em 0.7em}
.ba-tag.after{color:var(--azure);background:rgba(24,151,197,0.1)}

.mess{display:grid;gap:0.7rem}
@media(min-width:26em){.mess{grid-template-columns:1fr 1fr}}
.mcard{display:flex;align-items:center;gap:0.6rem;background:var(--white);border:1px solid var(--line);
  padding:0.6rem 0.75rem;box-shadow:0 10px 22px -18px rgba(0,48,73,0.45)}
.mcard b{display:block;font-size:0.82rem;color:var(--navy);font-weight:600;line-height:1.2}
.mcard span:not(.pill):not(.alert):not(.avs){display:block;font-size:0.72rem;color:var(--muted);line-height:1.25}
.mcard .mic{width:1.4rem;height:1.4rem;color:var(--slate);flex:none}
.mcard .pill{margin-left:auto;font-size:0.6rem;font-weight:600;color:var(--azure);background:rgba(24,151,197,0.12);padding:0.2em 0.45em;flex:none}
.mcard .alert{margin-left:auto;width:1.1rem;height:1.1rem;display:grid;place-items:center;background:#df6b3c;color:#fff;font-size:0.66rem;font-weight:700;border-radius:50%;flex:none}
.mcard .bars{height:1.7rem;width:auto;margin-left:auto;flex:none}
.mcard .bars rect{fill:var(--sky)}
.mcard .bars rect:nth-child(even){fill:var(--steel)}
.mcard .avs{margin-left:auto;display:inline-flex;align-items:center;flex:none}
.mcard .avs i{width:1.3rem;height:1.3rem;border-radius:50%;border:2px solid var(--white);margin-left:-0.45rem;background:linear-gradient(135deg,var(--steel),var(--sky))}
.mcard .avs i:first-child{margin-left:0}
.mcard .avs i:nth-child(2){background:linear-gradient(135deg,var(--navy-3),var(--steel))}
.mcard .avs i:nth-child(3){background:linear-gradient(135deg,var(--petrol),var(--sky))}
.mcard .avs em{margin-left:0.35rem;font-size:0.6rem;font-weight:600;color:var(--azure);font-style:normal}
.mcard.note{background:#fdf7e6;border-color:#efe1bb}
.mcard.c1{transform:rotate(-1deg)}
.mcard.c2{transform:rotate(0.8deg)}
.mcard.c3{transform:rotate(-0.6deg)}
.mcard.c5{transform:rotate(0.7deg)}
.mcard.c6{transform:rotate(-0.9deg)}
.mcard.c4{transform:rotate(1deg)}

.ba-hub{align-self:stretch;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:9rem}
.wires{width:100%;height:100%}
.wires path{fill:none;stroke-linecap:round}
.wires-in path{stroke:var(--slate);stroke-width:1.1;stroke-dasharray:2.5 3.5;opacity:0.5;vector-effect:non-scaling-stroke}
.wires-out path{stroke:var(--azure);stroke-width:1.3;opacity:0.6;vector-effect:non-scaling-stroke}
.ba-node{justify-self:center;width:clamp(2.6rem,4vw,3.4rem);height:clamp(2.6rem,4vw,3.4rem);
  background:var(--night);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.15rem;letter-spacing:-0.02em;
  box-shadow:0 18px 34px -16px rgba(0,48,73,0.6);z-index:1}
.ba-node img{display:block;width:58%;height:58%;object-fit:contain}
@media(max-width:63.99em){
  .wires{display:none}
  .ba-hub{grid-template-columns:1fr;justify-items:center;min-height:4.5rem}
}

.flow{list-style:none;margin:0;padding:0;display:grid;gap:0.7rem}
@media(min-width:30em){.flow{grid-template-columns:1fr 1fr}}
.flow li{background:var(--white);border:1px solid var(--line);padding:0.95rem 1rem;box-shadow:0 10px 22px -20px rgba(0,48,73,0.4)}
.flow .fic{display:grid;place-items:center;width:2.1rem;height:2.1rem;background:var(--sky-soft);color:var(--azure);margin-bottom:0.6rem}
.flow .fic svg{width:1.15rem;height:1.15rem}
.flow b{display:block;font-size:0.96rem;color:var(--navy);font-weight:600;margin-bottom:0.15rem}
.flow li > span:last-child{display:block;font-size:0.8rem;color:var(--muted);line-height:1.35}

.example-note{margin-top:0.9rem;font-size:0.82rem;color:var(--faint);max-width:58ch;line-height:1.45}
.gains{margin-top:clamp(2.4rem,4.8vw,3.6rem);display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.example-note + .gains{margin-top:clamp(2rem,4vw,3rem)}
.changes-note{margin-top:clamp(2.2rem,4.4vw,3.2rem);max-width:44ch;
  font-size:clamp(1.15rem,1vw + 0.85rem,1.5rem);line-height:1.4;letter-spacing:-0.012em;
  font-weight:560;color:var(--navy)}
.changes-note em{font-style:italic;font-weight:500;color:var(--azure)}
@media(min-width:44em){.gains{grid-template-columns:1fr 1fr}}
.gain{background:var(--white);padding:clamp(1.9rem,3.6vw,2.7rem);transition:background-color 0.3s var(--ease)}
.gain:hover{background:var(--sky-soft)}
.gain .gic{display:grid;place-items:center;width:2.4rem;height:2.4rem;background:var(--sky-soft);color:var(--azure);margin-bottom:1rem}
.gain .gic svg{width:1.35rem;height:1.35rem}
.gain:hover .gic{background:var(--white)}
.gain h3{font-size:clamp(1.15rem,0.6vw + 0.95rem,1.4rem);font-weight:600;color:var(--navy);
  letter-spacing:-0.012em;line-height:1.15;margin:0 0 0.55rem}
.gain p{color:var(--muted);margin:0;max-width:46ch;line-height:1.5;
  font-size:clamp(1rem,0.35vw + 0.9rem,1.1rem)}

/* ---------- process 01/02/03 ---------- */
.rail{display:grid;gap:clamp(0.5rem,4vw,1rem);position:relative}
.rail-step{position:relative;text-align:center}
.rail-node{display:block;width:12px;height:12px;border-radius:50%;background:var(--azure);margin:0 auto;
  position:relative;z-index:2;box-shadow:0 0 0 3px var(--white),0 0 0 4.5px var(--azure),0 0 0 9px var(--sky-soft)}
.rail-step h3{margin:clamp(1.5rem,3vw,2.3rem) 0 0.55rem;font-size:clamp(1.05rem,0.5vw + 0.95rem,1.28rem);
  font-weight:600;color:var(--navy);letter-spacing:-0.012em;line-height:1.2}
.rail-step p{margin:0 auto;color:var(--muted);max-width:27ch;line-height:1.5;
  font-size:clamp(0.95rem,0.3vw + 0.85rem,1.06rem)}
@media(min-width:56em){
  .rail{grid-template-columns:repeat(3,1fr);gap:0;padding-top:0.5rem}
  .rail::before{content:"";position:absolute;top:calc(0.5rem + 6px);left:9%;right:9%;height:2px;z-index:0;
    background:linear-gradient(90deg,transparent,var(--sky) 5%,var(--steel) 50%,var(--sky) 95%,transparent)}
  .rail-step{padding:0 clamp(1rem,2.5vw,2.6rem)}
  .rail-step + .rail-step::after{content:"";position:absolute;left:0;top:calc(0.5rem + 4rem);bottom:0.4rem;
    width:1px;background:var(--line)}
}
@media(max-width:55.99em){
  .rail-step{padding:clamp(1.5rem,5vw,2.1rem) 0}
  .rail-step + .rail-step{border-top:1px solid var(--line)}
}
.proc-note{margin-top:clamp(2rem,4vw,2.8rem);color:var(--muted);font-weight:500;max-width:48ch;
  font-size:clamp(1rem,0.35vw + 0.9rem,1.12rem)}
.proc-more{margin-top:clamp(1.4rem,2.8vw,2rem);display:flex;align-items:center;gap:clamp(1.1rem,3vw,2rem);flex-wrap:wrap}

/* ============================================================
   LIVE REGISTER — the product artifact, isolated on cream,
   lead centred (Granola-style reveal), ledger floats.
   ============================================================ */
.reg{background:var(--cream)}
.reg > .wrap{padding-block:var(--section)}
.reg-lead{max-width:44rem;margin:0 auto clamp(2.4rem,4.8vw,3.6rem);text-align:center}
.reg-lead h2{max-width:17ch;margin-inline:auto}
.reg-lead p{color:var(--muted);max-width:46ch;margin:1.15rem auto 0}

.ledger{background:var(--white);border:1px solid var(--line-strong);width:100%;
  box-shadow:0 50px 100px -55px rgba(0,48,73,0.5)}
.ledger-scroll{overflow-x:auto}
.ledger-head,.lrow{display:grid;align-items:center;
  grid-template-columns:minmax(8.5rem,1.4fr) minmax(19rem,3fr) minmax(9.5rem,1.5fr);
  gap:clamp(1rem,2.4vw,2.2rem);padding:clamp(0.95rem,1.7vw,1.35rem) clamp(1.2rem,2.6vw,2.1rem);min-width:44rem}
.ledger-head{border-bottom:1px solid var(--line)}
.lrow + .lrow,.lrow{border-top:1px solid var(--line)}
.ledger-head{border-top:0}
.lrow:first-of-type{border-top:0}

.ledger-head span{font-size:0.7rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate)}
.lh-track{display:grid;grid-template-columns:2rem 1fr 2rem 1fr 2rem 1fr 2rem;align-items:center;gap:0}
.lh-track > span{justify-self:center;white-space:nowrap}
.lh-track > i{display:block}

.lrow .nm{font-size:1rem;font-weight:600;color:var(--navy);letter-spacing:-0.01em}

.track{display:grid;grid-template-columns:2rem 1fr 2rem 1fr 2rem 1fr 2rem;align-items:center}
.node{width:2rem;height:2rem;border-radius:50%;justify-self:center;display:grid;place-items:center;position:relative;z-index:1}
.node.done{background:var(--azure)}
.node.done .ck{width:1rem;height:1rem}
.node.cur{background:var(--white);border:2px solid var(--azure);box-shadow:0 0 0 4px var(--sky-soft)}
.node.cur::after{content:"";width:0.6rem;height:0.6rem;border-radius:50%;background:var(--azure)}
.node.todo{background:var(--white);border:1.5px solid var(--line-strong)}
.seg{height:2px;background:var(--line);align-self:center}
.seg.done{background:var(--azure)}

.stat{display:flex;align-items:flex-start;gap:0.6rem}
.stat .d{width:0.6rem;height:0.6rem;border-radius:50%;margin-top:0.45rem;flex:none;background:var(--slate)}
.stat .d.live{background:var(--teal)}
.stat .d.prog{background:var(--azure)}
.stat .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.stat .tx b{font-size:0.95rem;font-weight:600;color:var(--navy)}
.stat .tx em{font-style:normal;font-size:0.8rem;color:var(--muted);margin-top:0.12rem}

.ledger-bar{height:2px;background:var(--line)}
.ledger-bar i{display:block;height:100%;width:38%;background:var(--azure)}

.reg-note{margin-top:clamp(1.4rem,2.6vw,1.8rem);font-size:0.85rem;color:var(--faint);max-width:56ch;
  margin-inline:auto;text-align:center}
.reg-cta{margin-top:clamp(2.2rem,4vw,3rem);display:flex;justify-content:center}

@media(max-width:47.99em){
  .ledger-scroll{overflow-x:visible}
  .ledger-head{display:none}
  .lrow{grid-template-columns:minmax(0,1fr);gap:0.95rem;padding:1.2rem 1.25rem;min-width:0}
  .lrow .nm{font-size:1.02rem}
  .track{width:100%;min-width:0}
  .stat{align-items:center}
  .stat .d{margin-top:0}
}

/* ---------- fit (who this is for) ---------- */
.fit-lead{font-size:clamp(1.3rem,1.4vw + 0.9rem,1.85rem);line-height:1.35;letter-spacing:-0.018em;
  font-weight:560;color:var(--navy);max-width:34ch}
.fit-diff{margin-top:1.15rem;color:var(--muted);max-width:54ch;line-height:1.45;
  font-size:clamp(1.05rem,0.4vw + 0.9rem,1.2rem)}
.fit-cols{display:grid;gap:clamp(1.6rem,4vw,3rem);margin-top:clamp(2.6rem,5vw,4rem);
  border-top:1px solid var(--line);padding-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:48em){
  .fit-cols{grid-template-columns:1fr 1fr}
  .fit-cols > div:last-child{border-left:1px solid var(--line);padding-left:clamp(1.8rem,3vw,3rem)}
}
@media(max-width:47.99em){.fit-cols > div:last-child{border-top:1px solid var(--line);padding-top:1.6rem}}
.fit-cols h3{font-size:1.1rem;margin-bottom:0.7rem}
.fit-cols .tag{font-size:0.85rem;font-weight:600;color:var(--steel);margin-bottom:0.7rem;display:block}
.fit-cols .tag.no{color:var(--slate)}
.fit-cols p{color:var(--muted);max-width:42ch}

/* ---------- founder (the face behind the work) ---------- */
.founder-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:48em){.founder-grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}}
.founder-photo{aspect-ratio:4/5;width:clamp(9rem,22vw,12.5rem);border:1px solid var(--line);overflow:hidden;
  border-radius:clamp(1.6rem,4.5vw,2.9rem) 0 clamp(1.6rem,4.5vw,2.9rem) 0}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.25)}
.founder-line{font-size:clamp(1.3rem,1.4vw + 0.9rem,1.9rem);line-height:1.32;letter-spacing:-0.018em;
  font-weight:560;color:var(--navy);max-width:34ch}
.founder-name{margin-top:clamp(1.1rem,2.5vw,1.6rem);font-weight:600;color:var(--navy);
  display:flex;flex-direction:column;gap:0.15rem}
.founder-name span{font-weight:450;color:var(--muted);font-size:0.9rem}

/* ---------- cta band (the one dark moment) ---------- */
.cta-band{background:var(--night);color:rgba(231,238,244,0.7);text-align:center}
.cta-band > .wrap{padding-block:clamp(4.8rem,10.4vw,7.6rem);display:grid;justify-items:center}
.cta-band h2{color:#fff;font-size:clamp(2.1rem,3.8vw + 0.5rem,3.6rem);max-width:17ch}
.cta-band h2 em{color:var(--sky)}
.cta-band p{margin-top:1.3rem;max-width:44ch;font-size:clamp(1.05rem,0.5vw + 0.9rem,1.2rem)}
.cta-band .btn{margin-top:clamp(1.9rem,4vw,2.6rem)}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:rgba(231,238,244,0.65);border-top:1px solid rgba(255,255,255,0.08)}
.site-foot > .wrap{padding-block:clamp(2.8rem,6vw,4rem) 2rem}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 3rem;padding-bottom:clamp(1.8rem,4vw,2.8rem)}
.foot-brand{display:inline-flex;align-items:center;gap:0.65rem;font-weight:600;font-size:clamp(1.1rem,1.5vw,1.32rem);
  letter-spacing:-0.02em;color:#fff}
.foot-brand .brand-mark{width:1.45rem;height:1.45rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:0.3rem;margin-left:auto}
.foot-nav a{color:rgba(231,238,244,0.7);text-decoration:none;font-size:0.94rem;padding:0.45em 0.85em;
  transition:color 0.18s var(--ease),background-color 0.18s var(--ease)}
.foot-nav a:hover{color:#fff;background:rgba(255,255,255,0.07)}
.foot-legal{display:flex;flex-wrap:wrap;gap:0.7rem 2rem;border-top:1px solid rgba(255,255,255,0.09);
  padding-top:1.6rem;font-size:0.85rem;color:rgba(231,238,244,0.5)}
@media(max-width:47.99em){.foot-nav{margin-left:0;flex-basis:100%}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(0.45)}to{opacity:1;transform:none}}
@keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes curBreathe{0%,100%{box-shadow:0 0 0 4px var(--sky-soft)}50%{box-shadow:0 0 0 7px rgba(24,151,197,0.16)}}
@keyframes segFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nodePop{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:no-preference){
  html.js .hero h1{animation:fadeUp 0.95s var(--ease) both}
  html.js .hero .lede{animation:fadeUp 0.95s var(--ease) 0.14s both}
  html.js .hero-cta{animation:fadeUp 0.9s var(--ease) 0.28s both}

  html.js .marks.rv .logo{opacity:0;transform:translateY(8px)}
  html.js .marks.in .logo{animation:fadeUp 0.7s var(--ease) forwards;opacity:.72}
  html.js .marks.in .logo:nth-child(2){animation-delay:0.08s}
  html.js .marks.in .logo:nth-child(3){animation-delay:0.16s}
  html.js .marks.in .logo:nth-child(4){animation-delay:0.24s}

  @media(min-width:56em){
    html.js .rail.rv::before{transform:scaleX(0);transform-origin:left center}
    html.js .rail.in::before{animation:lineDraw 0.9s var(--ease) 0.1s forwards}
  }
  html.js .rail.rv .rail-node{opacity:0;transform:scale(0.4)}
  html.js .rail.in .rail-step:nth-child(1) .rail-node{animation:pop 0.55s var(--ease) 0.15s forwards}
  html.js .rail.in .rail-step:nth-child(2) .rail-node{animation:pop 0.55s var(--ease) 0.32s forwards}
  html.js .rail.in .rail-step:nth-child(3) .rail-node{animation:pop 0.55s var(--ease) 0.49s forwards}

  html.js .ledger.rv .lrow{opacity:0;transform:translateY(12px)}
  html.js .ledger.in .lrow{animation:fadeUp 0.6s var(--ease) both}
  html.js .ledger.in .lrow:nth-child(2){animation-delay:0.08s}
  html.js .ledger.in .lrow:nth-child(3){animation-delay:0.18s}
  html.js .ledger.in .lrow:nth-child(4){animation-delay:0.28s}
  html.js .ledger.in .lrow:nth-child(5){animation-delay:0.38s}
  html.js .ledger.in .lrow:nth-child(6){animation-delay:0.48s}
  html.js .node.cur{animation:curBreathe 2.8s ease-in-out infinite}

  /* register comes alive on reveal: nodes pop + segments fill left-to-right (kinso idea, kept square/navy) */
  html.js .ledger.rv .node.done{opacity:0;transform:scale(0.3)}
  html.js .ledger.rv .seg.done{transform:scaleX(0);transform-origin:left center}
  html.js .ledger.rv .ledger-bar i{transform:scaleX(0);transform-origin:left center}
  html.js .ledger.in .node.done{animation:nodePop 0.42s var(--ease) both}
  html.js .ledger.in .seg.done{animation:segFill 0.42s var(--ease) both}
  html.js .ledger.in .ledger-bar i{animation:segFill 0.8s var(--ease) 0.55s both}
  html.js .ledger.in .track > *:nth-child(1){animation-delay:0.10s}
  html.js .ledger.in .track > *:nth-child(2){animation-delay:0.17s}
  html.js .ledger.in .track > *:nth-child(3){animation-delay:0.24s}
  html.js .ledger.in .track > *:nth-child(4){animation-delay:0.31s}
  html.js .ledger.in .track > *:nth-child(5){animation-delay:0.38s}
  html.js .ledger.in .track > *:nth-child(6){animation-delay:0.45s}
  html.js .ledger.in .track > *:nth-child(7){animation-delay:0.52s}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none}
  *{transition-duration:0.01ms!important}
}

/* ---------- DECENTER (Alex 2026-07-09) ---------- */
/* problem section after the logos: text left, mockup right (2 columns) */
.breather > .wrap{text-align:left;justify-items:stretch;gap:clamp(2rem,5vw,3.5rem)}
.breather .statement,.breather .say{margin-inline:0;max-width:none}
.breather-visual{margin-top:clamp(1.5rem,3vw,2rem);width:100%;justify-self:stretch}
@media(min-width:56em){
  .breather > .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(2.5rem,5vw,4.5rem)}
  .breather-text{max-width:40ch}
  .breather .statement{font-size:clamp(1.9rem,2.2vw + 1rem,2.9rem)}
  .breather-visual{margin-top:0}
}
/* register lead + note + final CTA band: left-aligned, no more centring */
.reg-lead{text-align:left;margin-left:0;margin-right:0}
.reg-lead h2,.reg-lead p{margin-inline:0}
.reg-note{text-align:left;margin-inline:0}
.reg-cta{justify-content:flex-start}
.cta-band{text-align:left}
.cta-band > .wrap{justify-items:start}