/* warylens.com — verdict dossier
   ground: cold grey paper · ink black · one signal vermilion · zero rounded corners */

/* Typefaces are self-hosted. Measured on a first visit, the Google Fonts swap
   landed at ~2.5s and shifted the whole page: CLS 0.68 against a 0.1 budget.
   Same-origin files can be preloaded, and it drops two third-party domains
   from every page and from the Content-Security-Policy. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/archivo-600900-75100.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/fonts/instrument-sans-400-100.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/fonts/instrument-sans-400-100.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/fonts/instrument-sans-400-100.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spline-sans-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spline-sans-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#EEF0F2; --paper-2:#E4E7EA; --card:#F7F8F9; --white:#FFFFFF;
  --ink:#14181D; --ink-2:#3E464F; --ink-3:#6B7480; --ink-4:#98A1AA;
  --rule:#14181D; --hair:#C6CCD2; --hair-2:#D8DDE1;
  --signal:#D8442A; --signal-ink:#9E2F1C; --signal-wash:#F3C9C0; --signal-tint:#FBEBE7;
  --ok:#1F5C4B; --ok-wash:#DCEAE4;
  --warn:#8A5A00; --warn-wash:#F6EBD2;

  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --w:1180px; --pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
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,svg{max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--signal-wash);color:var(--ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--mono);font-size:13px}
.skip:focus{inset-inline-start:0}

/* ─────────────────────────  masthead  ───────────────────────── */
.mast{border-bottom:3px solid var(--rule);background:var(--paper)}
.mast>.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand svg{display:block;flex:0 0 auto}
.brand b{font-family:var(--disp);font-weight:900;font-stretch:82%;font-size:21px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.10em;text-transform:uppercase}
.nav a{text-decoration:none;padding:4px 0 2px;border-bottom:2px solid transparent;color:var(--ink-2)}
.nav a:hover{border-bottom-color:var(--signal);color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.burger{display:none;width:42px;height:42px;padding:0;border:2px solid var(--rule);background:transparent;cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:3px auto;background:var(--ink)}

/* language switcher */
.lang{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.lang-now{color:var(--ink);border-bottom:2px solid var(--signal);padding-bottom:2px}
.lang a{color:var(--ink-3);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.lang a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* strap */
.strap{border-bottom:1px solid var(--hair);background:var(--paper-2)}
.strap>.wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;min-height:34px;padding-top:7px;padding-bottom:7px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase}
.strap em{font-style:normal;color:var(--signal-ink);font-weight:500}

/* ─────────────────────────  home hero  ───────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-bottom:3px solid var(--rule)}
.hero-l{padding:36px 34px 30px 0;border-right:1px solid var(--hair)}
.hero-r{padding:28px 0 24px 34px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);margin:0 0 13px}
h1{font-family:var(--disp);font-weight:800;font-stretch:78%;line-height:1.0;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance}
.hero-l h1{font-size:clamp(36px,4.6vw,57px)}
.hero-l h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--signal-wash) 62%)}
.lede{font-size:18.5px;color:var(--ink-2);margin:0 0 22px;max-width:34em}
.acts{display:flex;flex-wrap:wrap;gap:10px}

.btn{display:inline-block;padding:11px 18px;border:2px solid var(--rule);background:var(--ink);color:var(--paper);
  text-decoration:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.btn.alt{background:transparent;color:var(--ink)}
.btn:hover{background:var(--signal);border-color:var(--signal);color:#fff}

/* conversion slab (invite code) */
.slab{margin-top:24px;border:2px solid var(--rule);background:var(--card)}
.slab-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 12px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.slab-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 14px 12px}
.slab-code{font-family:var(--mono);font-weight:500;font-size:30px;letter-spacing:.10em;padding:2px 10px;border:1px dashed var(--ink-3);background:var(--white)}
.slab-copy{padding:10px 16px;border:2px solid var(--rule);background:var(--signal);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-height:44px}
.slab-copy:hover{background:var(--signal-ink)}
.slab-perk{flex:1 1 210px;min-width:190px;font-size:14.5px;color:var(--ink-2);line-height:1.42;margin:0}
.slab-perk b{font-weight:600;color:var(--ink)}
.slab-fn{margin:0;padding:0 14px 12px;font-size:12px;color:var(--ink-3);line-height:1.45}

/* ─────────────────────────  ledger  ───────────────────────── */
.led-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--rule);padding-bottom:7px}
.led-h b{font-family:var(--disp);font-weight:800;font-stretch:80%;font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.led-h span{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.row q{quotes:none;font-family:var(--disp);font-weight:600;font-stretch:88%;font-size:17.5px;line-height:1.24}
.row:hover q{color:var(--signal-ink)}
.row small{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--ink-3);color:var(--ink-3);white-space:nowrap}
.chip.s{border-color:var(--ok);color:var(--ok)}
.chip.d{border-color:var(--signal);color:var(--signal-ink)}
.chip.n{border-color:var(--warn);color:var(--warn)}

/* ─────────────────────────  home sections  ───────────────────────── */
.band{border-bottom:1px solid var(--hair);padding:34px 0}
.band:last-of-type{border-bottom:0}
.band-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:18px;
  border-bottom:2px solid var(--rule);padding-bottom:8px}
