/* Typography */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }

p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--color-text-light); max-width: 60ch; }
.on-dark .lead, .on-dark p { color: var(--color-on-dark-muted); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--jds-red);
  margin-bottom: 0.9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--jds-red) 0 33%, var(--jds-orange) 33% 66%, var(--jds-green) 66%); }
.on-dark .eyebrow, .hero .eyebrow { color: var(--jds-gold); }
/* Light cards inside dark sections keep dark text */
.on-dark .form-card h2, .on-dark .form-card h3 { color: var(--color-text); }
.on-dark .form-card p, .on-dark .form-card .form-hint { color: var(--color-text-light); }

.small { font-size: 0.9rem; }
.muted { color: var(--color-text-light); }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }