:root{
  --bg:#0B0A0D;
  --ink:#FFFFFF;
  --dim:rgba(255,255,255,0.82);
  --dim2:rgba(255,255,255,0.58);
  --border:rgba(246,243,238,0.13);
  --panel:rgba(246,243,238,0.045);
  --coral:#F37448;
  --pink:#ED3869;
  --hot:#EC396C;
  --green:#78BE40;
  --yellow:#F1D205;
  --maroon:#8C2B42;
  --mauve:#C15EA2;
  --grad:linear-gradient(96deg,var(--coral),var(--hot) 55%,var(--mauve));
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Open Sans',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--coral); color:#0B0A0D;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

/* ---------- GLOBAL CHROME ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:var(--grad); transform-origin:0 50%; transform:scaleX(0);
  z-index:50;
}
.grain{
  position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- TYPE ---------- */
.bebas{font-family:'Bebas Neue',sans-serif; font-weight:400; line-height:.92; letter-spacing:.01em; margin:0;}
.h-hero{font-size:clamp(72px,9.5vw,156px);}
.h-sec{font-size:clamp(44px,7vw,72px);}
.h-md{font-size:clamp(28px,3.6vw,48px);}
.outline-text{
  color:transparent;
  -webkit-text-stroke:1.5px #f6f6f698;
}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.grad-green{background:linear-gradient(96deg,var(--green),var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent;}
p.support{font-size:clamp(15px,1.35vw,18px); line-height:1.65; color:var(--dim); max-width:none; margin:22px 0 0;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:130px 8vw; position:relative; overflow:hidden; scroll-margin-top:24px;}
@media (max-width:820px){ section{padding:78px 6vw;} }
.sec-head{
  display:flex; align-items:center; gap:16px; margin-bottom:34px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2);
}
.sec-head .snum{color:var(--coral);}
.sec-head::after{
  content:""; flex:1; height:1px;
  background-image:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 13px);
}
.glow{position:absolute; pointer-events:none; z-index:0; border-radius:50%;}
section > *:not(.glow){position:relative; z-index:1;}
.g-coral{background:radial-gradient(circle,rgba(243,116,72,.17),transparent 65%);}
.g-pink{background:radial-gradient(circle,rgba(237,56,105,.15),transparent 65%);}
.g-mauve{background:radial-gradient(circle,rgba(193,94,162,.14),transparent 65%);}
.g-green{background:radial-gradient(circle,rgba(120,190,64,.11),transparent 65%);}

/* light sections */
section.light{background:#F7F2E9; --ink-l:#17131A;}
section.light, section.light p.support{color:#17131A;}
section.light p.support{color:rgba(23,19,26,.68);}
section.light .sec-head{color:rgba(23,19,26,.45);}
section.light .sec-head::after{background-image:repeating-linear-gradient(90deg,rgba(23,19,26,.18) 0 6px,transparent 6px 13px);}
section.light .outline-text{-webkit-text-stroke-color:rgba(23,19,26,.3);}
section.light .panel{background:rgba(23,19,26,.045); border-color:rgba(23,19,26,.13);}
section.light .pill{border-color:rgba(23,19,26,.16); color:rgba(23,19,26,.62);}
section.light .caption{color:rgba(23,19,26,.45);}

/* ---------- COMPONENTS ---------- */
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:22px;
  transition:border-color .3s ease, transform .3s ease;
}
.panel:hover{border-color:rgba(246,243,238,0.26);}
.pad{padding:32px;}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
.pill{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:8px 15px; border-radius:100px; border:1px solid var(--border); color:var(--dim);
}
.caption{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.03em;
  display:flex; justify-content:space-between; gap:16px; margin-top:14px; color:var(--dim2);
}
.risk-flow { display:flex; align-items:center; justify-content:center; gap:20px; }
.risk-col { display:flex; flex-direction:column; gap:24px; flex:1 1 0; max-width:280px; }
.risk-flow > .risk-node { flex:1 1 0; max-width:280px; }
.risk-node { border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:18px 20px; background:rgba(255,255,255,.03); }
.risk-node--hot {
  border-color:var(--coral);
  background:linear-gradient(135deg, rgba(243,116,72,.14), rgba(237,56,105,.10));
  box-shadow:0 20px 45px -22px rgba(0,0,0,.5), 0 0 40px -16px var(--hot);
}
.rn-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.02em; }
.rn-sub { font-size:13px; opacity:.65; margin-top:4px; }

