/* ============================================================
   Volumetris — one stylesheet. Brand kit v1.2 + founder overrides.
   Paper-first. Carbon reserved for nav, record, run strip, CTA, footer.
   One accent: #9BD814 (copy says "green"). Risk is hatch, never red.
   Rounded system: 12px containers / 8px interactive / 6px chips /
   4px badges / 3px bars — inlined per component, no override layer.
   1px hairlines. No shadows. No gradients.
   Scroll containers (.tscroll .week .pipe .pobar) keep overflow-x:auto;
   never add them to an overflow:hidden batch — it clips them on mobile.
   ============================================================ */

:root{
  --carbon:#0B0D12;
  --paper:#F4F5F7;
  --surface:#FFFFFF;
  --hairline:#D8DBE1;
  --slate:#666E7C;
  --slate-light:#8A93A3;
  --faint:#A7AEBB;
  --ink2:#3A3F49;             /* body copy on paper, AAA */
  --lime:#9BD814;             /* fill: buttons, badges, bar fills. carbon text only */
  --lime-hover:#8AC211;
  --limeink:#69A100;          /* ink: links, alert numbers, labels on paper */
  --limeink-hover:#548000;
  --limeink-label:#527A00;   /* small mono labels on light only; kickers+links stay --limeink (founder 2026-09-05) */
  --limedark:#9BD814;         /* kickers and signals on carbon */
  --lime-tint:#F2FAD9;        /* ghost hover wash */
  --hatch-line:#D3D8E2;
  --hairline-dark:rgba(255,255,255,.12);   /* rules on carbon */
  --hairline-dark-strong:rgba(255,255,255,.28);
  --slate-dark:#9BA3B0;       /* secondary text on carbon */
  --font-sans:'Libre Franklin',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--carbon);
  font-family:var(--font-sans);font-size:17px;line-height:1.65;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--limeink);text-decoration:none}
a:hover{color:var(--limeink-hover);text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--limeink);outline-offset:3px}
::selection{background:var(--lime);color:var(--carbon)}

.skip{position:absolute;left:-9999px;top:0;background:var(--carbon);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:880px}

/* ---------- type ---------- */
h1,h2{font-weight:800;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(38px,6vw,60px)}
h2{font-size:clamp(30px,4.2vw,40px)}
h3{font-size:21px;font-weight:700;letter-spacing:-.005em;line-height:1.3;text-wrap:pretty}
p{color:var(--ink2);max-width:76ch;text-wrap:pretty}
.sub{margin-top:14px;font-size:20px;max-width:62ch}
.lead{font-size:21px;line-height:1.7}

.kicker{
  display:block;font-family:var(--font-mono);font-weight:600;font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--limeink);margin-bottom:10px;
}
.mono{font-family:var(--font-mono)}

/* ---------- section punctuation: ruled line + ticks ---------- */
.rule-ticks{position:relative;height:9px;border-top:1px solid var(--hairline);margin:0 0 30px}
.rule-ticks::before,.rule-ticks::after{content:"";position:absolute;top:-1px;width:1px;height:9px;background:var(--hairline)}
.rule-ticks::before{left:0}.rule-ticks::after{right:0}
.rule-ticks i{position:absolute;top:-1px;width:1px;height:6px;background:var(--hairline)}
.rule-ticks i:nth-child(1){left:25%}.rule-ticks i:nth-child(2){left:50%}.rule-ticks i:nth-child(3){left:75%}

