:root{
  --brand:#d11522;--brand-dark:#a5101a;
  --ink:#15171a;--muted:#6b7280;--line:#e6e7e9;--bg:#ffffff;--soft:#f6f7f8;--ink2:#3b3f45;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Georgia","Times New Roman",Times,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wide{max-width:1120px;margin:0 auto;padding:0 24px}

/* Utility bar */
.utbar{background:var(--ink);color:#fff;font-size:.72rem;letter-spacing:.04em}
.utbar .wide{display:flex;align-items:center;justify-content:space-between;height:34px;text-transform:uppercase}
.utbar .ut-left{opacity:.8}
.utbar .ut-right{display:flex;gap:18px;align-items:center}
.utbar .ut-right a{opacity:.85}
.utbar .ut-right a:hover{opacity:1}

/* Masthead */
.masthead{border-bottom:1px solid var(--line);background:var(--bg)}
.mh-row{display:flex;align-items:center;justify-content:space-between;height:84px}
.mh-left,.mh-right{flex:1;display:flex;align-items:center;gap:18px}
.mh-right{justify-content:flex-end}
.icon-btn{width:22px;height:22px;color:var(--ink);cursor:pointer}
.logo{flex:0 0 auto;text-align:center;font-family:var(--serif);font-weight:700;font-size:2rem;letter-spacing:.01em;text-transform:uppercase}
.logo .accent{color:var(--brand)}
.subscribe{background:var(--brand);color:#fff;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;padding:9px 16px;border-radius:4px}
.subscribe:hover{background:var(--brand-dark)}

/* Main nav */
.mainnav{border-bottom:1px solid var(--line);background:var(--bg)}
.mainnav .wide{display:flex;gap:26px;align-items:center;height:46px;overflow-x:auto}
.mainnav a{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);white-space:nowrap;border-bottom:3px solid transparent;height:46px;display:flex;align-items:center}
.mainnav a:hover,.mainnav a.active{color:var(--brand);border-color:var(--brand)}

/* Article hero */
.article{padding:40px 0 8px}
.eyebrow{color:var(--brand);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.article h1{font-family:var(--serif);font-size:2.6rem;line-height:1.12;letter-spacing:-.01em;margin:0 0 16px}
.article .dek{font-size:1.2rem;color:var(--ink2);margin:0 0 22px;line-height:1.5}
.byline{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-size:.86rem;color:var(--muted)}
.byline .avatar{width:38px;height:38px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink2)}
.byline b{color:var(--ink)}
.hero-fig{margin:26px 0 0}
.hero-fig img{width:100%;height:auto;border-radius:6px;display:block}
.hero-fig figcaption{font-size:.78rem;color:var(--muted);margin-top:8px}

/* Article body (blog posts) */
.post-body{font-size:1.12rem;color:var(--ink);padding:8px 0}
.post-body h2{font-family:var(--serif);font-size:1.7rem;margin:34px 0 12px;letter-spacing:-.01em}
.post-body h3{font-family:var(--serif);font-size:1.3rem;margin:26px 0 10px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:0 0 8px}
.post-body a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.post-body img{border-radius:6px;margin:10px 0}
.post-body blockquote{margin:22px 0;padding:14px 20px;border-left:4px solid var(--brand);background:var(--soft);font-style:italic;border-radius:0 4px 4px 0}
.post-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.98rem}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post-body th{background:var(--soft);font-weight:700}

.intro{font-size:1.12rem;padding:26px 0 8px;color:var(--ink)}

/* How we tested / callout */
.tested{background:var(--soft);border-left:4px solid var(--brand);border-radius:4px;padding:22px 26px;margin:24px 0 8px}
.tested h2{font-family:var(--serif);font-size:1.35rem;margin:0 0 8px}
.tested p{margin:10px 0 0}
.tested .key{font-weight:600}

/* Cards */
.list{padding:14px 0 8px}
.card{border:1px solid var(--line);border-radius:8px;padding:24px;margin:22px 0;background:var(--bg)}
.card .prodimg{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:6px;background:var(--soft);margin-bottom:16px;display:block}
.card .rankrow{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.rank{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted)}
.card h3{font-family:var(--serif);font-size:1.5rem;margin:0;letter-spacing:-.01em}
.verdict{display:inline-block;font-size:.74rem;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.card p{margin:12px 0 0}
.proscons{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:.95rem}
.proscons ul{margin:6px 0 0;padding-left:18px}
.proscons h4{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* Winner */
.winner{border:2px solid var(--brand);position:relative;box-shadow:0 14px 34px rgba(209,21,34,.12)}
.winner .badge{position:absolute;top:-13px;left:24px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:4px}
.winner .rank{background:var(--brand);color:#fff;border-color:var(--brand)}
.cta{margin-top:22px}
.btn-cta{display:inline-block;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--brand);padding:17px 38px;border-radius:6px;font-size:1.05rem;text-transform:uppercase;box-shadow:0 8px 20px rgba(209,21,34,.26)}
.btn-cta:hover{background:var(--brand-dark)}

.closing{font-size:1.1rem;padding:18px 0 8px}
.closing h2{font-family:var(--serif);font-size:1.6rem;margin:0 0 10px}

/* Inline CTA block for blog posts */
.inline-cta{border:2px solid var(--brand);border-radius:8px;padding:22px 24px;margin:28px 0;background:linear-gradient(180deg,#fff, #fff5f5)}
.inline-cta h4{font-family:var(--serif);font-size:1.25rem;margin:0 0 6px}
.inline-cta p{margin:0 0 14px;font-size:1rem;color:var(--ink2)}

/* Blog index / latest grid */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:40px 0 14px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.section-head h2{font-family:var(--serif);font-size:1.5rem;margin:0}
.section-head a{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
.post-card{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);transition:box-shadow .15s,transform .15s}
.post-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
.post-card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--soft);display:block}
.post-card .pc-body{padding:16px 18px}
.post-card .pc-cat{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}
.post-card h3{font-family:var(--serif);font-size:1.14rem;line-height:1.25;margin:8px 0 8px}
.post-card .pc-meta{font-size:.76rem;color:var(--muted)}

/* Related posts */
.related{margin:34px 0 0}

/* Footer */
.site-footer{background:var(--ink);color:#cfd2d6;margin-top:56px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:36px;padding:48px 0 36px}
.foot-brand .flogo{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:#fff;text-transform:uppercase;margin-bottom:12px}
.foot-brand p{font-size:.86rem;line-height:1.6;margin:0 0 16px;color:#9aa0a6}
.socials{display:flex;gap:12px}
.socials a{width:34px;height:34px;border:1px solid #3a3e44;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#cfd2d6}
.socials a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.socials svg{width:16px;height:16px}
.fcol h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.fcol a{display:block;font-size:.88rem;color:#9aa0a6;margin-bottom:10px}
.fcol a:hover{color:#fff}
.fnews h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.fnews p{font-size:.86rem;color:#9aa0a6;margin:0 0 12px}
.fnews form{display:flex;gap:8px}
.fnews input{flex:1;min-width:0;padding:11px 12px;border-radius:5px;border:1px solid #3a3e44;background:#222629;color:#fff;font-size:.86rem}
.fnews button{background:var(--brand);color:#fff;border:0;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;padding:0 16px;border-radius:5px;cursor:pointer}
.fnews button:hover{background:var(--brand-dark)}
.foot-bottom{border-top:1px solid #2c3034}
.foot-bottom .wide{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;padding:18px 24px;font-size:.78rem;color:#80868c}
.foot-bottom .legal{display:flex;flex-wrap:wrap;gap:18px}
.foot-bottom a:hover{color:#fff}
.disclosure{font-style:italic}

@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.article h1{font-size:2rem}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}.logo{font-size:1.6rem}.mh-right .subscribe{display:none}.grid{grid-template-columns:1fr}}