/* ===================== article.css — guide / reading pages ===================== */

.article-hero{
  position:relative; overflow:hidden; color:#fff; padding:50px 20px 46px; text-align:center;
  background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
}
.article-hero::before{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 25%, black, transparent 70%);
}
.article-hero-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.article-hero span.hero-eyebrow{ margin-bottom:14px; }
.article-hero h1{ font-size:24px; font-weight:800; line-height:1.6; margin:0; }

.article-wrap{ max-width:760px; margin:0 auto; padding:40px 20px 60px; }
.article-card{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:32px 28px;
}
.article-card p{ font-size:14.5px; line-height:2; color:var(--slate-900); margin:0 0 18px; }
.article-card p:last-child{ margin-bottom:0; }
.article-card p:first-of-type{
  font-size:15.5px; font-weight:600; color:var(--slate-900);
  border-right:3px solid var(--blue-500); padding-right:14px;
}

.article-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); color:#fff;
  border-radius:var(--radius-lg); padding:22px 26px; margin-top:24px;
}
.article-cta p{ margin:0; font-size:13.5px; color:#c3d2f2; }
.article-cta a{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400)); color:#fff; font-weight:700;
  padding:11px 22px; border-radius:50px; font-size:13.5px; white-space:nowrap;
}

@media (max-width:600px){
  .article-hero{ padding:36px 16px 34px; }
  .article-hero h1{ font-size:19px; }
  .article-wrap{ padding:26px 14px 44px; }
  .article-card{ padding:22px 18px; }
  .article-card p{ font-size:13.5px; line-height:1.95; }
  .article-cta{ flex-direction:column; text-align:center; }
}