/* ---------- nav ---------- */
.nav{background:var(--carbon);border-bottom:1px solid var(--hairline-dark);position:sticky;top:0;z-index:50}
.nav__inner{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:64px}
.nav__logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;letter-spacing:.015em}
.nav__logo:hover{text-decoration:none;color:#fff}
.nav__logo svg{width:24px;height:auto;flex:none}

.nav__links{display:flex;gap:22px;margin-left:auto}
.nav__links a{color:#FFFFFF;font-size:14.5px;font-weight:500;letter-spacing:.01em}
.nav__links a:hover{color:var(--lime);text-decoration:none}
.nav__links a[aria-current]{color:#fff;border-bottom:1.5px solid var(--lime);padding-bottom:3px}
.nav__book{flex:none}
.nav__toggle{display:none;background:none;border:1px solid var(--hairline-dark-strong);border-radius:8px;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.nav__toggle span{display:block;width:16px;height:2px;background:#fff}
.mmenu{display:none}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__book{display:none}
  .nav__toggle{display:flex;margin-left:auto}
  .mmenu.is-open{display:flex;flex-direction:column;gap:2px;background:var(--carbon);border-bottom:1px solid var(--hairline-dark);padding:12px 24px 24px}
  .mmenu a{padding:10px 0;font-weight:500;color:#FFFFFF;border-bottom:1px solid var(--hairline-dark)}
  .mmenu a:hover{text-decoration:none;color:#fff}
  .mmenu .btn{margin-top:14px;border-bottom:none}
}

/* ---------- buttons: square, lime fill carries carbon ---------- */
.btn{
  display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:16px;
  padding:12px 22px;border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .12s ease-out,color .12s ease-out,border-color .12s ease-out;
  border-radius:8px;
}
.btn:hover{text-decoration:none}
.btn--lime{background:var(--lime);color:var(--carbon)}
.btn--lime:hover{background:var(--carbon);color:var(--limedark);border-color:var(--limedark)}
.btn--ghost{background:transparent;color:var(--carbon);border-color:var(--carbon)}
.btn--ghost:hover{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
.btn--ghost-dark{background:transparent;color:var(--paper);border-color:var(--slate-dark)}
.btn--ghost-dark:hover{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
.btn--lg{padding:17px 32px;font-size:17.5px}
.btn--full{display:block;width:100%}
.btn--sm{padding:9px 16px;font-size:14.5px;font-weight:600}
.nav__book.btn--ghost-dark{border-color:var(--hairline-dark-strong)}
.nav__book.btn--ghost-dark:hover{border-color:var(--lime)}

.linkline{font-weight:700;font-size:17px}

/* ---------- sections ---------- */
section{padding:76px 0 68px;scroll-margin-top:64px}
/* full-screen sections belong to Sections paging mode only; Free mode reads
   as a normal document with consistent padding-driven rhythm */
html.vlm-paging main > section{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;padding:48px 0}
html.vlm-paging main > section > .container{width:100%}
@media (max-height:700px){html.vlm-paging main > section{min-height:auto}}
.carbon{background:var(--carbon);color:var(--paper)}
.carbon h1,.carbon h2,.carbon h3{color:#fff}
.carbon p{color:#C9CFD8}
.carbon .lead{color:#E7EAEF}
.carbon .sub{color:#C9CFD8}
.carbon .fnote{color:#B9C0CA}
.carbon .kicker{color:var(--limedark)}
.carbon a:not(.btn){color:var(--limedark)}
.carbon .btn--lime{color:var(--carbon)}
.carbon .btn--lime:hover{color:var(--limedark)}
.carbon .btn--ghost{color:var(--paper);border-color:var(--hairline-dark-strong)}
.carbon .btn--ghost:hover{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
.carbon .btn--ghost-dark{color:var(--paper)}
.carbon .btn--ghost-dark:hover{color:var(--carbon)}
.carbon .rule-ticks,.carbon .rule-ticks i,.carbon .rule-ticks::before,.carbon .rule-ticks::after{border-color:var(--hairline-dark);background:var(--hairline-dark)}
.carbon .rule-ticks{background:none}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;position:relative;padding:24px 0 72px}
.hero>.container{width:100%}
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--slate);font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.32em;text-transform:uppercase}
.scrollcue i{width:1px;height:26px;background:var(--hairline);position:relative;overflow:hidden;display:block}
.scrollcue i::after{content:"";position:absolute;left:0;top:-9px;width:1px;height:9px;background:var(--limeink);animation:cue 1.7s ease-in-out infinite}
@keyframes cue{to{transform:translateY(36px)}}
@media (prefers-reduced-motion: reduce){.scrollcue i::after{animation:none}}
@media (max-height:700px){.hero{min-height:auto;padding:44px 0 56px}}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero__copy h1{font-size:clamp(32px,3.4vw,46px)}
.hero__copy .lead{font-size:18.5px;max-width:52ch}
.hero__vis .chartcard{margin:0}
.hero__vis .legend{padding:10px 14px;gap:6px 8px}
.hero__vis .lg{font-size:11px;padding:4px 8px}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:28px}}
.hero .lead{margin-top:20px;max-width:72ch}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* verified strip */
.vstrip{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;margin-top:30px;
  padding:12px 0;border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark);
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.08em;color:#B9C0CA;
  text-transform:uppercase;
}
.vstrip b{color:#fff;font-weight:600}
.vstrip .tag{color:var(--limedark);font-weight:600;letter-spacing:.18em}
.vstrip--paper{border-color:var(--hairline);color:var(--slate)}
.vstrip--paper b{color:var(--carbon)}
.vstrip--paper .tag{color:var(--limeink)}

/* ---------- the signature chart frame ---------- */
.chartcard{border:1px solid var(--hairline-dark);border-radius:12px;overflow:hidden;margin-top:0}
.chartcard__head{
  display:flex;justify-content:space-between;gap:14px;padding:12px 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid var(--hairline-dark);
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#B9C0CA;
}
.chartcard__body{padding:22px 18px 16px}
.chartcard--surface{border-color:var(--hairline);background:var(--surface)}
.chartcard--surface .chartcard__head{border-color:var(--hairline);color:var(--slate)}

/* ---------- stat ledger (the catches) ---------- */
.ledger{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface);margin-top:28px}
.lrow{
  display:grid;grid-template-columns:170px 1fr auto;gap:6px 24px;align-items:baseline;
  padding:12px 20px;border-bottom:1px solid var(--hairline);
}
.lrow:last-child{border-bottom:none}
.lrow b{font-family:var(--font-sans);font-weight:700;font-size:28px;letter-spacing:-.01em;color:var(--carbon);font-variant-numeric:tabular-nums}
.lrow .what{color:var(--ink2);font-size:17.5px;max-width:none}
.lrow .who{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
@media(max-width:760px){.lrow{grid-template-columns:1fr}.lrow .who{white-space:normal}}

.fnote{margin-top:20px;font-size:15.5px;color:var(--slate)}
.mt-40{margin-top:26px}.mt-16{margin-top:14px}

/* ---------- problem rows ---------- */
.frow{
  display:grid;grid-template-columns:44px 1fr 230px;gap:12px 36px;
  padding:16px 0;border-top:1px solid var(--hairline);align-items:start;
}
.frow:last-of-type{border-bottom:1px solid var(--hairline)}
.frow p{margin-top:8px;font-size:17px}
.fmeta{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.06em;color:var(--slate);display:flex;flex-direction:column;gap:8px;text-transform:uppercase}
.fmeta b{color:var(--carbon);font-weight:600;display:block;letter-spacing:0}
.fmeta .decided b{color:var(--limeink)}
@media(max-width:760px){.frow{grid-template-columns:44px 1fr}.frow .fmeta{grid-column:2}}

/* ---------- triads / steps ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.triad>div{background:var(--surface);padding:20px 22px}
.triad p{margin-top:10px;font-size:17px}
@media(max-width:820px){.triad{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.step{background:var(--surface);padding:20px 22px}
.step p{margin-top:12px;font-size:17px}
.stepchip{
  display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:13.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--limeink);margin-bottom:14px;
}

@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- the weekly specimen table ---------- */
.tscroll{overflow-x:auto;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);margin-top:28px}
.spec{border-collapse:collapse;width:100%;min-width:640px;font-size:16px}
.spec th{
  font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);text-align:left;
  padding:10px 16px;border-bottom:1px solid var(--hairline);
}
.spec td{padding:12px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle;color:var(--ink2)}
.spec tr:last-child td{border-bottom:none}
.spec .sku{font-family:var(--font-mono);font-weight:500;font-size:14.5px;color:var(--carbon)}
.spec .val{font-family:var(--font-mono);font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--carbon)}
.badge{
  display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:4px;white-space:nowrap;
}
.badge--act{background:var(--lime);color:var(--carbon)}
.badge--risk{
  color:var(--carbon);border:1px solid var(--carbon);background:var(--surface);
  position:relative;padding-left:27px;
}
.badge--risk::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:12px;height:12px;
  border:1px solid var(--hatch-line);border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--hatch-line) 0 1.5px,transparent 1.5px 6px)}
.badge--quiet{color:var(--slate);border:1px solid var(--hairline)}
.risk-note{font-family:var(--font-mono);font-size:12.5px;color:var(--slate);letter-spacing:.06em}

/* ---------- week grid ---------- */
.week{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);margin-top:28px;overflow-x:auto}
.week__head{display:flex;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid var(--hairline);min-width:640px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.week__grid{display:grid;grid-template-columns:repeat(7,1fr);min-width:640px;border-bottom:1px solid var(--hairline);align-items:stretch}
.week__day{padding:13px 12px 15px;border-right:1px solid var(--hairline);min-height:84px;height:100%}
.week__day:last-child{border-right:none}
.week__day b{display:block;font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.week__day span{display:block;margin-top:8px;font-size:15px;color:var(--ink2)}
.week__day--you{background:var(--lime)}
.week__day--you b,.week__day--you span{color:var(--carbon)}
.week__note{padding:12px 18px;font-size:15.5px;color:var(--slate)}
@media(max-width:700px){.week__grid{grid-template-columns:repeat(7,minmax(64px,1fr))}.week{overflow-x:auto}}

/* ---------- quote ---------- */
.quote{border-left:2px solid var(--lime);padding:4px 0 4px 24px;margin-top:26px}
.quote p{font-size:20px;line-height:1.7;color:var(--carbon);max-width:74ch}
.quote footer{margin-top:14px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.quote--sm p{font-size:17.5px}

/* ---------- creed / plain statement band ---------- */
.creed{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface);padding:18px 22px;margin-top:26px}
.creed p{max-width:none;font-size:18px}
.creed b,.creed strong{color:var(--carbon)}

/* ---------- plans ---------- */
.build{
  display:grid;grid-template-columns:1fr auto;gap:14px 36px;align-items:center;
  border:1px solid var(--carbon);border-radius:12px;overflow:hidden;padding:20px 24px;margin-top:28px;background:var(--surface);
}
.build p{font-size:17px;margin-top:8px;max-width:none}
.build__label{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--limeink)}
.build__price{font-family:var(--font-mono);font-weight:600;font-size:42px;letter-spacing:-.02em;color:var(--carbon);font-variant-numeric:tabular-nums}
@media(max-width:640px){.build{grid-template-columns:1fr}}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin-top:24px}
.plan{background:var(--surface);padding:22px 24px;display:flex;flex-direction:column}
.plan--dark{background:var(--carbon)}
.plan__name{font-weight:800;font-size:19px;letter-spacing:-.01em}
.plan__price{font-family:var(--font-mono);font-weight:600;font-size:36px;margin-top:8px;font-variant-numeric:tabular-nums}
.plan__price small{font-size:14px;color:var(--slate);font-weight:500}
.plan__tag{display:block;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--limeink);margin:10px 0 18px}
.plan ul{list-style:none;flex:1}
.plan li{padding:11px 0 11px 22px;border-top:1px solid var(--hairline);font-size:16.5px;color:var(--ink2);position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:1.5px;background:var(--lime)}
.plan li.you::before{background:none;border:1px solid var(--slate)}
.plan .btn{margin-top:22px}
/* dark plan card: declared after the base rules so dark always wins */
.plan.plan--dark .plan__name{color:#fff}
.plan.plan--dark .plan__price{color:#fff}
.plan.plan--dark .plan__price small{color:var(--slate-dark)}
.plan.plan--dark .plan__tag{color:var(--limedark)}
.plan.plan--dark li{color:#C9CFD8;border-color:var(--hairline-dark)}
@media(max-width:760px){.plans{grid-template-columns:1fr}}

/* ---------- scope + generic data table ---------- */
.dtable{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
.dtable th{font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);text-align:left;padding:10px 16px;border-bottom:1px solid var(--hairline)}
.dtable td{padding:11px 16px;border-bottom:1px solid var(--hairline);color:var(--ink2);vertical-align:top}
.dtable tr:last-child td{border-bottom:none}
.dtable td:first-child{color:var(--carbon);font-weight:600}
.dtable .val{font-family:var(--font-mono);font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--carbon)}

/* ---------- deliverable rows (services) ---------- */
.drow{display:grid;grid-template-columns:44px 130px 1fr;gap:8px 28px;padding:14px 0;border-top:1px solid var(--hairline)}
.drow:last-of-type{border-bottom:1px solid var(--hairline)}
.drow p{margin-top:8px;font-size:17px;max-width:none}
.drow__tag{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.drow__tag b{display:block;font-size:17px;color:var(--carbon);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
@media(max-width:700px){.drow{grid-template-columns:44px 1fr}.drow>div:last-child{grid-column:1/-1}}
/* rows without the icon cell (partners): tag | body, stacked on phones */
.drow--plain{grid-template-columns:150px 1fr}
@media(max-width:700px){.drow--plain{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;padding:13px 0;font-weight:700;font-size:19px;color:var(--carbon);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--limeink);font-weight:600}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__body{padding:0 0 16px;font-size:17.5px;color:var(--ink2);max-width:74ch}

/* ---------- CTA band ---------- */
.cta{text-align:center}
.cta .sub{margin-left:auto;margin-right:auto;max-width:66ch}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta__meta{margin-top:22px;margin-left:auto;margin-right:auto;max-width:none;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9C0CA}

/* ---------- lead form: the /lp form in the site's design (home CTA, /book hero) ---------- */
.cta__split,.phero__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.cta__split{text-align:left}
.cta__split .sub,.cta__split .cta__meta{margin-left:0;margin-right:0}
.cta__split .cta__actions{justify-content:flex-start}
@media(max-width:980px){.cta__split,.phero__split{grid-template-columns:1fr;gap:32px}}
.leadform{position:relative;scroll-margin-top:80px;background:var(--surface);color:var(--carbon);border:1px solid var(--hairline);border-radius:12px;padding:28px;text-align:left}
.leadform__kicker{display:block;font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--limeink-label);margin-bottom:16px}
.leadform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.leadform label{display:flex;flex-direction:column;gap:6px;min-width:0}
.leadform label.full{grid-column:1/-1}
.leadform label span{font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.leadform input,.leadform select{width:100%;min-width:0;font-family:var(--font-sans);font-size:17px;line-height:1.3;color:var(--carbon);background:var(--paper);border:1px solid var(--hairline);border-radius:8px;padding:12px 13px}
.leadform input::placeholder{color:var(--slate-light)}
.leadform input:focus-visible,.leadform select:focus-visible{outline:2px solid var(--limeink);outline-offset:1px;border-color:var(--carbon)}
.leadform .btn{margin-top:18px}
.leadform .leadform__fine{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.leadform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.leadform__done{scroll-margin-top:88px}
.leadform__check{width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--carbon);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px}
.leadform .leadform__title{margin-top:14px;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--carbon)}
.leadform .leadform__note{margin-top:6px;font-size:17px;color:var(--ink2)}
.leadform__cal{margin-top:14px}
.leadform__cal iframe{display:block;width:100%;min-height:560px;border:0}
@media(max-width:640px){.leadform{padding:20px}.leadform__grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.footer{background:var(--carbon);color:#C9CFD8;padding:40px 0 30px;border-top:1px solid var(--hairline-dark)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer__brand .nav__logo{color:#fff}
.footer__brand p{font-size:16px;color:#C9CFD8;max-width:34ch}
.footer h3{font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-dark);margin-bottom:14px}
.footer ul{list-style:none}
.footer li{margin-bottom:9px}
.footer li a{color:#C9CFD8;font-size:16px}
.footer li a:hover{color:#fff;text-decoration:none}
.footer__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--hairline-dark);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr}}

/* ---------- page hero (inner pages) ---------- */
.phero{padding:50px 0 44px}
.phero .lead{margin-top:18px;max-width:72ch}
.phero__actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- timeline (build) ---------- */
.tline{border-left:1px solid var(--hairline);margin:26px 0 0 6px;padding-left:32px;position:relative}
.tstep{position:relative;padding-bottom:20px}
.tstep:last-child{padding-bottom:0}
.tstep::before{content:"";position:absolute;left:-37px;top:5px;width:9px;height:9px;background:var(--lime)}
.tstep__when{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--limeink)}
.tstep h3{margin-top:6px}
.tstep p{margin-top:8px;font-size:17px}

/* ---------- pipeline (approach) ---------- */
.pipe{margin-top:28px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:20px 20px 16px;overflow-x:auto}
.pipe__bar{display:flex;min-width:640px;height:34px;border:1px solid var(--carbon);border-radius:6px;overflow:hidden}
.pipe__bar i{border-right:1px solid var(--paper);background:var(--carbon);position:relative}
.pipe__bar i:last-child{border-right:none}
.pipe__bar i.lit{background:var(--lime)}
.pipe__labels{display:flex;min-width:640px;margin-top:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.pipe__labels span{padding-right:6px}
.pipe__meta{display:flex;justify-content:space-between;min-width:640px;margin-top:16px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.pipe__meta b{color:var(--carbon)}

/* ---------- coverage bars (services) ---------- */
.covers{margin-top:28px;border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface);padding:18px 20px 14px}
.cover{display:grid;grid-template-columns:110px 1fr 70px;gap:14px;align-items:center;padding:9px 0}
.cover .sku{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--carbon)}
.cover .bar{position:relative;height:16px;background:none}
.cover .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--carbon)}
.cover .bar i.lit{background:var(--lime)}
.cover .bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--limeink)}
.cover .wk{font-family:var(--font-mono);font-size:12.5px;text-align:right;color:var(--carbon);font-variant-numeric:tabular-nums}
.cover .wk.hot{color:var(--limeink);font-weight:600}

