:root{--paper:#f2f5f7;--card:#fff;--ink:#14202b;--mute:#4a5a68;--line:#cfd8df;--mark:#ffd84d;--teal:#0f6b63;--plum:#6b2d5c;--ph:#ffe9a8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800}
h2{font-size:1.6rem;font-weight:700;margin-top:2.2em}
h3{font-size:1.2rem;font-weight:700}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--plum)}
:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.read{max-width:70ch}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--mark);padding:8px;z-index:9}
header.site{border-bottom:1px solid var(--line);background:var(--card)}
header.site .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.brand{font:800 1.35rem "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none}
.brand span{background:var(--mark);padding:0 .2em}
nav.main ul{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;margin:0;padding:0;font-size:.95rem}
nav.main a{color:var(--ink);text-decoration:none;padding:6px 0;display:inline-block}
nav.main a:hover,nav.main a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--mark)}
main{padding:32px 0 56px}
.crumbs{font-size:.9rem;color:var(--mute);margin-bottom:12px}
.dek{font-size:1.2rem;color:var(--mute);max-width:62ch}
.meta{font-size:.9rem;color:var(--mute)}
.disclose{font-size:.92rem;border-left:4px solid var(--teal);background:var(--card);padding:10px 14px;margin:18px 0;max-width:70ch}
.caveat{border-left:4px solid var(--plum);background:#f6eef3;padding:10px 14px;margin:18px 0;max-width:70ch}
.verdict{background:var(--mark);border:2px solid var(--ink);padding:20px 22px;margin:26px 0;box-shadow:6px 6px 0 var(--ink)}
.verdict h2{margin:0 0 .4em;font-size:1.25rem}
.verdict ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.verdict li b{font-family:"Bricolage Grotesque",sans-serif}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);margin:14px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
caption{text-align:left;font-weight:700;padding:10px 12px;font-family:"Bricolage Grotesque",sans-serif}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line)}
tbody th{white-space:nowrap}
thead th{background:var(--ink);color:#fff}
.note{font-size:.88rem;color:var(--mute)}
.proscons{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.tool{background:var(--card);border:1px solid var(--line);padding:16px 18px;margin:14px 0}
.tool h3{margin-bottom:.4em}
.tool h4{margin:.6em 0 .2em;font-size:.95rem}
.tool ul{margin:0;padding-left:1.1em}
.who{display:grid;gap:10px;padding:0;list-style:none;margin:0}
.who li{background:var(--card);border:1px solid var(--line);padding:12px 16px}
.who b{display:block}
details{background:var(--card);border:1px solid var(--line);padding:10px 14px;margin:8px 0}
summary{cursor:pointer;font-weight:700}
.sources li,.related li{margin:.3em 0}
mark.ph{background:var(--ph);padding:0 .2em;outline:1px dashed #b58a00}
.hero{padding:20px 0 8px}
.picker{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));list-style:none;padding:0;margin:22px 0}
.picker a{display:block;background:var(--card);border:2px solid var(--ink);padding:14px 16px;color:var(--ink);text-decoration:none;font-weight:700}
.picker a:hover{background:var(--mark);color:var(--ink)}
.picker small{display:block;font-weight:400;color:var(--mute)}
.hubs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.hub{background:var(--card);border:1px solid var(--line);padding:16px 18px}
.hub p{margin:.2em 0 0;color:var(--mute);font-size:.95rem}
footer.site{border-top:1px solid var(--line);background:var(--card);font-size:.92rem;padding:26px 0}
footer.site ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0 0 12px}
.signup{background:var(--ink);color:#fff;padding:22px;margin:40px 0}
.signup a{color:var(--mark)}
@media(max-width:640px){body{font-size:17px}.proscons{grid-template-columns:1fr}.verdict{box-shadow:4px 4px 0 var(--ink)}}
@media(prefers-reduced-motion:no-preference){.picker a{transition:background .15s}}
/* ---- motion + hero duel ---- */
.hero{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center;padding:28px 0 8px}
.herotext h1{max-width:12ch}
.duel{position:relative;min-height:300px;background:var(--ink);color:#fff;padding:22px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--mark);overflow:hidden}
.slide{display:none;flex-direction:column;gap:14px;min-height:256px}
.slide.on{display:flex}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid #fff;padding:4px 12px;font:700 1.05rem "Bricolage Grotesque",sans-serif}
.stamp{align-self:flex-start;background:var(--mark);color:var(--ink);font:800 1.1rem "Bricolage Grotesque",sans-serif;padding:4px 14px;transform:rotate(-4deg)}
.ans{margin:0;font-size:1.12rem;line-height:1.45}
.go{color:var(--mark);font-weight:700;margin-top:auto}
.slide.on .chip{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.18s)}
.slide.on .stamp{animation:slam .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:.85s}
.slide.on .ans{animation:fade .6s ease both;animation-delay:1.25s}
.slide.on .go{animation:fade .6s ease both;animation-delay:1.5s}
.duel::after{content:"";position:absolute;left:0;bottom:0;height:4px;background:var(--mark);width:100%;transform-origin:left;transform:scaleX(0)}
.duel.run::after{animation:bar 5s linear infinite}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slam{from{opacity:0;transform:scale(2.4) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bar{to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.picker li{animation:pop .5s ease both}
.picker li:nth-child(1){animation-delay:.1s}.picker li:nth-child(2){animation-delay:.16s}.picker li:nth-child(3){animation-delay:.22s}.picker li:nth-child(4){animation-delay:.28s}.picker li:nth-child(5){animation-delay:.34s}.picker li:nth-child(6){animation-delay:.4s}.picker li:nth-child(7){animation-delay:.46s}.picker li:nth-child(8){animation-delay:.52s}.picker li:nth-child(9){animation-delay:.58s}.picker li:nth-child(10){animation-delay:.64s}
.picker a{transition:transform .15s,box-shadow .15s,background .15s}
.picker a:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.verdict{animation:vpop .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes vpop{from{opacity:0;transform:translateY(18px);box-shadow:0 0 0 var(--ink)}to{opacity:1;transform:none;box-shadow:6px 6px 0 var(--ink)}}
tbody tr:hover{background:#fff8d9}
.hub{transition:transform .15s,border-color .15s}.hub:hover{transform:translateY(-3px);border-color:var(--ink)}
@media(max-width:820px){.hero{grid-template-columns:1fr}.herotext h1{max-width:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.duel::after{display:none}}
.steps{list-style:none;counter-reset:s;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0;margin:14px 0}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);padding:14px 16px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;background:var(--mark);border:2px solid var(--ink);font:800 .95rem "Bricolage Grotesque",sans-serif;margin-bottom:8px}
.steps b,.steps span{display:block}.steps span{color:var(--mute);font-size:.95rem}
.trust{border:2px solid var(--ink);background:var(--card);padding:20px 22px;margin:28px 0;max-width:70ch}
.cta{display:inline-block;background:var(--ink);color:#fff;padding:10px 18px;text-decoration:none;font-weight:700;border:2px solid var(--ink)}
.cta:hover{background:var(--mark);color:var(--ink)}
.verdict .cta{background:var(--ink);color:#fff;margin-top:8px}
.try{background:var(--mark);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);margin:2px 4px 8px 0}
.try:hover{background:var(--ink);color:#fff}
.trybar{display:flex;flex-wrap:wrap;gap:6px}