/* ============================================================
   LenderIQ Homepage v2 — DESIGN.md v2 tokens
   One continuous dark canvas. No section boxes.
   ============================================================ */
:root{
  --bg-0:#07090C; --bg-1:#0B0E13; --bg-2:#11151C; --bg-3:#161B24; --bg-4:#1B2230;
  --inset:#060810;
  --b1:#1E2531; --b2:#232A38; --b3:#2D3645;
  --t1:#ECEFF4; --t2:#B5BCC9; --t3:#7C8595; --t4:#545C6B;
  --gold:#E0B449; --gold-4:#C99A30; --gold-glow:rgba(224,180,73,0.18); --on-gold:#1A1407;
  --pass:#3D9560; --pass-2:#6FB585; --pass-glow:rgba(61,149,96,0.18);
  --caution:#C28722; --caution-2:#E5B061; --caution-glow:rgba(194,135,34,0.20);
  --risk:#B23A3A; --risk-2:#D26F6F; --risk-glow:rgba(178,58,58,0.20);
  --conf:#3B7AC2; --conf-2:#6FA1D8; --conf-glow:rgba(59,122,194,0.20);
  --metric:#5A6678;
  --ease:cubic-bezier(0.2,0,0,1); --ease-c:cubic-bezier(0.65,0,0.35,1);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-0); color:var(--t2); font-family:var(--font);
  font-feature-settings:'cv11','ss01','ss03';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
em,i{font-style:normal;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--gold-4);outline-offset:2px;}
::selection{background:var(--gold-glow);color:var(--t1);}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--t3);
}
.eyebrow .ch{color:var(--gold);}
.section-h{font-size:42px;line-height:1.12;font-weight:600;letter-spacing:-0.022em;color:var(--t1);text-wrap:balance;}
.section-sub{font-size:17px;line-height:1.65;color:var(--t3);max-width:560px;text-wrap:pretty;}
.section-sub strong{color:var(--t2);font-weight:600;}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s);}
[data-reveal].in{opacity:1;transform:none;}

/* narrative thread between chapters */
.thread{display:flex;flex-direction:column;align-items:center;padding:8px 0 0;}
.thread span{width:1px;height:72px;background:linear-gradient(var(--b1),var(--b3),var(--b1));}

/* ============================================================ NAV */
.nav{
  position:sticky;top:0;z-index:300;height:64px;
  background:rgba(11,14,19,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b1);
}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:40px;}
.wordmark{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--t1);display:flex;align-items:baseline;}
.wordmark .iq{color:var(--gold);}
.iq,.brand-iq{color:var(--gold);}
.nav-links{display:flex;gap:28px;flex:1;}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--t3);transition:color .14s ease;}
.nav-links a:hover{color:var(--t1);}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-signin{font-size:13.5px;font-weight:500;color:var(--t3);transition:color .14s ease;}
.nav-signin:hover{color:var(--t1);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:-0.005em;
  border-radius:8px;padding:0 20px;height:42px;cursor:pointer;border:none;white-space:nowrap;
  transition:filter .14s ease,box-shadow .14s ease,background .14s ease;
}
.btn-gold{background:var(--gold);color:var(--on-gold);}
.btn-gold:hover{filter:brightness(1.06);box-shadow:0 0 24px var(--gold-glow);}
.btn-gold:active{filter:brightness(0.96);}
.btn-ghost{background:transparent;color:var(--t2);box-shadow:inset 0 0 0 1px var(--b2);}
.btn-ghost:hover{background:var(--bg-4);color:var(--t1);}
.btn-sm{height:36px;padding:0 16px;font-size:13px;}

/* ============================================================ HERO */
.hero{position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 56% at 50% -4%,rgba(201,168,76,0.075),transparent 55%);
}
.hero-copy{position:relative;text-align:center;padding:88px 0 56px;display:flex;flex-direction:column;align-items:center;}
.hero-copy h1{
  font-size:62px;line-height:1.04;font-weight:600;letter-spacing:-0.032em;color:var(--t1);
  margin:22px 0 22px;text-wrap:balance;max-width:820px;
}
.hero-copy h1 .iq{color:var(--gold);}
.hero-sub{font-size:18px;line-height:1.65;color:var(--t2);max-width:620px;text-wrap:pretty;}
.hero-sub strong{color:var(--t1);font-weight:600;}
.hero-ctas{display:flex;gap:14px;margin-top:34px;align-items:center;}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--t4);letter-spacing:0.06em;text-transform:uppercase;}

