:root{--bg:#f6f7f4;--fg:#15191d;--muted:#5d6670;--accent:#0b6e4f;--accent-2:#0e8a63;--accent-soft:#e3f1ea;--card:#fff;--line:#e2e5e0;--gold:#d4a017;--warn:#b54708}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}.wrap.narrow{max-width:820px}
a{color:var(--accent)}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
.site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--fg)}
nav a{margin-left:22px;text-decoration:none;color:var(--muted);font-weight:500}nav a:hover{color:var(--fg)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;color:var(--accent);margin:0 0 10px}
.hero{background:linear-gradient(135deg,#0b3d2e 0%,#0b6e4f 60%,#13a06f 100%);color:#fff;padding:72px 0 64px}
.hero .eyebrow{color:#a7f3d0}.hero h1{font-size:2.6rem;max-width:720px;margin:0 0 14px}.lede{font-size:1.15rem;max-width:620px;opacity:.9;margin:0}
.section-title{margin:44px 0 18px;font-size:1.4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding-bottom:56px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--fg);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(16,24,40,.08)}
.card-art{background:linear-gradient(180deg,#eef2ee,#e2e8e3);padding:22px 28px;display:grid;gap:10px}
.card-art svg{width:100%;height:auto;display:block}
.card-body{padding:18px 20px 20px}.card-body h3{margin:6px 0 8px;font-size:1.2rem}.card-body p{color:var(--muted);font-size:.95rem;margin:0 0 12px}
.card-meta{font-size:.82rem;color:var(--muted)}
.tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:700}
.guide-hero{background:var(--card);border-bottom:1px solid var(--line);padding:46px 0 30px}
.guide-hero h1{font-size:2.3rem;margin:0 0 12px}.meta{color:var(--muted);font-size:.92rem;margin:0}
.disclosure-note{font-size:.78rem;color:var(--muted);margin:0 0 8px}
.guide{padding:30px 22px 64px}.intro{font-size:1.15rem}
.guide section h2,.how h2{margin-top:40px;font-size:1.55rem}
.quick-picks{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 20px 12px;margin:28px 0}
.quick-picks h2{font-size:1.1rem;margin:16px 0 6px!important}
.quick-picks table{width:100%;border-collapse:collapse}
.quick-picks td{padding:10px 8px;border-top:1px solid var(--line);vertical-align:middle}
.qp-img{width:110px}.qp-img svg,.qp-img img{width:100px;height:auto;display:block}
.qp-name{display:block;font-weight:700;color:var(--fg);text-decoration:none;margin-top:4px}.qp-name:hover{color:var(--accent)}
.qp-score{width:130px}
.products{list-style:none;padding:0;margin:36px 0 0}
.product{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 0 28px;overflow:hidden;scroll-margin-top:80px}
.product-top{display:grid;grid-template-columns:280px 1fr;gap:26px;padding:24px;border-bottom:1px solid var(--line)}
.product-art{background:linear-gradient(180deg,#f1f4f1,#e3e9e4);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:26px 18px;min-height:170px}
.product-art svg,.product-art img{width:100%;height:auto;max-height:200px;object-fit:contain}
.rank-row{display:flex;align-items:center;gap:10px}
.rank{font-weight:800;color:#fff;background:var(--fg);border-radius:6px;padding:1px 8px;font-size:.85rem}
.badge{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px}
.product-headline h2{margin:10px 0 8px;font-size:1.45rem}
.score{display:flex;align-items:center;gap:10px;font-size:.9rem}.score b{font-size:1.05rem}
.bar{flex:1;max-width:140px;height:8px;background:#e7ebe7;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.best-for{font-size:.95rem;color:var(--muted);margin:10px 0 14px}.best-for b{color:var(--fg)}
.product-body{padding:8px 24px 22px}
.specs{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.specs th,.specs td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.specs th{width:38%;color:var(--muted);font-weight:600;background:#fafbf9}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.pc>div{border-radius:10px;padding:12px 16px}.pros{background:#effaf4}.cons{background:#fdf4ec}
.pc h4{margin:0 0 6px;font-size:.9rem}.pros h4{color:var(--accent)}.cons h4{color:var(--warn)}
.pc ul{margin:0;padding-left:18px;font-size:.93rem}
.verdict{border-left:4px solid var(--accent);background:var(--bg);padding:12px 16px;border-radius:0 10px 10px 0;margin:18px 0 0}
.cta{display:inline-block;background:var(--gold);color:#1a1300;padding:11px 20px;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.cta:hover{filter:brightness(1.06)}.cta.small{padding:7px 12px;font-size:.85rem;white-space:nowrap}
.how ul{padding-left:18px}.how h3{margin-bottom:4px;font-size:1rem}
.site-footer{background:#0f1a16;color:#b8c4be;font-size:.85rem;padding:30px 0}
.foot-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:1rem;margin-bottom:6px}
@media(max-width:760px){
  .hero{padding:48px 0}.hero h1{font-size:1.9rem}.guide-hero h1{font-size:1.7rem}
  .product-top{grid-template-columns:1fr}.pc{grid-template-columns:1fr}
  .qp-img,.qp-score{display:none}
}
.logo span{white-space:nowrap}
@media(max-width:760px){.logo{font-size:1rem}nav a{margin-left:14px}.quick-picks{padding:2px 14px 8px}}
.meta a{color:inherit}