/* connectors: plain CSS elbows/lines, not SVG — geometry stays correct at any row height */
.risk-connector { flex:0 0 64px; align-self:stretch; min-height:72px; position:relative; }
.risk-connector--straight { flex-basis:64px; }

.risk-connector--merge .rc-elbow--a{ position:absolute; left:0; top:22%; width:50%; height:28%; border-top:2px solid rgba(243,116,72,.45); border-right:2px solid rgba(243,116,72,.45); border-top-right-radius:8px; }
.risk-connector--merge .rc-elbow--b{ position:absolute; left:0; top:50%; width:50%; height:28%; border-bottom:2px solid rgba(243,116,72,.45); border-right:2px solid rgba(243,116,72,.45); border-bottom-right-radius:8px; }
.risk-connector--merge .rc-trunk{ position:absolute; left:50%; top:50%; width:calc(50% - 10px); height:2px; background:var(--coral); transform:translateY(-1px); }
.risk-connector--merge .rc-arrow{ position:absolute; right:1px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid var(--coral); }
.risk-connector--merge .rc-dot{ position:absolute; left:0; width:5px; height:5px; border-radius:50%; background:var(--coral); transform:translate(-50%,-50%); }
.risk-connector--merge .rc-dot--a{ top:22%; }
.risk-connector--merge .rc-dot--b{ top:78%; }

.risk-connector--straight .rc-line{ position:absolute; left:2px; right:11px; top:50%; height:2px; background:var(--coral); transform:translateY(-1px); }
.risk-connector--straight .rc-arrow{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid var(--coral); }
.risk-connector--straight .rc-dot{ position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background:var(--coral); }

@media (max-width:700px){
  .risk-flow{flex-direction:column; align-items:stretch;}
  .risk-flow > .risk-node, .risk-col{ flex-basis:auto; max-width:none; }
  .risk-col{flex-direction:row; gap:12px;}
  .risk-col > .risk-node{ flex:1 1 0; }
  .risk-connector{ flex:0 0 56px; width:100%; align-self:auto; min-height:0; }
  .risk-connector--straight{ flex-basis:56px; height:56px; align-self:auto; }

  .risk-connector--merge .rc-elbow--a{ left:25%; top:0; width:25%; height:50%; border-top:none; border-right:none; border-top-right-radius:0; border-left:2px solid rgba(243,116,72,.45); border-bottom:2px solid rgba(243,116,72,.45); border-bottom-left-radius:8px; }
  .risk-connector--merge .rc-elbow--b{ left:50%; top:0; width:25%; height:50%; border-bottom-right-radius:0; border-top:none; border-right:2px solid rgba(243,116,72,.45); border-bottom:2px solid rgba(243,116,72,.45); }
  .risk-connector--merge .rc-trunk{ left:50%; top:50%; width:2px; height:calc(50% - 10px); background:var(--coral); transform:translateX(-1px); }
  .risk-connector--merge .rc-arrow{ right:auto; left:50%; top:auto; bottom:1px; transform:translate(-50%,0); border-top:9px solid var(--coral); border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:none; }
  .risk-connector--merge .rc-dot--a{ left:25%; top:0; }
  .risk-connector--merge .rc-dot--b{ left:75%; top:0; }

  .risk-connector--straight .rc-line{ left:50%; right:auto; top:2px; bottom:11px; width:2px; height:auto; transform:translateX(-1px); }
  .risk-connector--straight .rc-arrow{ left:50%; right:auto; top:auto; bottom:0; transform:translate(-50%,0); border-top:9px solid var(--coral); border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:none; }
  .risk-connector--straight .rc-dot{ left:50%; top:0; transform:translate(-50%,-50%); }
}
.meta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}
.meta-chip{
  padding:14px 18px; border-radius:16px;
  background:rgba(246,243,238,0.06); border:1px solid rgba(246,243,238,0.16);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.meta-chip .k{display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim2);}