/* ---- hero relationship visual ---- */
.hviz-outer{position:relative;padding:8px 0 72px;}
.hviz{
  position:relative;max-width:1136px;margin:0 auto;
  display:grid;grid-template-columns:276px minmax(0,1fr) 276px;gap:34px;align-items:center;
}
.htracks{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible;}
.htracks-labels{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible;}
.hside{position:relative;z-index:10;display:flex;flex-direction:column;gap:10px;}
.hside-eye{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);
}
.hside-eye .ben{font-family:var(--font);font-size:11px;letter-spacing:0;text-transform:none;color:var(--t4);}
.hcard{
  background:var(--bg-2);border:1px solid var(--b1);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.2);
}
.hsec{padding:13px 15px;border-bottom:1px solid var(--b1);}
.hsec:last-child{border-bottom:none;}
.hsec-label{
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t4);
  margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;
}
.hrow{
  display:flex;align-items:center;gap:8px;padding:5.5px 0;min-height:25px;
  border-bottom:1px solid rgba(30,37,49,0.4);font-size:12px;color:var(--t3);
  opacity:0;transform:translateX(-6px);
  transition:opacity .36s var(--ease),transform .36s var(--ease);
}
.hside-lender .hrow{transform:translateX(6px);}
.hrow:last-child{border-bottom:none;}
.hrow.in{opacity:1;transform:none;}
.hdot{width:5px;height:5px;border-radius:9999px;background:var(--b3);flex-shrink:0;transition:background .3s ease,box-shadow .3s ease;}
.hrow.st-active .hdot{background:var(--conf);box-shadow:0 0 7px var(--conf-glow);}
.hrow.st-risk .hdot{background:var(--risk);box-shadow:0 0 6px var(--risk-glow);}
.hrow.st-flag .hdot{background:var(--caution);box-shadow:0 0 6px var(--caution-glow);}
.hrow.st-pass .hdot{background:var(--pass);box-shadow:0 0 6px var(--pass-glow);}
.hbadge{
  margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:0.04em;
  padding:2px 6px;border-radius:3px;border:1px solid;flex-shrink:0;
  opacity:0;transition:opacity .3s ease;
  color:var(--conf-2);border-color:rgba(59,122,194,0.3);background:rgba(59,122,194,0.08);
}
.hrow.in .hbadge{opacity:1;}
.hrow.st-risk .hbadge{color:var(--risk-2);border-color:rgba(178,58,58,0.32);background:rgba(178,58,58,0.08);}
.hrow.st-flag .hbadge{color:var(--caution-2);border-color:rgba(194,135,34,0.32);background:rgba(194,135,34,0.08);}
.hrow.st-pass .hbadge{color:var(--pass-2);border-color:rgba(61,149,96,0.32);background:rgba(61,149,96,0.08);}
.hcallout{
  font-size:12px;line-height:1.5;color:var(--t4);padding:2px 2px 0;
  opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease;
}
.hcallout strong{color:var(--t3);font-weight:600;}
.hcallout.in{opacity:1;transform:none;}
/* centre shell — the page's single focal-gold element */
.hcore{position:relative;z-index:10;display:flex;justify-content:center;min-width:0;}
.hshell{
  position:relative;width:min(400px,100%);background:var(--bg-3);
  border:1px solid var(--b3);border-radius:12px;padding:20px 22px 18px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.45),0 0 0 1px rgba(224,180,73,0.14),0 0 32px rgba(224,180,73,0.07);
}
.hshell::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.8;
}
.hshell-brand{text-align:center;margin-bottom:16px;}
.hshell-mark{font-size:24px;font-weight:700;letter-spacing:-0.03em;color:var(--t1);}
.hshell-mark .iq{color:var(--gold);}
.hshell-tag{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);margin-top:4px;}
.hshell-plabel{
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t4);
  margin-bottom:9px;display:flex;justify-content:space-between;
}
.hshell-plabel #hstatus{color:var(--conf-2);}
.hmods{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.hmod{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:6px;
  border:1px solid var(--b1);background:var(--bg-1);
  font-family:var(--mono);font-size:10px;color:var(--t4);
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.hmdot{width:5px;height:5px;border-radius:9999px;background:var(--b3);flex-shrink:0;transition:background .3s ease,box-shadow .3s ease;}
.hmod.computing{color:var(--conf-2);border-color:rgba(59,122,194,0.35);background:rgba(59,122,194,0.06);}
.hmod.computing .hmdot{background:var(--conf);box-shadow:0 0 7px var(--conf-glow);}
.hmod.done{color:var(--t3);border-color:rgba(61,149,96,0.25);background:rgba(61,149,96,0.04);}
.hmod.done .hmdot{background:var(--pass);}
.hmst{margin-left:auto;font-size:8px;color:var(--t4);opacity:0;transition:opacity .3s ease;}
.hmod.computing .hmst{opacity:1;color:var(--conf-2);}
.hmod.done .hmst{opacity:1;color:var(--pass-2);}
.hsum{
  margin-top:13px;padding:10px 12px;border:1px solid rgba(224,180,73,0.2);border-radius:8px;
  background:rgba(224,180,73,0.045);display:flex;gap:10px;align-items:center;
  opacity:0;transform:translateY(5px);transition:opacity .5s ease,transform .5s ease;
}
.hsum.in{opacity:1;transform:none;}
.hsum-k{font-family:var(--mono);font-size:9px;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;}
.hsum-v{font-size:12px;color:var(--t2);line-height:1.4;}
/* shared outcome bar */
.hshared{
  max-width:1136px;margin:22px auto 0;position:relative;z-index:11;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  background:var(--bg-2);border:1px solid var(--b2);border-radius:8px;padding:16px 22px;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.hshared.in{opacity:1;transform:none;}
.hsh-col{display:grid;gap:4px;}
.hsh-col.right{text-align:right;}
.hsh-label{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t4);}
.hsh-title{font-size:14px;font-weight:600;color:var(--t1);}
.hsh-sub{font-size:12px;color:var(--t3);}
.hsh-centre{
  display:grid;place-items:center;gap:4px;min-width:280px;padding:0 26px;text-align:center;
  border-left:1px solid var(--b2);border-right:1px solid var(--b2);
}
.hsh-centre .top{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);}
.hsh-centre .main{font-size:16px;font-weight:700;color:var(--t1);letter-spacing:-0.01em;}
.hsh-centre .micro{font-size:11px;color:var(--t4);}
/* travelling dots live here */
.hviz .hdot-fly{
  position:absolute;width:5px;height:5px;border-radius:9999px;pointer-events:none;z-index:50;
  transform:translate(-50%,-50%);
}

/* ============================================================ TIMELINE (problem) */
.tlsec{position:relative;padding:104px 0 96px;}
.tl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:56px;}
.tl-head h2{margin-top:18px;}
.tl-head .section-sub{margin-top:18px;}
.mode-pill{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;padding:7px 14px;border-radius:6px;
  border:1px solid var(--b2);color:var(--t3);white-space:nowrap;flex-shrink:0;
  transition:background .5s ease,color .5s ease,border-color .5s ease;
}
.mode-pill.traditional{background:rgba(178,58,58,0.08);color:var(--risk-2);border-color:rgba(178,58,58,0.3);}
.mode-pill.liq{background:rgba(61,149,96,0.08);color:var(--pass-2);border-color:rgba(61,149,96,0.3);}
.tl-stage{position:relative;height:312px;}
.tl-track{position:absolute;top:40px;left:0;right:0;height:2px;background:var(--b2);border-radius:2px;}
.tl-progress{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--conf);border-radius:2px;transition:width 1.8s var(--ease-c);}
.tl-waste{
  position:absolute;top:28px;left:38%;right:8%;height:26px;border-radius:4px;
  background:rgba(178,58,58,0.07);border:1px dashed rgba(178,58,58,0.3);
  opacity:0;transition:opacity .6s ease,left .9s var(--ease-c),right .9s var(--ease-c);
  pointer-events:none;
}
.tl-waste.in{opacity:1;}
.tl-waste span{
  position:absolute;top:32px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--risk-2);
}
.tl-nodes{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;}
.tl-node{display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;transition:opacity .4s var(--ease);width:90px;margin:0 -45px;}
.tl-node:first-child{margin-left:0;align-items:flex-start;text-align:left;}
.tl-node:last-child{margin-right:0;align-items:flex-end;text-align:right;}
.tl-node.in{opacity:1;}
.tn-dot{
  width:9px;height:9px;border-radius:9999px;background:var(--b3);border:2px solid var(--bg-0);
  position:relative;z-index:2;margin-top:36px;transition:background .4s ease,box-shadow .4s ease;
}
.tl-node.lit .tn-dot{background:var(--conf);box-shadow:0 0 8px var(--conf-glow);}
.tn-label{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;color:var(--t4);line-height:1.35;text-align:center;}
.tl-node:first-child .tn-label{text-align:left;}
.tl-node:last-child .tn-label{text-align:right;}
.tl-node.lit .tn-label{color:var(--t3);}
.tl-markers{position:absolute;top:84px;left:0;right:0;}
.rmark{
  position:absolute;transform:translateX(-50%);top:0;
  opacity:0;transition:opacity .5s ease,left .9s var(--ease-c),top .9s var(--ease-c);
}
.rmark.in{opacity:1;}
.rm-card{
  background:rgba(178,58,58,0.09);border:1px solid rgba(178,58,58,0.32);border-radius:4px;
  padding:5px 10px;white-space:nowrap;font-family:var(--mono);font-size:10px;color:var(--risk-2);
  transition:background .5s ease,border-color .5s ease,color .5s ease;
}
.rmark.liq-mode .rm-card{background:rgba(61,149,96,0.07);border-color:rgba(61,149,96,0.3);color:var(--pass-2);}
.tl-foot{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  border-top:1px solid var(--b1);padding-top:20px;margin-top:8px;
}
.tl-legend{display:flex;flex-direction:column;gap:8px;}
.leg-item{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--t4);}
.leg-dot{width:6px;height:6px;border-radius:9999px;flex-shrink:0;}
.leg-dot.red{background:var(--risk);}
.leg-dot.green{background:var(--pass);}
.tl-insight{
  display:flex;align-items:center;gap:28px;text-align:right;
  opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.tl-insight.in{opacity:1;transform:none;}
.ins-text{font-size:14px;font-weight:500;color:var(--t1);max-width:380px;text-align:right;}
.ins-metric{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--pass-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ins-sub{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:0.06em;text-transform:uppercase;}

/* ============================================================ DNA (sticky) */
.dna{position:relative;height:320vh;}
.dna-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.dna-canvas{position:absolute;inset:0;width:100%;height:100%;}
.dna-copy{
  position:absolute;top:50%;transform:translateY(-50%);
  left:max(32px,calc((100vw - 1200px)/2 + 32px));
  width:360px;z-index:5;opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none;
}
.dna-copy.show{opacity:1;pointer-events:auto;}
.dna-copy h2{font-size:38px;line-height:1.12;font-weight:600;letter-spacing:-0.022em;color:var(--t1);margin:16px 0 18px;text-wrap:balance;}
.dna-copy p{font-size:15.5px;line-height:1.7;color:var(--t3);text-wrap:pretty;}
.dna-copy p strong{color:var(--t2);font-weight:600;}
.dna-copy p + p{margin-top:14px;}
/* live readout (beat B) */
.dna-readout{
  position:absolute;top:50%;transform:translateY(-50%);
  right:20px;
  width:min(264px,max(195px,calc(100vw - 980px)));
  z-index:5;opacity:0;transition:opacity .5s var(--ease);
  background:var(--bg-2);border:1px solid var(--b1);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.dna-readout.show{opacity:1;}
.dro-hd{
  padding:11px 15px;border-bottom:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t4);
}
.dro-hd #droState{color:var(--conf-2);transition:color .3s ease;}
.dro-hd #droState.settled{color:var(--pass-2);}
.dro-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 15px;border-bottom:1px solid rgba(30,37,49,0.5);
}
.dro-row:last-child{border-bottom:none;}
.dro-key{font-size:11.5px;color:var(--t4);}
.dro-val{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--t2);font-variant-numeric:tabular-nums;
  transition:opacity .3s ease,color .3s ease;white-space:nowrap;
}
.dro-val.recomputing{opacity:0.45;}
.dro-val.changed{color:var(--caution-2);}
/* event feed line (beat B, under helix) */
.dna-feed{
  position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--t4);
  text-transform:uppercase;white-space:nowrap;z-index:5;
  opacity:0;transition:opacity .5s ease,color .5s ease;
}
.dna-feed.show{opacity:1;}
.dna-feed.hot{color:var(--gold);}
/* assembly caption (beat A) */
.dna-cap{
  position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--t4);
  text-transform:uppercase;white-space:nowrap;z-index:5;
  opacity:0;transition:opacity .5s ease;
}
.dna-cap.show{opacity:1;}
.dna-cap .n{color:var(--conf-2);}

