body { 
    background: var(--white); 
}

/* ==============================
   PAGE HERO
============================== */
.page-hero { 
  background: #F8FAFC; 
  border-bottom: 1px solid #E2E8F0; 
  padding: 48px 32px; 
}

.page-hero-inner { 
  max-width: 800px; 
  margin: 0 auto; 
}

.page-hero p.category { 
  font-size: 13px; 
  font-weight: 700; 
  color: #1A52A0; 
  text-transform: uppercase; 
  letter-spacing: .08em; 
  margin-bottom: 10px; 
}

.page-hero h1 { 
  font-size: clamp(26px, 3vw, 36px); 
  font-weight: 800; 
  color: #0C1E38; 
  margin-bottom: 10px; 
}

.page-hero .meta { 
  font-size: 16px; 
  color: #64748B; 
}

/* ==============================
   CONTENT
============================== */
.content { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 56px 32px 80px; 
}

.content h2 { 
  font-size: 22px; 
  font-weight: 700; 
  color: #0C1E38; 
  margin: 40px 0 12px; 
  padding-top: 8px; 
  border-top: 2px solid #F1F5F9; 
}

.content h2:first-of-type { 
  margin-top: 0; 
  border-top: none; 
}

.content p { 
  font-size: 16px; 
  color: #374151; 
  line-height: 1.8; 
  margin-bottom: 14px; 
}

.content ul, 
.content ol { 
  padding-left: 22px; 
  margin-bottom: 16px; 
}

.content li { 
  font-size: 16px; 
  color: #374151; 
  line-height: 1.8; 
  margin-bottom: 6px; 
}

.content a { 
  color: #1A52A0; 
  text-decoration: underline; 
  word-wrap: break-word;
}

.content a:hover { 
  color: #1e40af; 
}

.content strong { 
  color: #1E293B; 
  font-weight: 600; 
}

.content-box { 
  background: #F8FAFC; 
  border: 1px solid #E2E8F0; 
  border-radius: 10px; 
  padding: 20px 24px; 
  margin-bottom: 20px; 
}

.content-box p { 
  margin-bottom: 0; 
}