/* NullDrift — elite marketing CSS. Self-hosted Inter + JetBrains Mono, no CDN.
   Engineering-grade restraint (Linear/Vercel) + fintech number treatment (Stripe/Mercury). */

@font-face{font-family:"Inter";src:url("fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* backgrounds */
  --bg:#ffffff; --bg-subtle:#f7f8f8; --bg-muted:#eff1f1; --surface:#ffffff;
  --nav-bg:rgba(255,255,255,.88); --nav-bg-solid:#ffffff;
  /* text */
  --text:#16191d; --text-strong:#0a0c0e; --text-muted:#5b636c; --text-subtle:#8b939c;
  /* borders */
  --border:#e4e7e8; --border-strong:#d3d7d9; --border-faint:#eef0f0;
  /* accent — NullDrift burnt orange */
  --accent:#c2410c; --accent-hover:#9a3412; --accent-press:#7c2d12;
  --accent-soft:#ffedd5; --accent-text:#9a3412;
  /* semantic */
  --success:#1a7f4b; --success-soft:#e7f4ec; --warning:#9a6700; --warning-soft:#fbf3e0;
  --danger:#b42318; --danger-soft:#fdeceb; --info:#0b5cad; --info-soft:#e8f1fb;
  --money:#b4530a;
  /* dark band */
  --d-bg:#0c0e10; --d-surface:#15181b; --d-surface-2:#1c2024; --d-border:#25292e;
  --d-text:#e9ecee; --d-text-muted:#9aa2a9; --d-accent:#fb923c; --d-accent-soft:#3a1e0a;
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;
  /* radius / shadow */
  --r-sm:6px;--r:8px;--r-md:10px;--r-lg:12px;--r-pill:999px;
  --shadow-xs:0 1px 2px rgba(16,24,32,.05);
  --shadow-sm:0 1px 2px rgba(16,24,32,.04),0 2px 6px rgba(16,24,32,.06);
  --shadow-md:0 4px 12px rgba(16,24,32,.08),0 1px 3px rgba(16,24,32,.06);
  --ring:0 0 0 3px rgba(194,65,12,.28);
  --maxw:1080px; --maxw-prose:680px; --maxw-wide:1240px;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-feature-settings:"cv01" 1,"cv03" 1,"ss03" 1;font-weight:420;font-size:15.5px;line-height:1.6;
  letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.icon{flex:none;stroke-width:1.5}

/* type */
h1,h2,h3,h4{margin:0;color:var(--text);font-weight:620;text-wrap:balance}
.display{font-size:clamp(40px,6vw,60px);line-height:1.05;letter-spacing:-.022em;font-weight:640;color:var(--text-strong)}
h2,.h2{font-size:clamp(26px,4vw,32px);line-height:1.12;letter-spacing:-.018em;font-weight:620}
h3{font-size:21px;line-height:1.25;letter-spacing:-.012em;font-weight:600}
.lead{font-size:18px;line-height:1.55;letter-spacing:-.003em;font-weight:420;color:var(--text-muted);max-width:60ch;text-wrap:pretty}
.eyebrow{font-size:12.5px;line-height:1.2;letter-spacing:.08em;font-weight:600;text-transform:uppercase;color:var(--accent-text)}
p{max-width:64ch}
section{padding:96px 0;border-top:1px solid var(--border)}
section.flush{border-top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);
  font-family:inherit;font-size:14px;font-weight:540;letter-spacing:-.006em;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press)}
.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:#000}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--bg-subtle);border-color:#c2c7ca}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-lg{height:46px;padding:0 22px;font-size:15px}
.btn .icon{width:16px;height:16px}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:60px;background:var(--nav-bg);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);transition:border-color .2s,box-shadow .2s,background .2s}
.nav.solid{background:var(--nav-bg-solid);border-bottom-color:var(--border-strong);box-shadow:0 1px 0 rgba(16,24,32,.03)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r);cursor:pointer;color:var(--text-muted);transition:color .15s,border-color .15s}
.theme-toggle:hover{color:var(--text);border-color:var(--border-strong)}
.theme-toggle .icon{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:inline}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--text)}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center}
.brand .mark .icon{width:16px;height:16px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--text-muted);font-weight:480;font-size:14px;letter-spacing:-.006em;transition:color .15s}
.nav-links a:hover{color:var(--text)}
/* active indicator — current page (aria-current="page") OR scrolled section (="location") */
.nav-links a[aria-current]{color:var(--accent-text);font-weight:560;position:relative}
.nav-links a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-21px;
  height:2px;border-radius:2px 2px 0 0;background:var(--accent);transition:opacity .2s}