/* ============================================================ ECONOMICS */
.eco{position:relative;padding:104px 0 96px;}
.eco-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:48px;}
.eco-head h2{margin-top:18px;}
.eco-note{max-width:330px;font-size:14px;line-height:1.6;color:var(--t4);text-align:right;text-wrap:pretty;}
.eco-grid{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:0;align-items:start;}
.lane{display:flex;flex-direction:column;gap:10px;}
.lane-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4px;}
.lane-label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);}
.lane-label.with{color:var(--gold);}
.lane-total{font-family:var(--mono);font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;}
.bar-row{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.bar-row.in{opacity:1;transform:none;}
.bar-meta{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;gap:12px;}
.bar-label{font-size:12.5px;color:var(--t3);}
.bar-value{font-family:var(--mono);font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.delta{margin-left:4px;font-family:var(--mono);font-size:10px;}
.delta.bad{color:var(--risk-2);}
.delta.good{color:var(--pass-2);}
.bar-track{height:16px;border:1px solid var(--b2);border-radius:4px;overflow:hidden;background:var(--bg-2);}
.bar-fill{width:0%;height:100%;transition:width .85s var(--ease-c);}
.lane-trad .bar-fill{background:rgba(178,58,58,0.5);}
.lane-trad .bar-row:first-child .bar-fill{background:rgba(59,122,194,0.42);}
.lane-liq .bar-fill{background:rgba(61,149,96,0.42);}
.lane-liq .bar-row:first-child .bar-fill{background:rgba(59,122,194,0.42);}
.lane-liq .bar-row.final .bar-fill{background:var(--pass);}
.eco-div{min-height:240px;display:flex;align-items:center;justify-content:center;}
.eco-div-line{height:100%;width:1px;background:linear-gradient(transparent,var(--b2),transparent);position:relative;}
.eco-vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--bg-0);padding:8px 0;font-family:var(--mono);color:var(--t4);font-size:10px;
}
.eco-outcomes{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:0;margin-top:18px;}
.eoc{
  border-radius:8px;padding:16px 18px;min-height:104px;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.eoc.in{opacity:1;transform:none;}
.eoc.trad{background:rgba(178,58,58,0.05);border:1px solid rgba(178,58,58,0.22);border-top:2px solid var(--risk);}
.eoc.liq{background:rgba(61,149,96,0.045);border:1px solid rgba(61,149,96,0.2);border-top:2px solid var(--pass);}
.eoc-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t4);margin-bottom:8px;}
.eoc-title{font-size:21px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;}
.eoc.trad .eoc-title{color:var(--risk-2);}
.eoc.liq .eoc-title{color:var(--pass-2);}
.eoc-sub{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--t4);}
.eco-value{
  margin-top:24px;border:1px solid rgba(224,180,73,0.22);background:rgba(224,180,73,0.04);
  border-radius:12px;padding:20px 24px;display:grid;grid-template-columns:1.1fr 0.9fr 0.9fr;gap:20px;align-items:center;
  opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.eco-value.in{opacity:1;transform:none;}
.ev-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.ev-title{color:var(--t1);font-size:18px;line-height:1.3;font-weight:600;text-wrap:balance;}
.ev-col{border-left:1px solid var(--b2);padding-left:20px;}
.ev-label{font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--t4);margin-bottom:6px;}
.ev-text{font-size:13px;line-height:1.55;color:var(--t3);}

