/* ============================================= 
CSS VARIABLES — Edit these to match your brand 
============================================= */ 
:root { 
  --navy: #0A3D62; 
  --navy-light: #0D4A75; 
  --blue: #1565C0; 
  --sky: #42A5F5; 
  --sky-light: #64B5F6; 
  --sky-pale: #E3F2FD; 
  --green: #16A34A; 
  --green-pale: #DCFCE7; 
  --red: #DC2626; 
  --red-pale: #FEE2E2; 
  --amber: #D97706; 
  --amber-pale: #FEF3C7; 
  --bg: #FAFCFF; 
  --white: #FFFFFF; 
  --gray-50: #F8FAFC; 
  --gray-100: #F1F5F9; 
  --gray-200: #E2E8F0; 
  --gray-300: #CBD5E1; 
  --gray-400: #94A3B8; 
  --gray-500: #64748B; 
  --gray-600: #475569; 
  --gray-700: #334155; 
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; 
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif; 
  --content-width: 760px; 
  --wide-width: 860px; 
} 
* { margin: 0; padding: 0; box-sizing: border-box; } 
body { 
  font-family: var(--font-body); 
  background: var(--bg); 
  color: var(--gray-700); 
  -webkit-font-smoothing: antialiased; 
  line-height: 1.7; 
} 
a { color: var(--blue); text-decoration: none; } 
a:hover { text-decoration: underline; } 

/* ============================================= 
NAVIGATION 
============================================= */ 
.nav { 
  background: var(--white); 
  border-bottom: 1px solid var(--gray-200); 
  position: sticky; 
  top: 0; 
  z-index: 100; 
} 
.nav-inner { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 40px; 
  height: 68px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
} 
.nav-logo { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-family: var(--font-body); 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--navy); 
  letter-spacing: -0.3px; 
  text-decoration: none; 
} 
.nav-logo-icon { 
  width: 32px; 
  height: 32px; 
  background: var(--navy); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.nav-logo-icon svg { width: 18px; height: 18px; } 
.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 32px; 
  list-style: none; 
} 
.nav-links a { 
  font-size: 14px; 
  font-weight: 500; 
  color: var(--gray-500); 
  text-decoration: none; 
  transition: color 0.2s; 
} 
.nav-links a:hover { color: var(--navy); text-decoration: none; } 
.nav-links a.active { color: var(--navy); font-weight: 700; } 
.nav-cta { 
  background: var(--navy) !important; 
  color: var(--white) !important; 
  padding: 10px 22px !important; 
  border-radius: 50px; 
  font-size: 13px !important; 
  font-weight: 600 !important; 
  transition: background 0.2s; 
} 
.nav-cta:hover { background: var(--navy-light) !important; text-decoration: none !important; } 

/* ============================================= 
ARTICLE HERO 
============================================= */ 
.article-hero { 
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-light) 55%, var(--blue) 100%); 
  padding: 80px 40px 72px; 
  position: relative; 
  overflow: hidden; 
} 
.article-hero::before { 
  content: ''; 
  position: absolute; 
  top: -200px; 
  right: -150px; 
  width: 600px; 
  height: 600px; 
  background: radial-gradient(circle, rgba(66,165,245,0.12), transparent 65%); 
  border-radius: 50%; 
} 
.article-hero::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  opacity: 0.03; 
  background-image: 
    linear-gradient(to right, white 1px, transparent 1px), 
    linear-gradient(to bottom, white 1px, transparent 1px); 
  background-size: 60px 60px; 
} 
.hero-inner { 
  max-width: var(--content-width); 
  margin: 0 auto; 
  position: relative; 
  z-index: 2; 
} 
.hero-breadcrumb { 
  font-size: 13px; 
  color: rgba(255,255,255,0.45); 
  margin-bottom: 28px; 
} 
.hero-breadcrumb a { 
  color: rgba(255,255,255,0.55); 
  text-decoration: none; 
  transition: color 0.2s; 
} 
.hero-breadcrumb a:hover { color: rgba(255,255,255,0.85); } 
.hero-breadcrumb span { margin: 0 8px; } 
.hero-tag { 
  display: inline-block; 
  background: rgba(66,165,245,0.2); 
  border: 1px solid rgba(66,165,245,0.35); 
  color: var(--sky-light); 
  padding: 6px 16px; 
  border-radius: 50px; 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  margin-bottom: 24px; 
} 
.hero-title { 
  font-family: var(--font-serif); 
  font-size: 44px; 
  font-weight: 700; 
  color: var(--white); 
  line-height: 1.2; 
  letter-spacing: -1px; 
  margin-bottom: 24px; 
} 
.hero-meta { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  font-size: 14px; 
  color: rgba(255,255,255,0.5); 
} 
.hero-meta-item { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
} 
.hero-dot { 
  width: 4px; 
  height: 4px; 
  background: rgba(255,255,255,0.3); 
  border-radius: 50%; 
} 