.meta-chip .v{font-size:14px; margin-top:5px;}
.meta-chip--link{color:var(--ink); text-decoration:none; transition:border-color .2s ease;}
.meta-chip--link .v{display:flex; align-items:center; gap:4px;}
.meta-chip--link:hover{border-color:rgba(243,116,72,.45);}
.meta-chip--link:hover .v{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text;}
.meta-chip--link:hover .reviews-source__icon{color:var(--mauve); transform:translate(1px,-1px);}

/* bento */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:22px; margin-top:52px;}
.col-3{grid-column:span 3;} .col-4{grid-column:span 4;} .col-5{grid-column:span 5;}
.col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;} .col-12{grid-column:span 12;}
@media (max-width:900px){ .bento{grid-template-columns:1fr;} .bento > *{grid-column:span 1 !important;} }

/* browser mockup */
.stage{perspective:1600px;}
.stage .browser-frame{transform:none; transition:transform .5s ease;}
.stage .browser-frame:hover{transform:scale(1.035);}
.stage .hero-phone{transform:scale(1); transition:transform .5s ease;}
.stage .hero-phone:hover{transform:scale(1.035);}
@media (max-width:900px){ .stage .browser-frame, .stage .hero-phone{transform:none !important;} }
.browser-frame{
  border-radius:16px; overflow:hidden;
  background:#131117; border:1px solid var(--border);
  box-shadow:0 46px 110px rgba(0,0,0,.6), 0 0 80px -34px var(--hot);
}
.browser-bar{
  display:flex; align-items:center; gap:8px; padding:11px 15px;
  background:rgba(246,243,238,.045); border-bottom:1px solid var(--border);
}
.bdot{width:9px; height:9px; border-radius:50%; flex:none;}
.burl{
  flex:1; margin-left:8px; background:rgba(246,243,238,.05); border-radius:8px;
  padding:5px 13px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--dim2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser-frame img, .browser-frame video{display:block; width:100%; height:auto;}

/* video slots */
.vslot{
  aspect-ratio:var(--ar,16/10);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:
    repeating-linear-gradient(135deg, rgba(246,243,238,.028) 0 2px, transparent 2px 15px),
    #121016;
}
.vslot .play{
  width:52px; height:52px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 34px -6px var(--hot);
}
.vslot .play::after{content:""; border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #0B0A0D; margin-left:3px;}
.vslot .vl{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim2); text-align:center; max-width:80%;}

/* phone shell */
.phone-shell{
  border-radius:36px; padding:12px 10px 16px; position:relative;
  background:linear-gradient(165deg, rgba(246,243,238,.09), rgba(246,243,238,.02));
  border:1px solid var(--border);
  box-shadow:0 34px 80px rgba(0,0,0,.55);
}
.phone-shell::before{
  content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:62px; height:15px; border-radius:9px; background:rgba(0,0,0,.7); z-index:3;
}
.phone-shell .vslot{border-radius:24px; overflow:hidden;}

/* on the go */
.otg-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(40px,7vw,110px); align-items:center; margin-top:28px;}
.otg-phone{width:100%;}
@media (max-width:900px){
  .otg-layout{grid-template-columns:1fr; gap:44px;}
  .otg-phone{max-width:300px; margin:0 auto;}
}

/* marquee */
.marquee{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:22px 0; background:rgba(246,243,238,.02);
}
.marquee .track{display:flex; width:max-content; animation:scrollx 36s linear infinite;}
.marquee span{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,3.4vw,44px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.85);
  padding-right:48px; white-space:nowrap;
}
.marquee span b{color:var(--coral); -webkit-text-stroke:0; font-weight:400; padding:0 6px;}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* thesis */
.thesis{margin-top:56px;}
.thesis-line{
  display:flex; gap:26px; align-items:baseline; padding:34px 0;
  border-top:1px solid var(--border);
}
.thesis-line:last-child{border-bottom:1px solid var(--border);}
.thesis-num{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--coral); min-width:52px;}
.thesis-text{font-size:clamp(21px,3vw,36px); font-weight:600; line-height:1.24; letter-spacing:-.01em; max-width:860px;}

