/* ============================================================
   article.css — premium interior styling for /articles/*.
   Loaded AFTER theme-light.css so it wins. Uses !important only
   where needed to override legacy inline styles (e.g. the CTA box).
   ============================================================ */

/* Layout / reading column */
.article-wrap{ max-width:800px; margin:0 auto; padding:0 24px 48px; }
article, .prose{ font-size:1.02rem; }

/* Hero */
.article-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#EEF0FE 0%,#FFFFFF 55%) !important; border:1px solid #E1E4F5 !important;
  border-radius:20px !important; padding:2.6rem 2rem !important;
  box-shadow:0 10px 30px rgba(67,56,202,.06) !important; backdrop-filter:none !important;
  text-align:center; margin:1.5rem 0 2.4rem;
}
.article-hero::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#4338CA,#6366F1); }
.article-hero h1{
  font-family:'Fraunces',Georgia,serif !important; font-weight:600 !important;
  font-size:clamp(1.8rem,3.6vw,2.5rem) !important; line-height:1.12 !important;
  color:#0B1020 !important; -webkit-text-fill-color:#0B1020 !important; background:none !important;
  letter-spacing:-.015em; margin-bottom:.6rem;
}
.article-hero p{ color:#3F4661 !important; font-size:1.05rem; max-width:620px; margin:0 auto; }

/* Typography */
.article-wrap h2, article h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.6rem; color:#0B1020; letter-spacing:-.01em; margin:2.2rem 0 .6rem; }
.article-wrap h3, article h3{ font-weight:800; font-size:1.18rem; color:#0B1020; margin:1.5rem 0 .4rem; }
.article-wrap p, article p{ color:#3F4661; line-height:1.75; margin:0 0 1rem; }
.article-wrap a, article a{ color:#4338CA; }
.article-wrap ul, .article-wrap ol{ margin:0 0 1rem 1.3rem; }
.article-wrap li{ color:#3F4661; margin:.35rem 0; line-height:1.65; }
.article-wrap strong{ color:#0B1020; }

/* Fee / data tables */
.fee-table, .article-wrap table{
  width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.95rem;
  border:1px solid #E7E9F2; border-radius:12px; overflow:hidden;
}
.fee-table th, .article-wrap th{ background:#F6F7FB; color:#0B1020; font-weight:700; text-align:left; padding:11px 14px; border-bottom:1px solid #E7E9F2; }
.fee-table td, .article-wrap td{ padding:11px 14px; border-bottom:1px solid #EEF0F6; color:#3F4661; }
.fee-table tr:last-child td{ border-bottom:none; }
.savings{ color:#059669 !important; font-weight:700 !important; }

/* Callouts */
.note, .ok, .warn{ border-radius:12px; padding:14px 16px; margin:1.3rem 0; font-size:.95rem; border:1px solid #E7E9F2; background:#F7F8FC; color:#3F4661; }
.warn{ background:#FEF6E7 !important; border-color:#F4D9A6 !important; }
.ok{ background:#E7F6EF !important; border-color:#BFE8D4 !important; }
.note strong, .ok strong, .warn strong{ color:#0B1020; }

/* Table of contents */
.toc{ background:#F7F8FC !important; border:1px solid #E7E9F2 !important; border-radius:12px !important; padding:16px 20px !important; margin:1.3rem 0 !important; }
.toc a{ color:#4338CA; }

/* Grid / cards */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.2rem 0; }
@media(max-width:640px){ .grid2{ grid-template-columns:1fr; } }
.card{ background:#FFFFFF !important; border:1px solid #E7E9F2 !important; border-radius:14px !important; padding:16px 18px !important; box-shadow:0 1px 2px rgba(16,24,64,.05) !important; color:#3F4661; }
.pill{ display:inline-block; background:#EEF0FE !important; color:#4338CA !important; border-radius:999px; padding:3px 11px; font-size:12px; font-weight:700; }
.badge{ display:inline-block; background:#EEF0FE; color:#4338CA; border:1px solid #DDE0EE; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; }

/* ===== CTA box — full override of legacy inline dark styling ===== */
.cta-box{
  background:linear-gradient(135deg,#EEF0FE,#FFFFFF) !important;
  border:1px solid #DDE0EE !important; border-radius:16px !important;
  padding:2rem !important; margin:2.5rem 0 !important; text-align:center;
  box-shadow:0 8px 30px rgba(67,56,202,.08) !important;
}
.cta-box > div:first-child{ font-size:1.7rem !important; margin-bottom:.4rem !important; line-height:1 !important; }
.cta-box h3{
  font-family:'Fraunces',Georgia,serif !important; font-size:1.45rem !important; font-weight:600 !important;
  color:#0B1020 !important; -webkit-text-fill-color:#0B1020 !important; background:none !important;
  margin-bottom:.5rem !important;
}
.cta-box p{ color:#3F4661 !important; font-size:1rem !important; margin-bottom:1.2rem !important; }
.cta-box p:last-child{ color:#7A8199 !important; font-size:.85rem !important; margin-bottom:0 !important; margin-top:1rem !important; }
.cta-button, .cta-box a{
  background:linear-gradient(135deg,#4338CA,#6366F1) !important; color:#FFFFFF !important;
  padding:.9rem 1.9rem !important; font-size:1rem !important; font-weight:700 !important;
  border-radius:12px !important; box-shadow:0 8px 20px rgba(67,56,202,.28) !important;
  display:inline-flex !important; align-items:center; gap:.6rem;
}
.cta-button span{ font-size:1.1rem !important; }

/* ===== Research hub (/articles/) cards ===== */
.article-card{ background:#fff !important; border:1px solid #E7E9F2 !important; backdrop-filter:none !important; box-shadow:0 1px 2px rgba(16,24,64,.05) !important; }
.article-card:hover{ background:#fff !important; border-color:#C7CBEC !important; box-shadow:0 12px 30px rgba(67,56,202,.10) !important; }
.article-card h3{ color:#0B1020 !important; }
.article-card p{ color:#3F4661 !important; }
.article-tag{ background:#EEF0FE !important; border:1px solid #DDE0EE !important; color:#4338CA !important; }
.article-meta{ border-top-color:#E7E9F2 !important; }
.read-time{ color:#7A8199 !important; }
.read-more{ color:#4338CA !important; }
.article-card::before{ background:linear-gradient(90deg,#4338CA,#6366F1) !important; }
.article-card, .article-card:hover, .article-card *, .article-card:hover *{ text-decoration:none !important; }