/* ---------- exception report (about) ---------- */
.xrow{display:grid;grid-template-columns:110px 110px 1fr;gap:8px 22px;padding:11px 0;border-top:1px solid var(--hairline);align-items:baseline}
.xrow:last-of-type{border-bottom:1px solid var(--hairline)}
.xrow .who{font-weight:800;font-size:19px;color:var(--carbon)}
.xrow .st{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--limeink)}
.xrow .why{font-size:17px;color:var(--ink2);max-width:none}
@media(max-width:640px){.xrow{grid-template-columns:1fr}.xrow .st{order:-1}}

/* ---------- misc ---------- */
.artcap{margin-top:16px;font-size:15px;color:var(--slate)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* ---------- kit icons ---------- */
.icobox{width:44px;height:44px;border:none;border-radius:8px;background:none;
  display:flex;align-items:flex-start;justify-content:flex-start;flex:none;color:var(--carbon)}
.ico{width:24px;height:24px}
.frow>.icobox{margin-top:2px}
.triad .icobox,.step .icobox{margin-bottom:14px}
/* ---------- scale bars ($21,450 vs $1,500) ---------- */
.scale{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface);padding:18px 20px;margin-top:24px}
.scale .srow2{display:grid;grid-template-columns:190px 1fr 90px;gap:14px;align-items:center;padding:8px 0}
.scale .srow2 .lab{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.scale .srow2 .bar{height:18px;position:relative}
.scale .srow2 .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--carbon)}
.scale .srow2 .bar i.lit{background:var(--lime)}
.scale .srow2 .val{font-family:var(--font-mono);font-size:13.5px;text-align:right;color:var(--carbon);font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:640px){.scale .srow2{grid-template-columns:1fr 70px}.scale .srow2 .lab{grid-column:1/-1}}
/* ---------- call timeline ---------- */
.callbar{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface);padding:18px 20px;margin-top:26px}
.callbar__bar{display:flex;height:34px;border:1px solid var(--carbon);border-radius:6px;overflow:hidden}
.callbar__bar i{border-right:1px solid var(--paper);background:var(--carbon)}
.callbar__bar i.lit{background:var(--lime)}
.callbar__bar i:last-child{border-right:none}
.callbar__labels{display:flex;margin-top:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
/* ---------- caught-PO artifact ---------- */
.pobar{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:18px 20px;margin-top:28px;overflow-x:auto}

/* chart legend chips */
.legend{display:flex;flex-wrap:wrap;gap:8px 10px;padding:12px 18px;border-top:1px solid var(--hairline)}
.lg{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate);border:1px solid var(--hairline);
  border-radius:6px;padding:5px 10px;background:var(--surface)}
