/* ============================================================
   Content / Guide pages — reuses tokens from styles.css
   ============================================================ */
.cmain{
  margin-left:var(--side-w);
  padding:22px 22px 90px;
  max-width:100%;
  display:flex;flex-direction:column;gap:30px;
}
.wrap{width:100%;max-width:900px;margin:0 auto}

/* Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted-2)}
.crumb a{color:var(--muted);transition:color .2s}
.crumb a:hover{color:var(--primary)}
.crumb span{color:var(--muted-2)}

/* Article hero */
.ahero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 320px at 90% -20%,rgba(255,91,30,.14),transparent 60%),
    radial-gradient(600px 360px at -10% 120%,rgba(0,192,224,.12),transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:30px 28px;
}
.ahero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary-2);margin-bottom:12px;
}
.ahero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.ahero h1{
  font-family:"Inter Tight","Inter",sans-serif;
  font-size:clamp(28px,5vw,42px);line-height:1.08;font-weight:900;color:#fff;letter-spacing:-.01em;
}
.ahero h1 b{color:var(--primary-2)}
.ahero__lead{margin-top:14px;color:var(--muted);font-size:15.5px;max-width:680px}
.ahero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ahero__note{margin-top:14px;font-size:12px;color:var(--muted-2)}

/* Prose */
.prose{font-size:15.5px;line-height:1.72;color:var(--text)}
.prose h2{
  font-family:"Inter Tight","Inter",sans-serif;
  font-size:25px;font-weight:900;color:#fff;letter-spacing:-.005em;
  margin:38px 0 12px;display:flex;align-items:center;gap:12px;scroll-margin-top:90px;
}
.prose h2::before{content:"";width:10px;height:24px;border-radius:4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));flex:none}
.prose h3{font-size:18.5px;font-weight:800;color:#fff;margin:26px 0 8px}
.prose p{margin:0 0 14px;color:var(--text)}
.prose a{color:var(--primary-2);font-weight:600;border-bottom:1px solid rgba(22,224,255,.3);transition:color .2s,border-color .2s}
.prose a:hover{color:#fff;border-color:var(--primary-2)}
.prose strong{color:#fff}
.prose ul,.prose ol{margin:6px 0 18px;padding-left:0;display:flex;flex-direction:column;gap:9px}
.prose ul li{position:relative;padding-left:26px;color:var(--text)}
.prose ul li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--primary)}
.prose ol{counter-reset:s}
.prose ol li{position:relative;padding-left:38px;counter-increment:s}
.prose ol li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#001218;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}

/* Tables */
.tablewrap{overflow-x:auto;margin:8px 0 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-1)}
table.tbl{width:100%;border-collapse:collapse;min-width:480px;font-size:14px}
table.tbl caption{caption-side:top;text-align:left;padding:12px 14px;color:var(--muted);font-size:12.5px}
table.tbl th,table.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl thead th{background:var(--bg-3);color:#fff;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
table.tbl tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
table.tbl tbody tr:hover{background:rgba(0,192,224,.05)}
table.tbl td:first-child{color:#fff;font-weight:700}

/* Callout / note box */
.note{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(0,192,224,.08),rgba(0,192,224,.02));
  border:1px solid rgba(0,192,224,.28);border-radius:var(--radius);
  padding:16px 18px;margin:18px 0;
}
.note--warn{background:linear-gradient(180deg,rgba(255,91,30,.08),rgba(255,91,30,.02));border-color:rgba(255,91,30,.3)}
.note__ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;background:var(--bg-3);border:1px solid var(--line)}
.note p{margin:0;font-size:14px;color:var(--muted)}
.note strong{color:#fff}

/* Key facts grid */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:6px 0 10px}
.fact{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.fact__k{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);font-weight:700}
.fact__v{font-size:19px;font-weight:900;color:#fff;margin-top:4px;font-family:"Inter Tight","Inter",sans-serif}
.fact__v span{color:var(--primary-2)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;margin:8px 0 6px}
.faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:15px 48px 15px 18px;position:relative;
  font-weight:800;color:#fff;font-size:15px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--primary)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--primary-2)}
.faq__a{padding:0 18px 16px;color:var(--muted);font-size:14.5px;line-height:1.65}
.faq__a a{color:var(--primary-2);font-weight:600}

/* Internal link cards */
.ilinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:10px 0}
.ilink{
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;transition:transform .15s,border-color .2s,background .2s;
}
.ilink:hover{transform:translateY(-3px);border-color:var(--primary);background:var(--bg-3)}
.ilink__t{font-weight:900;color:#fff;font-size:15.5px;font-family:"Inter Tight","Inter",sans-serif}
.ilink__d{font-size:13px;color:var(--muted)}
.ilink__go{font-size:12.5px;font-weight:800;color:var(--primary-2);margin-top:2px}

/* TOC */
.toc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.toc strong{display:block;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.toc ol{counter-reset:t;display:flex;flex-direction:column;gap:7px}
.toc a{color:var(--muted);font-size:14px;transition:color .2s}
.toc a:hover{color:var(--primary-2)}

/* CTA band */
.ctaband{
  text-align:center;border-radius:var(--radius-lg);padding:30px 24px;margin:30px 0 6px;
  background:
    radial-gradient(500px 200px at 50% -30%,rgba(0,192,224,.18),transparent 60%),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line-2);
}
.ctaband h2{justify-content:center;border:0;margin-top:0}
.ctaband h2::before{display:none}
.ctaband p{color:var(--muted);max-width:540px;margin:0 auto 18px}
.ctaband .hero__bonus{font-size:22px;font-weight:900;color:#fff;margin-bottom:14px}
.ctaband .hero__bonus strong{color:var(--gold)}

@media (max-width:1024px){
  .cmain{margin-left:0;padding:16px 14px 90px}
}
@media (max-width:560px){
  .ahero{padding:22px 18px}
  .prose h2{font-size:22px}
}