:root{
  --ink:#111111; --charcoal:#1b1b1b; --paper:#ffffff; --soft:#f4f4f1;
  --line:#deded8; --accent:#ef5a36; --accent-dark:#c93f22; --muted:#686864;
  --max:1180px; --radius:20px; --shadow:0 18px 55px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.67}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.topbar{background:var(--ink);color:#fff;font-size:.88rem;text-align:center;padding:9px 15px;letter-spacing:.01em}
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navwrap{height:74px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:900;letter-spacing:-.04em;font-size:1.27rem;white-space:nowrap}
.brand-mark{width:34px;height:24px;border:3px solid var(--ink);border-radius:4px;position:relative;box-shadow:inset 0 0 0 4px #fff;background:var(--accent)}
.brand-mark:after{content:"";position:absolute;width:14px;height:3px;background:var(--ink);bottom:-8px;left:7px;border-radius:2px}
.nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.nav a{text-decoration:none;font-weight:750;font-size:.93rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-dark)}
.nav-cta{background:var(--accent)!important;color:#fff!important;padding:11px 15px;border-radius:999px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:8px;font-size:1.6rem;line-height:1;cursor:pointer}
.hero{background:linear-gradient(135deg,#111 0%,#272727 58%,#432014 100%);color:white;padding:66px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffb29d;font-size:.81rem;text-transform:uppercase;letter-spacing:.13em;font-weight:850}
.eyebrow:before{content:"";width:25px;height:2px;background:var(--accent)}
h1,h2,h3{line-height:1.12;letter-spacing:-.035em}
h1{font-size:clamp(2.6rem,6vw,5.1rem);margin:.3em 0 .28em}
h2{font-size:clamp(2rem,4vw,3.15rem);margin:0 0 .55em}
h3{font-size:1.35rem;margin:0 0 .45em}
.lede{font-size:1.17rem;color:#d8d8d4;max-width:720px}
.hero-media{position:relative}
.hero-media img{border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:white}
.hero-media:after{content:"Independent buyer's guide";position:absolute;right:-15px;bottom:-18px;background:var(--accent);color:white;padding:10px 15px;border-radius:999px;font-weight:850;font-size:.82rem;box-shadow:var(--shadow)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:14px 19px;border-radius:999px;font-weight:850;border:1px solid transparent;transition:.18s transform,.18s background}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:var(--accent-dark)}
.btn-light{background:white;color:var(--ink)}
.btn-outline{border-color:var(--line);background:transparent}
main section{padding:70px 0}
.section-soft{background:var(--soft)}
.section-dark{background:var(--ink);color:white}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 7px 25px rgba(0,0,0,.04)}
.card.dark{background:#1c1c1c;border-color:#333;color:white}
.card p:last-child{margin-bottom:0}
.card-link{text-decoration:none;display:block;transition:.18s transform,.18s box-shadow}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-dark);font-weight:900}
.meta{color:var(--muted);font-size:.92rem}
.prose{max-width:840px;margin:0 auto}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.4em}
.prose p,.prose li{font-size:1.03rem}
.prose table,.compare-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem}
.prose th,.prose td,.compare-table th,.compare-table td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose th,.compare-table th{background:var(--soft)}
.table-scroll{overflow-x:auto}
.callout{border-left:5px solid var(--accent);background:#fff5f1;padding:19px 22px;border-radius:0 14px 14px 0;margin:28px 0}
.notice{background:#f8f8f6;border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:#444}
.checklist{list-style:none;padding:0}
.checklist li{padding-left:29px;position:relative;margin:.62em 0}
.checklist li:before{content:"✓";position:absolute;left:0;color:var(--accent-dark);font-weight:900}
.product-rail{display:grid;grid-template-columns:180px 1fr auto;gap:22px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:18px;margin:36px 0;background:white;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.product-rail img{border-radius:13px}
.product-rail .rail-copy p{margin:.25em 0;color:var(--muted)}
.breadcrumbs{font-size:.87rem;color:var(--muted);padding:20px 0 0}
.breadcrumbs a{text-decoration:none}
.article-head{padding:44px 0 25px}
.article-head h1{font-size:clamp(2.45rem,5.2vw,4.8rem);max-width:960px}
.article-head .lede{color:var(--muted);max-width:780px}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#333;border:1px solid #333;border-radius:18px;overflow:hidden;margin-top:35px}
.feature-strip div{background:#171717;padding:18px;color:white}
.feature-strip strong{display:block;color:#ffb29d;font-size:1.22rem}
.related{border-top:1px solid var(--line);margin-top:55px;padding-top:34px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{background:var(--soft);border-radius:14px;padding:16px 18px;text-decoration:none;font-weight:760}
.related a:hover{background:#ecece7}
.disclosure{font-size:.88rem;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:20px 0}
.site-footer{background:#0f0f0f;color:#d4d4d1;padding:58px 0 26px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.site-footer a{color:#eee;text-decoration:none}
.footer-links{display:grid;gap:9px}
.footer-bottom{border-top:1px solid #333;margin-top:34px;padding-top:20px;font-size:.84rem;color:#999}
.promo-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.91)}
.promo-overlay.is-open{display:flex}
.promo-panel{position:relative;width:min(1080px,100%);max-height:min(88vh,760px);overflow:auto;background:#141414;color:white;border:1px solid #333;border-radius:26px;box-shadow:0 35px 110px rgba(0,0,0,.6);display:grid;grid-template-columns:1fr 1fr}
.promo-media{background:white;display:flex;align-items:center;justify-content:center;padding:20px}
.promo-media img{border-radius:14px}
.promo-copy{padding:48px;display:flex;flex-direction:column;justify-content:center}
.promo-copy h2{font-size:clamp(2.1rem,4.5vw,4rem)}
.promo-close{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;border:1px solid #555;background:#222;color:white;font-size:1.3rem;cursor:pointer;z-index:2}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.badge{border:1px solid #444;border-radius:999px;padding:7px 10px;font-size:.82rem}
.image-link{display:block;text-decoration:none}
.compare-note{font-size:.84rem;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{border:1px solid var(--line);border-radius:16px;padding:18px}
.stat strong{font-size:1.4rem;display:block}
.quote{font-size:1.2rem;padding:25px;border-radius:18px;background:#171717;color:#f2f2ef;border-left:5px solid var(--accent)}
@media (max-width:900px){
  .hero-grid,.grid-2,.promo-panel{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4,.stat-grid,.feature-strip{grid-template-columns:1fr 1fr}
  .nav{position:absolute;left:0;right:0;top:74px;background:white;display:none;flex-direction:column;align-items:stretch;padding:20px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.08)}
  .nav.open{display:flex}
  .menu-btn{display:block}
  .product-rail{grid-template-columns:120px 1fr}
  .product-rail .btn{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .promo-copy{padding:30px}
}
@media (max-width:620px){
  .container{width:min(calc(100% - 26px),var(--max))}
  .hero{padding:42px 0 52px}
  h1{font-size:2.65rem}
  main section{padding:52px 0}
  .grid-3,.grid-4,.stat-grid,.feature-strip,.related-grid{grid-template-columns:1fr}
  .product-rail{grid-template-columns:1fr}
  .product-rail img{max-height:210px;margin:auto}
  .footer-grid{grid-template-columns:1fr}
  .promo-overlay{padding:10px}
  .promo-panel{max-height:95vh}
  .promo-copy{padding:26px 22px 30px}
  .promo-media{padding:12px}
  .hero-media:after{right:8px}
}