@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{
  --bg:#fafaf9; --surface:#fff; --surface-2:#f2f1ef; --line:#e6e4e0; --ink:#1c1b19; --muted:#5f5b54;
  --accent:#2563eb; --accent-bg:#eaf1fe; --good:#15803d; --good-bg:#e7f6ec; --warn:#b45309; --warn-bg:#fdf3e4;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141412; --surface:#1d1c1a; --surface-2:#262522; --line:#34322e; --ink:#eeece8; --muted:#a8a49c;
    --accent:#60a5fa; --accent-bg:#172338; --good:#4ade80; --good-bg:#15291d; --warn:#fbbf24; --warn-bg:#2d2412; }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 'IBM Plex Sans',system-ui,sans-serif;}
a{color:var(--accent);}
.top{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5;}
.top-in{max-width:760px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:16px; justify-content:space-between;}
.brand{font:800 1.15rem/1 'Archivo',system-ui,sans-serif; color:var(--ink); text-decoration:none; letter-spacing:-0.02em;}
.brand span{color:var(--accent);}
.top-cta{font-size:0.88rem; font-weight:600; text-decoration:none; background:var(--accent); color:#fff; padding:8px 14px; border-radius:99px; white-space:nowrap;}
main{max-width:760px; margin:0 auto; padding:28px 16px 60px;}
.crumbs{font-size:0.82rem; color:var(--muted); margin-bottom:10px;}
.crumbs a{color:var(--muted);}
h1{font:800 clamp(1.8rem,5vw,2.5rem)/1.15 'Archivo',system-ui,sans-serif; letter-spacing:-0.02em; margin:0 0 12px; text-wrap:balance;}
h2{font:700 1.45rem/1.25 'Archivo',system-ui,sans-serif; margin:40px 0 10px; letter-spacing:-0.01em;}
h3{font:700 1.1rem/1.3 'Archivo',system-ui,sans-serif; margin:26px 0 6px;}
.lede{font-size:1.1rem; color:var(--muted); margin:0 0 8px;}
.meta{font-size:0.82rem; color:var(--muted); margin-bottom:26px;}
.tldr{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:16px 20px; margin:22px 0;}
.tldr strong{display:block; margin-bottom:6px;}
.tldr ul{margin:0; padding-left:20px;}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0;}
.compare div{border-radius:10px; padding:12px 14px; font-size:0.93rem;}
.compare .bad{background:var(--warn-bg);} .compare .good{background:var(--good-bg);}
.compare b{display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;}
.compare .bad b{color:var(--warn);} .compare .good b{color:var(--good);}
@media (max-width:560px){ .compare{grid-template-columns:1fr;} }
table{width:100%; border-collapse:collapse; font-size:0.92rem; margin:14px 0; display:block; overflow-x:auto;}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
th{background:var(--surface-2); font-weight:600;}
.cta{background:var(--accent-bg); border-radius:14px; padding:22px; margin:40px 0 10px; text-align:center;}
.cta p{margin:0 0 12px; font-weight:600;}
.cta a{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; padding:11px 20px; border-radius:99px;}
.sources{font-size:0.85rem; color:var(--muted); border-top:1px solid var(--line); margin-top:40px; padding-top:14px;}
.sources ol{padding-left:20px;}
.cards{display:grid; gap:14px; margin:22px 0;}
.card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--ink);}
.card:hover{border-color:var(--accent);}
.card h2{margin:0 0 6px; font-size:1.2rem;}
.card p{margin:0; color:var(--muted); font-size:0.95rem;}
footer{border-top:1px solid var(--line); font-size:0.85rem; color:var(--muted);}
footer div{max-width:760px; margin:0 auto; padding:18px 16px;}
footer a{color:var(--muted);}