/* ============================================= 
ARTICLE BODY — THE CORE CONTENT AREA 
============================================= */ 
.article-body { 
  max-width: var(--content-width); 
  margin: 0 auto; 
  padding: 56px 40px 80px; 
} 
/* --- Typography --- */ 
.article-body p { 
  font-family: var(--font-serif); 
  font-size: 18px; 
  color: var(--gray-700); 
  line-height: 1.8; 
  margin-bottom: 28px; 
} 
.article-body h2 { 
  font-family: var(--font-serif); 
  font-size: 30px; 
  font-weight: 700; 
  color: var(--navy); 
  line-height: 1.25; 
  letter-spacing: -0.5px; 
  margin-top: 56px; 
  margin-bottom: 22px; 
  padding-top: 32px; 
  border-top: 1px solid var(--gray-200); 
} 
.article-body h2:first-of-type { 
  margin-top: 0; 
  padding-top: 0; 
  border-top: none; 
} 
.article-body h3 { 
  font-family: var(--font-body); 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--navy); 
  line-height: 1.35; 
  margin-top: 36px; 
  margin-bottom: 16px; 
} 
.article-body strong { 
  font-weight: 700; 
  color: var(--navy); 
} 
.article-body em { 
  font-style: italic; 
} 
/* --- Blockquotes --- */ 
.article-body blockquote { 
  margin: 36px 0; 
  padding: 28px 32px; 
  background: var(--sky-pale); 
  border-left: 4px solid var(--blue); 
  border-radius: 0 12px 12px 0; 
  font-family: var(--font-serif); 
  font-size: 18px; 
  font-style: italic; 
  color: var(--navy); 
  line-height: 1.7; 
} 
.article-body blockquote p { 
  margin-bottom: 0; 
  color: var(--navy); 
  font-style: italic; 
} 
/* --- Lists --- */ 
.article-body ul, .article-body ol { 
  margin: 0 0 28px 0; 
  padding-left: 24px; 
} 
.article-body li { 
  font-family: var(--font-serif); 
  font-size: 18px; 
  color: var(--gray-700); 
  line-height: 1.8; 
  margin-bottom: 10px; 
} 

/* ============================================= 
AUTO-FITTING TABLE SYSTEM 
============================================= */ 
.article-body .table-wrapper { 
  margin: 36px -40px; 
  padding: 0 40px; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
} 
.article-body table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  background: var(--white); 
  border: 1px solid var(--gray-200); 
  border-radius: 12px; 
  overflow: hidden; 
  margin: 0; 
  font-family: var(--font-body); 
  font-size: 14px; 
  table-layout: auto; 
} 
.article-body table thead th { 
  background: var(--navy); 
  color: var(--white); 
  font-size: 12px; 
  font-weight: 700; 
  padding: 14px 18px; 
  text-align: center; 
  letter-spacing: 0.5px; 
  text-transform: uppercase; 
  white-space: nowrap; 
  border-bottom: 2px solid var(--navy); 
} 
.article-body table thead th:first-child { 
  border-radius: 11px 0 0 0; 
  text-align: left;
} 
.article-body table thead th:last-child { 
  border-radius: 0 11px 0 0; 
} 
.article-body table tbody td { 
  padding: 13px 18px; 
  border-bottom: 1px solid var(--gray-100); 
  color: var(--gray-700); 
  font-size: 14px; 
  font-weight: 500; 
  line-height: 1.5; 
  vertical-align: middle;
  text-align: center;
} 
.article-body table tbody tr:last-child td { 
  border-bottom: none; 
} 
.article-body table tbody tr:nth-child(even) { 
  background: var(--gray-50); 
} 
.article-body table tbody tr:hover { 
  background: var(--sky-pale); 
} 
/* Auto-fit: first column is bold/label */ 
.article-body table tbody td:first-child { 
  font-weight: 700; 
  color: var(--navy); 
  white-space: nowrap; 
  text-align: left;
} 
/* Checkmark and X styling in tables */ 
.article-body table td.yes, .article-body table td .yes { 
  color: var(--green) !important; 
  font-weight: 700 !important; 
} 
.article-body table td.no, .article-body table td .no { 
  color: var(--red) !important; 
  font-weight: 700 !important; 
} 
.article-body table td.partial, .article-body table td .partial { 
  color: var(--amber) !important; 
  font-weight: 700 !important; 
} 
/* Table caption / label */ 
.article-body .table-caption { 
  font-family: var(--font-body); 
  font-size: 13px; 
  color: var(--gray-400); 
  font-style: italic; 
  margin-top: 12px; 
  margin-bottom: 32px; 
  text-align: center; 
} 