/* matrix */
.matrix{margin-top:48px; border-radius:22px; border:1px solid var(--border); overflow:hidden;}
.mrow{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:12px; align-items:center;
  padding:19px 26px; border-bottom:1px solid var(--border);
}
.mrow:last-child{border-bottom:none;}
.mrow.head{font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim2); background:rgba(246,243,238,.03);}
.mrow .dimname{font-size:14.5px;}
.cell{font-family:'JetBrains Mono',monospace; font-size:12.5px; display:flex; align-items:center; gap:8px; color:var(--dim);}
.cell.us{
  color:var(--ink);
  background:linear-gradient(90deg, rgba(243,116,72,.12), rgba(236,57,108,.12));
  border-radius:10px; padding:8px 12px; margin:-8px 0;
}
.dt{width:8px; height:8px; border-radius:50%; flex:none;}
.dt.full{background:var(--green); box-shadow:0 0 10px rgba(120,190,64,.8);}
.dt.partial{background:rgba(246,243,238,.32);}
.dt.none{background:rgba(246,243,238,.12);}
@media (max-width:800px){ .mrow{grid-template-columns:1.2fr 1fr 1fr 1.1fr; padding:14px; font-size:12px;} .mrow .dimname{font-size:12px;} }

/* process */
.step-track{display:flex; gap:10px; margin-top:56px; flex-wrap:wrap;}
.step-track .seg{
  flex:1; min-width:130px; text-align:center; padding:15px 10px; border-radius:14px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid rgba(23,19,26,.15); color:rgba(23,19,26,.6);
}
.step-track .seg{cursor:default; transition:background .3s ease, color .3s ease, border-color .3s ease;}
.step-track .seg.is-active{background:var(--grad); color:#fff; border-color:transparent; font-weight:600;}
.node-grid{display:flex; gap:22px; margin-top:26px; align-items:stretch;}
@media (max-width:900px){ .node-grid{display:grid; grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .node-grid{grid-template-columns:1fr;} }
.node{
  flex:1 1 0; min-width:0; padding:24px; border-radius:20px; background:#fff;
  border:1px solid rgba(23,19,26,.1); box-shadow:0 14px 34px rgba(23,19,26,.06);
  transition:box-shadow .3s ease, border-color .3s ease;
  min-height:172px;
}
@media (min-width:901px){
  .node-grid:has(.node:hover) .node:not(:hover),
  .node-grid:has(.node.is-active) .node:not(.is-active){
    display:none;
  }
}
.node:hover, .node.is-active{border-color:transparent; box-shadow:0 22px 50px rgba(23,19,26,.12);}
.node-head{display:flex; align-items:center; gap:14px;}
.node .circ{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; flex:none;}
.node .nt{font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; color:#17131A; white-space:nowrap;}
.node .nd, .node .nd-full{font-size:13px; line-height:1.6; color:rgba(23,19,26,.62); margin-top:12px; overflow:hidden; transition:max-height .4s ease, opacity .3s ease;}
.node .nd{max-height:70px; opacity:1;}
.node .nd-full{max-height:0; opacity:0; margin-top:0;}
.node:hover .nd, .node.is-active .nd{max-height:0; opacity:0; margin-top:0;}
.node:hover .nd-full, .node.is-active .nd-full{max-height:70px; opacity:1; margin-top:12px;}
@media (max-width:900px){
  .node{min-height:0;}
  .node .nd{max-height:none;}
  .node .nd-full{display:none;}
}

/* routing */
.dist-bar{display:flex; height:16px; border-radius:100px; overflow:hidden; margin-top:52px; border:1px solid var(--border);}
.dist-bar div{height:100%;}
.path-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px;}
.path-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .path-grid, .path-grid.cols-2{grid-template-columns:1fr;} }
.path-card{padding:28px; border-radius:20px; background:var(--panel); border:1px solid var(--border);}
.path-card .ptag{display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim2);}
.path-card .pnum{font-family:'Bebas Neue',sans-serif; font-size:56px; line-height:1; margin-top:14px;}
.path-card .pd{font-size:13.5px; line-height:1.55; color:var(--dim); margin-top:10px;}