.mobile-menu a[aria-current]{color:var(--accent-text);font-weight:560}
.nav-links .btn-primary{color:#fff}
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r);cursor:pointer;color:var(--text)}
.nav-toggle .icon{width:20px;height:20px}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 24px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.mobile-menu a{padding:11px 4px;font-size:15px;font-weight:480;color:var(--text);border-bottom:1px solid var(--border-faint)}
.mobile-menu a.btn{justify-content:center;margin-top:10px;border-bottom:0;color:#fff}
.mobile-menu.open{display:flex}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
}
/* in-page sub-nav (e.g. audit-agent sections) — visually distinct from the global header */
.subnav{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}
.subnav a{font-size:13px;font-weight:500;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:6px 13px;transition:color .15s,border-color .15s,background .15s}
.subnav a:hover{color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft)}

/* hero */
.hero{padding:84px 0 72px;position:relative;overflow:hidden;border-top:0}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.022;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{margin:18px 0 20px}
.hero h1 .accent{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:5px 12px;font-size:13px;font-weight:500;color:var(--text-muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--text-subtle)}
.stack-strip{margin-top:32px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 11px;font-size:12.5px;font-weight:500;color:var(--text-muted)}

/* generic card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.card-hover{transition:border-color .15s,box-shadow .15s}
.card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}

/* hero product card */
.demo-card{padding:22px;box-shadow:var(--shadow-md)}
#audit .demo-card{position:sticky;top:84px;align-self:start}
.demo-card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.demo-card h4{font-size:14px;font-weight:600;letter-spacing:-.006em}
.demo-card .sub{margin:0 0 14px;font-size:12.5px;color:var(--text-subtle)}
.demo-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r);margin-top:8px}
.demo-row .t{flex:1;min-width:0}
.demo-row .t b{font-size:13.5px;font-weight:560;display:block}
.demo-row .t span{font-size:12px;color:var(--text-subtle)}
.gate-tag{margin-top:14px;display:flex;align-items:center;gap:7px;justify-content:center;font-size:12px;color:var(--text-subtle)}
.gate-tag .icon{width:13px;height:13px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-sm);
  font-size:12px;font-weight:520;letter-spacing:-.002em;border:1px solid transparent;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%}
