/* Shared chrome + palette for Collision Bureau pages. Extracted from
   index.html. Pages that link this inherit the new nav, menu, FAB,
   modal, footer, buttons, chip, palette tokens, orbs, beams, and
   per-element rules. Hero-specific selectors (.vhero, .record, etc.)
   apply only when those elements are present on the page. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0A0714;color:#EEE8FA;font-family:'Satoshi',"Inter",-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

:root{
  --violet:#7C5CFC;
  --violet-h:#A78BFF;
  --violet-d:#6E4FF0;
  --coral:#F0805F;
  --mono:'Space Mono',ui-monospace,"SF Mono",monospace;
  --disp:'Satoshi','Manrope',-apple-system,sans-serif;
  --tx:#F2F0FA;
  --tx-d2:rgba(242,240,250,.74);
  --tx-d3:rgba(242,240,250,.56);
  --tx-d4:rgba(242,240,250,.38);
  --rule:rgba(242,240,250,.09);
  --rule-2:rgba(242,240,250,.18);
  --rule-d:rgba(242,240,250,.14);
  --rp:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --lk:#17141F;
  --lk2:#453F56;
  --lk3:#6A6382;
  --lk4:#938CA8;
  --l-rule:#EDE9F5;
  --l-rule-2:#DCD5EC;
}

/* ─── NAV ─────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s}
.nav.on-light{background:rgba(255,255,255,.92);border-bottom-color:var(--l-rule);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.nav .wrap{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .brand img{height:30px;filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.6));transition:filter .3s}
.nav.on-light .brand img{visibility:hidden}
.nav.on-light .brand{display:inline-block;height:30px;aspect-ratio:285.46/46.73;background:linear-gradient(135deg,#4A2EC9 0%,#B04A3A 100%);-webkit-mask:url('/img/brand/cb-horizontal.svg') no-repeat left center/contain;mask:url('/img/brand/cb-horizontal.svg') no-repeat left center/contain;filter:drop-shadow(0 1px 6px rgba(74,46,201,.2))}
@media(max-width:620px){.nav.on-light .brand{height:26px}}
.nav-right{display:flex;gap:8px;align-items:center}
.nav-link{font-family:var(--disp);font-size:14px;font-weight:600;color:rgba(255,255,255,.72);padding:9px 16px;border-radius:999px;transition:color .15s,background .15s;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav.on-light .nav-link{color:var(--lk);text-shadow:none}
.nav.on-light .nav-link:hover{color:var(--lk);background:rgba(0,0,0,.04)}
.nav-menu{background:rgba(10,7,20,.35);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 15px 9px 18px;font-family:var(--disp);font-weight:700;font-size:14px;color:#FFFFFF;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,color .3s,background .15s;text-shadow:0 1px 16px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nav-menu:hover{border-color:rgba(255,255,255,.4)}
.nav.on-light .nav-menu{border-color:var(--l-rule-2);color:var(--lk);background:rgba(255,255,255,.6);text-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--disp);font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn-navy{background:linear-gradient(180deg,#8B6CFF,#6E4FF0);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 28px rgba(124,92,252,.35)}
.btn-navy:hover{background:linear-gradient(180deg,#9A7EFF,#7C5CFC)}
.btn-ink{background:#0A0714;color:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 24px rgba(10,7,20,.25)}
.btn-ink:hover{background:#1E1832;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 30px rgba(10,7,20,.35);transform:translateY(-1px)}
.btn-bone{background:#FFFFFF;color:var(--lk);box-shadow:0 10px 40px rgba(167,139,255,.25)}
.btn-bone:hover{transform:translateY(-1px)}
.btn-glass{background:rgba(242,240,250,.04);color:var(--tx);border-color:var(--rule-2)}
.btn-glass:hover{border-color:rgba(242,240,250,.45);background:rgba(242,240,250,.08)}
.btn-line{background:transparent;color:var(--lk);border-color:var(--l-rule-2)}
.btn-line:hover{border-color:var(--lk);background:#FAF9FD}
.textlink{color:var(--violet-d);font-family:var(--disp);font-weight:500;font-size:14px}
.textlink:hover{text-decoration:underline}
.textlink.on-dark{color:var(--violet-h)}

/* ─── VIDEO HERO ──────────────────────────────────────────────── */
.vhero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;background:#0A0714}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:0;opacity:1;background:#0A0714}
.vhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,7,20,.9) 0%,rgba(10,7,20,.72) 32%,rgba(10,7,20,.48) 62%,rgba(10,7,20,.38) 100%),
  linear-gradient(180deg,rgba(10,7,20,.55) 0%,rgba(10,7,20,.3) 38%,rgba(10,7,20,.42) 70%,rgba(10,7,20,.68) 100%),
  radial-gradient(ellipse 70% 80% at 30% 55%,rgba(10,7,20,.5) 0%,rgba(10,7,20,.0) 70%)
}
.vhero .wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:160px 24px 150px;width:100%}
.hcols{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
@media(max-width:980px){.hcols{grid-template-columns:1fr;gap:48px}}
.vhero .ek{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;display:inline-flex;align-items:center;gap:14px;margin-bottom:28px;font-weight:700;text-shadow:0 1px 16px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}
.vhero .ek::before{content:"";width:30px;height:1px;background:var(--violet-h)}
.vhero h1{font-family:var(--disp);font-weight:700;font-size:clamp(44px,6vw,88px);letter-spacing:-.03em;line-height:.98;margin:0 0 28px;max-width:14ch;color:#FFFFFF;text-shadow:0 2px 24px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5)}
.vhero h1 em{font-style:normal;background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;text-shadow:none;filter:drop-shadow(0 2px 20px rgba(0,0,0,.5))}
.vhero .lede{font-size:19px;line-height:1.55;color:rgba(238,232,250,.95);max-width:50ch;margin:0 0 36px;font-weight:400;text-shadow:0 1px 20px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5)}
.vhero .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.hprof{display:grid;grid-template-columns:repeat(3,auto);gap:0 32px;align-items:start;margin-top:4px}
.hs{display:flex;flex-direction:column;gap:6px;padding-right:32px;border-right:1px solid rgba(255,255,255,.1)}
.hs:last-child{border-right:none;padding-right:0}
.hn{font-family:var(--disp);font-weight:700;font-size:clamp(36px,3.6vw,48px);letter-spacing:-.03em;color:#FFFFFF;line-height:.95}
.hn-grad{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d3);line-height:1.35;white-space:nowrap}
@media(max-width:720px){
  .hprof{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:0;width:100%}
  .hs{padding:0 10px 0 0;border-right:1px solid rgba(255,255,255,.12);border-top:none;align-items:flex-start;gap:4px;min-width:0;overflow:hidden}
  .hs + .hs{padding-left:10px}
  .hs:last-child{border-right:none;padding-right:0}
  .hn{font-size:26px;line-height:1;letter-spacing:-.025em}
  .hl{font-size:9.5px;letter-spacing:.1em;line-height:1.25;white-space:nowrap;max-width:none;overflow:hidden;text-overflow:ellipsis}
  .hn .ha{font-size:8px;padding:2px 5px;margin-left:4px;letter-spacing:.1em;transform:translateY(-5px)}
}

/* ─── ROUTING RECORD ──────────────────────────────────────────── */
.record{border-radius:20px;background:linear-gradient(180deg,rgba(43,34,66,.32) 0%,rgba(29,22,48,.42) 100%);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);border:1px solid rgba(167,139,255,.26);font-family:var(--disp);font-size:14px;line-height:1.5;color:var(--tx-d2);box-shadow:0 40px 90px rgba(4,2,10,.55),inset 0 1px 0 rgba(255,255,255,.12);position:relative;overflow:hidden}
.record .rhead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d3);font-weight:700}
.record .rhead .live{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.record .rhead .live::before{content:"";width:6px;height:6px;background:#F0805F;border-radius:50%;flex:none;box-shadow:0 0 12px rgba(240,128,95,.8);animation:livedot 2.2s ease-in-out infinite;-webkit-background-clip:border-box;background-clip:border-box}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}
.record dl{margin:0;padding:22px 22px 20px;display:grid;grid-template-columns:auto 1fr;gap:14px 24px}
.record dt{font-family:var(--mono);color:var(--tx-d4);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding-top:3px;font-weight:400}
.record dd{margin:0;color:#FFFFFF;font-size:15px;font-family:var(--disp);font-weight:500;letter-spacing:-.005em}
@media(max-width:420px){.record dl{grid-template-columns:1fr;gap:4px 0}.record dt{padding-top:12px}}
.lrmeter{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;align-items:center;padding:14px 22px 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d3);font-weight:700}
.lrmeter .track{grid-column:1/-1;height:4px;border-radius:999px;background:rgba(242,240,250,.08);overflow:hidden}
.lrmeter .bar{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#A78BFF 0%,#F0805F 100%)}
.lrmeter .pct{color:#F0805F;font-family:var(--mono);font-weight:700}
.routline{display:flex;flex-wrap:wrap;gap:8px;padding:18px 22px 4px;border-top:1px solid rgba(255,255,255,.06);margin-top:14px}
.routline i{font-style:normal;font-family:var(--disp);font-size:11px;letter-spacing:.04em;color:#FFFFFF;background:linear-gradient(135deg,rgba(167,139,255,.18) 0%,rgba(240,128,95,.14) 100%);border:1px solid rgba(167,139,255,.42);border-radius:var(--rp);padding:6px 13px;font-weight:700}
.routline i.dim{color:var(--tx-d4);background:transparent;border-color:rgba(255,255,255,.08);font-weight:500}
.record .rfoot{border-top:1px solid rgba(255,255,255,.06);padding:14px 22px;color:var(--tx-d4);font-size:11.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--disp);font-weight:500;margin-top:14px}

/* ─── LIGHT SECTIONS (pure white) ─────────────────────────────── */
.light{background:#FFFFFF;color:var(--lk);padding:140px 0}
.light.tight{padding:40px 0}
.light .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ─── LEGACY .sec SURFACES → WHITE ─────────────────────────────
   Pages built against app.css's older .sec/.sec.tight/.sec.alt
   wrappers (partners, blog index, article bodies) inherit the
   orchid dark body otherwise. Force a light surface so they read
   like the lane pages between their own dark hero and dark CTA. */
main > .sec,
main > .sec.tight{background:#FFFFFF;color:var(--lk)}
main > .sec h2,main > .sec h3{color:var(--lk)}
main > .sec p,main > .sec .lede{color:var(--lk2)}
main > .sec a{color:var(--violet-d)}
main > .sec .chip{color:var(--violet-d);border-color:var(--violet-d)}
/* .sec.alt was a dark bordered card; convert to full-bleed dark band to match .dark. */
main > .sec.alt,main > .darksec{margin:0;border:0;border-radius:0;background:#0A0714;color:var(--tx);padding:140px 0;position:relative;overflow:hidden}
/* Re-skin the ::after edge-light so dark bands get the same ambient glow as orchid .dark sections. */
main > .sec.alt::after{content:"";position:absolute;right:-220px;top:14%;width:640px;height:640px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(167,139,255,.26) 0%,rgba(124,92,252,.14) 35%,transparent 68%);filter:blur(28px);opacity:.9;z-index:0;display:block}
main > .sec.alt > .wrap{position:relative;z-index:1}
main > .sec.alt h2,main > .sec.alt h3,main > .darksec h2,main > .darksec h3{color:#FFFFFF}
main > .sec.alt p,main > .sec.alt .lede,main > .darksec p,main > .darksec .lede{color:var(--tx-d2)}
main > .sec.alt a,main > .darksec a{color:var(--violet-h)}
main > .sec.alt .chip,main > .darksec .chip{color:var(--violet-h);border-color:var(--violet-h)}

/* Pricing tiers on dark — give each tier a subtle card so they read as distinct columns. */
main > .sec.alt .tiers{grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px;position:relative;z-index:1}
main > .sec.alt .tier{background:rgba(242,240,250,.03);border:1px solid rgba(242,240,250,.1);border-radius:16px;padding:28px 24px 32px;transition:border-color .18s,background .18s}
main > .sec.alt .tier:hover{border-color:rgba(167,139,255,.35);background:rgba(167,139,255,.05)}
main > .sec.alt .tier .name{color:#FFFFFF;font-weight:700}
main > .sec.alt .tier .for{color:var(--tx-d3)}
main > .sec.alt .tier .price .n{color:#FFFFFF}
main > .sec.alt .tier .price .per{color:var(--tx-d3)}
main > .sec.alt .tier .price .note{color:var(--tx-d3)}
main > .sec.alt .tier ul{color:var(--tx-d2);font-size:13.5px}
main > .sec.alt .tier ul li::before{background:var(--violet-h)}

/* ROI calculator — the input card was semi-transparent dark; on the new white .sec
   surface it rendered as medium gray, so the toggle contrast broke. Make the card
   fully opaque dark so the designed-for-dark toggle states read correctly. */
main > .sec .roi-in{background:linear-gradient(180deg,#1A1230 0%,#0A0714 100%);border-color:rgba(167,139,255,.18)}
main > .sec .roi-in .rfield,main > .sec .roi-in .rl,main > .sec .roi-in .rnote{color:var(--tx-d2)}
main > .sec .roi-in .rl em{color:var(--tx-d3)}
main > .sec .roi-in .rl b{color:#FFFFFF}
.roi-modes button.on,.roi-tiers button.on{color:#FFFFFF;background:rgba(167,139,255,.28);border-color:rgba(167,139,255,.6);font-weight:700}

/* Article body (blog/*.html) — hero/CTA keep their own dark bg. */
.artmain.artbody{background:#FFFFFF;color:var(--lk)}
.artbody h2,.artbody h3,.artbody h4{color:var(--lk)}
.artbody p{color:var(--lk2)}
.artbody p strong,.artbody p b{color:var(--lk)}
.artbody a{color:var(--violet-d)}
.artbody ul,.artbody ol{color:var(--lk2)}
.artbody .tldr{background:#F5F2FA;color:var(--lk);border-color:rgba(167,139,255,.22)}
.artbody .tldr .lb,.artbody .tldr p{color:var(--lk)}
.artbody .keytake,.artbody .pitfall{background:#F5F2FA;color:var(--lk);border-color:rgba(167,139,255,.22)}
.artbody .keytake .lb,.artbody .pitfall .lb{color:var(--violet-d)}
.artbody .keytake p,.artbody .pitfall p{color:var(--lk)}
.artbody .scopenote{color:var(--lk3)}
.artbody .atoc{background:#FAF9FD;border-color:var(--l-rule-2);color:var(--lk)}
.artbody .atoc .lb{color:var(--violet-d)}
.artbody .atoc a{color:var(--lk)}
.artbody .artrel{background:#F5F2FA;color:var(--lk);border-color:rgba(167,139,255,.22)}
.artbody .artrel .lb{color:var(--violet-d)}
.artbody .artrel a{color:var(--lk)}
.artbody .ameta{color:var(--lk3)}
/* The CTA band inside articles keeps its dark treatment. */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-d);background:transparent;border:1px solid var(--violet-d);border-radius:999px;padding:7px 14px;margin-bottom:28px}
.light h2{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.2vw,58px);letter-spacing:-.025em;line-height:1.04;margin:0 0 20px;color:var(--lk)}
.light .lede{font-size:17.5px;line-height:1.65;color:var(--lk2);max-width:62ch;margin:0}

/* ─── ASKBAND ─────────────────────────────────────────────────── */
.askband{background:#F7F5FC;color:var(--lk)}
.askband .wrap{max-width:1240px;margin:0 auto;padding:120px 24px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
@media(max-width:860px){.askband .wrap{grid-template-columns:1fr;gap:44px;padding:88px 24px}}
.askband .q{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.6vw,64px);letter-spacing:-.025em;line-height:1.05;color:var(--lk);margin:0;max-width:14ch}
.askband .q .k{display:block;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-d);margin-bottom:22px}
.askband .opts3{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.askband .opts3 > a{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--lk);border:1px solid #DED5EE;background:#FFFFFF;padding:32px 20px;border-radius:20px;transition:border-color .2s,color .2s,transform .2s,box-shadow .25s;line-height:1.3;min-height:88px}
.askband .opts3 > a:hover{border-color:var(--violet-d);color:var(--violet-d);transform:translateY(-3px);box-shadow:0 16px 36px rgba(110,79,240,.16)}
.askband .skip{grid-column:1/-1;font-size:14.5px;color:var(--lk3);margin:12px 0 0;text-align:center}
.askband .skip a{color:var(--violet-d);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media(max-width:720px){
  .askband .opts3{grid-template-columns:1fr}
  .askband .opts3 > a{padding:26px 16px;font-size:16px;min-height:72px}
}

/* ─── STATS ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0;border-top:1px solid var(--l-rule-2);border-bottom:1px solid var(--l-rule-2)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:36px 20px;border-right:1px solid var(--l-rule);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.stat:last-child{border-right:none}
@media(max-width:860px){
  .stat{border-right:1px solid var(--l-rule);border-bottom:1px solid var(--l-rule);padding:30px 16px}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}
}
.stat .n{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(56px,7vw,96px);letter-spacing:-.04em;color:var(--lk);line-height:.95;margin:0}
.stat .n .u{color:var(--violet-d);font-weight:700;font-size:.65em;letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--lk3);line-height:1.45;max-width:22ch;margin:0;display:block;font-weight:500}

/* ─── COLS2 ───────────────────────────────────────────────────── */
.cols2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
@media(max-width:860px){.cols2{grid-template-columns:1fr;gap:40px}}
.pull{font-family:var(--disp);font-weight:500;font-size:clamp(23px,2.6vw,32px);line-height:1.24;letter-spacing:-.016em;color:var(--lk);max-width:22ch;border-left:2px solid var(--violet-d);padding-left:24px;margin:0}

/* ─── LEAD-CAT (7 lanes) ──────────────────────────────────────── */
.lead-cats{display:grid;gap:0;margin-top:64px;border-top:1px solid var(--l-rule-2)}
.lead-cat{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:48px;align-items:start;padding:48px 56px 48px 0;border-bottom:1px solid var(--l-rule-2);transition:background .25s;margin-right:0}
.lead-cat:hover{background:#FAF8FD}
.lead-cat .num{font-family:var(--disp);font-weight:300;font-size:clamp(44px,5vw,72px);letter-spacing:-.03em;color:var(--violet-d);line-height:1;font-variant-numeric:tabular-nums}
.lead-cat .body h3{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.2vw,44px);margin:0 0 16px;letter-spacing:-.02em;color:var(--lk);line-height:1.05}
.lead-cat .body p{font-size:16.5px;color:var(--lk2);line-height:1.65;max-width:60ch;margin:0}
.lead-cat .cta{display:grid;gap:12px;justify-items:end;align-self:center}
@media(max-width:1024px){
  .lead-cat{grid-template-columns:88px minmax(0,1fr);gap:28px 32px;padding:44px 32px 44px 0}
  .lead-cat .num{font-size:48px}
  .lead-cat .cta{grid-column:1/-1;justify-items:start;margin-top:14px}
}
@media(max-width:620px){
  .lead-cat{grid-template-columns:64px minmax(0,1fr);gap:20px 20px;padding:36px 20px 36px 0}
  .lead-cat .num{font-size:40px}
}

/* ─── NUMBERED ROWS ───────────────────────────────────────────── */
.rows{list-style:none;margin:0;padding:0;counter-reset:row}
.rows > li{counter-increment:row;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 24px;padding:28px 0;border-top:1px solid var(--l-rule);align-items:start}
.rows > li:last-child{border-bottom:1px solid var(--l-rule)}
.rows > li::before{content:counter(row,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--mono);font-size:11.5px;color:var(--violet-d);letter-spacing:.06em;padding-top:5px;font-variant-numeric:tabular-nums}
.rows > li > *{grid-column:2}
.rows h3{font-size:20px;margin:0 0 8px;color:var(--lk);font-family:var(--disp);font-weight:700}
.rows p{font-size:15.5px;color:var(--lk3);line-height:1.7;max-width:62ch;margin:0}
.rows.plain{counter-reset:none}
.rows.plain > li{grid-template-columns:minmax(0,1fr)}
.rows.plain > li::before{content:none}
.rows.plain > li > *{grid-column:1}

/* ─── DARK SECTION (02 After you submit) ──────────────────────── */
.dark{background:#0A0714;color:var(--tx);padding:140px 0;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,7,20,.0) 0%,rgba(10,7,20,0) 100%);pointer-events:none}
.dark .wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
.dark .chip{color:var(--violet-h);background:transparent;border-color:var(--violet-h)}
.dark h2{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.6vw,64px);letter-spacing:-.025em;line-height:1.02;margin:0 0 22px;color:#FFFFFF}
.dark h2 em{font-style:normal;background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.dark .lede{font-size:17.5px;line-height:1.65;color:var(--tx-d2);max-width:62ch;margin:0}
.dark .rows > li{border-top-color:var(--rule)}
.dark .rows > li:last-child{border-bottom-color:var(--rule)}
.dark .rows > li::before{color:var(--violet-h)}
.dark .rows h3{color:#FFFFFF}
.dark .rows p{color:var(--tx-d2)}
.vlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d3);margin:0 0 14px}
.vstack{display:grid;gap:0;justify-items:start;align-content:center}
.vchip{display:flex;align-items:center;gap:13px;background:linear-gradient(180deg,#1B1536,#140F28);border:1px solid var(--rule-2);border-radius:16px;padding:13px 18px 13px 13px;box-shadow:0 18px 50px rgba(5,3,12,.5)}
.vchip + .vchip{margin-top:-6px}
.vchip:nth-child(2){margin-left:34px}
.vchip:nth-child(3){margin-left:12px}
.vchip:nth-child(4){margin-left:46px}
.vchip .ic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(124,92,252,.16);border:1px solid rgba(167,139,255,.3);color:var(--violet-h);font-family:var(--mono);font-size:13px}
.vchip .tt{font-size:11.5px;color:var(--tx-d3);display:block;margin-bottom:2px}
.vchip .tv{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--tx);display:block}
.vchip .ok{margin-left:14px;color:#7BD88F;font-size:15px}

/* ─── FIELD GUIDE / RESOURCE CARDS ───────────────────────────── */
.guidelinks{display:grid;gap:0;border-top:1px solid var(--l-rule-2)}
.guidelinks a{display:grid;grid-template-columns:120px minmax(0,1fr) 40px;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--l-rule-2);color:var(--lk);transition:background .25s,padding-left .25s}
.guidelinks a:hover{background:#FAF8FD;padding-left:12px}
.guidelinks .gpill{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-d);font-weight:700}
.guidelinks .gtitle{font-family:var(--disp);font-weight:500;font-size:17px;line-height:1.4;letter-spacing:-.012em;color:var(--lk)}
.guidelinks .garrow{font-family:var(--disp);font-weight:400;font-size:20px;color:var(--violet-d);text-align:right;transition:transform .25s}
.guidelinks a:hover .garrow{transform:translateX(6px)}
@media(max-width:720px){
  .guidelinks a{grid-template-columns:1fr auto;gap:8px 16px;padding:22px 0;grid-template-rows:auto auto}
  .guidelinks .gpill{grid-column:1}
  .guidelinks .garrow{grid-column:2;grid-row:1/-1;align-self:center;font-size:18px}
  .guidelinks .gtitle{grid-column:1}
}
.art-beam::after{content:"";position:absolute;left:8%;right:8%;top:58%;height:2px;background:linear-gradient(90deg,transparent,rgba(167,139,255,.5) 20%,#6E4FF0 55%,rgba(240,128,95,.6) 80%,transparent);box-shadow:0 0 14px rgba(167,139,255,.5),0 0 44px rgba(167,139,255,.4)}
.art-beam::before{content:"";position:absolute;left:14%;right:14%;top:58%;height:60px;transform:translateY(-100%);background:linear-gradient(90deg,rgba(236,72,153,.3),rgba(124,92,252,.35) 55%,rgba(94,210,230,.3));filter:blur(22px);border-radius:50%}
.art-rows i{position:absolute;left:12%;right:12%;height:22px;border-radius:7px;background:rgba(124,92,252,.08);border:1px solid rgba(124,92,252,.14)}
.art-rows i:nth-child(1){top:22px}.art-rows i:nth-child(2){top:54px;right:26%}.art-rows i:nth-child(3){top:86px;right:40%}
.art-rows i::after{content:"";position:absolute;right:8px;top:6px;width:34px;height:9px;border-radius:999px;background:rgba(124,92,252,.5)}
.art-pass i{position:absolute;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#2F8A4D;background:rgba(123,216,143,.18);border:1px solid rgba(123,216,143,.5);border-radius:999px;padding:5px 12px}
.art-pass i:nth-child(1){top:26px;left:14%}.art-pass i:nth-child(2){top:62px;left:34%}.art-pass i:nth-child(3){top:98px;left:20%}

/* ─── CTA BAND ────────────────────────────────────────────────── */
.ctaband{background:#0A0714;padding:160px 0 180px;text-align:center;color:#FFFFFF;position:relative;overflow:hidden}
.ctaband .wrap{max-width:900px;margin:0 auto;padding:0 24px;position:relative}
.ctaband .chip{color:var(--violet-h);border-color:var(--violet-h);background:transparent;margin-bottom:28px}
.ctaband h2{font-family:var(--disp);font-weight:700;font-size:clamp(44px,5.4vw,80px);letter-spacing:-.028em;line-height:1;margin:0 0 22px;color:#FFFFFF}
.ctaband h2 em{font-style:normal;background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.ctaband p{color:rgba(238,232,250,.78);max-width:52ch;font-size:17.5px;margin:0 auto;line-height:1.6}
.ctaband .actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.ctaband .btn-glass{background:rgba(242,240,250,.06);color:#FFFFFF;border-color:rgba(255,255,255,.2)}
.ctaband .btn-glass:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}

/* ─── MOTION / MOBILE ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .record .rhead .live::before{animation:none}
  .ccard,.btn{transition:none}
}
@media(max-width:620px){
  .nav .wrap{padding:12px 18px;gap:10px}
  .nav-link{padding:9px 12px;font-size:13.5px}
  .nav-menu{padding:9px 13px 9px 15px;font-size:13.5px}
  .nav .brand img{height:26px}
  /* Keep horizontal logo visible on mobile (app.css hides .lg-h at this breakpoint). */
  .nav .brand img.lg-h{display:block}
  .vhero{min-height:100vh}
  /* Mobile: video (and poster) fills the full hero via cover — contain would
     leave a tiny 211px letterboxed strip in a 1189px-tall portrait viewport. */
  .vhero video{object-fit:cover !important}
  .vhero .wrap{padding:110px 20px 90px}
  .vhero h1{font-size:40px;max-width:none;line-height:1.02}
  .vhero .lede{font-size:17px}
  /* Hide ALWAYS pill on mobile — "No cost" label below says it */
  .vhero .hn .ha{display:none}
  /* Lock routing record inside the hero wrap */
  .record{max-width:100%;width:100%;box-sizing:border-box}
  .record dl,.record .rhead,.record .lrmeter,.record .routline,.record .rfoot{box-sizing:border-box}
  .hcols{min-width:0}
  .hcols > *{min-width:0}
  /* Mobile: shift overlay to text region (upper area), stronger */
  .vhero::after{background:
    linear-gradient(180deg,rgba(10,7,20,.9) 0%,rgba(10,7,20,.72) 32%,rgba(10,7,20,.48) 62%,rgba(10,7,20,.38) 100%),
    linear-gradient(90deg,rgba(10,7,20,.42) 0%,rgba(10,7,20,.18) 50%,rgba(10,7,20,.28) 100%),
    radial-gradient(ellipse 110% 70% at 32% 30%,rgba(10,7,20,.5) 0%,rgba(10,7,20,.0) 70%)
    !important}
  .light,.dark{padding:84px 0}
  .light.tight{padding:32px 0}
  .ctaband{padding:100px 0 120px}
  .lead-cat h3{font-size:28px}
}

.record.run{position:relative}
.record.run::after{content:"";position:absolute;left:0;right:0;top:-40%;height:36%;background:linear-gradient(180deg,transparent,rgba(167,139,255,.08) 45%,rgba(240,128,95,.16) 50%,rgba(167,139,255,.08) 55%,transparent);pointer-events:none;animation:recScan 3s linear infinite}
@keyframes recScan{0%{transform:translateY(0)}100%{transform:translateY(260%)}}
.routline i[data-on]:not(.lit){color:var(--tx-d4);background:transparent;border-color:rgba(255,255,255,.08);font-weight:500;transition:color .25s,background .25s,border-color .25s,font-weight .25s}
.routline i[data-on].lit{color:#FFFFFF;background:linear-gradient(135deg,rgba(167,139,255,.18) 0%,rgba(240,128,95,.14) 100%);border-color:rgba(167,139,255,.42);font-weight:700}
.record dd.typing::after{content:"";display:inline-block;width:7px;height:1em;margin-left:3px;background:#F0805F;vertical-align:-2px;animation:caret .9s steps(1) infinite}
@keyframes caret{0%,55%{opacity:1}60%,100%{opacity:0}}
.lrmeter .bar{transition:width .32s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion: reduce){
  .record.run::after{animation:none}
  .record dd.typing::after{animation:none;opacity:0}
}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer{background:#140C25;color:var(--tx-d2);padding:72px 0 40px;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(167,139,255,.4) 20%,rgba(240,128,95,.3) 50%,rgba(167,139,255,.4) 80%,transparent 100%)}
.footer .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.footer .cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,3fr);gap:60px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);align-items:start}
@media(max-width:980px){.footer .cols{grid-template-columns:1fr;gap:40px}}
.footer .fbrand{display:flex;flex-direction:column;gap:14px}
.footer .fbrand .phoneblk{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--tx-d3)}
.footer .fbrand .fphone{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.01em;color:#FFFFFF;text-decoration:none}
.footer .fbrand .fphone:hover{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer .fbrand .phonetime{font-size:12.5px;color:var(--tx-d3)}
.footer .brand img{height:30px;filter:brightness(0) invert(1);margin-bottom:16px}
.footer .tag{font-family:var(--disp);font-weight:500;font-size:14px;color:var(--tx-d3);letter-spacing:-.005em;max-width:28ch;line-height:1.5}
.footer nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
@media(max-width:980px){.footer nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media(max-width:580px){.footer nav{grid-template-columns:1fr;gap:28px}}
.footer nav > div{display:flex;flex-direction:column;gap:10px}
.footer nav .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-h);font-weight:700;margin-bottom:8px}
.footer nav a{font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--tx-d2);transition:color .15s}
.footer nav a:hover{color:#FFFFFF}
.footer .legal{padding-top:28px;display:grid;gap:12px;max-width:980px}
.footer .legal p{font-size:11.5px;line-height:1.55;color:var(--tx-d4);margin:0}
.footer .colophon{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;margin-top:8px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-d4);flex-wrap:wrap}
.footer .colophon .mark{color:var(--violet-h);font-weight:700}


/* ─── ORBS: brand-palette aurora inside dark sections ────────── */
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbs .orb{position:absolute;border-radius:50%;will-change:transform;opacity:.9}
.orbs .orb.a{width:680px;height:680px;filter:blur(80px);background:radial-gradient(circle,rgba(124,92,252,.45),transparent 66%);top:-14%;left:-10%}
.orbs .orb.b{width:560px;height:560px;filter:blur(75px);background:radial-gradient(circle,rgba(167,139,255,.30),transparent 66%);bottom:-16%;right:-10%}
.orbs .orb.c{width:420px;height:420px;filter:blur(70px);background:radial-gradient(circle,rgba(240,128,95,.22),transparent 66%);top:40%;left:55%}
@media (prefers-reduced-motion: no-preference){
  .orbs .orb.a{animation:orbA 22s ease-in-out infinite}
  .orbs .orb.b{animation:orbB 28s ease-in-out infinite}
  .orbs .orb.c{animation:orbC 34s ease-in-out infinite}
  @keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(14vw,10vh)}}
  @keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12vw,-8vh)}}
  @keyframes orbC{0%,100%{transform:translate(0,0)}33%{transform:translate(-8vw,6vh)}66%{transform:translate(6vw,-8vh)}}
}
.vhero,.dark,.ctaband{position:relative}
.vhero .orbs,.dark .orbs,.ctaband .orbs{z-index:0}
.vhero .wrap,.dark .wrap,.ctaband .wrap{position:relative;z-index:2}

/* ─── BEAM: thin specular line + soft glow, between sections ─ */
.beam{position:relative;height:90px;overflow:hidden;pointer-events:none;background:#0A0714}
/* static rail — a dim violet line across the whole beam, always visible */
.beam::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,transparent 0%,rgba(167,139,255,.22) 14%,rgba(167,139,255,.38) 50%,rgba(167,139,255,.22) 86%,transparent 100%)}
/* soft halo wash underneath, breathes slowly */
.beam::after{content:"";position:absolute;left:4%;right:4%;top:50%;height:70px;transform:translate(0,-50%);background:radial-gradient(ellipse at center,rgba(167,139,255,.28),rgba(124,92,252,.14) 45%,transparent 72%);filter:blur(24px);pointer-events:none;will-change:opacity,transform}
/* scan heads sit inside the beam as child elements for layered motion */
.beam .scan{position:absolute;top:50%;height:2px;width:28%;transform:translate(-100%,-50%);pointer-events:none;will-change:transform,opacity;mix-blend-mode:screen}
.beam .scan.s1{background:linear-gradient(90deg,transparent 0%,rgba(167,139,255,.6) 25%,rgba(255,255,255,1) 72%,#FFFFFF 92%,transparent 100%);box-shadow:0 0 18px rgba(214,222,255,.75),0 0 56px rgba(167,139,255,.55)}
.beam .scan.s2{background:linear-gradient(90deg,transparent 0%,rgba(240,128,95,.4) 30%,rgba(240,128,95,.8) 70%,rgba(240,128,95,.95) 92%,transparent 100%);box-shadow:0 0 14px rgba(240,128,95,.55),0 0 48px rgba(240,128,95,.35);opacity:.85}
/* grid ticks — fine evenly-spaced marks on the rail, like a readout scale */
.beam .ticks{position:absolute;left:0;right:0;top:50%;height:7px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(167,139,255,.18) 0 1px,transparent 1px 42px);mask:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);-webkit-mask:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);opacity:.6}
@media (prefers-reduced-motion: no-preference){
  .beam::after{animation:beamHaloBreathe 7s ease-in-out infinite}
  .beam .scan.s1{animation:beamScan 14s cubic-bezier(.55,.05,.45,.95) infinite}
  .beam .scan.s2{animation:beamScan 14s cubic-bezier(.55,.05,.45,.95) infinite;animation-delay:-1.2s}
  @keyframes beamScan{
    0%{transform:translate(-30%,-50%);opacity:0}
    8%{opacity:1}
    92%{opacity:1}
    100%{transform:translate(380%,-50%);opacity:0}
  }
  @keyframes beamHaloBreathe{
    0%,100%{opacity:.55;transform:translate(0,-50%) scaleX(.96)}
    50%{opacity:.9;transform:translate(0,-50%) scaleX(1.04)}
  }
}
@media(max-width:620px){.beam{height:70px}.beam::after{height:54px;filter:blur(20px)}.beam .scan{width:38%}}


/* ─── FAB: persistent crash-mode action pill ─────────────── */
.fab{position:fixed;right:16px;bottom:16px;z-index:48;display:flex;gap:6px;align-items:center;padding:6px;background:linear-gradient(180deg,rgba(27,20,50,.94),rgba(12,8,24,.96));border:1px solid rgba(167,139,255,.26);border-radius:999px;box-shadow:0 20px 50px rgba(4,2,10,.6),0 0 36px rgba(124,92,252,.14),inset 0 1px 0 rgba(242,240,250,.08);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);opacity:0;transform:translateY(16px) scale(.95);transition:opacity .32s var(--ease),transform .5s cubic-bezier(.3,1.3,.4,1);pointer-events:none}
.fab.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab a{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:13.5px;color:#FFFFFF;text-decoration:none;padding:11px 18px;border-radius:999px;transition:background .16s,color .16s,transform .16s;white-space:nowrap}
.fab a:hover{background:rgba(242,240,250,.08);transform:translateY(-1px)}
.fab a.pri{background:linear-gradient(180deg,#F2F0FA,#E6E1F2);color:#17141F;box-shadow:0 0 24px rgba(167,139,255,.42),0 6px 18px rgba(5,3,12,.4)}
.fab a.pri:hover{background:#FFFFFF;color:#17141F}
.fab i.ic{width:16px;height:16px;flex:none;display:inline-block}
.fab i.ic svg{width:100%;height:100%;display:block}
@media(max-width:620px){
  .fab{left:16px;right:16px;bottom:14px;justify-content:space-between}
  .fab a{padding:11px 10px;flex:1;justify-content:center;font-size:13px}
  .fab a .lbl{display:none}
  .fab a.pri .lbl{display:inline}
}
@media (prefers-reduced-motion: reduce){.fab{transition:opacity .2s}}


/* ─── VCHIP entrance: assemble on reveal ─────────────────────── */
.vstack.pending .vchip{opacity:0;transform:translateX(-24px);filter:blur(4px);transition:none}
.vstack.pending .vchip .ok{transform:scale(.3) rotate(-20deg);opacity:0;transition:none}
.vstack.run .vchip{opacity:1;transform:translateX(0);filter:blur(0);transition:opacity .55s var(--ease),transform .65s cubic-bezier(.2,.9,.3,1.15),filter .5s var(--ease)}
.vstack.run .vchip .ok{opacity:1;transform:scale(1) rotate(0);transition:opacity .3s var(--ease) .35s,transform .4s cubic-bezier(.3,1.4,.5,1) .35s}
.vstack.run .vchip:nth-child(1){transition-delay:0ms}
.vstack.run .vchip:nth-child(2){transition-delay:120ms}
.vstack.run .vchip:nth-child(3){transition-delay:240ms}
.vstack.run .vchip:nth-child(4){transition-delay:360ms}
.vstack.run .vchip:nth-child(5){transition-delay:480ms}
.vstack.run .vchip:nth-child(6){transition-delay:600ms}
.vstack.run .vchip:nth-child(7){transition-delay:720ms}
.vstack.run .vchip:nth-child(1) .ok{transition-delay:350ms}
.vstack.run .vchip:nth-child(2) .ok{transition-delay:470ms}
.vstack.run .vchip:nth-child(3) .ok{transition-delay:590ms}
.vstack.run .vchip:nth-child(4) .ok{transition-delay:710ms}
.vstack.run .vchip:nth-child(5) .ok{transition-delay:830ms}
.vstack.run .vchip:nth-child(6) .ok{transition-delay:950ms}
.vstack.run .vchip:nth-child(7) .ok{transition-delay:1070ms}
/* icon pulse when its chip arrives */
.vstack.run .vchip .ic{animation:vicPulse .9s ease-out both}
.vstack.run .vchip:nth-child(2) .ic{animation-delay:120ms}
.vstack.run .vchip:nth-child(3) .ic{animation-delay:240ms}
.vstack.run .vchip:nth-child(4) .ic{animation-delay:360ms}
.vstack.run .vchip:nth-child(5) .ic{animation-delay:480ms}
.vstack.run .vchip:nth-child(6) .ic{animation-delay:600ms}
.vstack.run .vchip:nth-child(7) .ic{animation-delay:720ms}
@keyframes vicPulse{
  0%{box-shadow:0 0 0 0 rgba(167,139,255,.6),0 0 0 0 rgba(167,139,255,.4)}
  60%{box-shadow:0 0 0 10px rgba(167,139,255,0),0 0 24px 6px rgba(167,139,255,.35)}
  100%{box-shadow:0 0 0 0 rgba(167,139,255,0),0 0 0 0 rgba(167,139,255,0)}
}
@media (prefers-reduced-motion: reduce){
  .vstack.pending .vchip,.vstack.pending .vchip .ok{opacity:1;transform:none;filter:none}
  .vstack.run .vchip .ic{animation:none}
}


/* ─── MENU OVERLAY ───────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:120;background:#0A0714;color:var(--tx);overflow:hidden auto;padding:88px 48px 44px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;display:grid;align-content:space-between;gap:40px}
.overlay.open{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.overlay > .orbs{z-index:0}
.overlay > *:not(.orbs){position:relative;z-index:1}
/* 4-column menu: After a collision | By lane | For partners | Side (phone+legal) */
.overlay .omenu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;max-width:1280px;margin:0 auto;width:100%;align-items:start}
@media(max-width:960px){.overlay .omenu{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}}
@media(max-width:580px){.overlay .omenu{grid-template-columns:1fr;gap:30px}}
.overlay .ocol{display:grid;gap:2px;justify-items:start}
.overlay .olabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-h);font-weight:700;margin:0 0 14px;padding:0}
.overlay .ocol a{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;align-items:baseline;gap:0 12px;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--tx);text-decoration:none;line-height:1.2;padding:9px 0;width:100%;transition:color .18s,transform .4s var(--ease);opacity:0;transform:translateY(10px)}
.overlay .ocol a:not(:has(.n)){grid-template-columns:minmax(0,1fr) 20px;gap:0 10px}
.overlay .ocol a .n{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;color:var(--tx-d4);line-height:1;align-self:center;transition:color .18s}
.overlay .ocol a .ar{font-family:var(--disp);font-weight:400;font-size:16px;color:var(--violet-h);align-self:center;transition:transform .22s var(--ease),color .18s;opacity:0}
.overlay .ocol a:hover{color:#FFFFFF}
.overlay .ocol a:hover .n{color:var(--violet-h)}
.overlay .ocol a:hover .ar{transform:translateX(5px);opacity:1}
.overlay.open .ocol a{opacity:1;transform:translateY(0);transition:opacity .45s var(--ease),transform .5s var(--ease),color .18s}
.overlay.open .ocol:nth-child(1) a:nth-child(2){transition-delay:120ms}
.overlay.open .ocol:nth-child(1) a:nth-child(3){transition-delay:170ms}
.overlay.open .ocol:nth-child(1) a:nth-child(4){transition-delay:220ms}
.overlay.open .ocol:nth-child(1) a:nth-child(5){transition-delay:270ms}
.overlay.open .ocol:nth-child(2) a:nth-child(2){transition-delay:150ms}
.overlay.open .ocol:nth-child(2) a:nth-child(3){transition-delay:200ms}
.overlay.open .ocol:nth-child(2) a:nth-child(4){transition-delay:250ms}
.overlay.open .ocol:nth-child(2) a:nth-child(5){transition-delay:300ms}
.overlay.open .ocol:nth-child(2) a:nth-child(6){transition-delay:350ms}
.overlay.open .ocol:nth-child(2) a:nth-child(7){transition-delay:400ms}
.overlay.open .ocol:nth-child(2) a:nth-child(8){transition-delay:450ms}
.overlay.open .ocol:nth-child(3) a:nth-child(2){transition-delay:200ms}
.overlay.open .ocol:nth-child(3) a:nth-child(3){transition-delay:250ms}
.overlay.open .ocol:nth-child(3) a:nth-child(4){transition-delay:300ms}
.overlay.open .ocol:nth-child(3) a:nth-child(5){transition-delay:350ms}
.overlay.open .ocol:nth-child(3) a:nth-child(6){transition-delay:400ms}
.overlay.open .ocol:nth-child(4) a{transition-delay:280ms}
/* Side column variant: phone block + small print */
.overlay .oside .phone{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;color:#FFFFFF;text-decoration:none;padding:6px 0;display:inline-block}
.overlay .oside .phone:hover{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.overlay .oside .osmall{font-size:13.5px;color:var(--tx-d3);line-height:1.5;margin:4px 0 0;font-family:var(--disp);font-weight:400;max-width:28ch}
.overlay .oside a{font-size:14.5px;font-weight:500;color:var(--tx-d2);padding:6px 0;grid-template-columns:minmax(0,1fr)}
.overlay .oside a:hover{color:#FFFFFF}
.overlay .oclose{position:absolute;top:22px;right:28px;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(167,139,255,.3);background:rgba(167,139,255,.05);color:var(--tx);cursor:pointer;transition:border-color .18s,background .18s,transform .3s var(--ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.overlay .oclose:hover{border-color:var(--violet-h);background:rgba(167,139,255,.14);transform:rotate(90deg)}
.overlay .oclose::before,.overlay .oclose::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.8px;background:currentColor;border-radius:2px}
.overlay .oclose::before{transform:translate(-50%,-50%) rotate(45deg)}
.overlay .oclose::after{transform:translate(-50%,-50%) rotate(-45deg)}
.overlay .obottom{max-width:1280px;margin:0 auto;width:100%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d4);padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.overlay .obottom .mk{color:var(--violet-h);font-weight:700}
@media(max-width:860px){
  .overlay{padding:80px 24px 32px}
  .overlay .cols{grid-template-columns:1fr;gap:48px}
  .overlay nav a{grid-template-columns:48px minmax(0,1fr) 24px;font-size:clamp(28px,8vw,42px);padding:10px 0}
  .overlay .side .phone{font-size:18px}
  .overlay .oclose{top:16px;right:16px;width:44px;height:44px}
}
@media (prefers-reduced-motion: reduce){
  .overlay,.overlay nav a,.overlay .oclose{transition:opacity .2s,visibility .2s}
}


/* ─── RESPONSIVE SWEEP ───────────────────────────────────────── */
@media(max-width:860px){
  .vhero{min-height:0}
  .vhero .wrap{padding:120px 20px 100px}
  .vhero h1{font-size:clamp(40px,10vw,56px)}
  .vhero .lede{font-size:16.5px}
  .vhero .actions{gap:10px}
  .btn{font-size:14px;padding:13px 22px}
  .hcols{gap:36px}
  .hprof{gap:0 24px;margin-top:8px}
  .hs{padding-right:24px}
  .hn{font-size:34px !important}
  .hl{font-size:10px}
  .light,.dark{padding:88px 0}
  .light.tight{padding:40px 0}
  .ctaband{padding:120px 0 140px}
  .lead-cat .body h3{font-size:28px}
  .pull{padding-left:18px;font-size:22px}
  .cols2{gap:36px}
  .record{font-size:13.5px}
  .record .rhead{padding:14px 16px}
  .record dl{padding:16px 16px 16px}
  .record dd{font-size:14px}
}
@media(max-width:620px){
  .vhero .wrap{padding:104px 18px 88px}
  .vhero h1{font-size:clamp(36px,11vw,48px);max-width:none}
  .vhero .lede{font-size:15.5px;line-height:1.5}
  .vhero .actions{flex-wrap:wrap;gap:10px}
  .vhero .actions .btn{flex:0 0 auto;padding:13px 20px;font-size:14px}
  .light h2,.dark h2{font-size:clamp(28px,8vw,38px)}
  .lead-cat .body h3{font-size:24px}
  .lead-cat .body p{font-size:15px}
  .pull{font-size:19px;padding-left:16px}
  .stats{grid-template-columns:1fr 1fr}
  .vstack{gap:4px}
  .vchip{padding:12px 14px 12px 10px}
  .vchip:nth-child(n){margin-left:0}
  .vchip + .vchip{margin-top:4px}
  .vchip .ic{width:34px;height:34px;font-size:12px}
  .vchip .tv{font-size:13.5px}
  .guidelinks a{padding:20px 0}
  .guidelinks .gtitle{font-size:15.5px}
  .footer{padding:60px 0 32px}
  .footer .cols{padding-bottom:36px}
  .ctaband h2{font-size:clamp(32px,9vw,44px)}
  .ctaband p{font-size:15.5px}
}


/* ─── VCHIP constant wobble, kicks in after entrance ─────── */
.vstack.wobble .vchip:nth-child(1){animation:wobbleA 7.2s ease-in-out infinite;animation-delay:-0.0s}
.vstack.wobble .vchip:nth-child(2){animation:wobbleB 8.6s ease-in-out infinite;animation-delay:-1.4s}
.vstack.wobble .vchip:nth-child(3){animation:wobbleC 6.4s ease-in-out infinite;animation-delay:-2.9s}
.vstack.wobble .vchip:nth-child(4){animation:wobbleD 9.1s ease-in-out infinite;animation-delay:-4.3s}
@keyframes wobbleA{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(3px,-4px) rotate(.35deg)}
  66%{transform:translate(-4px,2px) rotate(-.45deg)}
}
@keyframes wobbleB{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  40%{transform:translate(-3px,3px) rotate(-.3deg)}
  70%{transform:translate(4px,-2px) rotate(.4deg)}
}
@keyframes wobbleC{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  30%{transform:translate(4px,2px) rotate(.5deg)}
  65%{transform:translate(-2px,-3px) rotate(-.3deg)}
}
@keyframes wobbleD{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  35%{transform:translate(-4px,-3px) rotate(-.4deg)}
  70%{transform:translate(3px,3px) rotate(.3deg)}
}
@media (prefers-reduced-motion: reduce){
  .vstack.wobble .vchip{animation:none}
}


.hn .ha{font-style:normal;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-h);vertical-align:middle;margin-left:12px;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--violet-h);display:inline-block;line-height:1;padding:4px 9px;border:1px solid var(--violet-h);border-radius:999px;transform:translateY(-6px)}


/* ─── QUICK-START MODAL ─────────────────────────────────────── */
.qdim{position:fixed;inset:0;z-index:140;background:rgba(5,3,12,.72);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;display:flex;align-items:center;justify-content:center;padding:24px}
.qdim.open{opacity:1;visibility:visible}
body.qopen{overflow:hidden}
.qpanel{position:relative;max-width:540px;width:100%;background:#0A0714;border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 50px 100px rgba(4,2,10,.75),0 0 80px rgba(124,92,252,.15),inset 0 1px 0 rgba(255,255,255,.05);padding:40px 36px 32px;color:var(--tx);transform:translateY(16px) scale(.96);transition:transform .4s cubic-bezier(.2,.9,.3,1.1),opacity .3s;max-height:calc(100vh - 48px);overflow:auto}
.qdim.open .qpanel{transform:translateY(0) scale(1)}
.qclose{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--tx);cursor:pointer;transition:border-color .18s,background .18s,transform .3s var(--ease)}
.qclose:hover{border-color:var(--violet-h);background:rgba(167,139,255,.1);transform:rotate(90deg)}
.qclose::before,.qclose::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:currentColor;border-radius:2px}
.qclose::before{transform:translate(-50%,-50%) rotate(45deg)}
.qclose::after{transform:translate(-50%,-50%) rotate(-45deg)}
.qeyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-h);margin-bottom:16px}
.qeyebrow::before{content:"";width:28px;height:1px;background:var(--violet-h)}
.qh{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;line-height:1.14;margin:0 0 28px;color:#FFFFFF}
.qh em{font-style:normal;background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

.qform{display:grid;gap:20px}
.qvs{border:none;padding:0;margin:0}
.qvs legend{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--tx-d2);padding:0;margin-bottom:10px;display:block;width:100%}
.qvs .qvsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:460px){.qvs .qvsgrid{grid-template-columns:1fr}}
.qvs label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);border-radius:12px;color:#FFFFFF;font-family:var(--disp);font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .16s,background .16s,color .16s;min-height:52px}
.qvs label input{position:absolute;opacity:0;pointer-events:none}
.qvs label:hover{border-color:rgba(167,139,255,.4);background:rgba(167,139,255,.06)}
.qvs label:has(input:checked){border-color:var(--violet-h);background:linear-gradient(180deg,rgba(167,139,255,.14),rgba(124,92,252,.08));color:#FFFFFF;box-shadow:0 0 0 1px var(--violet-h),0 10px 24px rgba(124,92,252,.2)}
.qfield{display:grid;gap:8px}
.qfield > span{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--tx-d2)}
.qfield input{font-family:var(--disp);font-weight:500;font-size:16px;color:#FFFFFF;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 18px;outline:none;transition:border-color .16s,background .16s;width:100%;letter-spacing:-.005em}
.qfield input:focus{border-color:var(--violet-h);background:rgba(167,139,255,.06);box-shadow:0 0 0 3px rgba(167,139,255,.18)}
.qfield input::placeholder{color:var(--tx-d4)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.qrow{grid-template-columns:1fr}}
.qopt{font-style:normal;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-d4);margin-left:8px;vertical-align:middle}
.qconsent{font-size:11.5px;color:var(--tx-d4);line-height:1.5;margin:0;font-family:var(--disp);font-weight:500}
.qconsent a{color:var(--tx-d3);text-decoration:underline;text-underline-offset:3px}
.qsubmit{font-family:var(--disp);font-weight:600;font-size:15px;color:#17141F;background:linear-gradient(180deg,#FFFFFF,#EDE8F7);border:none;border-radius:999px;padding:16px 28px;cursor:pointer;transition:transform .18s,box-shadow .25s,background .18s;box-shadow:0 0 32px rgba(167,139,255,.45),0 10px 28px rgba(5,3,12,.4)}
.qsubmit:hover{background:#FFFFFF;transform:translateY(-1px);box-shadow:0 0 48px rgba(167,139,255,.65),0 14px 36px rgba(5,3,12,.5)}
.qsubmit:disabled{opacity:.55;cursor:not-allowed}
.qalt{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:12px}
.qalink{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--violet-h);text-decoration:none;transition:color .15s}
.qalink:hover{color:#C9B4FF;text-decoration:underline;text-underline-offset:3px}
.qalink.alt{color:var(--tx-d2)}
.qalink.alt:hover{color:#FFFFFF}
@media (prefers-reduced-motion: reduce){
  .qdim,.qpanel{transition:opacity .2s}
  .qpanel{transform:none}
}


/* ─── WATER RIPPLES: WebGL canvas layered over the hero video ──── */
.vhero .ripples{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;background:transparent;opacity:0;transition:opacity .25s ease}


.hl .short{display:none}
.hl .full{display:inline}
@media(max-width:720px){
  .hl .full{display:none}
  .hl .short{display:inline}
}


/* Specimen label above the routing record */
.rec-caption{display:block;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-h);margin-bottom:10px;padding-left:4px}

/* ─── CHAT MODAL ──────────────────────────────────────────────────
   A conversational entry point to the collision library. Triggered
   by any element with [data-chat], or by any <a> whose href resolves
   to /blog/ or /blog/index.html (nav, footer, FAB, blog index link).
   The library articles still work at /blog/ for crawlers and direct
   links; the UI opens the chat instead. */
.chatdim{position:fixed;inset:0;z-index:140;background:rgba(10,7,20,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;display:flex;align-items:center;justify-content:center;padding:28px}
.chatdim.open{opacity:1;visibility:visible}
.chatpanel{width:100%;max-width:780px;max-height:calc(100vh - 56px);background:linear-gradient(165deg,#1A1230 0%,#0A0714 100%);border:1px solid rgba(167,139,255,.22);border-radius:24px;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(167,139,255,.08) inset;display:flex;flex-direction:column;overflow:hidden;color:var(--tx);transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.chatdim.open .chatpanel{transform:none}
.chathead{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(242,240,250,.08)}
.chathead .brand{display:flex;align-items:center;gap:12px}
.chathead .brand .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#A78BFF,#F0805F);box-shadow:0 0 14px rgba(167,139,255,.55)}
.chathead .brand h2{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0;color:#FFFFFF}
.chathead .brand .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-h);margin-left:10px;font-weight:700}
.chatclose{background:transparent;border:0;color:var(--tx-d2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.chatclose:hover{color:#FFFFFF;background:rgba(242,240,250,.08)}
.chatclose::before{content:"\00D7"}
.chatbody{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:rgba(167,139,255,.28) transparent}
.chatbody::-webkit-scrollbar{width:8px}
.chatbody::-webkit-scrollbar-thumb{background:rgba(167,139,255,.28);border-radius:4px}
.chatmsg{max-width:84%;padding:14px 18px;border-radius:16px;font-family:var(--disp);font-size:15px;line-height:1.6;font-weight:400}
.chatmsg.bot{align-self:flex-start;background:rgba(242,240,250,.05);border:1px solid rgba(242,240,250,.08);color:var(--tx)}
.chatmsg.user{align-self:flex-end;background:linear-gradient(180deg,#8B6CFF,#6E4FF0);color:#FFFFFF;border:1px solid rgba(167,139,255,.4);box-shadow:0 10px 26px rgba(110,79,240,.35)}
.chatmsg a{color:var(--violet-h);text-decoration:none;border-bottom:1px solid rgba(167,139,255,.4);transition:border-color .15s,color .15s}
.chatmsg a:hover{color:#FFFFFF;border-color:#FFFFFF}
.chatmsg .srcs{margin-top:12px;padding-top:12px;border-top:1px solid rgba(242,240,250,.1);display:flex;flex-direction:column;gap:6px}
.chatmsg .srcs .lb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d3);font-weight:700;margin-bottom:2px}
.chatmsg .srcs a{font-size:13.5px;border-bottom:0;color:var(--violet-h);display:flex;align-items:center;gap:8px}
.chatmsg .srcs a::before{content:"\2192";font-family:var(--mono);color:var(--tx-d3);transition:transform .15s,color .15s}
.chatmsg .srcs a:hover::before{color:var(--violet-h);transform:translateX(2px)}
.chatmsg.typing{display:flex;align-items:center;gap:4px;background:rgba(242,240,250,.05);border:1px solid rgba(242,240,250,.08);padding:16px 20px}
.chatmsg.typing i{width:7px;height:7px;border-radius:50%;background:var(--violet-h);opacity:.45;animation:cbdot 1.3s ease-in-out infinite}
.chatmsg.typing i:nth-child(2){animation-delay:.18s}
.chatmsg.typing i:nth-child(3){animation-delay:.36s}
@keyframes cbdot{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1.15)}}
.chatsugs{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.chatsugs .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d3);font-weight:700;margin:4px 0 6px}
.chatsug{text-align:left;background:transparent;border:1px solid rgba(242,240,250,.14);border-radius:12px;padding:12px 16px;font-family:var(--disp);font-weight:500;font-size:14px;color:var(--tx);cursor:pointer;transition:all .18s}
.chatsug:hover{background:rgba(167,139,255,.08);border-color:rgba(167,139,255,.4);color:#FFFFFF;transform:translateX(2px)}
.chatinput{display:flex;gap:10px;padding:18px 22px 22px;border-top:1px solid rgba(242,240,250,.08);background:rgba(10,7,20,.5)}
.chatinput input{flex:1;padding:14px 18px;background:rgba(242,240,250,.04);border:1px solid rgba(242,240,250,.14);border-radius:14px;font-family:var(--disp);font-size:15px;color:var(--tx);outline:none;transition:border-color .15s,background .15s}
.chatinput input::placeholder{color:var(--tx-d3)}
.chatinput input:focus{border-color:rgba(167,139,255,.5);background:rgba(242,240,250,.07)}
.chatinput button{background:linear-gradient(180deg,#8B6CFF,#6E4FF0);color:#FFFFFF;border:0;border-radius:14px;padding:14px 22px;font-family:var(--disp);font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 10px 24px rgba(110,79,240,.3);transition:transform .15s,box-shadow .15s}
.chatinput button:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(110,79,240,.4)}
.chatinput button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.chatfoot{padding:10px 22px 14px;border-top:1px solid rgba(242,240,250,.06);background:rgba(10,7,20,.6);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--tx-d3);text-align:center;line-height:1.5}
.chatfoot a{color:var(--violet-h);text-decoration:none}
.chatfoot a:hover{text-decoration:underline}
@media(max-width:720px){
  .chatdim{padding:0}
  .chatpanel{max-width:100%;max-height:100vh;border-radius:0;border:0;height:100vh}
  .chathead{padding:16px 20px}
  .chatbody{padding:20px}
  .chatinput{padding:14px 16px 18px}
}
body.chatopen{overflow:hidden}

/* ─── BLOG ARTICLE btab/bfig OVERRIDES ────────────────────────────
   `.btab` and `.bfig` were designed for a dark surface, but `.artbody`
   is now light. Flip the token colors so prose tables and figure captions
   stay legible. */
.artbody .btab th{color:var(--lk3);border-bottom-color:var(--l-rule-2)}
.artbody .btab td{color:var(--lk2);border-bottom-color:var(--l-rule)}
.artbody .btab td:first-child{color:var(--lk)}
.artbody .tabnote{color:var(--lk4)}
.artbody .bfig{background:#F5F2FA;border-color:var(--l-rule-2)}
.artbody .bfig figcaption{color:var(--lk3)}

/* Lane cards on home — whole card clickable via JS below. */
.lead-cat[data-lane-href]{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.lead-cat[data-lane-href]:hover{transform:translateY(-2px);border-color:rgba(167,139,255,.35)}
.lead-cat[data-lane-href]:hover h3{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead-cat .cta{position:relative;z-index:2}

/* ─── BRAND GRADIENT SWEEP ───────────────────────────────────────
   Promote the hero's violet→coral gradient (#A78BFF → #F0805F) from
   a text accent on the home page to the site's primary purple surface.
   All primary actions, user chat bubbles, and the chat send button
   now carry the gradient instead of the solid violet. */
/* Gradient weighted toward purple: violet holds for ~45% then transitions through plum to a small coral tail. */
.btn-navy,.btn-brass{background:linear-gradient(135deg,#A78BFF 0%,#A78BFF 45%,#C070AC 78%,#F0805F 100%);color:#FFFFFF;box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 28px rgba(167,139,255,.35),0 2px 20px rgba(240,128,95,.14)}
.btn-navy:hover,.btn-brass:hover{background:linear-gradient(135deg,#B49CFF 0%,#B49CFF 45%,#CA7FBB 78%,#F28F6E 100%);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 14px 34px rgba(167,139,255,.42),0 2px 24px rgba(240,128,95,.18)}
/* On light sections the gradient needs deeper tones so it reads with contrast on white. */
.light .btn-navy,.light .btn-brass,.sec:not(.dark):not(.ctaband) .btn-navy,.sec:not(.dark):not(.ctaband) .btn-brass{background:linear-gradient(135deg,#6E4FF0 0%,#6E4FF0 45%,#9448AE 78%,#D4542E 100%);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 28px rgba(110,79,240,.32),0 2px 20px rgba(212,84,46,.14)}
.light .btn-navy:hover,.light .btn-brass:hover,.sec:not(.dark):not(.ctaband) .btn-navy:hover,.sec:not(.dark):not(.ctaband) .btn-brass:hover{background:linear-gradient(135deg,#5A3DE0 0%,#5A3DE0 45%,#833A99 78%,#C04A24 100%);box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 14px 34px rgba(90,61,224,.4),0 2px 24px rgba(192,74,36,.18)}
/* Keyframe breathe animation if app.css enabled it — keep the color stable (no reverse) */
@keyframes btnbreathe{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 28px rgba(167,139,255,.35),0 2px 20px rgba(240,128,95,.18)}50%{box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 14px 36px rgba(167,139,255,.46),0 4px 28px rgba(240,128,95,.26)}}

/* Chat user message + send button → brand gradient */
.chatmsg.user{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);color:#FFFFFF;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(167,139,255,.32),0 2px 14px rgba(240,128,95,.18)}
.chatinput button{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);color:#FFFFFF;box-shadow:0 10px 24px rgba(167,139,255,.3),0 2px 14px rgba(240,128,95,.18)}
.chatinput button:hover{background:linear-gradient(135deg,#B49CFF 0%,#F28F6E 100%);box-shadow:0 14px 30px rgba(167,139,255,.4),0 2px 18px rgba(240,128,95,.24)}

/* FAB on dark surfaces — if there's a highlighted item, give it the gradient */
.fab a:hover .ic{background:linear-gradient(135deg,rgba(167,139,255,.2),rgba(240,128,95,.14))}

/* Partners hub category card hover already has the border highlight;
   let the inner CTA arrow pick up gradient text on hover. */
.catcard[href]:hover .cta{background:linear-gradient(135deg,#A78BFF 0%,#F0805F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.catcard[href]:hover .cta::after{color:#F0805F}

/* ─── FIX: rows.plain counter + text collided on mobile ──────────
   Interior pages (services, eligibility, directory, how-it-works)
   inline-defined `.rows.plain > li::before` with position:absolute,
   which collided with the h3 at narrow widths. Switch to a grid
   layout so the counter and body sit in their own columns. */
main .rows.plain{display:grid;gap:28px;counter-reset:row;padding:0;list-style:none}
main .rows.plain > li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 14px;padding:0;position:relative;counter-increment:row}
main .rows.plain > li::before{content:counter(row,decimal-leading-zero);grid-column:1;grid-row:1;align-self:start;padding-top:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;position:static;left:auto;top:auto;font-variant-numeric:tabular-nums}
main .rows.plain > li > *{grid-column:2}
main .light .rows.plain > li::before{color:var(--violet-d)}
main .dark .rows.plain > li::before,
main .ctaband .rows.plain > li::before{color:var(--violet-h)}
@media(max-width:620px){
  main .rows.plain > li{grid-template-columns:32px minmax(0,1fr);gap:0 10px}
}


/* ─── FORM STEP HEADING (fieldset legend) ────────────────────────
   The intake form uses <legend> for step titles ("What happened",
   "What do you need"). The browser default + global :focus-visible
   outline were giving it an ugly violet border. Treat it as a proper
   section heading: display-weight, no focus ring, clean rhythm. */
.formcard legend{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(26px,2.6vw,34px);
  letter-spacing:-.016em;
  line-height:1.08;
  color:var(--lk);
  padding:0;
  margin:0 0 30px;
  border:0;
  outline:none;
  display:block;
  position:relative;
  padding-left:14px;
}
.formcard legend::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  bottom:.2em;
  width:3px;
  background:linear-gradient(180deg,#A78BFF 0%,#F0805F 100%);
  border-radius:2px;
}
.formcard legend:focus,.formcard legend:focus-visible{outline:none;box-shadow:none}

/* Phase 2 — Get started buttons in pricing matrices and tier header */
.btn.btn-sm{padding:7px 12px;font-size:12px;letter-spacing:.04em;min-width:0;line-height:1.2;border-radius:999px}
.rates th.th-get-started{width:1%;padding-right:12px}
.rates td.cta-get-started{text-align:right;padding:10px 0 10px 12px;white-space:nowrap}
.rates td.cta-get-started .btn-sm{font-family:var(--mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding:7px 13px;font-weight:700}
.tiergrid .tiername{position:relative}
.tiergrid .tiername .tier-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:8px 14px;font-family:var(--mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;font-weight:700;border-radius:999px;line-height:1.2}
@media (max-width: 720px){
  .rates td.cta-get-started{display:block;text-align:left;padding:4px 0 10px}
}

/* ───────── Audit-fix patches (post-launch cleanup) ──────────── */
/* iOS Safari URL-bar fix: 100svh avoids layout jump + FAB behind chrome */
.vhero{min-height:100svh}
@supports not (height:100svh){.vhero{min-height:100vh}}

/* FAB tap targets (WCAG min 44px) */
@media(max-width:620px){
  .fab a{padding:14px 11px;min-height:44px}
  .fab a.pri{padding:14px 18px;min-height:44px}
  .nav-menu{padding:12px 16px;font-size:13.5px;min-height:44px}
  .rates td.cta-get-started .btn-sm{padding:12px 18px;font-size:11.5px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .tiergrid .tiername .tier-cta{padding:12px 18px;min-height:40px;font-size:11.5px}
}

/* Checkout review sidebar should NOT stick when stacked on mobile */
@media(max-width:900px){
  .ck-review{position:static}
}

/* Checkout pricing matrix: horizontal scroll on narrow viewports */
@media(max-width:620px){
  .ck-card:has(.ck-matrix){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ck-matrix{min-width:520px}
}

/* Services tier matrix: at ≤900px, don't collapse to 1 column (removes label context).
   Instead keep horizontal scroll with the full 6-col template preserved. */
@media(max-width:900px){
  .tiergrid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px}
  .tiergrid{grid-template-columns:200px repeat(5,minmax(140px,1fr))!important;min-width:900px}
}

/* .na cell on partner matrices: add em-dash so "not offered" is visually distinct from a price */
.rates td.na::before{content:"— "}