/* identity */
.swatch-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px;}
.swatch{width:96px;}
.swatch .chip{width:96px; height:96px; border-radius:16px; box-shadow:0 14px 30px rgba(23,19,26,.18);}
.swatch .hex{font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:8px; color:rgba(23,19,26,.5);}
.gradient-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
@media (max-width:800px){ .gradient-row{grid-template-columns:1fr;} }
.gradient-chip{
  height:88px; border-radius:18px; display:flex; align-items:flex-end; padding:18px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:#fff; text-transform:uppercase;
  box-shadow:0 18px 40px rgba(23,19,26,.16);
}
.specimen-row{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px;}
@media (max-width:800px){ .specimen-row{grid-template-columns:1fr;} }
.specimen-card{display:flex; flex-direction:column; gap:16px; padding:38px; border-radius:22px; background:#fff; border:1px solid rgba(23,19,26,.1); box-shadow:0 14px 34px rgba(23,19,26,.06);}
/* both samples share one box height and sit on its bottom edge, so label and note line up across cards */
.spec-word-bebas, .spec-word-open{height:clamp(60px,8vw,110px); display:flex; align-items:flex-end; color:#17131A;}
.spec-word-bebas{font-family:'Bebas Neue',sans-serif; font-size:clamp(60px,8vw,110px); line-height:.8;}
.spec-word-open{font-family:'Open Sans',sans-serif; font-weight:600; font-size:clamp(48px,6.4vw,92px); line-height:.8; padding-bottom:.09em;}
.spec-note{font-size:14px; line-height:1.6; color:rgba(23,19,26,.62); margin:0; max-width:380px;}
.spec-label{font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--pink); margin-top:8px;}

/* role */
.role-row{display:grid; grid-template-columns:150px 1fr; gap:22px; padding:22px 0; border-top:1px solid var(--border);}
.role-row:last-of-type{border-bottom:1px solid var(--border);}
.role-k{font-family:'JetBrains Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim2); padding-top:3px;}
.role-v{font-size:15.5px; line-height:1.6; color:var(--dim);}
@media (max-width:640px){ .role-row{grid-template-columns:1fr; gap:8px;} }

/* hero */
header.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:48px 8vw 130px; position:relative; overflow:hidden;
}
@media (max-width:820px){ header.hero{padding:50px 6vw 60px;} }
.hero .support{font-size:clamp(15px,1.15vw,16.5px); margin-top:14px;}
.hero-sig{
  position:absolute; right:-4vw; top:-8vw; font-size:44vw; line-height:1;
  font-family:'Open Sans',sans-serif; font-weight:700; color:rgba(246,243,238,.033);
  pointer-events:none; user-select:none;
}
header.hero > *:not(.hero-sig):not(.glow){position:relative; z-index:1;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; width:max-content;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  padding:9px 17px; border-radius:100px; border:1px solid var(--border); background:var(--panel);
  margin-bottom:24px; color:var(--dim);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--coral); box-shadow:0 0 12px var(--coral); flex-shrink:0;}
.hero-visual{margin-top:40px; max-width:960px; align-self:center; position:relative; transform:translateX(-40px);}
.hero-phone{
  position:absolute; right:-70px; bottom:-70px; width:260px; z-index:2;
  box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 60px -24px var(--hot);
}
.hero-phone-screen{border-radius:24px; overflow:hidden; aspect-ratio:9/19.5;}
.hero-phone-screen img{display:block; width:100%; height:100%; object-fit:cover; object-position:top;}
@media (max-width:900px){ .hero-phone{display:none;} }

/* footer */
footer{padding:130px 8vw 70px; text-align:center; position:relative; overflow:hidden;}
footer .f-sig{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-58%);
  font-size:36vw; font-family:'Open Sans',sans-serif; font-weight:700; color:rgba(246,243,238,.03);
  pointer-events:none; user-select:none; line-height:1;
}
footer > *:not(.f-sig){position:relative;}
.credit{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim2); margin-top:44px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee .track{animation:none;}
  .stage .browser-frame{transition:none;}
  html{scroll-behavior:auto;}
  .side-nav, .side-nav__label, .side-nav__node, .side-nav__line-fill{transition:none;}
}

/* ---------- SIDE SECTION NAV ---------- */
/* A slim vertical rail: the line is the structural spine, nodes sit fixed to its
   right edge via flex packing (never absolute-positioned math), labels grow/collapse
   to the left without ever moving the line or the nodes.
   Tweak here: --sn-* custom properties control sizing, timing, and label width. */