.b-success{background:var(--success-soft);color:var(--success);border-color:#cfe8d8}
.b-success .dot{background:var(--success)}
.b-warning{background:var(--warning-soft);color:var(--warning);border-color:#f0e2bd}
.b-warning .dot{background:var(--warning)}
.b-danger{background:var(--danger-soft);color:var(--danger);border-color:#f6d4d1}
.b-danger .dot{background:var(--danger)}

/* trust strip */
.trust{padding:26px 0;background:var(--bg-subtle)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.trust .label{font-size:12.5px;font-weight:500;color:var(--text-subtle)}
.trust .row{display:flex;gap:26px;flex-wrap:wrap}
.trust .row span{font-weight:560;color:var(--text-muted);font-size:14px;letter-spacing:-.01em}

/* stats band (dark) */
.stats{background:var(--d-bg);color:var(--d-text);border-top:0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--d-border);border:1px solid var(--d-border);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:760px){.stats .grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--d-bg);padding:28px 24px}
.stat b{display:block;font-size:36px;font-weight:640;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.stat span{color:var(--d-text-muted);font-size:13.5px}

/* section header */
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2{margin:12px 0 16px}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.cards,.cards.g2{grid-template-columns:1fr}}
.feature{padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.feature .icon-chip{width:40px;height:40px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;margin-bottom:16px}
.feature .icon-chip .icon{width:20px;height:20px}
.feature h3{font-size:17px;margin-bottom:8px}
.feature p{margin:0;color:var(--text-muted);font-size:14.5px}

/* steps */
.steps{background:var(--bg-subtle)}
.steplist{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
@media(max-width:1000px){.steplist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.steplist{grid-template-columns:1fr}}
.step{position:relative;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.step .n{counter-increment:s;font-family:var(--font-mono);font-size:12px;color:var(--accent-text);font-weight:500}
.step .n::before{content:"0" counter(s)}
.step h3{font-size:16px;margin:10px 0 6px;letter-spacing:-.01em}
.step p{margin:0;font-size:14px;color:var(--text-muted)}

/* calculator */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc-inputs{padding:24px;display:grid;gap:20px}
.field label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--text-muted);margin-bottom:9px}
.field label b{color:var(--text);font-weight:560;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.field input[type=range]{width:100%;accent-color:var(--accent);height:4px}
.calc-out{background:var(--d-bg);color:var(--d-text);border-radius:var(--r-lg);padding:28px;position:sticky;top:80px;border:1px solid var(--d-border)}
.calc-out .cap{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--d-text-muted);font-weight:600}
.calc-out .big{font-size:44px;font-weight:640;letter-spacing:-.022em;color:#fff;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.calc-out .row{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--d-border);font-size:13.5px;color:var(--d-text-muted)}
.calc-out .row b{color:var(--d-text);font-weight:500;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.calc-out .save{margin-top:18px;background:var(--d-surface);border:1px solid var(--d-border);border-radius:var(--r-md);padding:16px}
.calc-out .save .lab{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#d98b52;font-weight:600}
.calc-out .save .big{color:var(--money);font-size:30px;margin-top:6px}
.calc-out .save .big{color:#e8924e}
.calc-out .save .sub{font-size:13px;color:var(--d-text-muted)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;padding:26px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.plan.feat{border-color:var(--accent);box-shadow:var(--shadow-sm);position:relative}
.plan .tag{position:absolute;top:-10px;left:26px;background:var(--accent);color:#fff;font-size:11px;font-weight:560;padding:3px 9px;border-radius:var(--r-sm);letter-spacing:.01em}
.plan h3{font-size:17px}
.plan .price{font-size:34px;font-weight:640;letter-spacing:-.02em;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.plan .price small{font-size:13px;font-weight:460;color:var(--text-subtle)}
.plan .kind{font-size:13.5px;color:var(--text-muted);margin:0}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:11px}
.plan li{display:flex;gap:9px;font-size:14px;color:var(--text-muted);align-items:flex-start}
.plan li .icon{width:16px;height:16px;color:var(--success);margin-top:2px}
.plan .btn{margin-top:auto;justify-content:center}

/* faq */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:540;font-size:15.5px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:18px;height:18px;color:var(--text-subtle);transition:transform .2s}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:var(--text-muted);font-size:15px;max-width:62ch}

/* cta / form */
.formcard{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:32px}
.formcard h2{font-size:26px;margin-bottom:6px}
.formcard .sub{color:var(--text-muted);margin:0 0 24px;font-size:15px}
.formgrid{display:grid;gap:12px}
.formgrid .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.formgrid .two{grid-template-columns:1fr}}
.formgrid textarea{min-height:96px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;resize:vertical;width:100%}
.formgrid textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.formgrid textarea::placeholder{color:var(--text-subtle)}
.formgrid input,.formgrid select{height:42px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r);
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
.formgrid input:focus,.formgrid select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.formgrid input::placeholder{color:var(--text-subtle)}
.formgrid .btn{margin-top:4px}
.form-note{font-size:12.5px;color:var(--text-subtle);text-align:center;margin-top:16px}
.form-ok{display:none;text-align:center;padding:20px;background:var(--success-soft);border:1px solid #cfe8d8;border-radius:var(--r-md);color:var(--success);font-weight:520}

/* footer */
footer{background:var(--d-bg);color:var(--d-text-muted);padding:56px 0 36px;font-size:14px;border-top:0}
footer .grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .brand{color:#fff}
footer .brand .mark{background:var(--d-accent);color:var(--d-bg)}
footer a{color:var(--d-text-muted);transition:color .15s}
footer a:hover{color:#fff}
footer .col b{color:#fff;display:block;margin-bottom:10px;font-weight:520;font-size:13.5px}
footer .col a{display:block;padding:3px 0}
.disclosure{margin-top:28px;padding-top:22px;border-top:1px solid var(--d-border);font-size:12.5px;line-height:1.7;color:var(--d-text-subtle,#6b7178);max-width:none}

/* interactive demo */
.demo-stage{padding:28px}
.demo-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.demo-pick{grid-template-columns:1fr}}
.demo-opt{text-align:left;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  font-family:inherit;font-size:14.5px;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.demo-opt b{font-weight:600;color:var(--text)}
.demo-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.demo-steps{display:grid;gap:2px;margin-bottom:18px}
.dstep{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r);opacity:.4;transition:opacity .3s,background .3s}
.dstep .dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:none;transition:background .3s,box-shadow .3s}
.dstep div{display:flex;flex-direction:column;flex:1;min-width:0}
.dstep b{font-size:14px;font-weight:560}
.dstep span{font-size:12.5px;color:var(--text-subtle)}
.dstep.active{opacity:1}
.dstep.active .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.dstep.done{opacity:1}
.dstep.done .dot{background:var(--success)}
.dstep.blocked .dot{background:var(--danger)}
.demo-result{padding:16px 18px;border-radius:var(--r-md);font-size:14px;margin-bottom:16px;display:none}
.demo-result.show{display:block}
.demo-result.ok{background:var(--success-soft);border:1px solid #cfe8d8;color:#0f5132}
.demo-result.review{background:var(--warning-soft);border:1px solid #f0e2bd;color:#7a5200}
.demo-result.deny{background:var(--danger-soft);border:1px solid #f6d4d1;color:#842029}
.demo-result b{font-weight:600}

/* legal / prose pages */
.legal{max-width:var(--maxw-prose);margin:0 auto;padding:56px 24px 96px}
.legal .back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-muted);margin-bottom:28px}
.legal .back:hover{color:var(--text)}
.legal h1{font-size:34px;letter-spacing:-.02em;font-weight:640;margin-bottom:6px}
.legal .updated{color:var(--text-subtle);font-size:13.5px;margin:0 0 8px}
.legal .note{background:var(--warning-soft);border:1px solid #f0e2bd;border-radius:var(--r-md);padding:14px 16px;font-size:13.5px;color:#7a5200;margin:18px 0 32px}
.legal h2{font-size:19px;letter-spacing:-.012em;margin:36px 0 10px}
.legal p,.legal li{color:var(--text-muted);font-size:15px;line-height:1.65;max-width:none}
.legal ul{padding-left:20px;display:grid;gap:6px}
.legal a.link{color:var(--accent-text);font-weight:480}

/* reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.nav{transition:none}}

/* ============================ DARK MODE ============================ */
/* JS sets data-theme on <html> before paint (system default + localStorage), so no flash. */
:root[data-theme="dark"]{
  --bg:#0d0f11; --bg-subtle:#15181b; --bg-muted:#1c2024; --surface:#16191d;
  --nav-bg:rgba(13,15,17,.82); --nav-bg-solid:#0d0f11;
  --text:#e7eaec; --text-strong:#f6f8f9; --text-muted:#a3acb4; --text-subtle:#79828a;
  --border:#262b30; --border-strong:#363d43; --border-faint:#1d2125;
  --accent:#e2570f; --accent-hover:#f4671a; --accent-press:#c2410c;
  --accent-soft:#3a1e0a; --accent-text:#fdba74;
  --success:#34d399; --success-soft:#10241a; --warning:#fbbf24; --warning-soft:#2a2208;
  --danger:#f87171; --danger-soft:#2a1413;
  --ring:0 0 0 3px rgba(226,87,15,.35);
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  /* dark "bands" (stats/footer/calc) need separation from the now-dark page */
  --d-bg:#070809; --d-surface:#15181b; --d-border:#2a2f34;
}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .trust{background:var(--bg-subtle)}
:root[data-theme="dark"] .demo-card,
:root[data-theme="dark"] .card{box-shadow:var(--shadow-md)}
/* keep the deliberately-dark sections readable + separated in dark mode */
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .stats{border-top:1px solid var(--border)}
/* badges: swap the light tinted borders for token-driven ones so they don't glow in dark */
:root[data-theme="dark"] .b-success{border-color:#1f4536}
:root[data-theme="dark"] .b-warning{border-color:#3f3417}
:root[data-theme="dark"] .b-danger{border-color:#4a2220}
:root[data-theme="dark"] .btn-secondary:hover{border-color:var(--border-strong)}
/* tinted callouts: keep readable on dark (hardcoded light-on-light text would wash out) */
:root[data-theme="dark"] .demo-result.ok{border-color:#1f4536;color:#6ee7b7}
:root[data-theme="dark"] .demo-result.review{border-color:#3f3417;color:#fcd34d}
:root[data-theme="dark"] .demo-result.deny{border-color:#4a2220;color:#fca5a5}
:root[data-theme="dark"] .form-ok{border-color:#1f4536;color:#6ee7b7}
:root[data-theme="dark"] .legal .note{color:#fcd34d}

/* ===================== FAINT LOGO BACKGROUND ====================== */
/* brand mesh behind the hero as a CSS background — if the stylesheet ever fails to load it
   simply doesn't appear (no raw SVG in the DOM to render unstyled). */
.hero::after{content:"";position:absolute;top:50%;right:-7%;transform:translateY(-50%);
  width:min(560px,46vw);aspect-ratio:1;z-index:0;pointer-events:none;opacity:.05;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 18.9 8 18.9 16 12 20 5.1 16 5.1 8Z'/%3E%3Cpath d='M12 4v16M5.1 8 18.9 16M18.9 8 5.1 16'/%3E%3Cg fill='%23c2410c' stroke='none'%3E%3Ccircle cx='12' cy='4' r='1.4'/%3E%3Ccircle cx='18.9' cy='8' r='1.4'/%3E%3Ccircle cx='18.9' cy='16' r='1.4'/%3E%3Ccircle cx='12' cy='20' r='1.4'/%3E%3Ccircle cx='5.1' cy='16' r='1.4'/%3E%3Ccircle cx='5.1' cy='8' r='1.4'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme="dark"] .hero::after{opacity:.09}
@media(max-width:920px){.hero::after{right:-24%;opacity:.04}}

/* ============================ MOBILE / TABLET DECLUTTER ============================ */
/* Desktop rhythm (96px sections) is too airy on small screens — tighten progressively. */
@media(max-width:860px){
  section{padding:72px 0}
  .hero{padding:60px 0 52px}
  .sec-head{margin-bottom:32px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  section{padding:46px 0}
  .hero{padding:36px 0 40px}
  .sec-head{margin-bottom:22px}
  .display{font-size:clamp(31px,8.4vw,42px);line-height:1.1;letter-spacing:-.018em}
  h2,.h2{font-size:clamp(23px,6.3vw,27px)}
  .lead{font-size:16px}
  .hero h1{margin:14px 0 16px}
  /* hero demo card is a desktop-only flourish — hide on phones for a compact, text-first
     hero (matches the automations-page hero); the before/after lives in #example anyway */
  .hero-grid .demo-card{display:none}
  /* CTAs full-width = bigger tap targets, no awkward half-rows */
  .cta-row{gap:10px}
  .cta-row .btn{width:100%;justify-content:center}
  .stack-strip{margin-top:20px;gap:6px}
  /* trust strip: stack cleanly and drop the dangling "·" separators */
  .trust{padding:16px 0}
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .trust .row{gap:6px 12px}
  .trust .row span:nth-child(even){display:none}
  /* any hard 2-column card (inline grid) → single column on phones */
  .cards[style]{grid-template-columns:1fr !important}
  .calc-grid[style]{grid-template-columns:1fr !important}
  /* component padding/size trims */
  .stat{padding:18px 16px}
  .stat b{font-size:28px}
  .feature{padding:20px}
  .feature h3{font-size:16px}
  .formcard{padding:22px}
  .formcard h2{font-size:23px}
  .calc-inputs,.calc-out{padding:20px}
  .calc-out{position:static}
  .calc-out .big{font-size:36px}
  .demo-stage{padding:18px}
  .legal{padding:40px 18px 64px}
  .subnav{margin-top:16px}
}