/* OffGrid Masterplan — article page design system
   Tokens lifted from production CSS (index-BF8XD-P4.css) */
:root{
  --bg:hsl(45,29%,97%); --fg:hsl(120,4%,10%);
  --card:hsl(0,0%,100%); --card-fg:hsl(120,4%,10%);
  --primary:hsl(139,23%,36%); --primary-fg:hsl(45,29%,97%);
  --secondary:hsl(35,25%,88%); --secondary-fg:hsl(139,23%,20%);
  --muted:hsl(35,15%,90%); --muted-fg:hsl(139,10%,40%);
  --accent:hsl(32,95%,44%); --accent-fg:hsl(45,29%,97%);
  --border:hsl(139,10%,85%); --radius:.5rem;
  --amber:#f59e0b; --amber-cta:#ff9900; --amber-cta-hv:#e8890c;
  --green-soft:hsl(139,23%,94%); --amber-soft:hsl(38,92%,95%);
  --red:hsl(0,72%,45%); --red-soft:hsl(0,80%,96%);
  --shadow:0 1px 2px rgb(30 41 34 / .05),0 8px 24px -12px rgb(30 41 34 / .18);
  --shadow-lg:0 2px 6px rgb(30 41 34 / .06),0 18px 44px -18px rgb(30 41 34 / .28);
}
.dark{
  --bg:hsl(120,4%,10%); --fg:hsl(45,29%,97%);
  --card:hsl(120,5%,14%); --card-fg:hsl(45,29%,97%);
  --primary:hsl(139,23%,45%); --primary-fg:hsl(45,29%,97%);
  --secondary:hsl(120,5%,20%); --secondary-fg:hsl(45,29%,97%);
  --muted:hsl(120,5%,18%); --muted-fg:hsl(139,10%,60%);
  --accent:hsl(32,95%,50%); --border:hsl(120,5%,22%);
  --green-soft:hsl(139,20%,17%); --amber-soft:hsl(38,40%,16%);
  --red-soft:hsl(0,40%,18%);
  --shadow:0 1px 2px rgb(0 0 0/.3),0 10px 28px -12px rgb(0 0 0/.5);
  --shadow-lg:0 2px 6px rgb(0 0 0/.35),0 20px 48px -18px rgb(0 0 0/.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-top:2.6em;scroll-margin-top:96px}
h2 .h2-kicker{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
h3{font-size:1.25rem;font-weight:700;margin-top:1.8em;scroll-margin-top:96px}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
li{margin:.35em 0}
strong{font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* --- header --- */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;color:var(--fg)}
.brand svg{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:22px;font-size:.92rem}
.nav a{color:var(--fg);opacity:.8}.nav a:hover{opacity:1;text-decoration:none;color:var(--primary)}
.theme-btn{margin-left:6px;border:1px solid var(--border);background:var(--card);color:var(--fg);
  width:36px;height:36px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
@media(max-width:860px){.nav{display:none}}

/* --- article hero --- */
.crumb{padding:22px 0 0;font-size:.88rem}
.crumb a{color:var(--primary);font-weight:600}
.article-head{max-width:820px;margin:0 auto;padding:26px 20px 0;text-align:left}
.hero-img{margin:26px auto 0;max-width:820px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-img img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.byline{display:flex;gap:14px;align-items:center;background:var(--green-soft);
  border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:22px;
  font-size:.9rem;color:var(--muted-fg)}
.byline b{color:var(--fg)}
.byline .avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);
  display:grid;place-items:center;color:var(--primary-fg);flex:none}
.byline blockquote{margin:.4em 0 0;font-style:italic}

/* --- layout w/ TOC --- */
.layout{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:230px minmax(0,1fr) 0;gap:44px}
.toc{position:sticky;top:92px;align-self:start;margin-top:52px;font-size:.86rem;
  max-height:calc(100vh - 120px);overflow:auto}
.toc b{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-fg);margin-bottom:10px}
.toc a{display:block;color:var(--muted-fg);padding:5px 0 5px 14px;border-left:2px solid var(--border)}
.toc a:hover{color:var(--primary);text-decoration:none;border-color:var(--primary)}
.prose{max-width:780px;padding-bottom:40px}
@media(max-width:1020px){.layout{grid-template-columns:minmax(0,1fr)}.toc{display:none}}

/* --- components --- */
.lede{font-size:1.14rem;color:var(--muted-fg)}
.callout{border-radius:12px;padding:16px 18px;margin:1.6em 0;font-size:.95rem;border:1px solid var(--border)}
.callout.tip{background:var(--green-soft);border-left:4px solid var(--primary)}
.callout.warn{background:var(--amber-soft);border-left:4px solid var(--accent)}
.callout.danger{background:var(--red-soft);border-left:4px solid var(--red)}
.callout b.lbl{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35em}
.callout.tip b.lbl{color:var(--primary)}.callout.warn b.lbl{color:var(--accent)}.callout.danger b.lbl{color:var(--red)}
.callout p:last-child{margin-bottom:0}

table.cmp{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem;background:var(--card);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table.cmp th{background:var(--primary);color:var(--primary-fg);text-align:left;padding:11px 14px;font-size:.85rem}
table.cmp td{padding:11px 14px;border-top:1px solid var(--border);vertical-align:top}
table.cmp tr:nth-child(even) td{background:color-mix(in srgb,var(--muted) 35%,transparent)}
.tick{color:var(--primary);font-weight:700}.cross{color:var(--red);font-weight:700}

/* quick picks */
.quickpicks{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:20px;margin:1.8em 0}
.quickpicks h3{margin-top:0}
.qp-row{display:grid;gap:2px 14px;align-items:center;
  padding:12px 0;border-top:1px dashed var(--border)}
.qp-row:first-of-type{border-top:0}
.qp-row .qp-medal{width:38px;height:38px;border-radius:10px;background:var(--amber-soft);
  display:grid;place-items:center;font-size:1.1rem}
.qp-row .qp-desc{color:var(--muted-fg)}
.qp-row .qp-link{white-space:nowrap;font-weight:700}

/* product card */
.product-card{display:grid;grid-template-columns:200px 1fr;background:var(--card);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;margin:1.5em 0 2em}
.pc-media{background:#fff;display:grid;place-items:center;padding:14px;border-right:1px solid var(--border)}
.pc-media img{max-height:170px;object-fit:contain;mix-blend-mode:multiply}
.dark .pc-media{background:hsl(0,0%,96%)}
.pc-body{padding:16px 18px 14px}
.pc-badge{display:inline-block;background:var(--accent);color:var(--accent-fg);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;margin-bottom:8px}
.pc-name{font-size:1.02rem;margin:0 0 6px}
.pc-rating{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.pc-rating .star{width:16px;height:16px}
.pc-score{font-weight:800;font-size:.92rem}
.pc-count{color:var(--muted-fg);font-size:.8rem}
.pc-points{margin:0 0 10px;padding-left:1.15em;font-size:.88rem;color:var(--fg)}
.pc-points li{margin:.2em 0}
.pc-con{font-size:.84rem;color:var(--muted-fg);margin:0 0 12px}
.pc-buyrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px dashed var(--border);padding-top:12px}
.pc-price{font-size:1.3rem;font-weight:800;line-height:1.1}
.pc-store{display:block;font-size:.72rem;font-weight:600;color:var(--muted-fg)}
.pc-buy{display:inline-flex;align-items:center;gap:7px;background:var(--amber-cta);color:#231a04;
  font-weight:800;font-size:.92rem;padding:11px 20px;border-radius:99px;box-shadow:0 2px 8px rgb(255 153 0/.35);
  transition:transform .12s ease,background .12s ease}
.pc-buy:hover{background:var(--amber-cta-hv);text-decoration:none;transform:translateY(-1px)}
@media(max-width:640px){.product-card{grid-template-columns:1fr}.pc-media{border-right:0;border-bottom:1px solid var(--border)}}

/* store bar */
.store-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--secondary);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;margin:1.6em 0;font-size:.85rem;color:var(--secondary-fg)}
.store-bar .chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.store-chip{border:1px solid var(--border);background:var(--card);color:var(--fg);
  font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:99px;cursor:pointer}
.store-chip.on{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}

/* kit builder */
.kit{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  padding:20px 22px;margin:1.8em 0}
.kit h3{margin-top:0}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 18px}
.kit label{display:flex;gap:10px;align-items:baseline;font-size:.9rem;padding:7px 9px;border-radius:9px;cursor:pointer}
.kit label:hover{background:var(--muted)}
.kit input{accent-color:var(--primary);width:16px;height:16px;transform:translateY(2px)}
.kit .k-price{margin-left:auto;font-weight:700;font-size:.84rem;color:var(--muted-fg);white-space:nowrap}
.kit-total{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--border);
  margin-top:16px;padding-top:14px;flex-wrap:wrap}