.lg i{display:inline-block;flex:none}
.lg--line i{width:22px;height:0;border-top:2.5px solid var(--carbon)}
.lg--dot i{width:22px;height:0;border-top:2.5px dotted var(--carbon)}
.lg--act i{width:11px;height:11px;background:var(--lime);border-radius:2px}
.lg--hatch i{width:18px;height:12px;border:1px solid var(--hairline);border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--hatch-line) 0 1.5px,transparent 1.5px 6px)}

/* ---------- mechanism redesign ---------- */
.mech-line{position:relative;margin:30px 0 26px;padding-bottom:34px}
.mech-line__rule{position:absolute;left:0;right:0;top:5px;height:1px;background:var(--hairline)}
.mech-line__rule i{position:absolute;right:0;top:0;height:1px;width:26%;background:var(--limeink)}
.mech-line__nodes{display:flex;justify-content:space-between;position:relative}
.mech-node{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.mech-node i{width:11px;height:11px;background:var(--carbon);border-radius:2px;margin-top:0}
.mech-node span{font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.mech-node--run i{background:var(--lime);outline:1.4px solid var(--carbon)}
.mech-node--run span{color:var(--limeink)}
@media(max-width:700px){.mech-node span{font-size:10.5px;letter-spacing:.08em}}

.layer{display:flex;flex-direction:column;gap:12px}
.layer__head{display:flex;justify-content:space-between;align-items:center}
.layer__head .ico{width:22px;height:22px;color:var(--carbon)}
.layer p{font-size:16px;margin:0}
.tagchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.tagchip{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--ink2);
  border:1px solid var(--hairline);border-radius:6px;padding:5px 10px;background:var(--paper);white-space:nowrap}
.sopcats{display:grid;gap:11px;margin-top:14px}
.sopcat{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;align-items:baseline}
.sopcat__lab{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light)}
.sopcat .tagchips{margin-top:0;padding-top:0}
.sopcat .tagchip{white-space:normal}
.drow .tagchips{margin-top:12px;padding-top:0}
.drow .tagchip{white-space:normal}
.formula{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:20px 22px;margin-top:26px}
.formula__term{font-family:var(--font-mono);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--carbon);border:1px solid var(--hairline);border-radius:8px;padding:10px 14px;background:var(--paper)}
.formula__term--lime{background:var(--lime);border-color:var(--lime)}
.formula__op{font-family:var(--font-mono);font-weight:600;font-size:20px;color:var(--slate)}
.keylist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.keylist li{display:flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.keylist b{color:var(--carbon);font-weight:600;flex:none}
.keylist b::after{content:"=";color:var(--slate-light);margin-left:10px;font-weight:400}
.pagegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.pagecard{display:block;background:var(--surface);padding:22px;transition:background-color .15s ease-out}
.pagecard h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--limeink)}
.pagecard__arr{font-weight:700;transition:transform .15s ease-out;flex:none}
.pagecard p{margin-top:8px;font-size:15.5px;color:var(--ink2);max-width:none}
.pagecard:hover{background:var(--lime-tint);text-decoration:none}
.pagecard:hover h3{color:var(--limeink-hover)}
.pagecard:hover .pagecard__arr{transform:translateX(5px)}
@media(max-width:820px){.pagegrid{grid-template-columns:1fr}}
@media(max-width:640px){.sopcat{grid-template-columns:1fr}}