/* ============================================= 
CALLOUT BOX (for key insights) 
============================================= */ 
.callout-box { 
  margin: 36px 0; 
  padding: 28px 32px; 
  background: linear-gradient(135deg, var(--sky-pale), #F0F7FF); 
  border: 1px solid #BFDBFE; 
  border-radius: 14px; 
  position: relative; 
} 
.callout-box::before { 
  content: '💡'; 
  position: absolute; 
  top: -14px; 
  left: 24px; 
  background: var(--white); 
  padding: 4px 10px; 
  border-radius: 8px; 
  font-size: 18px; 
  border: 1px solid #BFDBFE; 
} 
.callout-box p { 
  font-family: var(--font-body) !important; 
  font-size: 15px !important; 
  color: var(--navy) !important; 
  line-height: 1.65 !important; 
  margin-bottom: 0 !important; 
  font-weight: 500; 
} 

/* ============================================= 
CTA SECTION (bottom of article) 
============================================= */ 
.article-cta { 
  margin: 60px 0 0; 
  padding: 48px; 
  background: var(--navy); 
  border-radius: 20px; 
  text-align: center; 
  position: relative; 
  overflow: hidden; 
} 
.article-cta::before { 
  content: ''; 
  position: absolute; 
  top: -80px; 
  right: -80px; 
  width: 300px; 
  height: 300px; 
  background: radial-gradient(circle, rgba(66,165,245,0.2), transparent 65%); 
  border-radius: 50%; 
} 
.article-cta-label { 
  font-size: 12px; 
  font-weight: 700; 
  color: var(--sky); 
  letter-spacing: 3px; 
  text-transform: uppercase; 
  margin-bottom: 14px; 
  position: relative; 
  z-index: 2; 
} 
.article-cta-title { 
  font-family: var(--font-serif); 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--white); 
  line-height: 1.3; 
  margin-bottom: 10px; 
  position: relative; 
  z-index: 2; 
} 
.article-cta-desc { 
  font-size: 15px; 
  color: rgba(255,255,255,0.6); 
  margin-bottom: 28px; 
  position: relative; 
  z-index: 2; 
} 
.article-cta-btn { 
  display: inline-block; 
  background: var(--sky); 
  color: var(--navy); 
  padding: 16px 40px; 
  border-radius: 60px; 
  font-size: 16px; 
  font-weight: 700; 
  text-decoration: none; 
  transition: background 0.2s; 
  position: relative; 
  z-index: 2; 
} 
.article-cta-btn:hover { 
  background: var(--sky-light); 
  text-decoration: none; 
} 

/* ============================================= 
READING PROGRESS BAR 
============================================= */ 
.progress-bar { 
  position: fixed; 
  top: 68px; 
  left: 0; 
  width: 0%; 
  height: 3px; 
  background: linear-gradient(90deg, var(--sky), var(--blue)); 
  z-index: 999; 
  transition: width 0.1s linear; 
} 

/* ============================================= 
SHARE SIDEBAR 
============================================= */ 
.share-sidebar { 
  position: fixed; 
  left: calc(50% - 460px); 
  top: 50%; 
  transform: translateY(-50%); 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  z-index: 50; 
} 
.share-btn { 
  width: 44px; 
  height: 44px; 
  border-radius: 12px; 
  background: var(--white); 
  border: 1px solid var(--gray-200); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 18px; 
  color: var(--gray-500); 
  cursor: pointer; 
  transition: all 0.2s; 
  text-decoration: none; 
} 
.share-btn:hover { 
  background: var(--navy); 
  color: var(--white); 
  border-color: var(--navy); 
  text-decoration: none; 
} 

/* ============================================= 
FOOTER 
============================================= */ 
.footer { 
  background: var(--white); 
  border-top: 1px solid var(--gray-200); 
  padding: 36px 40px; 
} 
.footer-inner { 
  max-width: 1200px; 
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 20px; 
} 
.footer-brand { 
  font-weight: 700; 
  color: var(--navy); 
  font-size: 15px; 
} 
.footer-sub { 
  font-size: 12px; 
  color: var(--gray-400); 
  margin-top: 2px; 
} 
.footer-links { 
  display: flex; 
  gap: 24px; 
  list-style: none; 
  flex-wrap: wrap; 
} 
.footer-links a { 
  font-size: 13px; 
  color: var(--gray-500); 
  text-decoration: none; 
} 
.footer-links a:hover { color: var(--navy); } 
.footer-copy { 
  font-size: 12px; 
  color: var(--gray-400); 
} 

/* ============================================= 
RESPONSIVE 
============================================= */ 
@media (max-width: 1000px) { 
  .share-sidebar { display: none; } 
} 
@media (max-width: 768px) { 
  .hero-title { font-size: 30px; } 
  .article-body { padding: 36px 20px 60px; } 
  .article-body p { font-size: 16px; } 
  .article-body h2 { font-size: 24px; } 
  .article-body .table-wrapper { margin: 28px -20px; padding: 0 20px; } 
  .article-cta { padding: 32px 24px; } 
  .nav-links { display: none; } 
}