.kit-num{font-size:2rem;font-weight:800;color:var(--primary)}
.kit-sub{color:var(--muted-fg);font-size:.85rem}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:.7em 0;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--accent);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;margin:0;font-size:.95rem;color:var(--muted-fg)}

/* tools strip */
.tools-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:1.4em 0}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;
  box-shadow:var(--shadow);transition:transform .12s ease}
.tool-card:hover{transform:translateY(-2px);text-decoration:none}
.tool-card .ic{width:36px;height:36px;border-radius:10px;background:var(--green-soft);color:var(--primary);
  display:grid;place-items:center;margin-bottom:10px}
.tool-card b{display:block;color:var(--fg);font-size:.95rem;margin-bottom:4px}
.tool-card span{font-size:.82rem;color:var(--muted-fg)}

/* share */
.share{display:flex;gap:10px;align-items:center;margin:2em 0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.88rem;color:var(--muted-fg)}
.share a,.share button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:var(--card);color:var(--fg);font-size:.82rem;font-weight:700;padding:7px 14px;border-radius:99px;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}

/* related + author */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:1.2em 0}
.rel-card{background:var(--secondary);border-radius:12px;padding:14px 16px;color:var(--secondary-fg)}
.rel-card:hover{text-decoration:none;box-shadow:var(--shadow)}
.rel-card b{display:block;color:var(--fg);font-size:.92rem}
.rel-card span{font-size:.8rem;color:var(--muted-fg)}
.author-box{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:12px;padding:20px;margin:2em 0;font-size:.92rem}
.author-box .avatar{width:52px;height:52px;border-radius:50%;background:var(--muted);flex:none;display:grid;place-items:center;color:var(--muted-fg)}
.disclosure{font-size:.8rem;color:var(--muted-fg);background:var(--muted);border-radius:10px;padding:12px 16px;margin:1.6em 0}
.price-note{font-size:.78rem;color:var(--muted-fg)}