/* ============================================================ JOURNEYS (broker + lender) */
.jny{position:relative;padding:104px 0 88px;}
.jny-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:52px;}
.jny-head h2{margin-top:18px;}
.jny-head .section-sub{margin:18px auto 0;}
.jny-grid{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:start;max-width:1040px;margin:0 auto;}
.jlane{display:flex;flex-direction:column;}
.jlane-hd{padding:0 0 16px;}
.jl-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:6px;}
.jlane-broker .jl-eye{color:var(--caution-2);}
.jlane-lender .jl-eye{color:var(--pass-2);}
.jl-title{font-size:16px;font-weight:600;color:var(--t1);}
.jl-sub{font-family:var(--mono);font-size:10px;color:var(--t4);margin-top:4px;letter-spacing:0.02em;}
.jr{
  display:flex;align-items:center;gap:10px;padding:10px 13px;margin-bottom:6px;
  border-radius:6px;border:1px solid var(--b1);border-left:3px solid var(--b1);background:var(--bg-1);
  opacity:0;transform:translateY(-5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-left-color .5s ease,background .5s ease;
}
.jr.in{opacity:1;transform:none;}
.jr.st-flag{border-left-color:var(--caution);background:rgba(194,135,34,0.035);}
.jr.st-risk{border-left-color:var(--risk);background:rgba(178,58,58,0.05);}
.jr.st-compute{border-left-color:var(--conf);background:rgba(59,122,194,0.035);}
.jr.st-pass{border-left-color:var(--pass);background:rgba(61,149,96,0.035);}
.jr-num{font-family:var(--mono);font-size:9px;color:var(--t4);min-width:14px;text-align:right;flex-shrink:0;}
.jr-dot{width:5px;height:5px;border-radius:9999px;background:var(--b3);flex-shrink:0;transition:background .4s ease,box-shadow .4s ease;}
.jr.st-flag .jr-dot{background:var(--caution);}
.jr.st-risk .jr-dot{background:var(--risk);box-shadow:0 0 5px var(--risk-glow);}
.jr.st-compute .jr-dot{background:var(--conf);box-shadow:0 0 5px var(--conf-glow);}
.jr.st-pass .jr-dot{background:var(--pass);}
.jr-name{flex:1;font-size:12.5px;color:var(--t3);transition:color .4s ease;}
.jr.st-flag .jr-name,.jr.st-risk .jr-name,.jr.st-pass .jr-name{color:var(--t2);}
.jr.st-compute .jr-name{color:var(--conf-2);}
.jr-tag{
  font-family:var(--mono);font-size:8px;letter-spacing:0.04em;padding:2px 6px;border-radius:2px;
  border:1px solid;flex-shrink:0;white-space:nowrap;opacity:0;transition:opacity .4s ease;
}
.jr.st-flag .jr-tag{background:rgba(194,135,34,0.1);color:var(--caution-2);border-color:rgba(194,135,34,0.25);opacity:1;}
.jr.st-risk .jr-tag{background:rgba(178,58,58,0.1);color:var(--risk-2);border-color:rgba(178,58,58,0.25);opacity:1;}
.jr.st-compute .jr-tag{background:rgba(59,122,194,0.08);color:var(--conf-2);border-color:rgba(59,122,194,0.22);opacity:1;}
.jr.st-pass .jr-tag{background:rgba(61,149,96,0.08);color:var(--pass-2);border-color:rgba(61,149,96,0.22);opacity:1;}
.joutcome{
  border-radius:8px;padding:16px 18px;margin-top:6px;
  opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.joutcome.in{opacity:1;transform:none;}
.jlane-broker .joutcome{background:rgba(194,135,34,0.045);border:1px solid rgba(194,135,34,0.22);border-top:2px solid var(--caution);}
.jlane-lender .joutcome{background:rgba(61,149,96,0.045);border:1px solid rgba(61,149,96,0.2);border-top:2px solid var(--pass);}
.jo-title{font-size:15px;font-weight:600;color:var(--t1);margin-bottom:5px;}
.jo-sub{font-size:12.5px;line-height:1.5;color:var(--t3);}
.jo-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--b1);}
.jo-note{font-family:var(--mono);font-size:9.5px;color:var(--t4);letter-spacing:0.02em;}
.jo-link{font-size:13.5px;font-weight:600;color:var(--t1);transition:color .14s ease;white-space:nowrap;}
.jo-link:hover{color:var(--gold);}
.jny-div{display:flex;flex-direction:column;align-items:center;padding-top:64px;height:100%;}
.jny-div-line{flex:1;width:1px;background:var(--b1);min-height:60px;}
.jny-div-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);
  padding:10px 2px;writing-mode:vertical-rl;
}
.jny-shared{text-align:center;margin-top:44px;font-size:15.5px;color:var(--t3);}
.jny-shared strong{color:var(--t1);font-weight:600;}

