/* SaaSly section title measurements: Switzer 500, 0.9 line height,
   7.725vw desktop; 75px tablet; 17.5234vw mobile (capped at 75px).
   Font obtained from Fontshare; its unmodified FFL is beside the font. */
@font-face {
  font-family: 'Switzer Section'; src: url('/assets/fonts/switzer/Switzer-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* data-original-heading preserves the existing FAQ, audience and contact layouts. */
@layer section-titles {
  body:not([data-page='auth']):not([data-page='portal']) {
    --section-title-size: clamp(75px, 7.725vw, 132px);
    --section-title-gap: clamp(42px, 4.12vw, 72px);
    & :where(.sx__title, .ed-head__title, .section-label, .studio-process__heading h2,
        .saas-use-cases__head h2, #use-cases-title, #system-path-title,
        .book-call__title, .cta-banner__title,
        .page-intro h1, .hx--page h1, .hx__title):not([data-original-heading], [data-original-heading] *) {
      display: block !important; width: 100% !important; max-width: 1200px !important;
      margin: 0 auto !important; padding: 0 !important;
      font-family: 'Switzer Section', Arial, sans-serif !important;
      font-size: var(--section-title-size) !important; font-weight: 500 !important;
      line-height: .9 !important; letter-spacing: normal !important;
      text-transform: none !important; text-align: center !important;
      color: #000 !important; background: none !important;
      border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
      text-wrap: balance !important; overflow-wrap: anywhere !important;
      &::before, &::after { content: none !important; display: none !important; }
      & :is(span, em, strong):not([data-original-heading], [data-original-heading] *) { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; background: none !important; }
    }
    & .saas-use-cases__intro:not([data-original-heading], [data-original-heading] *) { width: 100% !important; max-width: 1200px !important; margin-inline: auto !important; }
    & .system-path__layout:not([data-original-heading], [data-original-heading] *) { grid-template-columns: minmax(0, 1fr) !important; }
    & .system-path__intro:not([data-original-heading], [data-original-heading] *) { width: 100% !important; text-align: center !important; }
    & .system-path__route:not([data-original-heading], [data-original-heading] *) { justify-content: center !important; }
    /* Replace the badge-plus-title pairing with the reference's single title. */
    & :is(.sx__head > .sx__eyebrow, .ed-head > .ed-eyebrow,
        .system-path__eyebrow, .saas-use-cases__eyebrow, .book-call__eyebrow,
        .page-intro > .eyebrow, .hx--page .hx__eyebrow,
        .inner-wrap > .header):not([data-original-heading], [data-original-heading] *) { display: none !important; }
    & :is(.sx__head, .ed-head, .studio-process__heading, .saas-use-cases__head):not([data-original-heading], [data-original-heading] *) {
      display: flex !important; flex-direction: column !important; align-items: center !important;
      width: 100% !important; max-width: none !important; gap: 24px !important;
      margin-bottom: var(--section-title-gap) !important; text-align: center !important;
    }
    & .section-label:not([data-original-heading], [data-original-heading] *) { margin-bottom: var(--section-title-gap) !important; }
    & :is(.sx__head > p, .ed-head > p, .studio-process__heading > p):not([data-original-heading], [data-original-heading] *) { text-align: center !important; margin-inline: auto !important; }
    & :is(.book-call__title, .cta-banner__title):not([data-original-heading], [data-original-heading] *) { font-size: clamp(38px, 4vw, 64px) !important; }
  }
  /* Existing dark sections use the same typography with reversed contrast. */
  body:is([data-page='pricing'], [data-page='lab'], [data-page='faq'], [data-page='sections']) :is(.sx--deep, .hx--deep) :is(.sx__title, h1) { color: #fff !important; }
  @media (max-width: 991px) {
    body { --section-title-size: 75px !important; --section-title-gap: 56px !important; }
  }
  @media (max-width: 479px) {
    body { --section-title-size: min(75px, 17.5234vw) !important; --section-title-gap: 15.8878vw !important; }
  }
}