:root{--ink:#12131a;--ink2:#2a2d3a;--muted:#5d6472;--line:#e4e6ec;--bg:#fff;--soft:#f5f6fa;--accent:#ff5a1f;--accent2:#7c5cff;--green:#14a06f;--red:#e0464c;--gold:#ffb400;--warn:#fff4c2;--r:16px;--shadow:0 1px 2px rgba(18,19,26,.06),0 8px 24px rgba(18,19,26,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:1.8rem;margin:2.6rem 0 1rem}h3{font-size:1.15rem}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.note{color:var(--muted);font-size:14px}.lede{font-size:1.2rem;color:var(--muted)}
/* disclosure + sample */
.disclosure-bar{background:var(--warn);border-bottom:1px solid #e9c64b;font-size:14px;padding:8px 0}.disclosure-bar a{color:var(--ink);font-weight:600}
.sample-banner{background:repeating-linear-gradient(45deg,#ffdf3d,#ffdf3d 14px,#ffd000 14px,#ffd000 28px);color:#111;text-align:center;font-weight:900;letter-spacing:.06em;padding:10px 16px;font-size:15px;border-bottom:2px solid #111}
.sample-banner span{background:#111;color:#ffdf3d;padding:2px 10px;border-radius:6px;margin-right:8px}
/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand img{height:30px;width:auto}
nav.main{display:flex;gap:4px;overflow-x:auto}
nav.main a{padding:8px 12px;border-radius:999px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
nav.main a:hover{background:var(--soft)}
.btn-nl{background:var(--ink);color:#fff!important}
/* hero */
.hero{position:relative;color:#fff;background:#12131a url(/assets/hero-bg.svg) center/cover no-repeat;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:.3em 0;font-weight:900}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#ff8a4c,#ffd23f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{color:#cfd2dc}
.hero .eyebrow{color:#ffd23f}
.hero-feature{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:22px;text-decoration:none;color:#fff;display:block;transition:transform .2s}
.hero-feature:hover{transform:translateY(-3px)}
.hero-feature img{width:78%;margin:0 auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.hero-feature h3{margin:.5em 0 .2em;font-size:1.3rem}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:800;text-decoration:none;font-size:16px;border:2px solid transparent;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-buy{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(255,90,31,.35)}
.btn-alt{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-ghost{background:var(--soft);color:var(--ink)}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:800}
.paid{display:inline-block;font-size:12px;color:var(--muted);margin-left:6px}
/* badges + score */
.badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#fff;background:var(--ink)}
.b-best{background:var(--green)}.b-budget{background:var(--accent2)}.b-premium{background:#c27c00}.b-new{background:var(--accent)}.b-sample{background:#ffd000;color:#111}
.score{--v:80;display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--v)*1%),#e6e8ee 0);flex:none}
.score b{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;font-size:18px;font-weight:900;color:var(--ink)}
.score.lg{width:110px;height:110px}.score.lg b{width:86px;height:86px;font-size:32px}
.score-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stars{--p:86%;display:inline-block;font-size:18px;letter-spacing:2px;background:linear-gradient(90deg,var(--gold) var(--p),#d6d9e0 var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
/* grids & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,19,26,.14)}
.pcard .thumb{background:linear-gradient(160deg,#f7f8fb,#eceef4);aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden}
.pcard .thumb img{max-height:88%;width:auto;object-fit:contain}
.pcard .thumb.cover img{width:100%;height:100%;max-height:none;object-fit:cover}
.pcard .badge{position:absolute;top:12px;left:12px}
.pcard .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{margin:0;font-size:1.15rem}.pcard p{margin:0;color:var(--muted);font-size:15px}
.pcard .meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;font-size:14px;color:var(--muted)}
.price{font-weight:900;color:var(--ink);font-size:1.1rem}
/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;color:#fff;text-decoration:none;min-height:150px;position:relative;overflow:hidden;transition:transform .2s}
.tile:hover{transform:translateY(-3px) rotate(-.4deg)}
.tile svg{width:40px;height:40px}
.tile strong{font-size:1.25rem}.tile span{opacity:.85;font-size:14px}
.tile::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.t1{background:linear-gradient(135deg,#7c5cff,#4f7bff)}.t2{background:linear-gradient(135deg,#ff5a1f,#ff9a3c)}.t3{background:linear-gradient(135deg,#14a06f,#5ccf8e)}.t4{background:linear-gradient(135deg,#e0464c,#ff7aa2)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:3rem 0 1.2rem}
.section-head h2{margin:0}.section-head a{font-weight:800;text-decoration:none}
/* trust strip */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem}
.trust div{background:var(--soft);border-radius:var(--r);padding:18px}.trust b{display:block;font-size:1.05rem;margin-bottom:4px}
/* review page */
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 0}.crumbs a{color:var(--muted);text-decoration:none}
.r-hero{background:linear-gradient(180deg,#f4f2ff,#fff);border-bottom:1px solid var(--line)}
.r-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:10px;padding-bottom:40px}
.r-hero h1{font-size:clamp(2rem,4vw,3rem);margin:.3em 0}
.r-hero .pimg{background:radial-gradient(circle at 50% 45%,#fff,#ebe8ff 70%);border-radius:28px;padding:20px;position:relative}
.r-hero .pimg img{filter:drop-shadow(0 24px 30px rgba(18,19,26,.25))}
.credit{font-size:12px;color:var(--muted);text-align:right;margin-top:6px}
.byline{display:flex;align-items:center;gap:12px;margin:14px 0;font-size:14px;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#fff;font-weight:900}
.byline b{color:var(--ink)}
.verdict{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:22px;box-shadow:8px 8px 0 var(--ink);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin:28px 0}
.verdict h2{margin:0 0 6px;font-size:1.4rem}.verdict p{margin:0}
.buyrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.buyrow .btn{min-width:200px}
@media (max-width:500px){.buyrow .btn{min-width:0;flex:1 1 60%}.newsletter{padding:24px}.hero h1{font-size:2.2rem}}
.pricebox{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:10px}.pricebox b{color:var(--ink);font-size:1.15rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.sticky-buy{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.sticky-buy img{width:60%;margin:0 auto 6px}
.sticky-buy .btn{width:100%;margin-top:8px}
.mobile-buy{display:none}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pros,.cons{border-radius:var(--r);padding:18px 20px}
.pros{background:#e9f8f1;border:1px solid #bfe9d6}.cons{background:#fdeeee;border:1px solid #f4c9cb}
.pros h3,.cons h3{margin-top:0}.pros ul,.cons ul{list-style:none;padding:0;margin:0}
.pros li,.cons li{padding-left:28px;position:relative;margin:8px 0}
.pros li::before{content:"✓";position:absolute;left:0;color:#fff;background:var(--green);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;top:3px}
.cons li::before{content:"✕";position:absolute;left:0;color:#fff;background:var(--red);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;top:3px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fit>div{border-radius:var(--r);padding:18px 20px;background:var(--soft)}
.fit .yes{border-top:5px solid var(--green)}.fit .no{border-top:5px solid var(--red)}
table{width:100%;border-collapse:separate;border-spacing:0;margin:1rem 0;font-size:15px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td,tr:last-child th{border-bottom:0}
thead th{background:var(--ink);color:#fff}
tbody th{background:var(--soft);width:38%;font-weight:700}
.table-scroll{overflow-x:auto}
.cmp td,.cmp th{text-align:center;vertical-align:middle}.cmp tbody th{text-align:left;width:auto}
.cmp thead th{background:#fff;color:var(--ink);border-bottom:2px solid var(--ink)}
.cmp thead img{height:90px;width:auto;margin:0 auto 6px}
.cmp .hl{background:#fff7ef}
.calc{background:var(--soft);border-radius:var(--r);padding:18px 20px}
.calc table{background:#fff}
.bar-row{display:grid;grid-template-columns:60px 1fr 48px;gap:10px;align-items:center;font-size:14px;margin:4px 0}
.bar-row i{display:block;height:10px;border-radius:5px;background:#e6e8ee;overflow:hidden}.bar-row i b{display:block;height:100%;background:var(--gold)}
.faq details{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:10px 0;background:#fff}
.faq summary{font-weight:800;cursor:pointer}
.sources{font-size:14px;list-style:none;padding-left:0}.sources li{margin:4px 0;word-break:break-word}
.inline-disclosure{background:var(--warn);border:1px solid #e9c64b;border-radius:12px;padding:10px 14px;font-size:14px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0;background:#fff;box-shadow:var(--shadow)}
.article{padding-bottom:20px}
.article-hero{background:linear-gradient(135deg,#6d5dfc,#22c1c3);color:#fff}
.article-hero .wrap{padding-top:36px;padding-bottom:36px}.article-hero h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0}.article-hero .crumbs,.article-hero .crumbs a{color:#e7e9ff}
.article-hero .byline,.article-hero .byline b{color:#fff}
/* newsletter */
.newsletter{margin:4rem 0 0;border-radius:28px;background:linear-gradient(135deg,#12131a 0%,#2a1f5c 60%,#7c5cff 100%);color:#fff;padding:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.newsletter::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,210,63,.18)}
.newsletter h2{margin:0 0 6px;font-size:2rem}.newsletter p{color:#d7d9e4;margin:6px 0}
.newsletter ul{margin:10px 0 0;padding-left:20px;color:#d7d9e4}
.nl-form{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.nl-form input{flex:1;min-width:200px;padding:14px;border-radius:12px;border:0;font-size:16px}
.nl-form button{padding:14px 18px;border:0;border-radius:12px;background:var(--gold);color:#111;font-weight:900;font-size:16px;opacity:.85}
.newsletter .note{color:#b9bdd0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{background:var(--ink);color:#b9bdd0;margin-top:4rem;padding:36px 0;font-size:14px}
footer a{color:#fff}footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
footer img{height:28px}
sup a{text-decoration:none}
@media (max-width:900px){
.hero .wrap,.r-hero .wrap,.layout,.newsletter{grid-template-columns:minmax(0,1fr)}
.r-hero .wrap>*{min-width:0}
.tiles{grid-template-columns:1fr 1fr}.grid-3,.trust{grid-template-columns:1fr}
.sticky-buy{display:none}
.mobile-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:10px 14px;gap:10px;align-items:center;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.mobile-buy .btn{flex:1;padding:12px}.mobile-buy small{display:block;font-size:11px;color:var(--muted)}
body.has-mobile-buy{padding-bottom:80px}
footer .cols{grid-template-columns:1fr}
.proscons,.fit{grid-template-columns:1fr}
.verdict{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--ink)}
nav.main a{padding:6px 10px;font-size:14px}
.brand img{height:24px}
.bar{height:56px}
}
/* ---- trust-first templates (phase 2) ---- */
.brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.tagline{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-top:3px}
.hero-trust{font-size:14px;color:var(--muted);margin:.2em 0 1em}.hero-trust a{color:var(--ink2);font-weight:700}
.trust-meta img.avatar{background:none;padding:0;border-radius:10px}
.trust-meta a{color:var(--accent2);font-weight:700}
.trust-meta.on-dark{color:#d9dbe6}.trust-meta.on-dark b{color:#fff}.trust-meta.on-dark a{color:#ffd23f}
.picks{display:grid;gap:14px;margin:12px 0 28px}
.pick{position:relative;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:30px 20px 18px;box-shadow:6px 6px 0 var(--ink)}
.pick.inline{margin:24px 0}
.pick-kind{position:absolute;top:-13px;left:16px;background:var(--green);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.pick h3{margin:0 0 4px;font-size:1.25rem}.pick p{margin:0;font-size:15px}
.pick .pick-price{margin-top:6px;font-weight:800;color:var(--ink)}
.pick-cta{text-align:center;min-width:200px}.pick-cta .btn,.pick-cta .cta{display:block}
.alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.alts .card p{font-size:15px}
table .cta{padding:8px 12px;font-size:14px;white-space:nowrap}
@media (max-width:640px){.pick{grid-template-columns:1fr}.pick-cta{min-width:0}.tagline{font-size:10px}}
.hero .hero-trust{color:#cfd2dc}.hero .hero-trust a{color:#ffd23f}
@media (max-width:640px){.tagline{white-space:nowrap;font-size:9.5px;letter-spacing:0}}