/* ============================================================ CTA + FOOTER */
.cta{position:relative;overflow:hidden;}
.cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 115%,rgba(201,168,76,0.07),transparent 60%);}
.cta-in{position:relative;padding:136px 0 128px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.cta h2{font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-0.026em;color:var(--t1);margin:18px 0 18px;text-wrap:balance;}
.cta-sub{font-size:16.5px;line-height:1.65;color:var(--t3);max-width:500px;text-wrap:pretty;}
.cta-btns{display:flex;gap:14px;margin-top:38px;}
.cta-note{margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--t4);letter-spacing:0.04em;}
.footer{border-top:1px solid var(--b1);background:var(--bg-0);}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 0;}
.footer-links{display:flex;gap:26px;}
.footer-links a{font-size:12.5px;color:var(--t4);transition:color .14s ease;}
.footer-links a:hover{color:var(--t2);}
.footer-copy{font-family:var(--mono);font-size:10.5px;color:var(--t4);}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .hviz{grid-template-columns:1fr;gap:20px;max-width:560px;}
  .htracks,.htracks-labels{display:none;}
  .hshared{grid-template-columns:1fr;max-width:560px;}
  .hsh-col.right{text-align:left;}
  .hsh-centre{border-left:none;border-right:none;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2);padding:12px 0;min-width:0;}
  .dna-readout{display:none;}
  .dna-copy{width:min(420px,calc(100vw - 64px));}
}
@media (max-width:980px){
  .hero-copy h1{font-size:48px;}
  .tl-head{flex-direction:column;align-items:flex-start;gap:20px;}
  .eco-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .eco-note{text-align:left;}
  .eco-grid,.eco-outcomes{grid-template-columns:1fr;gap:32px;}
  .eco-div{display:none;}
  .eco-outcomes div:nth-child(2){display:none;}
  .eco-value{grid-template-columns:1fr;}
  .ev-col{border-left:none;padding-left:0;border-top:1px solid var(--b2);padding-top:14px;}
  .jny-grid{grid-template-columns:1fr;gap:36px;}
  .jny-div{display:none;}
  .tl-foot{flex-direction:column;align-items:flex-start;gap:20px;}
  .tl-insight{text-align:left;}
  .ins-text{text-align:left;}
  .nav-links{display:none;}
}