/* site footer */
.site-foot{border-top:1px solid var(--border);margin-top:40px;padding:26px 0;font-size:.84rem;color:var(--muted-fg)}
.site-foot .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.site-foot a{color:var(--muted-fg)}

/* back to top */
.top-btn{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--fg);cursor:pointer;box-shadow:var(--shadow-lg);display:none;place-items:center;z-index:50}
.top-btn.show{display:grid}

/* calculator CTA */
.calc-cta{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:12px;padding:14px 16px;margin:1.4em 0;box-shadow:var(--shadow)}
.calc-cta:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.calc-ic{width:40px;height:40px;border-radius:10px;background:var(--amber-soft);color:var(--accent);
  display:grid;place-items:center;flex:none}
.calc-tx{flex:1;min-width:0}
.calc-tx b{display:block;color:var(--fg);font-size:.95rem}
.calc-tx span{font-size:.83rem;color:var(--muted-fg)}
.calc-go{font-size:.82rem;font-weight:800;color:var(--accent);white-space:nowrap}

/* compact gear grid */
.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:1.5em 0}
.gear-grid .product-card{grid-template-columns:1fr;margin:0}
.gear-grid .pc-media{border-right:0;border-bottom:1px solid var(--border);padding:12px}
.gear-grid .pc-media img{max-height:130px}
.gear-grid .pc-points{display:none}
.gear-grid .pc-con{display:none}

/* --- mobile quick-picks layout (grid areas) --- */
.qp-row{grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-areas:"medal name link" "medal desc link";row-gap:2px}
.qp-row .qp-medal{grid-area:medal}
.qp-row .qp-name{grid-area:name;font-size:.98rem}
.qp-row .qp-link{grid-area:link;align-self:center}
.qp-row .qp-desc{grid-area:desc}
@media(max-width:640px){
  .quickpicks{padding:14px 14px}
  .qp-row{grid-template-columns:36px minmax(0,1fr) auto;gap:8px 10px;align-items:start}
  .qp-row .qp-medal{width:32px;height:32px;font-size:.95rem}
  .qp-row .qp-link{font-size:.82rem;padding:4px 10px;border:1px solid var(--border);border-radius:99px}
  .qp-row .qp-desc{font-size:.82rem}
}

/* --- mobile polish --- */
@media(max-width:640px){
  table.cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .calc-cta{flex-wrap:wrap;gap:10px}
  .calc-cta .calc-tx{flex:1 1 calc(100% - 56px)}
  .calc-cta .calc-go{width:100%;text-align:right}
  table.cmp{font-size:.85rem}
  table.cmp th, table.cmp td{padding:9px 10px}
  .kit-total .kit-num{font-size:1.6rem}
  .store-bar{font-size:.8rem;padding:10px 12px}
  .byline{font-size:.82rem}
  .tools-strip,.rel-grid{grid-template-columns:1fr}
}