/* ============================================================
   Cinematic display typography — match the Pricing/v4 aesthetic
   on marketing & SEO pages that previously rendered headings in
   IBM Plex Sans (editorial / "newspaperish" feel).

   Single source of truth: load Outfit, override .hero-title,
   h1.display, h1.page-title and h2.section-title to match the
   v4 hero look without forcing all-caps everywhere.

   Body text stays in IBM Plex Sans — only headlines change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&display=swap');

/* --- Hero / page title — the strongest cinematic statement --- */
.hero-title,
h1.display,
h1.page-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* --- Section-level display — slightly lighter so hierarchy reads --- */
h2.section-title,
h2.display {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* --- Italic em accents inside cinematic headings keep the
   accent colour and italic styling readers expect; just inherit
   the Outfit family so weight/letter-spacing track. --- */
.hero-title em,
h1.display em,
h1.page-title em,
h2.section-title em,
h2.display em {
  font-family: inherit !important;
  font-style: italic;
  font-weight: 700;
}