/* ============================================================
   MOBILE (≤820px) — Section 03+04 DNA dedicated mobile layout
   The desktop composition uses a sticky-scroll canvas animation.
   On mobile we disable the scroll-lock, stack content naturally,
   and let the time-driven canvas animation play in a contained box.
   ============================================================ */
@media (max-width:820px){
  /* Section 03+04 — convert sticky scroll into normal flow */
  .dna{height:auto;}
  .dna-sticky{
    position:static;
    height:auto;
    overflow:visible;
    display:flex;
    flex-direction:column;
    padding:64px 20px 80px;
  }
  /* Canvas: fixed height, full width, centred in flow */
  .dna-canvas{
    position:static;
    inset:auto;
    width:100%;
    max-width:100%;
    height:200px;
    box-sizing:border-box;
    order:2;
    margin:36px 0;
    border-radius:6px;
    background:var(--bg-2);
  }
  /* Both copy blocks: static, full-width, fully visible */
  .dna-copy{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    max-width:100%;
    opacity:1 !important;
    pointer-events:auto;
    padding:0;
  }
  #dnaCopyA{order:1;}
  #dnaCopyB{order:3;}
  /* Readout: restore to normal flow after the second copy block */
  .dna-readout{
    position:static;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    display:block !important;
    opacity:1 !important;
    order:4;
    margin-top:28px;
  }
  /* Feed, cap, evidence rail are canvas overlays — hide on mobile */
  .dna-cap,
  .dna-feed,
  .dna-evidence-rail{display:none !important;}
  /* Section 02 — fit full timeline in §03 content width (no horizontal scroll) */
  #problem .wrap{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    padding-left:20px;padding-right:20px;
  }
  #problem .tl-stage{
    position:relative;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    height:auto;min-height:300px;padding-bottom:16px;
    overflow-x:hidden;overflow-y:visible;
  }
  #problem .tl-nodes{
    position:absolute;top:0;left:0;right:0;
    display:flex;justify-content:space-between;align-items:flex-start;
    flex-wrap:nowrap;gap:0;padding-top:8px;width:100%;min-width:0;box-sizing:border-box;
  }
  #problem .tl-node{
    width:auto;flex:1 1 0;min-width:0;max-width:17%;margin:0;
    align-items:center;text-align:center;
  }
  #problem .tl-node:first-child,#problem .tl-node:last-child{margin:0;align-items:center;text-align:center;}
  #problem .tl-node:first-child .tn-label,#problem .tl-node:last-child .tn-label{text-align:center;}
  #problem .tn-label{
    white-space:normal;line-height:1.2;word-break:break-word;
    max-width:100%;font-size:8px;letter-spacing:0.02em;
  }
  #problem .tl-track,#problem .tl-waste,#problem .tl-markers{
    left:0;right:0;width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  }
  #problem .tl-waste{left:22%;right:4%;}
  #problem .tl-waste span{
    top:52px;
    white-space:normal;text-align:center;max-width:100%;
    font-size:8px;line-height:1.25;letter-spacing:0.06em;
  }
  #problem .rmark{
    transform:translateX(-50%) translateY(16px);
  }
  #problem .rm-card{
    white-space:normal;font-size:8px;padding:3px 5px;line-height:1.25;
    max-width:min(76px,24vw);text-align:center;
  }
  #problem .ins-text{max-width:100%;text-align:left;}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  /* Section 01 — hero */
  .hero-copy{padding:72px 0 40px;}
  .hero-copy h1{font-size:38px;}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:280px;}
  .hero-ctas .btn{width:100%;justify-content:center;}
  .section-h{font-size:28px;line-height:1.18;}
  .dna-copy h2{font-size:28px;}
  .cta h2{font-size:30px;}
  .rm-card{font-size:9px;padding:4px 7px;}
  .tn-label{font-size:9px;}
  #problem .rm-card{white-space:normal;}
  /* Section 05+06 — Outcomes */
  .jlane-hd{margin-bottom:16px;}
  .jr{gap:8px;padding:10px 0;}
  .jr-num{font-size:11px;}
  .jr-tag{font-size:9px;}
  /* Section 07 — Economics */
  .eco{padding:72px 0 72px;}
  .bar-meta{flex-direction:column;gap:2px;align-items:flex-start;}
  .bar-value{font-size:11px;}
  /* CTA */
  .cta-in{padding:88px 0 80px;}
  .cta-btns{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:280px;}
  .cta-btns .btn{width:100%;justify-content:center;}
  /* Thread connector — tighten on mobile */
  .thread span{height:48px;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
  [data-reveal]{opacity:1;transform:none;}
}