:root{
--ink:#15171c;--ink-2:#3f4552;--ink-3:#6b7280;
--paper:#fff;--paper-2:#f7f7f4;--paper-3:#edede8;
--line:#e2e2dc;--line-2:#c8c8c0;
--link:#1b4dc1;--mark:#15171c;--on-mark:#fff;
--pass:#0f7a4d;--warn:#8a5200;--fail:#b3261e;
--pass-bg:#e7f4ed;--warn-bg:#fbf0dc;--fail-bg:#fbeae8;
--sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--serif:"Newsreader",Georgia,"Times New Roman",serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--r:6px}
@media (prefers-color-scheme:dark){:root{
--ink:#ecebe7;--ink-2:#b7bac2;--ink-3:#8a8f9a;
--paper:#0e0f11;--paper-2:#17191c;--paper-3:#1f2227;
--line:#282b31;--line-2:#3a3e45;
--link:#93b2f5;--mark:#ecebe7;--on-mark:#0e0f11;
--pass:#4ec98a;--warn:#e0a33a;--fail:#f2716b;
--pass-bg:#122720;--warn-bg:#2a2011;--fail-bg:#2b1614}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
main.wrap{padding-top:52px;padding-bottom:16px}
.prose{max-width:66ch}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
header.site .wrap{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
font-weight:700;font-size:1.02rem;letter-spacing:-.015em}
.brand svg{display:block;flex:none}
nav.top{display:flex;align-items:center;gap:22px;margin-left:auto}
nav.top a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
nav.top a:hover{color:var(--ink)}
nav.top a.mini{border:1px solid var(--line-2);border-radius:var(--r);padding:8px 14px;
color:var(--ink);font-weight:600}
nav.top a.mini:hover{background:var(--paper-2)}
@media (max-width:820px){nav.top .opt{display:none}}
h1{font:600 clamp(2.05rem,4.6vw,3.05rem)/1.1 var(--serif);letter-spacing:-.02em;
margin:0 0 18px;max-width:19ch}
h2{font:600 clamp(1.35rem,2.4vw,1.72rem)/1.22 var(--serif);letter-spacing:-.012em;
margin:60px 0 14px;max-width:26ch}
h3{font:600 1rem/1.35 var(--sans);margin:26px 0 8px}
p{margin:0 0 16px;max-width:66ch}
.lede{font-size:1.11rem;line-height:1.6;color:var(--ink-2)}
.eyebrow{font:600 .73rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-3);margin:0 0 20px}
.note{color:var(--ink-3);font-size:.87rem;line-height:1.55;max-width:66ch}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0;max-width:none}
.pager a,.pager span{min-width:38px;padding:7px 9px;text-align:center;
border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;
font:500 .9rem var(--sans);color:var(--ink-2)}
.pager span[aria-current]{background:var(--mark);color:var(--on-mark);border-color:var(--mark)}
form{display:flex;gap:8px;margin:26px 0 10px;max-width:540px;flex-wrap:wrap}
input[type=text],input[type=email]{flex:1 1 250px;min-height:50px;padding:12px 15px;
border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);
color:var(--ink);font:400 1rem var(--sans)}
/* A list of client domains is the one input here that is not one line. It takes
   the whole row rather than sharing it, so the email field below it does not
   end up beside a box eight lines tall. */
textarea{flex:1 1 100%;padding:12px 15px;border:1px solid var(--line-2);
border-radius:var(--r);background:var(--paper);color:var(--ink);
font:400 .95rem/1.6 var(--mono,var(--sans));resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
button,.cta{min-height:50px;padding:12px 22px;border:1px solid var(--mark);
border-radius:var(--r);background:var(--mark);color:var(--on-mark);
font:600 .97rem var(--sans);cursor:pointer;text-decoration:none;
display:inline-flex;align-items:center;justify-content:center;transition:opacity .15s ease}
button:hover,.cta:hover{opacity:.85;text-decoration:none}
button:disabled{opacity:.5;cursor:progress}
.cta{margin:22px 0 10px}
.evidence{border:1px solid var(--line);border-left:3px solid var(--ink-3);
border-radius:0 var(--r) var(--r) 0;background:var(--paper-2);padding:18px 22px;margin:30px 0;
max-width:720px}
.evidence .eyebrow{margin:0 0 9px}
.evidence p{margin:0;font-size:1.02rem;color:var(--ink-2);max-width:none}
.evidence b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
dl.rows{margin:22px 0;border-top:1px solid var(--line);max-width:760px}
dl.rows div{display:flex;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);
flex-wrap:wrap;align-items:baseline}
dl.rows dt{flex:0 0 220px;font-weight:600;font-size:.95rem}
dl.rows dd{flex:1 1 260px;margin:0;color:var(--ink-2);font-size:.95rem}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem}
/* A table with more than three columns does not fit a phone. It scrolls inside
   its own box rather than making the whole page scroll sideways. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Present/absent, said in colour and in a word, because colour alone is not
   a statement to a reader who cannot see it. */
