html,body{overflow-x:hidden}
/* ============================================================
IntegrisIQ — site design system
Derived from Brand identity v1.0. Ink structures; Ember is rationed
to the rising stroke and rarest emphasis; Space Mono carries evidence.
============================================================ */
:root{
--ink:#15293E;
--ink-85:rgba(21,41,62,.85);
--ink-70:rgba(21,41,62,.70);
--ink-55:rgba(21,41,62,.55);
--ink-40:rgba(21,41,62,.40);
--ink-22:rgba(21,41,62,.22);
--ink-13:rgba(21,41,62,.13);
--ink-07:rgba(21,41,62,.07);
--ember:#D69A2C;
--ember-deep:#7A5410;
--paper:#F6F4EF;
--paper-2:#EFEBE1; /* warmer panel */
--card:#FCFBF7; /* raised card on paper */
--white:#FFFFFF;
/* reversed (on ink) */
--paper-70:rgba(246,244,239,.70);
--paper-45:rgba(246,244,239,.45);
--paper-22:rgba(246,244,239,.20);
--paper-12:rgba(246,244,239,.12);
/* verdict states */
--go:#3B6D2F;
--cond:#B8791A;
--stop:#9E3B2E;
--disp:'Space Grotesk',system-ui,sans-serif;
--body:'Inter',system-ui,sans-serif;
--mono:'Space Mono',ui-monospace,monospace;
--edge:1120px;
--gut:clamp(20px,5vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--body);font-size:17px;line-height:1.62;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--edge);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:500;margin:0;letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,72px);letter-spacing:-.03em}
h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.022em;line-height:1.12}
h3{font-size:clamp(20px,2.3vw,26px)}
h4{font-size:18px}
p{margin:0 0 1.05em;max-width:66ch}
strong{font-weight:600}
em{font-style:italic}
.eyebrow{
font-family:var(--mono);font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-55);margin:0 0 22px;
display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ember);display:inline-block}
.eyebrow.on-ink{color:var(--paper-70)}
.lede{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.6vw,27px);
line-height:1.4;letter-spacing:-.012em;color:var(--ink-85);max-width:30ch}
.lede em{font-style:normal;color:var(--ember-deep)}
.mono{font-family:var(--mono)}
.ember{color:var(--ember-deep)}
/* rising-stroke rule — the brand motif as a divider */
.rise{height:1px;background:var(--ink-13);position:relative;border:0;margin:0}
.rise::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;
background:var(--ember);transform-origin:left;transform:skewX(-38deg) translateY(-1px)}
/* ---------- layout primitives ---------- */
section{padding:clamp(64px,9vw,116px) 0}
.sec-tight{padding:clamp(48px,6vw,72px) 0}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4{color:var(--paper)}
.band-ink p{color:var(--paper-70)}
.band-panel{background:var(--paper-2)}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,239,.86);
backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--ink-13)}
.nav.on-ink{background:rgba(21,41,62,.82);border-bottom:1px solid var(--paper-12)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.brand{display:flex;align-items:center;gap:0}
.brand svg{height:26px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-size:15px;font-weight:500}
.nav-links a{padding:8px 13px;border-radius:8px;color:var(--ink-70);transition:color .18s,background .18s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav.on-ink .nav-links a{color:var(--paper-70)}
.nav.on-ink .nav-links a:hover,.nav.on-ink .nav-links a.active{color:var(--paper)}
.nav-cta{white-space:nowrap}
.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:var(--paper)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.2s}
.nav.on-ink .burger span{background:var(--paper)}
@media(max-width:1200px){
.nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;
background:var(--paper);border-bottom:1px solid var(--ink-13);padding:12px var(--gut) 22px;gap:2px;
transform:translateY(-120%);transition:transform .28s ease;font-size:17px}
.nav-links.open{transform:translateY(0)}
.nav-links a{padding:12px 6px;border-radius:0;border-bottom:1px solid var(--ink-07)}
.nav .nav-cta{display:none}
.nav-links .nav-cta{display:inline-flex;margin-top:12px}
.burger{display:block}
}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:500;
font-size:15px;line-height:1;padding:13px 20px;border-radius:10px;cursor:pointer;
border:1px solid transparent;transition:transform .16s,background .18s,border-color .18s,color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#1d3654}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink-22)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink-07)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}
.band-ink .btn-primary{background:var(--paper);color:var(--ink)}
.band-ink .btn-primary:hover{background:#fff}
.band-ink .btn-ghost{color:var(--paper);border-color:var(--paper-22)}
.band-ink .btn-ghost:hover{border-color:var(--paper);background:var(--paper-12)}
.textlink{font-family:var(--disp);font-weight:500;color:var(--ink);
display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid var(--ink-22);
padding-bottom:2px;transition:border-color .18s,gap .18s}
.textlink:hover{border-color:var(--ember);gap:11px}
.band-ink .textlink{color:var(--paper);border-color:var(--paper-22)}
/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--ink-13);border-radius:16px;padding:28px}
.card.on-ink{background:rgba(246,244,239,.045);border-color:var(--paper-12)}
.card-hover{transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(21,41,62,.4);border-color:var(--ink-22)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
/* ---------- EVIDENCE ARTIFACT (signature) ---------- */
.artifact{background:var(--white);border:1px solid var(--ink-13);border-radius:16px;
box-shadow:0 24px 60px -40px rgba(21,41,62,.55);overflow:hidden}
.artifact-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 20px;border-bottom:1px solid var(--ink-13);background:var(--paper)}
.artifact-head .t{font-family:var(--disp);font-weight:500;font-size:15px}
.artifact-head .m{font-family:var(--mono);font-size:11px;color:var(--ink-55);letter-spacing:.05em}
.artifact-body{padding:8px 20px 18px}
/* verdict chip */
.verdict{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
border:1px solid var(--ink-22);color:var(--ink)}
.verdict .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-40)}
.verdict.go{color:var(--go);border-color:rgba(59,109,47,.4)}
.verdict.go .dot{background:var(--go)}
.verdict.cond{color:var(--cond);border-color:rgba(184,121,26,.45)}
.verdict.cond .dot{background:var(--ember)}
.verdict.stop{color:var(--stop);border-color:rgba(158,59,46,.4)}
.verdict.stop .dot{background:var(--stop)}
/* index row: CODE · name · score bar · confidence */
.idxrow{display:grid;grid-template-columns:52px 1fr 132px 78px;align-items:center;gap:14px;
padding:11px 0;border-bottom:1px solid var(--ink-07)}
.idxrow:last-child{border-bottom:0}
.idxrow .code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.idxrow .nm{font-size:14px;color:var(--ink-70)}
.idxrow .bar{height:6px;border-radius:999px;background:var(--ink-13);position:relative;overflow:hidden}
.idxrow .bar>span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--ink);
width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.idxrow .bar.hi>span{background:var(--stop)}
.idxrow .bar.md>span{background:var(--ember)}
.idxrow .conf{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-55);text-align:right;text-transform:uppercase}
@media(max-width:560px){
.idxrow{grid-template-columns:46px 1fr 60px;gap:10px}
.idxrow .bar{display:none}
}
/* signal-log line */
.logline{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink-70);
padding:8px 0;border-bottom:1px dashed var(--ink-13);display:flex;gap:10px}
.logline:last-child{border-bottom:0}
.tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;
align-self:flex-start;white-space:nowrap;margin-top:1px}
.tag.ev{background:rgba(59,109,47,.12);color:var(--go)}
.tag.inf{background:var(--ink-07);color:var(--ink-55)}
/* stat */
.stat .n{font-family:var(--disp);font-weight:500;font-size:clamp(34px,4.6vw,52px);
letter-spacing:-.03em;line-height:1}
.stat .l{color:var(--ink-55);font-size:14.5px;margin-top:10px;max-width:24ch}
.band-ink .stat .l{color:var(--paper-45)}
/* number index marker used only where content is a real sequence */
.step-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ember-deep)}
/* pill list */
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-55);border:1px solid var(--ink-13);
border-radius:999px;padding:5px 11px;margin:0 6px 6px 0}
/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding:72px 0 40px}
footer.site a{color:var(--paper-70);transition:color .18s}
footer.site a:hover{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--paper-45);margin:0 0 16px;font-weight:400}
.foot-col a{display:block;font-family:var(--disp);font-weight:500;font-size:15px;margin-bottom:11px}
.foot-brand svg{height:30px;margin-bottom:18px}
.foot-brand p{color:var(--paper-45);font-size:14px;max-width:34ch}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:52px;padding-top:26px;border-top:1px solid var(--paper-12);
font-family:var(--mono);font-size:12px;color:var(--paper-45);letter-spacing:.04em}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
.idxrow .bar>span{transition:none}}
/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.center{text-align:center}
.max-46{max-width:46ch}.max-58{max-width:58ch}
.flex{display:flex}.wrapf{flex-wrap:wrap}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.items-c{align-items:center}.justify-c{justify-content:center}
.muted{color:var(--ink-55)}
.small{font-size:14px}
.upper-mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
/* ============================================================
Resources — download cards + lead-capture form
============================================================ */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:720px){.dl-grid{grid-template-columns:1fr}}
.dl{display:flex;flex-direction:column;gap:14px;background:var(--card);
border:1px solid var(--ink-13);border-radius:16px;padding:24px 24px 22px;
transition:transform .2s,box-shadow .2s,border-color .2s}
.dl:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(21,41,62,.4);border-color:var(--ink-22)}
.dl .kind{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55)}
.dl h4{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0}
.dl p{margin:0;font-size:14.5px;color:var(--ink-70);flex:1}
.dl .meta{font-family:var(--mono);font-size:11px;color:var(--ink-40);letter-spacing:.04em}
.dl .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;
font-size:14px;color:var(--ink);border-bottom:1px solid var(--ember);padding-bottom:2px;width:max-content}
.dl .go svg{width:15px;height:15px}
.dl:hover .go{color:var(--ember-deep)}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-70)}
.field input,.field select,.field textarea{
font-family:var(--body);font-size:15.5px;color:var(--paper);
background:rgba(246,244,239,.05);border:1px solid var(--paper-22);border-radius:10px;
padding:12px 14px;width:100%;transition:border-color .18s,background .18s}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-45)}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--ember);background:rgba(246,244,239,.08)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F6F4EF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field select option{color:#15293E}
.form-note{font-family:var(--mono);font-size:11px;color:var(--paper-45);letter-spacing:.03em}
.btn-onink{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-onink:hover{background:#fff}
/* Pricing / program cards */
.plan{background:var(--card);border:1px solid var(--ink-13);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s,border-color .2s}
.plan:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(21,41,62,.4);border-color:var(--ink-22)}
.plan.hl{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset}
.plan h4{font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-.01em;margin:2px 0 0}
.plan .cr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ember-deep)}
.plan .price{font-family:var(--disp);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.01em}
.plan p{margin:0}
/* ============================================================
myIIQ — client portal nav pill + login
============================================================ */
.nav-sep{width:1px;height:20px;background:var(--ink-13);display:inline-block;margin:0 2px}
.nav-portal{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--ink-22);border-radius:8px;color:var(--ink);font-family:var(--disp);font-weight:500;font-size:15px;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.nav-portal svg{width:14px;height:14px}
.nav-portal:hover,.nav-portal.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* The button sits inside .nav-links, whose `.nav-links a:hover` and
`.nav-links a.active` carry one more element in the selector and so win the
colour above — leaving ink text on the ink background set here, i.e. an
invisible label on hover and permanently so on myiiq.html, where the link
also carries .active. Re-stated at matching specificity, the same way
.nav-cta already is. */
.nav-links a.nav-portal:hover,.nav-links a.nav-portal.active{color:var(--paper)}
@media(max-width:1200px){.nav-sep{display:none}.nav-portal{justify-content:center;margin-top:6px}}
.loginrow{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.loginrow a{color:var(--paper-70);font-size:13.5px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.loginrow a:hover{color:var(--paper);border-color:var(--ember)}
.remember{display:inline-flex;align-items:center;gap:8px;color:var(--paper-70);font-size:13.5px}
.remember input{width:15px;height:15px;accent-color:var(--ember)}
.secure-note{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--paper-45)}
.secure-note svg{width:13px;height:13px;flex:none}
/* founder profile LinkedIn hook */
.person-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--disp);font-weight:500;font-size:13.5px;color:var(--ink);transition:color .18s}
.person-link svg{width:15px;height:15px;color:#0A66C2;flex:none}
.person-link:hover{color:var(--ember-deep)}
/* ============================================================
Insights content gate — register once, unlock the library
============================================================ */
.gated{cursor:pointer}
.gate-cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--disp);font-weight:500;font-size:14px;color:var(--ink);border-bottom:1px solid var(--ember);padding-bottom:1px;width:max-content}
.gate-cta .lk{width:13px;height:13px;flex:none}
.gated:hover .gate-cta{color:var(--ember-deep)}
.gate-cta .txt-open{display:none}
.gated.unlocked .gate-cta .lk{display:none}
.gated.unlocked .gate-cta .txt-locked{display:none}
.gated.unlocked .gate-cta .txt-open{display:inline}
.lib-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ember-deep);margin-top:10px}
.lib-status svg{width:13px;height:13px}
.gated.unlocked .lib-status,.gated .lib-status{display:none}
/* modal */
.gate-modal{position:fixed;inset:0;background:rgba(21,41,62,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:200}
.gate-modal.open{display:flex}
.gate-box{background:var(--paper);border-radius:18px;max-width:460px;width:100%;padding:clamp(24px,4vw,34px);box-shadow:0 30px 80px -30px rgba(21,41,62,.6);position:relative}
.gate-box h3{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:0 0 6px}
.gate-box p.sub{color:var(--ink-70);font-size:14.5px;margin:0 0 18px;line-height:1.5}
.gate-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;background:transparent;color:var(--ink-55);cursor:pointer;font-size:22px;line-height:1;border-radius:8px}
.gate-x:hover{color:var(--ink);background:var(--ink-07)}
.gate-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.gate-field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.gate-field input{font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--ink-22);border-radius:10px;padding:11px 13px;width:100%}
.gate-field input:focus{outline:none;border-color:var(--ember)}
.gate-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-40);margin-top:12px;line-height:1.6}
/* Insights — Medium essay index (on dark band) */
.essaylist{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:6px}
@media(max-width:720px){.essaylist{grid-template-columns:1fr}}
.essay{display:flex;gap:16px;align-items:baseline;padding:14px 2px;border-top:1px solid rgba(246,244,239,.14);transition:padding-left .18s}
.essay:hover{padding-left:6px}
.essay .d{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--paper-45);white-space:nowrap;flex:none;width:58px}
.essay .t{color:var(--paper-70);font-size:14.5px;line-height:1.42;transition:color .18s}
.essay:hover .t{color:var(--paper)}
.essay .t .ar{color:var(--ember)}
/* generic gated toggle (works for .dl .go download cards, not just .gate-cta) */
.gated .txt-open{display:none}
.gated.unlocked .txt-open{display:inline}
.gated.unlocked .txt-locked{display:none}
.gated.unlocked .lk{display:none}
.dl.gated{cursor:pointer}
.dl.gated .go .lk{width:14px;height:14px;flex:none}
/* ============================================================
Responsive fix: collapse inline multi-column grids on small screens
(inline grid-template-columns don't inherit the .g2/.g3/.g4 breakpoints)
============================================================ */
@media(max-width:760px){
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns:1.05fr"],
[style*="grid-template-columns:1fr .9fr"],
[style*="grid-template-columns:.9fr 1fr"],
[style*="grid-template-columns:0.9fr 1.1fr"],
[style*="grid-template-columns:1fr 1.05fr"]{grid-template-columns:1fr !important}
}
@media(max-width:900px){ [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:560px){ [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr !important} }
/* footer legal links */
.foot-bottom a{color:inherit;border-bottom:1px solid transparent;transition:border-color .18s}
.foot-bottom a:hover{border-color:var(--ember)}
/* legal pages */
.legal{max-width:760px}
.legal h2{font-size:clamp(20px,2.4vw,26px);margin:36px 0 10px;letter-spacing:-.01em}
.legal h3{font-family:var(--disp);font-weight:500;font-size:17px;margin:22px 0 6px}
.legal p{color:var(--ink-70);font-size:15.5px;line-height:1.66;margin:0 0 12px}
.legal ul{margin:6px 0 14px 18px;display:flex;flex-direction:column;gap:7px}
.legal li{color:var(--ink-70);font-size:15.5px;line-height:1.6}
.legal a{color:var(--ink);border-bottom:1px solid var(--ember)}
.legal .lnote{background:var(--card);border:1px solid var(--ink-13);border-left:3px solid var(--ember);border-radius:10px;padding:14px 16px;font-size:13.5px;color:var(--ink-70);margin:20px 0}
.legal .lmeta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-55);text-transform:uppercase}
/* ============================================================
Proof page — heat map, proof table, testimonials
============================================================ */
.heat-wrap{overflow-x:auto;margin-top:24px;border:1px solid var(--ink-13);border-radius:14px;-webkit-overflow-scrolling:touch}
.heat{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
.heat th,.heat td{padding:11px 12px;text-align:center;border-bottom:1px solid var(--ink-07)}
.heat thead th{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-55);text-transform:uppercase;background:rgba(21,41,62,.04);position:sticky;top:0}
.heat tbody th{text-align:left;font-weight:500;color:var(--ink);white-space:nowrap;background:var(--paper)}
.heat tbody th .c{font-family:var(--mono);font-size:11px;color:var(--ember-deep);margin-right:7px}
.heat td .v{font-family:var(--mono);font-weight:700;color:var(--ink)}
.heat-legend{font-family:var(--mono);font-size:11px;color:var(--ink-55);letter-spacing:.02em;margin-top:12px;line-height:1.6}
.quote{background:var(--card);border:1px solid var(--ink-13);border-left:3px solid var(--ember);border-radius:14px;padding:24px;display:flex;flex-direction:column;height:100%}
.quote p{font-family:var(--disp);font-weight:400;font-size:16.5px;line-height:1.5;letter-spacing:-.005em;color:var(--ink);margin:0 0 16px;flex:1}
.quote .who{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-55);line-height:1.55}
.quote .who b{color:var(--ink);font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:0;display:block;margin-bottom:2px}
.case-metric{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.case-metric .u{font-size:16px;color:var(--ink-55);font-weight:500}
/* data tables (.ptable) — proper width + responsive scroll */
.ptable{width:100%;border-collapse:collapse;font-size:14.5px}
.ptable th,.ptable td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--ink-07);vertical-align:top}
.ptable thead th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable td.muted,.ptable .muted{color:var(--ink-55)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){ .table-wrap .ptable{min-width:520px} }
/* ============================================================
FAQ — accordion (native )
============================================================ */
.faq-cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-deep);margin:38px 0 4px}
details.faq{border-top:1px solid var(--ink-13)}
.faq-list details.faq:last-child{border-bottom:1px solid var(--ink-13)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.9vw,19px);color:var(--ink);letter-spacing:-.01em;transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:17px;font-family:var(--mono);font-size:22px;line-height:1;color:var(--ember-deep)}
.faq[open] summary::after{content:'\2013'}
.faq summary:hover{color:var(--ember-deep)}
.faq .a{padding:0 0 22px;max-width:72ch}
.faq .a p{color:var(--ink-70);font-size:15.5px;line-height:1.66;margin:0 0 10px}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{color:var(--ink);border-bottom:1px solid var(--ember)}
/* ============================================================
API-backed forms — status, captcha, password checklist
============================================================ */
.form-msg{font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.5;
border-radius:10px;padding:11px 13px;margin:0}
.form-msg[hidden]{display:none}
.form-msg.err{color:#F3C4BC;background:rgba(158,59,46,.22);border:1px solid rgba(158,59,46,.5)}
.form-msg.ok{color:#CDE3C4;background:rgba(59,109,47,.22);border:1px solid rgba(59,109,47,.5)}
.card:not(.on-ink) .form-msg.err,.gate-box .form-msg.err{color:var(--stop);background:rgba(158,59,46,.08);border-color:rgba(158,59,46,.35)}
.gate-box .form-msg{margin-bottom:12px}
.captcha-box{min-height:78px}
.captcha-box:empty{min-height:0}
.field.invalid input,.field.invalid select,.gate-field.invalid input{border-color:rgba(158,59,46,.7)}
/* Live password requirements */
.pwreq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 16px;margin:2px 0 0;padding:0;list-style:none}
.pwreq li{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--paper-45);
display:flex;align-items:center;gap:7px}
.pwreq li::before{content:'\2022';width:12px;text-align:center;color:var(--paper-45)}
.pwreq li.met{color:var(--go-on-ink,#9CC98A)}
.pwreq li.met::before{content:'\2713';color:#9CC98A}
@media(max-width:560px){.pwreq{grid-template-columns:1fr}}
/* Two-step registration progress */
.steps{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.steps .s{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--paper-45);display:inline-flex;align-items:center;gap:7px}
.steps .s .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--paper-22);
display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.steps .s.on{color:var(--paper)}
.steps .s.on .n{border-color:var(--ember);background:var(--ember);color:var(--ink)}
.steps .bar{flex:1;height:1px;background:var(--paper-22)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-quiet{background:transparent;color:var(--paper-70);border-color:var(--paper-22)}
.btn-quiet:hover{color:var(--paper);border-color:var(--paper)}