.band-hd h2{font-family:var(--disp);font-weight:800;font-stretch:80%;font-size:22px;text-transform:uppercase;letter-spacing:.01em;margin:0}
.band-hd p{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.card{display:flex;flex-direction:column;border:1px solid var(--hair);background:var(--card);text-decoration:none}
.card:hover{border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.card img{display:block;width:100%;aspect-ratio:40/21;object-fit:cover;border-bottom:1px solid var(--hair)}
.card-b{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--signal-ink)}
.card-t{font-family:var(--disp);font-weight:700;font-stretch:86%;font-size:18px;line-height:1.22;margin:0}
.card-d{margin:0;font-size:14px;color:var(--ink-3);line-height:1.45}

.tools-list{display:grid;gap:0;border-top:2px solid var(--rule)}
.tool-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.tool-row .n{font-family:var(--mono);font-size:12px;color:var(--ink-4);letter-spacing:.08em}
.tool-row b{font-family:var(--disp);font-weight:700;font-stretch:88%;font-size:17.5px;display:block;line-height:1.25}
.tool-row span{font-size:14px;color:var(--ink-3);display:block;margin-top:2px}
.tool-row .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.tool-row:hover b{color:var(--signal-ink)}

/* ─────────────────────────  article  ───────────────────────── */
.art{display:grid;grid-template-columns:minmax(0,1fr);max-width:790px;margin:0 auto;padding:30px 0 10px}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair-2)}
.crumb a:hover{color:var(--signal-ink)}
.art h1{font-size:clamp(31px,4.1vw,46px);font-stretch:80%;margin-bottom:14px}
.dek{font-size:19px;color:var(--ink-2);margin:0 0 20px;line-height:1.5}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding:11px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}
.meta b{font-weight:400;color:var(--ink-2)}

/* openers */
.verdict{border:2px solid var(--rule);background:var(--white);margin:26px 0}
.verdict>div{padding:14px 16px}
.verdict>div+div{border-top:1px solid var(--hair)}
.verdict h2,.verdict p{margin:0}
.verdict .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal-ink);margin-bottom:6px;display:block}
.verdict .cant .lbl{color:var(--ink-3)}
.verdict p{font-size:17.5px;line-height:1.5}
.verdict .cant p{color:var(--ink-2);font-size:16px}

.tldr{border-inline-start:5px solid var(--signal);background:var(--signal-tint);padding:16px 18px;margin:26px 0}
.tldr .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:9px}
.tldr ul{margin:0;padding-inline-start:19px}
.tldr li{margin:5px 0}

.warnbar{border:3px solid var(--signal);background:var(--white);padding:16px 18px;margin:26px 0}
.warnbar b{font-family:var(--disp);font-weight:800;font-stretch:84%;font-size:19px;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.01em}
.warnbar p{margin:0;color:var(--ink-2)}

.tline{margin:26px 0;border-top:2px solid var(--rule)}
.tline div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--hair)}
.tline time{font-family:var(--mono);font-size:12.5px;color:var(--signal-ink);letter-spacing:.04em}
.tline p{margin:0;font-size:16px;line-height:1.5}

.meter{margin:26px 0;border:2px solid var(--rule);padding:14px 16px;background:var(--white)}
.meter .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:9px}
.meter .bar{display:flex;gap:3px;margin-bottom:10px}
.meter .bar i{flex:1;height:13px;background:var(--hair);display:block}
.meter .bar i.on{background:var(--signal)}
.meter p{margin:0;font-size:16px;color:var(--ink-2)}

.fork{margin:26px 0;border:2px solid var(--rule);background:var(--white)}
.fork>p{margin:0;padding:13px 16px;border-bottom:1px solid var(--hair);font-family:var(--disp);font-weight:700;font-stretch:88%;font-size:18px}
.fork div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:11px 16px;border-bottom:1px solid var(--hair)}
.fork div:last-child{border-bottom:0}
.fork span{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--signal-ink)}
.fork strong{font-weight:500;font-size:16px}