.set{color:var(--pass);font-weight:600}
.miss{color:var(--ink-3)}
code.dim{color:var(--ink-3);font-size:.85em}
.scroll table{min-width:34rem}
th{text-align:left;font:600 .71rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);padding:0 14px 10px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle;
white-space:nowrap}
td.wrap-cell{white-space:normal}
th:last-child,td:last-child{text-align:right;padding-right:0}
td.g{font:700 1.05rem var(--mono);width:3.6rem}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.dim{color:var(--ink-3)}
tbody tr:hover td{background:var(--paper-2)}
td.viz,th.viz{width:1px;text-align:right;padding-right:18px}
.bar{display:inline-block;vertical-align:middle;width:min(320px,32vw);height:8px;
border-radius:2px;background:var(--paper-3);overflow:hidden}
.bar span{display:block;height:100%}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
padding:6px 0 30px;border-bottom:1px solid var(--line)}
.verdict>div:first-child{min-width:104px}
.grade{font:700 5rem/.84 var(--mono);letter-spacing:-.055em}
.score{font:500 .82rem var(--mono);color:var(--ink-3);margin-top:9px;
font-variant-numeric:tabular-nums}
.verdict .say{font-size:1.11rem;line-height:1.5;color:var(--ink);max-width:52ch}
.meter{height:6px;border-radius:99px;background:var(--paper-3);overflow:hidden;
margin-top:16px;max-width:430px}
.meter>i{display:block;height:100%;border-radius:99px}
@media (max-width:560px){.verdict{grid-template-columns:1fr;gap:12px}}
.finding{border-left:3px solid var(--line-2);padding:1px 0 1px 20px;margin:28px 0}
.finding.fail{border-left-color:var(--fail)}
.finding.warn{border-left-color:var(--warn)}
.finding.pass{border-left-color:var(--pass)}
.f-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.f-head strong{font-size:1.04rem;letter-spacing:-.012em}
.pill{font:700 .65rem/1 var(--sans);letter-spacing:.09em;padding:5px 8px;border-radius:3px;flex:none}
.pill.pass{background:var(--pass-bg);color:var(--pass)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.fail{background:var(--fail-bg);color:var(--fail)}
.finding p{margin:0 0 8px;color:var(--ink-2)}
.finding .note{margin-top:12px}
.fix{margin-top:11px;padding:12px 15px;background:var(--paper-2);border-radius:var(--r);
font-size:.93rem;color:var(--ink-2);max-width:66ch}
.fix strong{color:var(--ink)}
.explain{display:inline-block;margin-left:2px;white-space:nowrap;font-weight:600}
.proof{padding:12px 15px;background:var(--paper-2);border-radius:var(--r);
font-size:.93rem;color:var(--ink-2);max-width:66ch}
.more{color:var(--ink-2);line-height:1.7;max-width:66ch}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
padding:20px 22px;margin:20px 0;max-width:66ch}
.panel.err{border-color:var(--fail);background:var(--fail-bg)}
.panel p{margin:0}
ul.agents{list-style:none;padding:0;margin:12px 0 0;font-size:.9rem;color:var(--ink-2);
max-width:66ch}
ul.agents li{padding:5px 0;border-bottom:1px solid var(--line)}
dl.echo{margin:12px 0 0;font-size:.9rem;color:var(--ink-2)}
dl.echo dt{font-weight:600;margin-top:6px}
dl.echo dd{margin:2px 0 0;padding-left:0;font-style:italic}
ul.items{list-style:none;padding:0;margin:12px 0 0;font-size:.9rem;color:var(--ink-2)}
ul.items li{padding:5px 0;border-bottom:1px solid var(--line)}
code{font:400 .88em var(--mono);background:var(--paper-3);border-radius:3px;padding:2px 5px}
pre{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px;overflow-x:auto;margin:14px 0;max-width:66ch}
pre code{background:none;padding:0}
footer{margin-top:84px;border-top:1px solid var(--line);padding:30px 0 64px;
color:var(--ink-3);font-size:.88rem}
footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
footer nav a{color:var(--ink-2);text-decoration:none}
footer nav a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:640px){
main.wrap{padding-top:36px}
table{font-size:.88rem}
td.viz,th.viz{display:none}
h2{margin-top:44px}
form{max-width:none}
input[type=text],input[type=email]{flex:1 1 100%}
button{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}