/* MZE IQ — shared product sub-site stylesheet.
   Each page sets --acc / --accd / --tint on :root. Everything else is inherited from
   the umbrella site's vocabulary (index.html): Outfit / Inter / JetBrains Mono,
   ink-to-paper section rhythm, procedural canvas screens, mono eyebrows. */
:root{
  --ink:#050D0C; --ink2:#081513; --ink3:#0D1E1C;
  --teal:#00857B; --teal-lit:#19D9C6;
  --paper:#F7F7F7; --card:#FFFFFF; --line:#DEE3E7; --head:#242C39; --body:#47535D; --muted:#5E7F8F;
  --acc:#00857B; --accd:#00615A; --tint:#E4F3F1;
  --r:10px; --rs:6px; --rl:14px;
  --pad:clamp(22px,4vw,64px);
  --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --cv0:#050D0C; --cv1:#081513; --cv-veil:5,13,12; --cv-street:232,242,240; --cv-glow:.17; --cv-boost:1;
  --dsp:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#E8F2F0;font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--dsp);letter-spacing:-.035em;margin:0;font-weight:700;line-height:1.04}
p{margin:0}
a{color:var(--teal-lit);text-decoration:none;transition:color .2s}
a:hover{color:#fff}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
canvas{display:block}
::selection{background:rgba(25,217,198,.28)}
.mono{font-family:var(--mono);font-variant-ligatures:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.light .eyebrow{color:var(--accd)}
/* Outline only, no fill: the product labels itself beta on every screen, so the page says so too. */
.eyebrow .beta{display:inline-block;margin-left:10px;padding:2px 8px 1px;border:1px solid currentColor;
  border-radius:999px;font-size:9.5px;letter-spacing:.16em;vertical-align:1px}

/* ---------- overlays ---------- */
#grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
#scanlines{position:fixed;inset:0;z-index:8999;pointer-events:none;opacity:.2;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
#progress{position:fixed;left:0;top:0;height:2px;z-index:9100;width:0%;
  background:linear-gradient(90deg,var(--accd),var(--acc));box-shadow:var(--glow-md) color-mix(in oklab,var(--acc) 60%,transparent)}

/* ---------- nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:16px var(--pad);
  display:flex;align-items:center;gap:22px;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),padding .35s var(--ease)}
#nav.solid{background:rgba(5,13,12,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);padding-top:11px;padding-bottom:11px}
#nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:800;
  letter-spacing:-.02em;font-size:16px;color:#fff}
#nav .brand .up{color:rgba(232,242,240,.5);font-weight:600}
#nav .brand .sep{color:rgba(232,242,240,.45);font-weight:400}
#nav .links{display:flex;gap:24px;margin-left:auto;align-items:center}
#nav .links a{font-size:13px;font-weight:500;color:rgba(232,242,240,.62);white-space:nowrap}
#nav .links a:hover{color:#fff}
#nav .links a.pill{border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:7px 15px;
  color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
#nav .links a.pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

/* The Log in pill — the one action every product sub-site exists to hand off to.
   ⚠️ WHITE ON INK, NOT AN ACCENT FILL, AND THAT IS DELIBERATE. `.btn.p` fills with --acc and
   hardcodes color:#fff, which measures 4.17:1 for PaperIQ and 2.99:1 for the logo green — under
   AA for a label, and this pill's type is 10.5px uppercase, the size that needs 4.5:1 MOST. A
   brighter border and a faint white wash read as primary against the ghost "All products" pill
   beside it without putting a label on a fill that cannot carry one. */
#nav .links a.pill.lgn{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06);color:#fff}
#nav .links a.pill.lgn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.light #nav .links a.pill.lgn,[data-theme=light] #nav .links a.pill.lgn{
  border-color:var(--accd);background:transparent;color:var(--accd)}
.light #nav .links a.pill.lgn:hover,[data-theme=light] #nav .links a.pill.lgn:hover{
  background:var(--tint);border-color:var(--accd)}