.facing{display:grid;grid-template-columns:1fr 1fr;margin:26px 0;border:2px solid var(--rule)}
.facing>div{padding:14px 16px}
.facing>div+div{border-inline-start:1px solid var(--hair);background:var(--white)}
.facing .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--ink-3)}
.facing>div+div .lbl{color:var(--signal-ink)}
.facing p{margin:0;font-size:16px;line-height:1.48}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:26px 0;border:2px solid var(--rule);background:var(--white)}
.figs>div{padding:14px 16px}
.figs>div+div{border-inline-start:1px solid var(--hair)}
.figs b{display:block;font-family:var(--disp);font-weight:800;font-stretch:76%;font-size:30px;line-height:1.05;letter-spacing:-.01em}
.figs span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:5px;line-height:1.35}

/* table of contents */
.toc{margin:28px 0;border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);padding:12px 0 13px}
.toc b{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:8px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:5px}
.toc li{counter-increment:t;font-size:15.5px;padding-inline-start:30px;position:relative}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;inset-inline-start:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-4);top:3px}
.toc a{text-decoration:none;border-bottom:1px solid var(--hair-2)}
.toc a:hover{color:var(--signal-ink);border-bottom-color:var(--signal)}

/* prose */
.prose{font-size:17.5px;line-height:1.68}
.prose h2{font-family:var(--disp);font-weight:800;font-stretch:82%;font-size:clamp(23px,2.7vw,29px);line-height:1.14;letter-spacing:-.008em;
  margin:44px 0 14px;padding-top:14px;border-top:2px solid var(--rule);scroll-margin-top:20px}
.prose h3{font-family:var(--disp);font-weight:700;font-stretch:88%;font-size:20px;line-height:1.24;margin:30px 0 10px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:22px}
.prose li{margin:7px 0}
.prose li>ul,.prose li>ol{margin:7px 0}
.prose a{color:var(--signal-ink);text-decoration:none;border-bottom:1px solid var(--signal-wash)}
.prose a:hover{border-bottom-color:var(--signal);background:var(--signal-tint)}
.prose strong{font-weight:600}
.prose blockquote{margin:24px 0;padding:2px 0 2px 18px;border-inline-start:4px solid var(--hair);color:var(--ink-2);font-size:17px}
.prose hr{border:0;border-top:1px solid var(--hair);margin:32px 0}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px}
.prose th,.prose td{border:1px solid var(--hair);padding:9px 11px;text-align:start;vertical-align:top}
.prose th{background:var(--paper-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--paper-2);padding:1px 5px}
.tbl-scroll{overflow-x:auto;margin:24px 0}
.tbl-scroll table{margin:0}

.note{border:1px solid var(--hair);background:var(--card);padding:14px 16px;margin:24px 0}
.note b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:7px;font-weight:400}
.note p:last-child{margin-bottom:0}
.note.hot{border-color:var(--signal);background:var(--signal-tint)}
.note.hot b{color:var(--signal-ink)}

.checked{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.03em}

figure{margin:26px 0}
figure img{display:block;width:100%;border:1px solid var(--hair)}
figcaption{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}
figcaption s{text-decoration:none;color:var(--ink-4)}
.article-cover{margin:0 0 28px}
.article-cover img{border:2px solid var(--rule)}

/* affiliate disclosure adjacent to the one conversion link */
.aff{border:2px solid var(--rule);background:var(--white);padding:15px 17px;margin:26px 0}
.aff .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:8px}
.aff p{margin:0 0 13px;font-size:16px;color:var(--ink-2)}
.aff .go{display:inline-block;padding:11px 18px;border:2px solid var(--rule);background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.aff .go:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.aff small{display:block;margin-top:11px;font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* faq */
.faq{margin:44px 0 0;padding-top:14px;border-top:2px solid var(--rule)}
.faq h2{font-family:var(--disp);font-weight:800;font-stretch:82%;font-size:clamp(23px,2.7vw,29px);margin:0 0 16px;border:0;padding:0}
.faq dt{font-family:var(--disp);font-weight:700;font-stretch:90%;font-size:18px;margin:20px 0 7px}
.faq dd{margin:0;color:var(--ink-2)}
.faq dd p:last-child{margin-bottom:0}

/* related + footer of article */
.rel{margin:40px 0 0;border-top:2px solid var(--rule);padding-top:14px}
.rel b{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px}
.rel ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rel li{border-bottom:1px solid var(--hair)}
.rel a{display:block;padding:10px 0;text-decoration:none;font-family:var(--disp);font-weight:600;font-stretch:88%;font-size:17px}
.rel a:hover{color:var(--signal-ink)}
.rel a span{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-3);margin-top:2px}

.pagefoot{margin:34px 0 0;padding:13px 0 0;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-3);line-height:1.5}
.pagefoot a{color:var(--ink-2)}

