:root{
    --ground:#0B111B; --ink:#EDF1F7; --ink-2:#C3CBD9; --muted:#93A0B5;
    --glass:rgba(255,255,255,0.055); --glass-2:rgba(255,255,255,0.09);
    --edge:rgba(255,255,255,0.10); --edge-2:rgba(255,255,255,0.20);
    --accent:#F2A93B; --accent-2:#FFC46B; --blue:#3E6FD9;
    --bad:#F0716A; --bad-bg:rgba(240,113,106,0.14);
    --warn:#F2C14E; --warn-bg:rgba(242,193,78,0.14);
    --good:#5AD08A; --good-bg:rgba(90,208,138,0.14);
    --info-bg:rgba(255,255,255,0.06);
    --shadow:0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    --r:18px; --t:180ms; --ease:cubic-bezier(.16,1,.3,1);
    --font:"Archivo",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--ground);color:var(--ink);font-family:var(--font);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease)}
  a:hover{border-bottom-color:var(--accent-2)}
  .wrap{max-width:1060px;margin:0 auto;padding:0 24px}
  .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.30em;text-indent:.30em;text-transform:uppercase;color:var(--accent)}
  .muted{color:var(--muted)}
  .num{font-variant-numeric:tabular-nums}

  /* ── top bar ── */
  .bar{position:sticky;top:0;z-index:50;background:rgba(11,17,27,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
  .bar-in{max-width:1060px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px;min-width:0}
  .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;min-width:0}
  .brand b{font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:15px}
  .brand span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the shield and wordmark, same asset as the main header, sized for a compact utility bar */
  .brandlogo{height:40px;width:auto;flex:none;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.55))}
  .brand:hover .brandlogo{opacity:.9}
  .brandlogo{transition:opacity var(--t) var(--ease)}
  /* visible only to screen readers */
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .bar nav{margin-left:auto;display:flex;gap:16px;font-size:13px;color:var(--ink-2)}
  .bar nav a{color:var(--ink-2)}
  .bar nav a:hover{color:var(--ink)}
  .draftpill{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--warn);background:var(--warn-bg);border:1px solid rgba(242,193,78,.35);padding:4px 10px;border-radius:999px;white-space:nowrap}

  /* ── disclosure banner ── */
  .disclosure{background:var(--info-bg);border-bottom:1px solid var(--edge);font-size:12px;line-height:1.6;color:var(--muted)}
  .disclosure .wrap{padding:9px 24px}
  .disclosure b{color:var(--ink-2);font-weight:700;letter-spacing:.02em}

  /* ── hero ── */
  header.hero{padding:86px 0 52px;border-bottom:1px solid var(--edge)}
  h1{font-size:clamp(33px,5.4vw,58px);font-weight:800;letter-spacing:-.042em;line-height:1.02;max-width:17ch;text-wrap:balance}
  h1 .vs{color:var(--accent)}
  .lede{margin-top:22px;font-size:clamp(15.5px,1.45vw,19px);line-height:1.6;color:var(--ink-2);max-width:60ch;font-weight:400;text-wrap:pretty}
  .metaline{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:34px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .metaline b{display:block;margin-top:5px;font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
  .metaline .ok{color:var(--good)}

  /* ── sections ── */
  section{padding:66px 0;border-bottom:1px solid var(--edge)}
  .sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
  h2{font-size:clamp(23px,2.4vw,30px);font-weight:800;letter-spacing:-.032em;line-height:1.1}
  .secnote{color:var(--ink-2);font-size:15px;line-height:1.65;max-width:62ch;margin-bottom:32px;text-wrap:pretty}

  /* ── ledger ── */
  .ledger{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--glass)}
  .lrow{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--edge)}
  .lrow:first-child{border-top:0}
  .lhead{display:grid;grid-template-columns:1fr 1fr;background:var(--glass-2)}
  .lhead{padding:12px 18px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .lcell{padding:16px 18px;font-size:14px}
  .lcell-claim{color:var(--ink-2);border-right:1px solid var(--edge)}
  .lcell-claim .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--warn);background:var(--warn-bg);padding:2px 8px;border-radius:6px;margin-bottom:8px}
  .lcell-rec .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:6px;margin-bottom:8px}
  .tag-contradiction{color:var(--bad);background:var(--bad-bg)}
  .tag-unverified{color:var(--warn);background:var(--warn-bg)}
  .tag-verified{color:var(--good);background:var(--good-bg)}
  .lcell-rec{color:var(--ink)}
  .lcell-rec .src{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}

  /* ── exhibits ── */
  .exhibit{border:1px solid var(--edge);border-radius:var(--r);background:var(--glass);padding:26px 26px 20px;margin-bottom:22px;box-shadow:var(--shadow)}
  .exhibit.red{border-color:rgba(240,113,106,.4)}
  .exhibit.amber{border-color:rgba(242,193,78,.3)}
  .ex-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
  .ex-id{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
  .ex-id em{font-style:normal;color:var(--accent)}
  .ex-badge{font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:6px}
  .badge-contradiction{color:var(--bad);background:var(--bad-bg)}
  .badge-unverified{color:var(--warn);background:var(--warn-bg)}
  h3{font-size:20px;font-weight:700;letter-spacing:-.022em;line-height:1.2;margin-bottom:12px}
  .ex-body{font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}
  blockquote{border-left:2px solid var(--accent);margin:18px 0;padding:3px 0 3px 18px;font-size:15.5px;line-height:1.66;color:var(--ink)}
  blockquote .who{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
  .side{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
  .side>div{border:1px solid var(--edge);border-radius:12px;padding:16px;background:var(--info-bg)}
  .side .lab{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
  .lab-a{color:var(--good)} .lab-b{color:var(--bad)}
  /* neither side is a pass or a fail, so neither is coloured */
  .lab-n{color:var(--muted)}
  .receipt{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--edge);font-size:11.5px;color:var(--muted)}
  .receipt code{font-family:var(--font);font-size:11.5px;color:var(--ink-2)}
  .copybtn{background:var(--glass-2);border:1px solid var(--edge-2);color:var(--ink-2);font-family:var(--font);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all var(--t) var(--ease)}
  .copybtn:hover{color:var(--ink);border-color:var(--accent)}
  .copybtn.done{color:var(--good);border-color:rgba(90,208,138,.5)}
  .chartnote{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
  .chip{font-size:12px;color:var(--ink-2);background:var(--info-bg);border:1px solid var(--edge);padding:8px 12px;border-radius:10px}
  .chip b{color:var(--ink)}

  /* ── stats strip ── */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
  .stat{border:1px solid var(--edge);border-radius:var(--r);background:var(--glass);padding:18px}
  .stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em}
  .stat .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .stat .s{font-size:11.5px;color:var(--muted);margin-top:6px}

  /* ── method ── */
  .steps{counter-reset:step;display:grid;gap:12px;max-width:820px}
  .step{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--edge);border-radius:12px;background:var(--glass);padding:14px 18px}
  .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:13px;font-weight:800;color:var(--accent);padding-top:2px}
  .step b{font-weight:700;color:var(--ink)}
  .step p{font-size:13.5px;color:var(--ink-2)}
  .step .tools{font-size:12px;color:var(--muted);margin-top:4px}
  .step .tools code{font-size:12px;color:var(--accent-2)}

  /* ── three questions ── */
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .q{border:1px solid var(--edge);border-radius:var(--r);background:var(--glass);padding:22px}
  .q .n{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.1em}
  .q h3{margin:8px 0 8px;font-size:16.5px}
  .q p{font-size:13.5px;color:var(--ink-2)}
  .q .r{margin-top:10px;font-size:12.5px;color:var(--muted)}

  /* ── right of reply ── */
  .ror{border:1px solid var(--edge);background:var(--info-bg);border-radius:var(--r);padding:26px;max-width:820px}
  .ror h3{color:var(--ink)}
  .ror p{font-size:14px;color:var(--ink-2)}

  footer{padding:44px 0 64px;font-size:12.5px;color:var(--muted)}
  footer .cols{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:24px}
  footer .cols nav{display:grid;gap:6px}
  footer .cols h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
  footer a{color:var(--ink-2)}
  .legal{max-width:820px;font-size:11.5px;line-height:1.6;border-top:1px solid var(--edge);padding-top:18px}

  @media(max-width:860px){
    .draftpill{display:none}
    .brand span{display:none}
    .brandlogo{height:32px}
    .lrow,.lhead{grid-template-columns:1fr}
    .lcell-claim{border-right:none;border-bottom:1px solid var(--edge)}
    .stats{grid-template-columns:repeat(2,1fr)}
    .three{grid-template-columns:1fr}
    .side{grid-template-columns:1fr}
    .bar nav{display:none}
  }
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
  /* the score table */
  .scorewrap{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
  .scoretable{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--glass)}
  .srow{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 18px;border-top:1px solid var(--edge);font-size:13.5px;align-items:baseline}
  .srow:first-child{border-top:0;background:var(--glass-2);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .srow .got{font-weight:800;font-variant-numeric:tabular-nums}
  .srow .of{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
  .srow.total{border-top:1px solid var(--edge-2);background:var(--glass-2);font-weight:800}
  .srow .why{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:-2px}
  .s-low{color:var(--bad)} .s-mid{color:var(--warn)} .s-ok{color:var(--good)}
  .scorenote{border:1px solid var(--edge);border-radius:var(--r);background:var(--info-bg);padding:22px;font-size:13.5px;color:var(--ink-2)}
  .scorenote h3{margin-bottom:10px;font-size:16px}
  .scorenote p{margin-bottom:10px}
  .pend{font-size:12px;color:var(--warn);background:var(--warn-bg);border:1px solid rgba(242,193,78,.3);padding:2px 8px;border-radius:6px;font-weight:700;letter-spacing:.06em}
  @media(max-width:860px){.scorewrap{grid-template-columns:1fr}}

/* ── the audits index and the request form ── */
.auditlist{display:grid;gap:14px;max-width:880px}
.auditcard{display:block;border:1px solid var(--edge);border-radius:var(--r);background:var(--glass);padding:22px 24px;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
a.auditcard{color:inherit;border-bottom:1px solid var(--edge)}
a.auditcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.auditcard .no{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.auditcard h3{margin:6px 0 8px;font-size:19px}
.auditcard p{font-size:13.5px;color:var(--ink-2);max-width:640px}
.auditcard .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.auditcard .meta b{color:var(--ink-2);font-weight:600}
.soon{border-style:dashed;opacity:.72}

.form{border:1px solid var(--edge);border-radius:var(--r);background:var(--glass);padding:26px;max-width:640px;box-shadow:var(--shadow)}
.form label{display:block;margin-bottom:16px}
.form .lb{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form .hint{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.form input,.form textarea{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--edge-2);border-radius:10px;color:var(--ink);font-family:var(--font);font-size:14px;padding:11px 13px;transition:border-color var(--t) var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:92px;resize:vertical}
.form button{background:var(--accent);border:0;color:#121212;font-family:var(--font);font-size:14px;font-weight:700;padding:12px 22px;border-radius:10px;cursor:pointer;transition:opacity var(--t) var(--ease)}
.form button:hover{opacity:.88}
.form button:disabled{opacity:.5;cursor:default}
.formmsg{margin-top:14px;font-size:13.5px;display:none}
.formmsg.show{display:block}
.formmsg.ok{color:var(--good)}
.formmsg.err{color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formside{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.formside{grid-template-columns:1fr}}

/* ── the score, stated once and large, directly under the hero ── */
.scorehead{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:var(--glass)}
.scorehead .wrap{padding:26px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.scorenum{display:flex;align-items:baseline;gap:6px;line-height:1}
.scorenum b{font-size:clamp(46px,8vw,64px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scorenum i{font-style:normal;font-size:22px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.scorewhat{max-width:52ch}
.scorewhat b{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.scorewhat p{font-size:13.5px;color:var(--ink-2);margin:0}
.scorewhat a{font-size:12.5px}

/* ── the audit card has to read as something you click ── */
a.auditcard{border-bottom:1px solid var(--edge)}
a.auditcard h3{color:var(--accent-2)}
a.auditcard:hover{border-color:var(--accent);transform:translateY(-1px)}
a.auditcard:hover .cardgo{color:var(--ink);border-color:var(--accent)}
.cardtop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cardscore{flex:none;text-align:right;line-height:1.1}
.cardscore b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cardscore span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cardgo{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--glass-2);border:1px solid var(--edge-2);color:var(--ink-2);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:8px;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.auditcard.soon h3{color:var(--muted)}

/* ── the score, beside the title, as the first thing you read ───────────────────────────────────
   Band by result, so the colour carries meaning rather than decoration:
   under 50 red, 50 to 79 amber, 80 and over green. Set the band class on .bigscore.
   The "/100" stays brushed silver at every band: it is the constant, not the finding. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.hero-copy{min-width:0}
.bigscore{flex:none;text-align:right;line-height:1;padding-top:6px}
.bigscore .val{display:flex;align-items:baseline;justify-content:flex-end;gap:2px}
.bigscore b{font-size:clamp(64px,9.5vw,116px);font-weight:800;letter-spacing:-.055em;font-variant-numeric:tabular-nums;line-height:.88}
.bigscore i{font-style:normal;font-size:clamp(22px,3vw,38px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(176deg,#ffffff 0%,#e9eef6 30%,#b7c4d6 62%,#8d9eb5 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .bigscore i{-webkit-text-fill-color:var(--ink-2);color:var(--ink-2)}
}
.bigscore .cap{display:block;margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.bigscore.band-low b{color:var(--bad);text-shadow:0 0 42px rgba(240,113,106,.28)}
.bigscore.band-mid b{color:var(--warn);text-shadow:0 0 42px rgba(242,193,78,.26)}
.bigscore.band-high b{color:var(--good);text-shadow:0 0 42px rgba(90,208,138,.26)}
.bandkey{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bandkey s{text-decoration:none;opacity:.45}
.bandkey s.on{opacity:1;font-weight:700}
.bandkey s.low.on{color:var(--bad)} .bandkey s.mid.on{color:var(--warn)} .bandkey s.high.on{color:var(--good)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .bigscore{text-align:left;padding-top:0;order:-1}
  .bigscore .val{justify-content:flex-start}
  .bandkey{justify-content:flex-start}
}