/* Site stylesheet — the one design system for every server-rendered page.
   Concept: an auditor's marked-up report. Ink on cool paper, evidence
   "slips" in mono, one highlighter colour marking the claims that matter.
   Light-first; dark mirrors it via prefers-color-scheme.
   Fonts are self-hosted (SIL OFL 1.1, licences in /static/fonts/): no
   third-party requests from our pages. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;
  src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/public-sans-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-latin.woff2) format("woff2")}

:root{
  --paper:#F5F7F8; --sheet:#FFFFFF; --ink:#0F1B2A; --ink-2:#3C4A5C; --rule:#D9DFE5;
  --mark:#FFE36E; --mark-ink:#0F1B2A; --mark-hl:#FFE36E; --btn:#0F1B2A; --btn-ink:#FFFFFF;
  --red:#C2352B; --red-bg:#FBE9E7; --amber:#A86400; --amber-bg:#FFF2DC; --green:#1E7A4F; --green-bg:#E3F4EA;
  --slip:#0F1B2A; --slip-ink:#E6EDF3; --slip-dim:#8FA1B3; --slip-hit:#FFB4AC; --link:#1D4ED8;
  --focus:#1D4ED8;
  --f-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Legacy aliases: older templates reference these in inline styles. */
  --bg:var(--paper); --fg:var(--ink); --mut:var(--ink-2); --card:var(--sheet); --line:var(--rule);
  --acc:#1D4ED8;  /* always paired with white text, so fixed in both themes */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0C141E; --sheet:#121D2A; --ink:#E8EEF4; --ink-2:#A7B4C2; --rule:#24313F;
  --mark:#E8C94A; --mark-ink:#0C141E; --mark-hl:rgba(232,201,74,.34); --btn:#E8EEF4; --btn-ink:#0C141E;
  --red:#FF8A7F; --red-bg:#3A1A18; --amber:#F2B45A; --amber-bg:#3A2A12; --green:#6FD3A0; --green-bg:#12301F;
  --slip:#070D14; --slip-ink:#E6EDF3; --slip-dim:#7D8FA2; --link:#8DB2FF; --focus:#E8C94A; color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#0C141E; --sheet:#121D2A; --ink:#E8EEF4; --ink-2:#A7B4C2; --rule:#24313F;
  --mark:#E8C94A; --mark-ink:#0C141E; --mark-hl:rgba(232,201,74,.34); --btn:#E8EEF4; --btn-ink:#0C141E;
  --red:#FF8A7F; --red-bg:#3A1A18; --amber:#F2B45A; --amber-bg:#3A2A12; --green:#6FD3A0; --green-bg:#12301F;
  --slip:#070D14; --slip-ink:#E6EDF3; --slip-dim:#7D8FA2; --link:#8DB2FF; --focus:#E8C94A; color-scheme:dark }

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;margin:0;overflow-wrap:break-word}
body{display:flex;flex-direction:column;min-height:100vh}
#content{flex:1 0 auto;width:100%}
.site-foot{flex-shrink:0}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.1;margin:0}
h1{font-size:clamp(2rem,5.6vw,3.9rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700}
code,pre,kbd{font-family:var(--f-mono);font-size:.85em}
code{overflow-wrap:anywhere}
pre{white-space:pre-wrap;word-break:break-word;background:var(--paper);color:var(--ink);padding:12px;border-radius:8px;border:1px solid var(--rule);overflow-x:auto}
.mark{background:linear-gradient(transparent 55%,var(--mark-hl) 55%);color:inherit;padding:0 .08em}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0}
.mono{font-family:var(--f-mono)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--mark);color:var(--mark-ink);padding:8px 14px;z-index:20;font-weight:700}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header / footer ---------- */
.site-head .wrap{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;padding-block:22px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo span{background:var(--mark);color:var(--mark-ink);padding:0 .2em;border-radius:3px}
.site-nav ul{display:flex;gap:6px 18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.site-nav a:hover{color:var(--ink);text-decoration:underline}
.site-nav a.cta{color:var(--ink);font-weight:700}
.site-foot{border-top:1px solid var(--rule);margin-top:48px}
.site-foot .wrap{padding-block:32px 40px;color:var(--ink-2);font-size:.88rem;display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between}
.site-foot ul{display:flex;gap:6px 16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.site-foot a{color:var(--ink-2)}
.site-foot a:hover{color:var(--ink)}

/* ---------- buttons + forms ---------- */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btn);color:var(--btn-ink);
  font:700 1rem var(--f-body);padding:13px 22px;border-radius:10px;text-decoration:none;border:2px solid var(--btn);cursor:pointer;line-height:1.3}
button{margin-top:12px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.mark-btn{background:var(--mark);color:var(--mark-ink);border-color:var(--mark)}
.btn small{font-weight:500;opacity:.8}
button[disabled]{opacity:.55;cursor:not-allowed}
input[type=text],input[type=url],input[type=email],input[type=password],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);font:1rem var(--f-body)}
input::placeholder{color:var(--ink-2);opacity:.85}
label{display:block}
details.opt label{margin-top:10px}