@media(max-width:900px){#nav .links a:not(.pill){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--r);
  font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.p{background:var(--acc);color:#fff;border:1px solid var(--accd);
  box-shadow:0 10px 30px -12px color-mix(in oklab,var(--acc) 75%,transparent)}
.btn.p:hover{background:color-mix(in oklab,var(--acc) 88%,#fff);color:#fff;
  box-shadow:0 16px 38px -14px color-mix(in oklab,var(--acc) 90%,transparent)}
.btn.g{border:1px solid rgba(255,255,255,.2);color:#fff}
.btn.g:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.36);color:#fff}
/* .btn.p fills with --acc on BOTH grounds while only TEXT swaps to --accd, and the label is a
   hardcoded #fff — so on a light band PaperIQ's button sat at 4.17:1, below AA. Let the fill follow
   the same light-section rule the text already does. Both selectors, because product.css has two
   light mechanisms: .light (a light band inside a dark page) and [data-theme=light] (whole page). */
.light .btn.p,[data-theme=light] .btn.p{background:var(--accd);border-color:var(--accd)}
.light .btn.p:hover,[data-theme=light] .btn.p:hover{background:color-mix(in oklab,var(--accd) 88%,#fff)}
.light .btn.g{border-color:var(--line);color:var(--head)}
.light .btn.g:hover{background:#fff;color:var(--head)}

/* ---------- hero ---------- */
#hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate}
#heroCv{position:absolute;inset:0;width:100%;height:100%;z-index:0;contain:strict}
#hero .fade{position:absolute;left:0;right:0;bottom:0;height:38vh;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,13,12,0),var(--ink))}
#hero .wrap{z-index:2;align-self:center;padding-top:14vh;padding-bottom:6vh}
#hero .mark{display:flex;align-items:center;gap:12px;margin-bottom:26px}
#hero .mark s{width:34px;height:34px;border-radius:9px;background:var(--acc);text-decoration:none;
  display:grid;place-items:center;box-shadow:0 8px 26px -10px color-mix(in oklab,var(--acc) 85%,transparent)}
#hero h1{font-size:clamp(46px,8.6vw,122px);color:#fff;max-width:16ch;letter-spacing:-.045em}
#hero h1 em{font-style:normal;color:var(--acc)}
#hero .sub{margin-top:28px;max-width:48ch;font-size:clamp(15px,1.35vw,19px);line-height:1.62;
  color:rgba(232,242,240,.7)}
#hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
#hero .kpis{position:relative;z-index:2;padding:0 var(--pad) 26px;
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);align-items:flex-end}
#hero .kpis div{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,242,240,.36)}
#hero .kpis b{display:block;font-family:var(--dsp);font-weight:700;font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.03em;color:#fff;margin-bottom:5px}

/* ---------- section shells ---------- */
.light{background:var(--paper);color:var(--body);padding:clamp(70px,9vw,130px) 0}
.light h2{color:var(--head);font-size:clamp(30px,4.6vw,58px)}
.light h3{color:var(--head)}
.light a{color:var(--accd)}
.light a:hover{color:var(--head)}
.dark{background:var(--ink);color:rgba(232,242,240,.7);padding:clamp(70px,9vw,130px) 0;position:relative;overflow:hidden}
.dark h2{color:#fff;font-size:clamp(30px,4.8vw,64px)}
.lede{margin-top:20px;font-size:clamp(15px,1.3vw,18.5px);line-height:1.62;max-width:58ch;text-wrap:pretty}
.light .lede{color:var(--body)}
.dark .lede{color:rgba(232,242,240,.64)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.shead .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.dark .shead .num{color:rgba(232,242,240,.34)}

/* wipe dividers (same displaced edge as the umbrella site) */
.wipe{position:relative;height:110px;background:var(--ink);overflow:hidden}
.wipe svg{position:absolute;left:-2%;bottom:-1px;width:104%;height:110px}
.wipe.up{background:var(--paper)}

/* ---------- capability cards ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;
  margin-top:clamp(30px,4vw,52px)}
.cap{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:22px 22px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.cap:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--acc) 45%,var(--line));
  box-shadow:0 24px 46px -30px rgba(36,44,57,.5)}
.cap .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted)}
.cap h3{margin-top:14px;font-size:19px;color:var(--head);letter-spacing:-.02em}
.cap p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--body)}
.cap s{display:block;width:26px;height:3px;border-radius:3px;background:var(--acc);margin-top:18px;text-decoration:none}

/* ---------- app screen ---------- */
.screen{position:relative;border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;background:#fff;
  box-shadow:0 34px 66px -36px rgba(36,44,57,.38);margin-top:clamp(28px,4vw,52px)}
.screen .bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--line);background:#FBFBFB}
.screen .bar s{width:9px;height:9px;border-radius:999px;background:var(--line);text-decoration:none}
.screen .bar em{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-style:normal}
.screen canvas{width:100%;height:auto;aspect-ratio:16/11}
.shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.shots button{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:8px 15px;transition:.2s}
.shots button:hover{color:var(--head);border-color:var(--muted)}
.shots button[aria-pressed="true"]{background:var(--acc);border-color:var(--accd);color:#fff}

/* ---------- interactive module ---------- */
.lab{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(28px,4vw,46px);align-items:start}
@media(max-width:1000px){.lab{grid-template-columns:minmax(0,1fr)}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:clamp(18px,2vw,26px)}
.panel+.panel{margin-top:14px}
.panel h3{font-size:15px;color:var(--head);letter-spacing:-.01em}
.panel .cap2{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.panel canvas.plot{width:100%;height:auto;aspect-ratio:16/9;margin-top:18px;border-radius:var(--rs);background:#FCFCFC}
.ctrl{margin-top:20px}
.ctrl:first-child{margin-top:0}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;
  color:var(--body);font-weight:500}
.ctrl label b{font-family:var(--mono);font-size:13px;color:var(--accd);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;
  margin-top:8px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:3px}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:999px;
  background:var(--acc);border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.28);margin-top:-6.5px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:999px;background:var(--acc)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.outs div{border:1px solid var(--line);border-radius:var(--rs);padding:12px 13px;background:#FBFBFB}
.outs b{display:block;font-family:var(--dsp);font-weight:700;font-size:22px;color:var(--head);letter-spacing:-.02em}
.outs small{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.verdict{margin-top:14px;border:1px solid var(--line);border-radius:var(--rs);
  padding:13px 15px;font-size:13.5px;line-height:1.55;color:var(--body);background:#fff}
.verdict b{color:var(--head)}
.toggles{display:grid;gap:8px;margin-top:16px}
.toggles button{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:#fff;
  border-radius:var(--rs);padding:11px 13px;font-size:13.5px;color:var(--body);text-align:left;transition:.2s}
.toggles button:hover{border-color:var(--muted)}
.toggles button[aria-pressed="true"]{border-color:var(--acc);background:var(--tint);color:var(--head)}
.toggles button s{flex:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);
  background:#fff;text-decoration:none;position:relative}
.toggles button[aria-pressed="true"] s{background:var(--acc);border-color:var(--acc)}
.toggles button[aria-pressed="true"] s::after{content:"";position:absolute;left:3.5px;top:1.5px;width:4px;height:8px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(40deg)}
.toggles button em{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-style:normal;color:var(--muted)}

/* ---------- spec grid (dark) ---------- */
.spec{margin-top:clamp(34px,4.5vw,60px);border:1px solid rgba(255,255,255,.1);border-radius:var(--rl);
  overflow:hidden;background:rgba(255,255,255,.1);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
@media(max-width:900px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.spec{grid-template-columns:minmax(0,1fr)}}
.spec div{background:var(--ink2);padding:24px 22px}
.spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in oklab,var(--acc) 70%,#E8F2F0)}
.spec .v{margin-top:11px;font-size:14.5px;line-height:1.58;color:rgba(232,242,240,.72)}
.spec .v b{color:#fff;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:1px;margin-top:clamp(34px,4.5vw,56px);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:var(--rl);overflow:hidden}
/* auto-fit already reflows; the old hard 2-column override left an empty cell on any
   row that dropped to 3 tiles. Keep only the narrower floor. */
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stats div{background:var(--ink2);padding:26px 22px}
.stats b{display:block;font-family:var(--dsp);font-weight:700;font-size:clamp(26px,3.2vw,42px);
  color:#fff;letter-spacing:-.03em}
.stats small{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(232,242,240,.42)}
.note{margin-top:26px;font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.04em;
  color:rgba(232,242,240,.34);max-width:76ch}
.light .note{color:var(--muted)}

/* ---------- ledger rows ---------- */
.ledger{margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line)}
.light .ledger .row{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr) minmax(0,.24fr);
  gap:clamp(14px,3vw,40px);padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:760px){.light .ledger .row{grid-template-columns:minmax(0,1fr)}}
.ledger .row h3{font-size:19px;letter-spacing:-.02em;color:var(--head)}
.ledger .row p{font-size:14.5px;line-height:1.6;color:var(--body);max-width:62ch}
.ledger .row .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:right}
@media(max-width:760px){.ledger .row .t{text-align:left}}

/* ---------- cross-product strip ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  margin-top:clamp(30px,4vw,48px);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--rl);overflow:hidden}
.prods a{background:var(--ink2);padding:22px;display:block;color:rgba(232,242,240,.6);transition:background .3s}
.prods a:hover{background:var(--ink3);color:rgba(232,242,240,.86)}
.prods a s{display:block;width:9px;height:9px;border-radius:999px;text-decoration:none;margin-bottom:16px}
.prods a strong{display:block;font-family:var(--dsp);font-size:19px;font-weight:700;letter-spacing:-.025em;color:#fff}
.prods a span{display:block;margin-top:7px;font-size:12.5px;line-height:1.5}
.prods a[aria-current]{background:var(--ink3)}
.prods a[aria-current] strong::after{content:" · you are here";font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(232,242,240,.4);font-weight:400}

footer{border-top:1px solid rgba(255,255,255,.09);background:var(--ink);padding:32px 0 40px;
  font-size:12.5px;color:rgba(232,242,240,.44)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer .fl{display:flex;gap:20px;flex-wrap:wrap}

.rev{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}


/* ================= THEME TOGGLE ================= */
#nav .tgl{flex:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.38);border-radius:999px;
  display:grid;place-items:center;color:#fff;transition:background-color .2s,border-color .2s,color .2s}
#nav .tgl:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
#nav .tgl svg{width:15px;height:15px;display:block}
#nav .tgl .moon{display:none}

/* ================= LIGHT THEME ================= */
[data-theme=light]{
  --ink:#FFFFFF; --ink2:#F6F8FA; --ink3:#EDF1F4;
  --paper:#F4F6F8; --card:#FFFFFF; --line:#DFE4E9;
  --cv0:#FFFFFF; --cv1:#F1F4F7; --cv-veil:255,255,255; --cv-street:36,44,57; --cv-glow:.26; --cv-boost:2.2;
  color-scheme:light;
}
[data-theme=light] body{color:var(--body)}
[data-theme=light] a{color:var(--accd)}
[data-theme=light] a:hover{color:var(--head)}
[data-theme=light] ::selection{background:color-mix(in oklab,var(--acc) 26%,transparent)}
[data-theme=light] #grain{opacity:.032}
[data-theme=light] #scanlines{opacity:.55;
  background:repeating-linear-gradient(180deg,rgba(36,44,57,.045) 0 1px,transparent 1px 3px)}

[data-theme=light] #nav .brand{color:var(--head)}
[data-theme=light] #nav .brand .up{color:rgba(36,44,57,.66)}
[data-theme=light] #nav .brand .sep{color:rgba(36,44,57,.54)}
[data-theme=light] #nav.solid{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
[data-theme=light] #nav .links a{color:var(--body)}
[data-theme=light] #nav .links a:hover{color:var(--head)}
[data-theme=light] #nav .links a.pill{border-color:var(--muted);color:var(--head)}
[data-theme=light] #nav .links a.pill:hover{background:rgba(36,44,57,.05);border-color:var(--muted)}
[data-theme=light] #nav .tgl{border-color:var(--muted);color:var(--head)}

/* ---- lead-form submit, light theme only ----
   Moved here from shared-ui.css 2026-09-13. index.html never redefines --ink, so its .leadform band
   is DARK in BOTH themes — and a [data-theme=light] rule in the shared sheet painted dark ink on it:
   --accd measured 2.60:1 and its hover --head 1.36:1. product.css only loads where light theme
   actually turns that band white, so the rule belongs here. */
[data-theme=light] .lf-submit{border-color:var(--accd)}
[data-theme=light] .lf-submit:hover{border-color:var(--head)}

/* ---- lead-form focus ring, light theme only ----
   ⚠️ This rule lives in product.css and NOT in shared-ui.css on purpose. index.html is
   self-contained, never redefines --ink, and so paints .leadform on the DARK band in BOTH themes --
   where --teal-lit measures 11.02:1 and is already right. Only the pages that load product.css turn
   that band white in light theme, and there --teal-lit collapses to 1.78:1: a keyboard focus
   indicator failing WCAG 1.4.11 in the DEFAULT theme, on every product page. Found by the critic
   2026-09-08, outside G14 letter and inside its purpose.
   --accd is the product deep accent, so the ring matches the page it is on: 4.17:1 (PaperIQ) to
   6.29:1 (MeetupIQ) on white, measured across all six from handoff/tokens/brand.json. */
[data-theme=light] .lf input:focus-visible,
[data-theme=light] .lf textarea:focus-visible,
[data-theme=light] .lf select:focus-visible,
[data-theme=light] .lf-submit:focus-visible{outline-color:var(--accd)}
[data-theme=light] #nav .tgl:hover{background:rgba(36,44,57,.05);border-color:var(--muted)}
[data-theme=light] #nav .tgl .sun{display:none}
[data-theme=light] #nav .tgl .moon{display:block}

[data-theme=light] .btn.g{border-color:var(--line);color:var(--head)}
[data-theme=light] .btn.g:hover{background:rgba(36,44,57,.05);border-color:var(--muted);color:var(--head)}

[data-theme=light] #hero .fade{background:linear-gradient(to bottom,rgba(255,255,255,0),var(--ink))}
[data-theme=light] #hero h1{color:var(--head)}
[data-theme=light] #hero h1 em{color:var(--accd)}
[data-theme=light] #hero .sub{color:var(--body)}
[data-theme=light] #hero .kpis div{color:var(--muted)}
[data-theme=light] #hero .kpis b{color:var(--head)}

[data-theme=light] .dark{background:var(--ink);color:var(--body)}
[data-theme=light] .dark h2,[data-theme=light] .dark h3{color:var(--head)}
[data-theme=light] .dark .lede{color:var(--body)}
[data-theme=light] .dark .eyebrow{color:var(--accd)}
[data-theme=light] .dark .shead .num{color:var(--muted)}
[data-theme=light] .wipe svg path[fill="#050D0C"]{fill:var(--ink)}
[data-theme=light] .wipe svg path[fill="#F7F7F7"]{fill:var(--paper)}

[data-theme=light] .spec{border-color:var(--line);background:var(--line)}
[data-theme=light] .spec div{background:var(--ink2)}
[data-theme=light] .spec .k{color:var(--accd)}
[data-theme=light] .spec .v{color:var(--body)}
[data-theme=light] .spec .v b{color:var(--head)}
[data-theme=light] .stats{border-color:var(--line);background:var(--line)}
[data-theme=light] .stats div{background:var(--ink2)}
[data-theme=light] .stats b{color:var(--head)}
[data-theme=light] .stats small{color:var(--muted)}
[data-theme=light] .note{color:var(--muted)}

[data-theme=light] .prods{border-color:var(--line);background:var(--line)}
[data-theme=light] .prods a{background:var(--ink2);color:var(--body)}
[data-theme=light] .prods a:hover{background:var(--ink3);color:var(--head)}
[data-theme=light] .prods a strong{color:var(--head)}
[data-theme=light] .prods a[aria-current]{background:var(--ink3)}
[data-theme=light] .prods a[aria-current] strong::after{color:var(--muted)}

[data-theme=light] footer{border-top-color:var(--line);background:var(--ink);color:var(--muted)}


/* ---------- mobile nav ---------- */
#nav .brand{white-space:nowrap;flex:none}
@media(max-width:640px){
  /* Measured on a 390px viewport: brand 162 + toggle 34 + "All products" 131 + "Log in" 79 + gaps
     + padding = 480. Everything below is what it takes to get under 390.
     Section anchors go first — they are reachable by scrolling. "All products" goes next because
     the brand mark beside it already links to index.html, so nothing becomes unreachable.
     The Log in pill is the one thing that keeps its place: it is the primary conversion action and
     body{overflow-x:clip} does not merely push it off-screen, it CLIPS it away entirely. */
  #nav .links a:not(.pill){display:none}
  #nav .links a.pill:not(.lgn){display:none}
  #nav .links{gap:10px}
  #nav .links a.pill{padding:7px 12px;font-size:12px}
}

/* ---------- demo containment ---------- */
/* A demo must scroll inside its own box; the ProdIQ week grid ran 8px past a 390px viewport and
   pushed the whole page sideways. */
[data-mze-demo]{max-width:100%}
[data-mze-demo] .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}