.runbar{display:grid;grid-template-columns:auto 1fr;gap:10px 40px;align-items:center;
  background:var(--carbon);color:var(--paper);border-radius:12px;padding:20px 24px;margin-top:26px}
.runbar__label .stepchip{color:var(--limedark);margin-bottom:4px}
.runbar__label h3{color:#fff;margin:0}
.runbar__week{display:flex;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:8px;overflow:hidden}
.runcell{flex:1;background:var(--carbon);padding:10px 14px;min-width:0}
.runcell b{display:block;font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9C0CA}
.runcell span{display:block;margin-top:3px;font-size:14.5px;color:#E7EAEF;white-space:nowrap}
.runcell--you{background:var(--lime)}
.runcell--you b,.runcell--you span{color:var(--carbon)}
@media(max-width:900px){.runbar{grid-template-columns:1fr}.runbar__week{flex-direction:column}.runcell span{white-space:normal}}

/* ---------- the day rail: faithful port of the original artifact ----------
   Absolute inside main, spans #problem to #cta. The line crosses paper and
   carbon surfaces, so its ink is mid-grey alpha, never white or carbon. */
main{position:relative}
.rail{position:absolute;left:22px;top:0;width:150px;opacity:0;transition:opacity .5s;pointer-events:none;z-index:30;display:none}
.rail.ready{opacity:1}
.rail__line{position:absolute;left:12px;top:0;bottom:0;width:1px;background:rgba(120,128,136,.35)}
.rail__dock{position:absolute;left:0;width:150px;padding-left:26px}
.rail__dock::before{content:"";position:absolute;left:7px;top:5px;width:11px;height:1px;background:#8A93A3;transition:background .4s}
.rail__dock b{display:block;font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--slate-light);transition:color .4s}
.rail__dock span{display:block;margin-top:7px;font-family:var(--font-mono);font-weight:500;font-size:10.5px;line-height:1.55;letter-spacing:.09em;color:var(--slate-light);text-transform:uppercase;max-width:118px}
.rail__dock.past b{color:#9BD814}
.rail__dock.past::before{background:#9BD814}
.rail__cursor{position:absolute;left:34px;top:0;z-index:40;opacity:0;transition:opacity .35s;pointer-events:none;will-change:transform}
.rail__cursor.on{opacity:1}
.rail__cursor b{position:absolute;left:0;top:0;transform:translate(10px,-50%);display:block;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--carbon);background:var(--lime);border-radius:5px;padding:5px 8px;white-space:nowrap}
@media(min-width:1440px){.rail{display:block}.rail__cursor{display:block}}
@media(max-width:1439px){.rail__cursor{display:none}}

/* ---------- the cost worksheet ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin-top:28px}
.calc__in,.calc__out{background:var(--surface);padding:24px}
.cfield{margin-bottom:18px}
.cfield label{display:block;font-size:15px;font-weight:600;color:var(--carbon)}
.cval{display:block;font-family:var(--font-mono);font-weight:600;font-size:20px;color:var(--limeink);margin:4px 0 8px;font-variant-numeric:tabular-nums}
.cends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--slate-light);margin-top:4px}
input[type=range]{width:100%;accent-color:var(--lime);height:22px}
.orow{padding:16px 0;border-bottom:1px solid var(--hairline)}
.orow:last-child{border-bottom:none}
.olab{display:block;font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.oval{display:block;font-family:var(--font-mono);font-weight:600;font-size:32px;color:var(--carbon);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.orow--total{background:var(--paper);margin:0 -24px -24px;padding:16px 24px 24px;border-top:1px solid var(--hairline)}
.orow--total .oval{font-size:40px}
.orow p{font-size:14px;margin:0;color:var(--slate)}
@media(max-width:820px){.calc{grid-template-columns:1fr}}

/* ---------- scroll mode toggle ---------- */
.scrolltoggle{position:fixed;right:12px;bottom:12px;z-index:80;display:none;align-items:center;gap:1px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:2px;opacity:.85}
.scrolltoggle:hover{opacity:1}
@media(min-width:981px){.scrolltoggle{display:inline-flex}}
@media (prefers-reduced-motion: reduce){.scrolltoggle{display:none!important}}
.scrolltoggle .stgico{display:flex;align-items:center;color:var(--carbon);padding:0 1px 0 5px}
.scrolltoggle .stgico svg{width:10px;height:16px;display:block}
.stgwheel{animation:stgwheel 1.7s ease-in-out infinite}
@keyframes stgwheel{0%{transform:translateY(0);opacity:1}65%{transform:translateY(7px);opacity:0}66%,100%{transform:translateY(0);opacity:0}}
.scrolltoggle button{font-family:var(--font-mono);font-weight:600;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;border:none;background:none;color:var(--slate);padding:3px 6px;border-radius:4px;cursor:pointer}
.scrolltoggle button[aria-pressed="true"]{background:var(--lime);color:var(--carbon)}
.scrolltoggle button:hover{color:var(--carbon)}
.scrolltoggle button[aria-pressed="true"]:hover{color:var(--carbon)}

/* ---------- ported compare components ---------- */
.mt-28{margin-top:28px}
.rec{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;overflow:hidden;margin-top:28px}
.rec__head{display:flex;justify-content:space-between;gap:14px;padding:12px 20px;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.rrow{display:grid;grid-template-columns:170px 1fr;gap:8px 28px;padding:14px 20px;border-bottom:1px solid var(--hairline)}
.rrow:last-child{border-bottom:none}
.rrow p{margin:0;max-width:none;font-size:15.5px}
.rkey{display:flex;align-items:baseline;gap:12px;font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.rkey b{font-size:19px;letter-spacing:-.01em;color:var(--carbon);font-variant-numeric:tabular-nums}
@media(max-width:640px){.rrow{grid-template-columns:1fr}}
.walls{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin-top:28px}
.wall{background:var(--surface);padding:22px}
.wall--in{background:var(--surface);box-shadow:inset 0 0 0 2px var(--lime)}
.wall h3{margin-bottom:8px}
.wall p{font-size:15.5px;max-width:none}
.wall h4{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font:600 12px/1.5 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--slate);padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--hairline)}
.wall ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wall li{display:flex;align-items:baseline;gap:11px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.wall li::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;border:1px solid var(--slate-light);transform:translateY(-1px)}
.wall--in h4{color:var(--limeink);border-bottom-color:var(--lime)}
.wall--in li{color:var(--carbon)}
.wall--in li::before{background:var(--lime);border-color:var(--lime)}
@media(max-width:760px){.walls{grid-template-columns:1fr}}
.mini{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--limeink);border:1px solid var(--hairline);border-radius:6px;padding:5px 12px;margin-bottom:14px;background:var(--surface)}
.carbon .mini{color:#9BD814;border-color:var(--hairline-dark-strong);background:transparent}
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);background:var(--surface);border-radius:12px;margin-top:28px}
.tablewrap table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.tablewrap th{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);text-align:left;padding:11px 16px;border-bottom:1px solid var(--hairline)}
.tablewrap td{padding:12px 16px;border-bottom:1px solid var(--hairline);color:var(--ink2)}
.tablewrap tr:last-child td{border-bottom:none}
.faq__body p{margin:0 0 10px;font-size:inherit;max-width:none}