/* ---------- generic content pages ---------- */
.page{max-width:780px;margin:0 auto;padding:16px 20px 40px}
.page h1{font-size:clamp(1.8rem,4.6vw,2.6rem);margin:.2em 0 .4em}
.page h2{font:600 .8rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:2em 0 .6em}
.page p{margin:.5em 0}
.page ul,.page ol{padding-left:1.2em}
.page details{margin:.6em 0}
.page details summary{cursor:pointer}
.mut{color:var(--ink-2)}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;margin:10px 0;min-width:0}
.card > :first-child{margin-top:0}.card > :last-child{margin-bottom:0}
.tag{display:inline-block;font:500 .72rem var(--f-mono);letter-spacing:.04em;padding:2px 8px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2);margin-right:6px}
.verdict{padding:20px;border-radius:12px;font:800 1.5rem var(--f-display);text-align:center;border:2px solid currentColor}
.RED{background:var(--red-bg);color:var(--red)}.AMBER{background:var(--amber-bg);color:var(--amber)}.GREEN{background:var(--green-bg);color:var(--green)}
.tbl{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:600 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.notice{border-left:4px solid var(--red)}

/* ---------- severity pills ---------- */
.sev{font:700 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.sev.red{background:var(--red-bg);color:var(--red)}
.sev.amber{background:var(--amber-bg);color:var(--amber)}
.sev.green{background:var(--green-bg);color:var(--green)}

/* ---------- evidence slip ---------- */
.slip{margin:0;background:var(--slip);color:var(--slip-ink);border-radius:14px;padding:22px;box-shadow:0 18px 50px -24px rgba(15,27,42,.55);min-width:0}
.slip-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.slip .slip-title{font:700 1.25rem/1.15 var(--f-display);color:var(--slip-ink);margin-top:14px;text-wrap:balance}
.slip .why{color:var(--slip-dim);font-size:.95rem;margin-top:6px}
.req{font-family:var(--f-mono);font-size:.8rem;background:rgba(230,237,243,.07);border-radius:8px;padding:12px;margin:14px 0 0;overflow-x:auto;white-space:pre;line-height:1.55;color:var(--slip-ink);border:0}
.req .k{color:var(--slip-dim)} .req .hit{color:var(--slip-hit)}
.slip .fix{margin-top:14px;font-size:.92rem}
.slip .fix b{color:var(--mark)}
.example-tag{font:500 .72rem var(--f-mono);color:var(--slip-dim)}
.slip .sev.red{background:#3A1A18;color:#FF8A7F}

/* ---------- homepage ---------- */
:where(.home) p{margin:0}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:28px 56px}
.hero > *{min-width:0}
.hero h1{margin-top:14px}
.hero .lede{font-size:1.15rem;color:var(--ink-2);margin-top:20px;max-width:36em}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.micro{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.micro span::before{content:"\2713\00a0";color:var(--green);font-weight:700}
.tools{margin-top:26px;font-size:.88rem;color:var(--ink-2)}
.tools b{color:var(--ink);font-weight:600}

.home section{padding-block:64px;border-top:1px solid var(--rule)}
.home section.flush{border-top:0}
.sec-head{max-width:46em;display:grid;gap:12px;margin-bottom:32px}
.sec-head p{color:var(--ink-2)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{display:grid;gap:8px;align-content:start;min-width:0}
.fact .n{font-family:var(--f-display);font-weight:800;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.fact p{color:var(--ink-2);font-size:.95rem}
.fact a{font-size:.82rem}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.checks > div{min-width:0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.list li > div{min-width:0}
.list .how{font:500 .68rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;white-space:nowrap;margin-top:3px}
.how.proven{background:var(--red-bg);color:var(--red)}
.how.code{background:var(--amber-bg);color:var(--amber)}
.how.basic{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
.list b{display:block}
.list small{color:var(--ink-2);font-size:.9rem}
.notcheck{background:var(--sheet);border:1px dashed var(--rule);border-radius:12px;padding:22px}
.notcheck h3{margin-bottom:14px}
.notcheck ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--ink-2);font-size:.95rem}
.notcheck .after{margin-top:14px;font-size:.9rem;color:var(--ink-2)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s;list-style:none;margin:0;padding:0}
.step{display:grid;gap:10px;align-content:start}
.step::before{counter-increment:s;content:counter(s);font:800 1rem var(--f-display);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mark);color:var(--mark-ink)}
.step p{color:var(--ink-2);font-size:.95rem}

.docs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.doc{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.doc .who{font:500 .78rem var(--f-mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.doc ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:.95rem;display:grid;gap:6px}
.page-mock{border:1px solid var(--rule);border-radius:8px;padding:14px;background:var(--paper);font-size:.82rem;display:grid;gap:8px}
.page-mock .bar{height:8px;border-radius:4px;background:var(--rule)}
.page-mock .row{display:flex;gap:8px;align-items:center}
.page-mock .row .bar{flex:1}
.page-mock .row b{font-size:.8rem}
.w80{width:80%}.w70{width:70%}.w60{width:60%}.w55{width:55%}
.after-docs{margin-top:22px}

.safety{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 32px}
.safety div{display:grid;gap:4px}
.safety b{font-family:var(--f-display);font-size:1.05rem}
.safety p{color:var(--ink-2);font-size:.95rem}

.bench{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:28px}
.bench .big{font:800 3.4rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.bench .big small{font-size:1.6rem;color:var(--ink-2)}
.bench p{color:var(--ink-2);margin-top:8px}

.prices{display:grid;grid-template-columns:.9fr 1.15fr .95fr;gap:20px;align-items:stretch}
.price{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:26px;display:grid;gap:14px;align-content:start;min-width:0}
.price.main{border:2px solid var(--ink);box-shadow:0 20px 50px -30px rgba(15,27,42,.5)}
.price .amt{font:800 2.6rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.price .amt small{font:500 1rem var(--f-body);color:var(--ink-2)}
.price ul{margin:0;padding-left:18px;font-size:.95rem;display:grid;gap:6px}
.price .note{font-size:.85rem;color:var(--ink-2);margin:0}
.price .btn{justify-self:start}
.price button{margin-top:0}
.home > .wrap > .form-error{margin-top:8px}
.quick-form{display:grid;gap:8px}
.quick-form label{font-size:.85rem;color:var(--ink-2)}
.quick-form button{margin-top:0;justify-self:start}
.form-error{border:1px solid var(--red);background:var(--red-bg);color:var(--red);border-radius:8px;padding:10px 12px;font-size:.92rem}
.anchor{margin-top:18px;color:var(--ink-2);font-size:.95rem;max-width:46em}

.faq{display:grid;gap:10px;max-width:780px}
.faq details{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin-top:10px;color:var(--ink-2)}

.final{background:var(--ink);color:var(--paper);border-radius:18px;padding:44px;display:grid;gap:18px}
.final h2{color:var(--paper)}
.final p{color:var(--paper);opacity:.8}
.final .btn{background:var(--mark);color:var(--mark-ink);border-color:var(--mark);justify-self:start}
.final .btn:focus-visible{outline-color:var(--paper)}

/* pricing page reuses the homepage blocks */
.pricing-page section{border-top:0;padding-top:16px}

@media (max-width:860px){
  .hero,.checks,.docs{grid-template-columns:1fr}
  .facts,.steps,.prices{grid-template-columns:1fr}
  .safety{grid-template-columns:1fr}
  .bench{grid-template-columns:1fr}
  .final{padding:28px}
  .home section{padding-block:48px}
}
@media (prefers-reduced-motion:no-preference){ .slip{animation:rise .5s ease-out both} @keyframes rise{from{transform:translateY(8px)}to{transform:none}} }
.pricing-page .sec-head{padding-top:16px}
.pricing-page h1{font-size:clamp(1.9rem,4.6vw,3rem)}
.tbl.card{padding:0}
.tbl.card table{min-width:860px}
tbody th{font:700 .92rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink)}
tr.ours{background:var(--paper)}