.side-nav{
  --sn-items: 12;
  --sn-node-size: 7px;
  --sn-node-active-scale: 1.55;
  --sn-label-width: 148px;
  --sn-label-gap: 14px;
  --sn-transition: 2.3s cubic-bezier(.4,0,.2,1);
  --sn-hover-transition: .15s cubic-bezier(.4,0,.2,1);

  position:fixed; top:50%; right:22px; z-index:45;
  transform:translateY(-50%);
  width:calc(var(--sn-label-width) + var(--sn-label-gap) + var(--sn-node-size));
  height:min(58vh, 520px);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.side-nav.is-visible{ opacity:1; pointer-events:auto; }

/* the spine — spans exactly from the first node's center to the last node's center */
.side-nav__line{
  position:absolute;
  top:calc(100% / (var(--sn-items) * 2));
  bottom:calc(100% / (var(--sn-items) * 2));
  right:calc(var(--sn-node-size) / 2 - .5px);
  width:1px;
  background:rgba(246,243,238,.15);
}
.side-nav__line-fill{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform-origin:50% 0%; transform:scaleY(0);
  background:linear-gradient(180deg,var(--coral),var(--hot) 55%,var(--mauve));
}

.side-nav__list{
  position:relative; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; height:100%;
}
.side-nav__item{ flex:1; display:flex; min-height:0; }
.side-nav__link{
  flex:1; width:100%;
  display:flex; align-items:center; justify-content:flex-end;
  text-decoration:none;
}

.side-nav__label{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dim2); white-space:nowrap; text-align:right;
  max-width:0; margin-right:0; opacity:0; overflow:hidden;
  transition:max-width var(--sn-transition), margin-right var(--sn-transition),
             opacity var(--sn-transition), color var(--sn-hover-transition), transform var(--sn-hover-transition);
}
.side-nav.is-expanded .side-nav__label{
  max-width:var(--sn-label-width); margin-right:var(--sn-label-gap); opacity:.8;
}

/* node — a hollow ring by default so the spine visibly runs through its center.
   Sizing must only ever change via transform:scale() (not width/height): this is
   the trailing item in a justify-content:flex-end row, so a width/height change
   grows the box from its fixed right edge, dragging the center off the rail axis.
   Scaling from center (default transform-origin) keeps every node's true center
   identical regardless of state. */
.side-nav__node{
  position:relative; z-index:1; flex:0 0 auto;
  width:var(--sn-node-size); height:var(--sn-node-size);
  border-radius:50%; background:var(--bg);
  border:1.5px solid rgba(246,243,238,.38);
  transform:scale(1); transform-origin:center;
  transition:background var(--sn-transition), border-color var(--sn-hover-transition),
             transform var(--sn-transition), box-shadow var(--sn-transition);
}

/* passed — a section already scrolled through: filled, quiet */
.side-nav__item.is-passed .side-nav__node{
  background:rgba(246,243,238,.55); border-color:rgba(246,243,238,.55);
}

/* active — distinct but restrained: filled with the brand gradient, a touch larger */
.side-nav__item.is-active .side-nav__node{
  background:var(--grad); border-color:transparent;
  transform:scale(var(--sn-node-active-scale));
  box-shadow:0 0 0 3px rgba(237,56,105,.16);
}
.side-nav.is-expanded .side-nav__item.is-active .side-nav__label{
  color:var(--ink); opacity:1;
}

/* hover — obvious but restrained: label brightens and nudges toward the rail */
@media (hover:hover){
  .side-nav__link:hover .side-nav__label{ color:var(--ink); opacity:1; transform:translateX(-2px); }
  .side-nav__link:hover .side-nav__node{ border-color:rgba(246,243,238,.85); }
}

/* light-section contrast — .is-on-light is toggled by the active-section observer
   whenever the currently active section has class="light". Same dark-ink tokens
   already used for section.light content elsewhere in this file. */
