/* ─── GUIDES / ARTICLES (shared) ───────────────────────────────────
   Loaded together with styles.css (which provides :root vars, the
   background layers, fonts and the .topbar styles). */

.guide-shell{ width:100%; max-width:760px; margin:0 auto; position:relative; z-index:1; padding:4px 0 70px; }
.guide-hub-shell{ width:100%; max-width:920px; margin:0 auto; position:relative; z-index:1; padding:4px 0 70px; }

/* top bar extras */
.topbar-right{ display:flex; align-items:center; gap:18px; }
.topbar-link{ font-family:'Orbitron',monospace; font-size:0.63rem; letter-spacing:0.14em; color:var(--text-dim); text-decoration:none; transition:color 0.2s ease; }
.topbar-link:hover{ color:var(--cyan); }
.guide-lang{ display:flex; gap:9px; font-family:'Orbitron',monospace; font-size:0.63rem; letter-spacing:0.1em; }
.guide-lang a{ color:var(--text-dim); text-decoration:none; transition:color 0.2s ease; }
.guide-lang a:hover{ color:var(--cyan); }
.guide-lang a.active{ color:#fff; }

/* breadcrumb */
.guide-crumb{ font-family:'Orbitron',monospace; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); margin:26px 0 16px; }
.guide-crumb a{ color:rgba(0,212,255,0.6); text-decoration:none; }
.guide-crumb a:hover{ color:var(--cyan); }

/* article body */
.guide h1{ font-family:'Unbounded',sans-serif; font-size:clamp(1.7rem,5vw,2.6rem); font-weight:800; color:#fff; line-height:1.12; margin-bottom:14px; }
.guide-meta{ font-family:'Orbitron',monospace; font-size:0.62rem; letter-spacing:0.12em; color:var(--text-dim); text-transform:uppercase; margin-bottom:6px; }
.guide-lead{ font-size:1.06rem; line-height:1.72; color:rgba(200,215,255,0.84); margin:18px 0 26px; }
.guide h2{ font-family:'Unbounded',sans-serif; font-size:1.28rem; color:#fff; margin:36px 0 12px; line-height:1.25; }
.guide h3{ font-weight:600; color:var(--cyan); font-size:1.05rem; margin:24px 0 8px; }
.guide p,.guide li{ font-size:0.97rem; line-height:1.8; color:rgba(200,215,255,0.76); margin-bottom:14px; }
.guide ul{ padding-left:22px; }
.guide strong{ color:#fff; font-weight:600; }
.guide a{ color:var(--cyan); }

/* callout / verdict box */
.guide-box{ border:1px solid var(--border); background:rgba(0,212,255,0.045); border-radius:14px; padding:18px 22px; margin:24px 0; }
.guide-box-label{ font-family:'Orbitron',monospace; font-size:0.56rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px; }
.guide-box p:last-child{ margin-bottom:0; }

/* inline affiliate buy buttons */
.guide-buy{ display:inline-flex; gap:8px; align-items:center; padding:11px 22px; background:linear-gradient(135deg,var(--gold),#ff8c00); color:#000; font-family:'Orbitron',monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border-radius:10px; text-decoration:none; margin:4px 10px 6px 0; transition:transform 0.2s ease; }
.guide-buy:hover{ transform:translateY(-2px); color:#000; }

/* CTA back to the quiz */
.guide-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin:44px 0 8px; padding:32px 26px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.guide-cta-title{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.12rem; color:#fff; }
.guide-cta p{ color:var(--text-dim); font-size:0.9rem; margin:0; }
.btn-quiz{ display:inline-block; padding:15px 42px; background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#000; font-family:'Orbitron',monospace; font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; border-radius:13px; text-decoration:none; transition:transform 0.2s ease; box-shadow:0 4px 24px rgba(0,212,255,0.3); }
.btn-quiz:hover{ transform:translateY(-2px); color:#000; }

.guide-disclosure{ font-size:0.74rem; color:rgba(200,215,255,0.32); line-height:1.6; margin-top:28px; border-top:1px solid rgba(255,255,255,0.06); padding-top:18px; }
.guide-disclosure a{ color:rgba(0,212,255,0.55); }

/* ad placeholder slot */
.ad-slot{ margin:34px 0; min-height:90px; display:flex; align-items:center; justify-content:center; }

/* hub listing */
.guide-hub-head{ text-align:center; margin:34px 0 38px; }
.guide-hub-head h1{ font-family:'Unbounded',sans-serif; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:800; color:#fff; margin-bottom:14px; line-height:1.1; }
.guide-hub-head p{ color:var(--text-dim); max-width:560px; margin:0 auto; line-height:1.72; font-size:1rem; }
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.guide-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:24px; text-decoration:none; transition:border-color 0.22s ease, transform 0.22s ease; }
.guide-card:hover{ border-color:var(--border-hover); transform:translateY(-3px); }
.guide-card h2{ font-family:'Unbounded',sans-serif; font-size:1.05rem; color:#fff; margin-bottom:8px; line-height:1.32; }
.guide-card p{ font-size:0.86rem; color:var(--text-dim); line-height:1.62; flex-grow:1; margin:0; }
.guide-card-go{ margin-top:16px; font-family:'Orbitron',monospace; font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); }