/* ── Article family (help.html + updates.html + glossary.html only) ────────── */
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ── Help hero ──────────────────────────────────────────────────────────── */
.help-hero {
  padding: 72px 0 60px; text-align: center; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,140,30,0.10) 0%, transparent 60%);
}
.help-eyebrow {
  font-family: var(--body); text-transform: uppercase; letter-spacing: 3px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 14px;
}
.help-hero h1 {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(36px, 5.5vw, 64px); color: var(--paper);
  margin-bottom: 14px; line-height: 1.05;
}

/* ── Section headings (used by help.html + glossary.html; unused but harmless on updates.html) ── */
.section-label { font-family: var(--body); text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.section-title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); color: var(--paper); margin-bottom: 8px; line-height: 1.15; }
.section-intro { color: var(--text-dim); font-size: 15px; margin-bottom: 0; }

/* Each page names its own content-section wrapper differently
   (.help-section / .gloss-section / .release-section) but all three were
   byte-identical on padding/border-top — confirmed via direct diff, not
   assumed from the shared naming pattern above. */
.help-section, .gloss-section, .release-section { padding: 60px 0 40px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .help-hero { padding: 52px 0 40px; }
  .help-section, .gloss-section, .release-section { padding: 48px 0 32px; }
}