.side-nav.is-on-light .side-nav__line{ background:rgba(23,19,26,.18); }
.side-nav.is-on-light .side-nav__label{ color:rgba(23,19,26,.45); }
.side-nav.is-on-light .side-nav__item.is-active .side-nav__label{ color:#17131A; }
.side-nav.is-on-light .side-nav__node{ background:#F7F2E9; border-color:rgba(23,19,26,.32); }
.side-nav.is-on-light .side-nav__item.is-passed .side-nav__node{
  background:rgba(23,19,26,.5); border-color:rgba(23,19,26,.5);
}
@media (hover:hover){
  .side-nav.is-on-light .side-nav__link:hover .side-nav__label{ color:#17131A; }
  .side-nav.is-on-light .side-nav__link:hover .side-nav__node{ border-color:rgba(23,19,26,.7); }
}

/* Tweak here: breakpoint below which the side nav is hidden entirely */
@media (max-width:1024px){
  .side-nav{ display:none; }
}

/* Practitioner reviews */
.reviews-carousel{margin-top:44px;}
.reviews-track{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:22px;}
.reviews-track::-webkit-scrollbar{display:none;}
.review-card{flex:0 0 min(62%, 720px); min-width:0; margin:0; padding:clamp(22px,3vw,36px); border:1px solid var(--border); border-radius:22px; background-color:transparent; background-image:linear-gradient(125deg,rgba(243,116,72,.09),rgba(193,94,162,.04)); scroll-snap-align:start; display:flex; flex-direction:column; transition:background-color .3s ease;}
@media (hover:hover){ .review-card:hover{background-color:rgba(243,116,72,.05);} }
.review-topic{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--coral);}
.review-card blockquote{margin:16px 0 24px; flex:1;}
.review-card blockquote p{margin:0; font-size:clamp(17px,1.7vw,22px); line-height:1.55; letter-spacing:-.01em;}
.review-card figcaption{display:flex; align-items:center; gap:14px; font-size:14px; line-height:1.5;}
.review-card figcaption small{display:block; font-size:12px; color:var(--dim2); margin-top:4px;}
.review-avatar{display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:50%; background:rgba(243,116,72,.12); border:1px solid rgba(243,116,72,.3); color:var(--coral); font-family:'JetBrains Mono',monospace; font-size:12px;}
.reviews-toolbar{display:flex; justify-content:center; margin-top:16px;}
.reviews-toolbar[hidden]{display:none;}
.reviews-dots{display:flex; align-items:center;}
.review-dot{width:44px; height:44px; border:0; background:none; display:grid; place-items:center; cursor:pointer; padding:0;}
.review-dot::after{content:''; width:7px; height:7px; border-radius:10px; background:rgba(255,255,255,.35); transition:background-color .2s ease, width .3s ease;}
@media (hover:hover){ .review-dot:not([aria-current]):hover::after{background:#fff;} }
.review-dot[aria-current]::after{width:24px; background:var(--grad);}
/* visually hidden, still announced to screen readers when the slide changes */
.reviews-count{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
.reviews-source{display:inline-flex; align-items:center; gap:3px; color:var(--ink); text-decoration:none; white-space:nowrap; transition:color .15s ease;}
.reviews-source:hover{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; text-decoration:underline; text-decoration-color:var(--hot); text-underline-offset:4px;}
/* the icon can't take a clipped gradient, so it picks up the gradient's end color */
.reviews-source:hover .reviews-source__icon{color:var(--mauve);}
.reviews-source__icon{width:.9em; height:.9em; transition:transform .15s ease;}
.reviews-source:hover .reviews-source__icon{transform:translate(1px,-1px);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
@media(max-width:900px){ .review-card{flex-basis:78%;} }
@media(max-width:560px){
  .review-card{flex-basis:86%;}
  .reviews-dots{gap:0;}
  .review-dot{width:32px;}
}

/* Where It Sits: EOB vs AskERISA workflow comparison */
.wf-head{margin-top:96px;}
.wf-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; align-items:stretch;}
.wf-lane{padding:30px; border-radius:22px; border:1px solid var(--border);}
.wf-lane.eob{--wf-accent:var(--mauve); background:linear-gradient(125deg,rgba(193,94,162,.10),rgba(140,43,66,.06)); border-color:rgba(193,94,162,.3);}
.wf-lane.us{--wf-accent:var(--coral); background:linear-gradient(125deg,rgba(243,116,72,.10),rgba(236,57,108,.05)); border-color:rgba(243,116,72,.32);}
.wf-tag{display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);}
.wf-tag > span:first-child{display:flex; align-items:center; gap:9px;}
.wf-tag .dt{background:var(--wf-accent);}
.wf-price{font-family:'Bebas Neue',sans-serif; font-size:30px; line-height:1; letter-spacing:0; color:var(--wf-accent);}
.wf-price small{font-family:'Open Sans',sans-serif; font-size:13px; font-weight:600; text-transform:none;}
.wf-stat{margin-top:22px;}
.wf-num{font-family:'Bebas Neue',sans-serif; font-size:64px; line-height:1;}
.wf-lane.eob .wf-num{color:var(--ink);}
.wf-lbl{font-size:14px; line-height:1.5; color:var(--dim); margin-top:8px;}
.wf-steps{list-style:none; margin:22px 0 0; padding:0; counter-reset:wf;}
.wf-steps li{counter-increment:wf; display:grid; grid-template-columns:34px 1fr; column-gap:14px; padding:14px 0; border-top:1px solid var(--border); font-size:14px; line-height:1.55; color:var(--dim);}
.wf-steps li:last-child{padding-bottom:0;}
.wf-steps li::before{content:counter(wf,decimal-leading-zero); grid-row:span 2; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--wf-accent); padding-top:2px;}
.wf-steps b{display:block; font-weight:600; color:var(--ink); margin-bottom:2px;}
@media (max-width:900px){ .wf-grid{grid-template-columns:1fr;} }
@media (max-width:480px){ .wf-lane{padding:22px;} .wf-num{font-size:52px;} }

/* Command center: tabbed admin console */
.cc{margin-top:44px;}
.cc-tabs{display:flex; gap:28px; margin-bottom:28px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none;}
.cc-tabs::-webkit-scrollbar{display:none;}
.cc-tab{position:relative; flex:none; padding:0 0 14px; border:0; background:none; font-family:'Open Sans',sans-serif; font-size:15px; font-weight:500; color:var(--dim2); cursor:pointer; white-space:nowrap; transition:color .2s ease;}
.cc-tab::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--grad); transform:scaleX(0); transition:transform .25s ease;}
.cc-tab:hover{color:var(--ink);}
.cc-tab[aria-selected="true"]{color:var(--ink);}
.cc-tab[aria-selected="true"]::after{transform:scaleX(1);}
.cc-panel[hidden]{display:none;}
/* fixed-height screen so switching tabs never shifts the page; taller screenshots are cropped from the top */
.cc-view{aspect-ratio:2880/1568; overflow:hidden;}
.cc-placeholder{height:100%; aspect-ratio:auto;}
.cc-pills{justify-content:center; max-width:640px; margin-top:0;}
.cc-desc{margin:0 0 24px; font-size:clamp(15px,1.25vw,17px); line-height:1.65; color:var(--dim);}
@media (prefers-reduced-motion: reduce){ .cc-tab::after{transition:none;} }
.path-q{display:block; margin-bottom:6px; font-size:15px; font-weight:500; color:var(--ink);}

/* Visual identity: client logo lockups and tagline cards */
.brand-logos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; margin-top:44px;}
.brand-logo{display:flex; align-items:center; justify-content:center; min-width:0; height:clamp(130px,13vw,190px); padding:28px; border-radius:22px; background:#fff; border:1px solid rgba(23,19,26,.08);}
.brand-logo img{max-width:80%; max-height:100%; object-fit:contain;}
.brand-logo:nth-child(2) img{max-width:100%; height:100%;}
.brand-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px;}
.brand-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:4/3; border-radius:18px; color:#fff; text-align:center; box-shadow:0 12px 28px rgba(23,19,26,.14);}
.brand-card img{width:42%;}
.brand-tagline{font-size:clamp(16px,1.7vw,26px); line-height:.95;}
.bc-sunset{background:linear-gradient(90deg,#f37448,#ec396c);}
.bc-citrus{background:linear-gradient(90deg,#78be40,#f1d205);}
.bc-berry{background:linear-gradient(90deg,#ed3869,#c15ea2);}
.bc-white{background:#fff; color:#8c2b42; border:1px solid rgba(23,19,26,.08);}
@media (max-width:800px){ .brand-logos, .brand-cards{grid-template-columns:1fr 1fr;} }
.bc-white img{width:63%;}