.page-head__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.carbon .page-head__actions,.cta .page-head__actions{justify-content:center}

/* ---------- nav dropdowns: hover opens, focus-within for keyboard,
   the top item is a real link to its hub so touch simply navigates ---------- */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop>a{display:inline-flex;align-items:center;gap:6px}
.nav__drop>a::after{content:"";border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4.5px solid currentColor;opacity:.4;transition:transform .18s ease}
.nav__drop:hover>a::after,.nav__drop:focus-within>a::after{transform:rotate(180deg)}
.nav__panel{position:absolute;top:calc(100% + 6px);left:50%;min-width:264px;
  background:var(--carbon);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:10px 8px 8px;display:flex;flex-direction:column;z-index:70;
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.7,.3,1),visibility .3s}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__panel::before{content:attr(aria-label);display:block;padding:2px 12px 8px;
  font-family:var(--font-mono);font-weight:600;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate-dark);border-bottom:1px solid var(--hairline-dark);margin-bottom:6px}
.nav__panel a{display:block;padding:7px 12px;border-radius:6px;font-size:13.5px;font-weight:500;
  letter-spacing:.01em;color:#FFFFFF;transition:background .12s,color .12s}
.nav__panel a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav__panel .nav__panelall{margin-top:6px;padding-top:9px;border-top:1px solid var(--hairline-dark);
  font-family:var(--font-mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#9BD814;border-radius:0}
.nav__panel .nav__panelall:hover{background:none;color:#9BD814}

/* section 03: verdict chips + the ownership band */
.verdictlab{font-family:var(--font-mono);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-light);align-self:center}
.ownbar{display:grid;grid-template-columns:auto 1fr;gap:12px 44px;align-items:center;
  background:var(--carbon);border-radius:12px;padding:26px 30px;margin-top:26px}
.ownword{font-family:var(--font-sans);font-weight:800;font-size:clamp(26px,3vw,38px);
  letter-spacing:-.01em;color:#9BD814;line-height:1}
.ownbar p{color:#C9CFD8;max-width:none;font-size:17px;margin:0}
.ownbar p b{color:#fff}
@media(max-width:820px){.ownbar{grid-template-columns:1fr}}


/* ============================================================
   Mobile refinement. 360px is the narrowest mainstream Android
   (Galaxy A/S series); everything below is verified at that width.
   ============================================================ */

/* Grid and flex children default to min-width:auto, so one nowrap string
   sets a floor the whole track cannot shrink below. This is what blew the
   hero out by 81px at 360: .chartcard__head is nowrap with ~416px of text. */
.hero__grid > *,
.chartcard,
.chartcard__head,
.rec, .rrow, .drow, .frow, .lrow,
.triad > *, .steps > *, .pagegrid > *, .walls > *,
.plans > *, .calc > *, .grid2 > *, .runbar > *, .sopcat > *{min-width:0}
.chartcard__head > span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* dvh tracks the visible viewport as mobile browser chrome hides and shows;
   the vh line above it stays as the fallback for older engines. */
.hero{min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}
html.vlm-paging main > section{min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}

@media(max-width:560px){
  .container{padding:0 18px}
  .tagchip{white-space:normal}
  .chartcard__head{white-space:normal;flex-wrap:wrap;gap:4px 12px}
  .cover{grid-template-columns:84px 1fr 56px;gap:10px}
  .keylist li{flex-wrap:wrap}
  .formula{gap:8px 10px}
  .vstrip{gap:8px 16px;font-size:12.5px}
}

@media(max-width:400px){
  .container{padding:0 14px}
  .nav__inner{padding:0 14px;gap:12px}
  .hero__copy h1{font-size:30px}
  .mast__meta{gap:8px 16px}
}

/* burger was collapsing to 18px wide inside the flex row; flex:none holds it
   at a 44px tap target, which is the iOS/Android accessibility minimum */
.nav__toggle{flex:none;width:44px;height:44px}

/* the map builder canvas renders ~176px tall at 360px wide, which is not a
   usable drag surface. Give it a real height and let it scroll sideways. */
@media(max-width:760px){
  .smap__stage{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .smap__stage svg{min-width:640px}
}

/* .nav__book is a .btn, and .btn{display:inline-block} is declared after the
   900px media query at equal specificity, so the original display:none never
   applied. Higher specificity + later position fixes it for good. Same trap
   applies to .mmenu's own button, so it is pinned explicitly too. */
@media(max-width:900px){
  .nav__book.btn{display:none}
  .mmenu.is-open .btn{display:block}
}

/* The mobile menu lives inside a position:sticky nav, so once the nav pins at
   top:0 anything past the fold is unreachable by page scrolling. Cap it to the
   visible viewport and let the menu scroll itself. Landscape (390px tall) and
   short screens both need this.
   The bottom padding also clears env(safe-area-inset-bottom) so the last item
   is not sitting under an iPhone home indicator or Safari's bottom toolbar. */
@media(max-width:900px){
  .mmenu.is-open{
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .mmenu .btn{margin-bottom:4px}
}

/* The divider rule .mmenu a{border-bottom:...} outranks .btn--ghost-dark, so
   the button's bottom edge rendered in the divider colour. The original fix
   was border-bottom:none, which deleted the edge entirely and left the button
   drawn on three sides. Scope the divider away from the button instead and
   restore its full box. */
@media(max-width:900px){
  .mmenu a.btn{border:1px solid var(--slate-dark);border-bottom:1px solid var(--slate-dark)}
  .mmenu a.btn:hover{border-color:var(--lime)}
}

/* artifact figure frame: white card so SVGs sit correctly on carbon sections too */
.fig{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:22px 20px;overflow-x:auto}
.fig svg{width:100%;height:auto;display:block;min-width:300px}
@media(max-width:560px){.fig{padding:16px 12px}}

/* ---------- large displays: scale with the screen, don't just centre in it ---------- */
@media(min-width:1500px){
  .container,.nav__inner{max-width:1320px}
  body{font-size:18px}
  h1{font-size:clamp(38px,4.2vw,66px)}
  .lead{font-size:22px}
  .hero__grid{gap:56px}
  section{padding:88px 0 78px}
}
@media(min-width:1800px){
  .container,.nav__inner{max-width:1440px}
  body{font-size:18.5px}
  h1{font-size:clamp(38px,4vw,72px)}
  .lead{font-size:23px}
  .hero__grid{gap:64px}
  section{padding:96px 0 86px}
}
@media(min-width:2200px){
  .container,.nav__inner{max-width:1560px}
}
/* a full-height hero is right on a laptop; on a tall desktop it becomes a field of nothing */
@media(min-height:940px){
  .hero{min-height:840px;min-height:min(calc(100dvh - 64px),840px);padding:24px 0 56px}
}

/* ---------- homepage: stat mosaic (carbon) + finding cards ---------- */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{border:1px solid var(--hairline-dark);border-radius:12px;padding:22px 20px 18px;background:rgba(255,255,255,.03)}
.stat b{display:block;font-family:var(--font-sans);font-weight:800;font-size:clamp(30px,2.6vw,42px);letter-spacing:-.02em;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.stat .what{display:block;margin-top:8px;color:#C9CFD8;font-size:15.5px;line-height:1.5}
.stat .who{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--limedark)}
.statgrid > .stat{min-width:0}
@media(max-width:900px){.statgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.statgrid{grid-template-columns:1fr;gap:10px}.stat{padding:18px 16px 14px}}

.findgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
a.findcard{display:flex;flex-direction:column;min-width:0;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);padding:22px 20px 16px;color:inherit;transition:border-color .15s ease,transform .15s ease}
a.findcard:hover{border-color:var(--carbon);text-decoration:none;transform:translateY(-2px)}
.findcard b{font-family:var(--font-sans);font-weight:800;font-size:clamp(26px,2.2vw,34px);letter-spacing:-.02em;line-height:1.1;color:var(--carbon);font-variant-numeric:tabular-nums}
.findcard p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink2);flex:1}
.findcard .who{margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.findcard .who i{font-style:normal;font-size:14px;color:var(--carbon);transition:transform .15s ease}
a.findcard:hover .who i{transform:translateX(3px)}
@media(max-width:900px){.findgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.findgrid{grid-template-columns:1fr;gap:10px}a.findcard{padding:18px 16px 12px}}
a.findcard,a.findcard:hover{color:inherit}
.carbon a.findcard{border-color:transparent}
.carbon a.findcard:hover{border-color:var(--lime)}
.carbon a.findcard:hover .who i{color:var(--limeink)}
/* hero: the threat, then the answer */
.hero__turn{margin-top:18px;padding:3px 0 3px 18px;border-left:3px solid var(--lime);font-size:18px;line-height:1.65;color:var(--ink2);max-width:52ch}
.hero__turn b{color:var(--carbon)}
@media(max-width:560px){.hero__turn{font-size:16.5px;padding-left:14px;margin-top:14px}}

/* ---------- problem section: split-tone cards ---------- */
.b4grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.b4card{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);overflow:hidden;display:grid;grid-template-columns:1.55fr 1fr;min-height:190px}
.b4card>*{min-width:0}
.b4body{padding:24px 24px 20px}
.b4card h3{font-size:20.5px}
.b4card .b4body p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink2)}
.b4side{background:var(--carbon);color:#fff;padding:22px 22px 18px;display:flex;flex-direction:column;justify-content:space-between}
.b4side .lab{display:block;font-family:var(--font-mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A93A3}
.b4side .lab.lime{color:var(--lime)}
.b4side .val{display:block;margin-top:6px;font-weight:800;font-size:25px;line-height:1.12;letter-spacing:-.01em;color:#fff}
.b4side .dec{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.b4side .dec .val2{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:#C9CFD8}
@media(max-width:900px){.b4grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .b4card{grid-template-columns:1fr;min-height:0}
  .b4side{flex-direction:row;align-items:flex-start;gap:16px}
  .b4side>div:first-child{flex:none}
  .b4side .dec{flex:1;margin-top:0;padding-top:0;border-top:none;border-left:1px solid rgba(255,255,255,.14);padding-left:16px}
  .b4side .val{font-size:20px;white-space:nowrap}
}
/* scale figure: horizontal chain on desktop, vertical on phones */
.fig svg.scalefig-mob{display:none}
@media(max-width:700px){
  .fig svg.scalefig-desk{display:none}
  .fig svg.scalefig-mob{display:block;min-width:0}
}