/* ---------------------------------------------------------------
   Guides: long form article pages.
   Loaded on top of style.css, so the main stylesheet is untouched.
   --------------------------------------------------------------- */

.art-wrap{max-width:760px;margin:0 auto;padding:calc(var(--hdr) + 30px) 20px 10px}

.crumb{font-size:12.5px;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;margin-bottom:18px}
.crumb a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.crumb a:hover{color:#fff}
.crumb i{font-style:normal;opacity:.5}

.art-wrap h1{font-size:clamp(28px,6.2vw,42px);font-weight:900;letter-spacing:-0.03em;
  line-height:1.08;text-wrap:balance}
.art-meta{margin:14px 0 0;font-size:13px;color:var(--text-dim)}

/* the short answer up top, so a reader (and a search engine) gets it at once */
.answer{margin:26px 0 0;padding:20px 22px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .answer{background:rgba(22,22,26,.9)}
}
.answer p{margin:0;font-size:16.5px;line-height:1.6;color:#eaeaea}
.answer p + p{margin-top:10px}
.answer strong{color:#fff}

.art{padding:0 0 10px}
.art h2{font-size:clamp(21px,4.4vw,27px);font-weight:800;letter-spacing:-0.022em;
  margin:40px 0 0;text-wrap:balance}
.art h3{font-size:18px;font-weight:700;margin:26px 0 0}
.art p{margin:14px 0 0;font-size:16.5px;line-height:1.72;color:#d2d2d2}
.art strong{color:#fff;font-weight:700}
.art a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(229,12,20,.8)}
.art a:hover{text-decoration-color:var(--accent-hi)}

.art ul,.art ol{margin:14px 0 0;padding-left:22px;color:#d2d2d2;font-size:16.5px;line-height:1.72}
.art li{margin:8px 0 0}
.art li::marker{color:var(--accent)}

/* numbered steps, for the how to sections */
.steps-num{list-style:none;padding:0;margin:20px 0 0;counter-reset:s}
.steps-num li{counter-increment:s;position:relative;padding-left:46px;margin:16px 0 0}
.steps-num li::before{content:counter(s);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.steps-num b{display:block;color:#fff;font-size:16.5px;font-weight:700;margin-bottom:2px}

/* a quiet note for the honest caveats */
.note{margin:22px 0 0;padding:16px 18px;border-radius:12px;font-size:15px;line-height:1.65;
  color:#bdbdbd;background:rgba(255,255,255,.04);border-left:3px solid rgba(255,255,255,.22)}
.note strong{color:#fff}

/* the pitch block at the end of every guide */
.pitch{margin:44px 0 0;padding:26px 22px;border-radius:20px;position:relative;overflow:hidden;
  border:1px solid rgba(229,12,20,.42);background:rgba(229,12,20,.08)}
.pitch h2{margin:0;font-size:clamp(21px,4.6vw,27px)}
.pitch p{margin:12px 0 0;font-size:16px;line-height:1.68;color:#dcdcdc}
.pitch ul{margin:14px 0 0;padding-left:20px;font-size:15.5px;color:#dcdcdc}
.pitch .cta{display:inline-block;margin:22px 0 0;background:var(--accent);color:#fff;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
  box-shadow:0 6px 22px rgba(229,12,20,.34);transition:background .15s ease}
.pitch .cta:hover{background:var(--accent-hi)}
.pitch .cta-note{display:block;margin:12px 0 0;font-size:13.5px;color:var(--text-dim)}

/* FAQ at the foot of each guide */
.art-faq{margin:40px 0 0}
.art-faq h2{margin-bottom:6px}

/* related guides */
.rel{margin:40px 0 0}
.rel h2{margin:0 0 4px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.rel-grid a{display:block;padding:15px 17px;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  transition:background .2s ease,border-color .2s ease}
.rel-grid a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.rel-grid b{display:block;color:#fff;font-size:15.5px;font-weight:700;letter-spacing:-0.01em}
.rel-grid span{display:block;margin-top:3px;font-size:13.5px;color:var(--text-muted)}

/* the hub page listing */
.hub-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
.hub-grid a{display:block;padding:18px 20px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.hub-grid a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  transform:translateY(-2px)}
.hub-grid b{display:block;color:#fff;font-size:17px;font-weight:700;letter-spacing:-0.012em}
.hub-grid span{display:block;margin-top:5px;font-size:14px;color:var(--text-muted);line-height:1.5}

@media (min-width:760px){
  .rel-grid{grid-template-columns:1fr 1fr}
  .hub-grid{grid-template-columns:1fr 1fr}
  .pitch{padding:32px 30px}
  .art-wrap{padding-top:calc(var(--hdr) + 44px)}
}

/* ---------- glossary ---------- */
.gloss .gterm{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.gloss .gterm:last-child{border-bottom:0}
.gloss .gterm h2{margin:0;font-size:20px;scroll-margin-top:calc(var(--hdr) + 20px)}
.gloss .gterm p{margin:9px 0 0;font-size:16px}
.gloss .gmore{margin-top:9px;font-size:14.5px}
.gloss .gmore a{color:var(--text-muted);text-decoration-color:rgba(229,12,20,.6)}
.gloss .gmore a:hover{color:#fff}