/* ─────────────────────────  tool pages  ───────────────────────── */
.tool{max-width:860px;margin:0 auto;padding:30px 0 10px}
.tool h1{font-size:clamp(30px,3.9vw,42px);font-stretch:80%}
.tool-intro{font-size:18px;color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.privacy-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);margin:0 0 24px}

.panel{border:2px solid var(--rule);background:var(--white);margin:26px 0}
.panel-hd{padding:9px 15px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.panel-b{padding:6px 15px 15px}

.q{display:block;padding:13px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.q:last-of-type{border-bottom:0}
.q input{position:absolute;opacity:0;width:1px;height:1px}
.q .box{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:0;align-items:start}
.q .tick{grid-column:1;grid-row:1 / span 2;width:22px;height:22px;border:2px solid var(--ink);background:var(--white);margin-top:2px;position:relative}
.q .box>b{grid-column:2;grid-row:1}
.q .box>span:not(.tick){grid-column:2;grid-row:2}
.q input:checked+.box .tick::after{content:"";position:absolute;inset:3px;background:var(--signal)}
.q input:focus-visible+.box .tick{outline:3px solid var(--signal);outline-offset:2px}
.q b{display:block;font-weight:500;font-size:16.5px;line-height:1.42}
.q span{display:block;font-size:14px;color:var(--ink-3);margin-top:3px;line-height:1.42}

.field{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
.field:last-of-type{border-bottom:0}
.field>b{display:block;font-weight:500;font-size:16.5px;margin-bottom:8px}
.field>span{display:block;font-size:14px;color:var(--ink-3);margin:-4px 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt i{display:block;font-style:normal;padding:9px 14px;border:2px solid var(--hair);background:var(--white);cursor:pointer;font-size:15px;min-height:44px;display:flex;align-items:center}
.opt input:checked+i{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.opt input:focus-visible+i{outline:3px solid var(--signal);outline-offset:2px}
.txtin{width:100%;padding:11px 12px;border:2px solid var(--hair);background:var(--white);font-family:var(--mono);font-size:15px;color:var(--ink);min-height:44px}
.txtin:focus{border-color:var(--ink);outline:none}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* result card — dark, big verdict */
.result{border:2px solid var(--rule);background:var(--ink);color:var(--paper);margin:26px 0}
.result-hd{padding:9px 16px;border-bottom:1px solid #2C333B;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.result-b{padding:18px 16px 20px}
.result-big{font-family:var(--disp);font-weight:800;font-stretch:76%;font-size:clamp(30px,5vw,46px);line-height:1.02;margin:0 0 12px;letter-spacing:-.01em}
.result-big.hot{color:#FF7A5E}
.result-big.mid{color:#F0C05A}
.result-big.cool{color:#7FD1B4}
.result p{margin:0 0 12px;color:#C9D0D7;font-size:16px;line-height:1.55}
.result p:last-child{margin-bottom:0}
.result ul{margin:0 0 12px;padding-inline-start:20px;color:#C9D0D7;font-size:15.5px}
.result li{margin:6px 0}
.result li b{color:var(--paper);font-weight:600}
.result .sig{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.result .sig span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border:1px solid #3E464F;color:#C9D0D7}
.result .sig span.on{border-color:#FF7A5E;color:#FF7A5E}
.result a{color:#FFB4A2}
.result-foot{padding:12px 16px;border-top:1px solid #2C333B;font-size:13px;color:var(--ink-4);line-height:1.5}

/* seo guide (collapsed) */
.guide{border-top:2px solid var(--rule);margin:36px 0 0}
.guide>summary{padding:13px 0;cursor:pointer;font-family:var(--disp);font-weight:700;font-stretch:86%;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.guide>summary::-webkit-details-marker{display:none}
.guide>summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--signal)}
.guide[open]>summary::after{content:"–"}
.guide .prose{padding:4px 0 12px;font-size:16.5px}
.guide .prose h3{margin-top:24px}

/* ─────────────────────────  index / listing pages  ───────────────────────── */
.page-hd{padding:32px 0 22px;border-bottom:3px solid var(--rule);margin-bottom:26px}
.page-hd h1{font-size:clamp(32px,4.4vw,50px);margin-bottom:12px}
.page-hd p{margin:0;font-size:18px;color:var(--ink-2);max-width:44em}

.section{margin:0 0 38px}
.section>h2{font-family:var(--disp);font-weight:800;font-stretch:80%;font-size:20px;text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 4px;padding-bottom:7px;border-bottom:2px solid var(--rule)}
.section>p.sub{margin:0 0 14px;padding-top:8px;font-size:15px;color:var(--ink-3)}

/* legal / static pages */
.doc{max-width:760px;margin:0 auto;padding:30px 0 10px}
.doc h1{font-size:clamp(30px,3.8vw,42px);font-stretch:80%}

/* ─────────────────────────  footer  ───────────────────────── */
.foot{border-top:3px solid var(--rule);background:var(--paper-2);margin-top:48px}
.foot-top{padding:30px 0 24px;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.55fr));gap:26px}
.foot-blurb{font-size:15px;color:var(--ink-2);line-height:1.55}
.foot-blurb b{font-family:var(--disp);font-weight:800;font-stretch:82%;font-size:17px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);display:block;margin-bottom:8px}
.foot-blurb a{color:var(--ink)}
.foot-col b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-col a{font-size:14.5px;text-decoration:none;color:var(--ink-2);border-bottom:1px solid transparent}
.foot-col a:hover{color:var(--ink);border-bottom-color:var(--signal)}
.foot-bar{border-top:1px solid var(--hair);padding:12px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}

/* ─────────────────────────  404  ───────────────────────── */
.oops{max-width:640px;margin:0 auto;padding:70px 0 90px;text-align:start}
.oops .code{font-family:var(--disp);font-weight:900;font-stretch:75%;font-size:110px;line-height:.85;color:var(--signal);margin:0 0 14px}

/* small utilities, so no page needs a style attribute */
.note-loose{margin-top:22px}
.note-loose p{margin:0 0 8px}
.note-loose p:last-child{margin-bottom:0}
.band-note{padding:16px 0 0}
.ledger-note{padding:14px 0 0}
.prose-narrow{max-width:44em;margin-top:34px}
.result-b b.lead{color:var(--white)}

/* ─────────────────────────  responsive  ───────────────────────── */
@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr;gap:22px}
  .foot-blurb{grid-column:1/-1}
}
@media(max-width:860px){
  body{font-size:16.5px}
  .hero{grid-template-columns:1fr}
  .hero-l{padding:22px 0 20px;border-right:0;border-bottom:1px solid var(--hair)}
  .hero-r{padding:20px 0 18px}
  .hero-l h1{font-size:clamp(30px,8.4vw,40px)}
  .lede{font-size:16px;margin-bottom:14px;line-height:1.5}
  .kicker{margin-bottom:10px}
  .slab{margin-top:18px}
  .slab-code{font-size:26px}
  .btn{padding:10px 14px;font-size:11.5px;min-height:44px;display:inline-flex;align-items:center}
  .strap .opt-hide{display:none}
  .nav{position:absolute;left:0;right:0;top:100%;z-index:20;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:3px solid var(--rule);padding:6px 0;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 24px;border-bottom:1px solid var(--hair);min-height:44px;display:flex;align-items:center}
  .mast>.wrap{position:relative}
  .burger{display:block;width:44px;height:44px}
  .lang{order:3;font-size:11px;gap:8px}
  .mast>.wrap{flex-wrap:wrap}
  /* Tap targets: measured at 360px the wordmark and the language links came in
     at 34px and 22px. Padding would have worked, but it raised the masthead
     enough to push the discount line on the pt-BR home page below the fold.
     An overlaid pseudo-element gets the finger a 44px target without occupying
     any layout space. */
  .brand,.lang a{position:relative}
  .brand::after,.lang a::after{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .facing{grid-template-columns:1fr}
  .facing>div+div{border-inline-start:0;border-top:1px solid var(--hair)}
  .figs>div+div{border-inline-start:0;border-top:1px solid var(--hair)}
  .tline div{grid-template-columns:78px 1fr;gap:10px}
  .fork div{grid-template-columns:1fr;gap:3px}
  .prose{font-size:17px}
  .prose h2{margin-top:36px}
}
@media(max-width:420px){
  :root{--pad:18px}
  .slab-code{font-size:23px;letter-spacing:.07em}
  .slab-body{gap:9px;padding:12px 12px 10px}
  .oops .code{font-size:80px}
}

@media print{
  .mast,.strap,.foot,.acts,.slab,.toolbar{display:none}
  body{background:#fff;font-size:12pt}
}
