/* ==========================================================
   ARTICLE — GearUP Booster
   Single guide layout: readable column + right sidebar.
   Uses style.css tokens only. Article typography is scoped
   under .article-body so homepage headings are never touched.
   ========================================================== */

.article-hero{padding:52px 0 8px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:42px;align-items:start;padding-bottom:70px}
.article-main{min-width:0}
.article-main h1{font-size:clamp(30px,3.6vw,44px);max-width:760px}
.article-intro{color:#b8c3e1;font-size:15px;line-height:1.85;max-width:720px}
.article-featured{width:100%;border-radius:22px;border:1px solid var(--line);margin:24px 0 6px}
.article-caption{font-size:10.5px;color:#8290b6;margin-bottom:8px}

/* Table of contents */
.toc{border:1px solid var(--line);border-radius:16px;background:rgba(15,22,59,.85);padding:20px 22px;margin:22px 0 30px}
.toc h2{font-size:13px;letter-spacing:.06em;margin:0 0 12px;color:#8ceaf4}
.toc ol{margin:0;padding-left:19px;color:var(--muted);font-size:12.5px;line-height:2.05}
.toc a:hover{color:var(--cyan)}

/* Body typography (scoped) */
.article-body{font-size:15.5px;line-height:1.85;color:#dbe3f7}
.article-body h2{font-size:clamp(22px,2.4vw,28px);margin:38px 0 14px}
.article-body h3{font-size:18.5px;margin:26px 0 10px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 16px;padding-left:22px}
.article-body li{margin-bottom:7px}
.article-body a{color:#74eff8;text-decoration:underline;text-underline-offset:3px}
.article-body strong{color:#fff}
.article-body .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:20px 0 26px}
.article-body table{min-width:520px}
.article-note{border:1px solid rgba(25,227,244,.25);background:rgba(25,227,244,.06);border-radius:14px;padding:16px 18px;font-size:13.5px;margin:20px 0 26px}
.article-note b{color:#8ceaf4}

/* Sidebar */
.article-sidebar{position:sticky;top:104px;display:grid;gap:15px}
.side-card{border:1px solid var(--line);border-radius:16px;background:rgba(15,22,59,.85);padding:19px}
.side-card h2{font-size:12px;letter-spacing:.08em;margin:0 0 13px;color:#8ceaf4}
.side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.side-card li a{font-size:12.5px;color:#c3cce5;line-height:1.5;display:block}
.side-card li a:hover{color:var(--cyan)}
.side-card p{font-size:12px;color:var(--muted);line-height:1.75;margin:0}

/* Related guides strip */
.related{border-top:1px solid rgba(125,149,255,.09);padding:56px 0 70px}

@media(max-width:1050px){
  .article-layout{grid-template-columns:minmax(0,1fr) 260px;gap:30px}
}
@media(max-width:860px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static;order:2}
}