/*
 * MX landing-page typography
 *
 * Reusable controls:
 *   --mx-type-body-size
 *   --mx-type-h1-size / --mx-type-h2-size / --mx-type-h3-size
 *   --mx-type-eyebrow-size
 *   --mx-type-lead-size
 *   --mx-type-hero-tagline-size
 *
 * Page-specific colours remain in the landing-page container.
 */

#mxe-root {
  --mx-type-body-size: 16px;
  --mx-type-body-line-height: 1.65;
  --mx-type-h1-size: clamp(32.1px, 9.82vw, 42.9px);
  --mx-type-h2-size: clamp(24.6px, 7.64vw, 32.2px);
  --mx-type-h3-size: clamp(18.05px, 5.6vw, 21.85px);
  --mx-type-heading-line-height: 1.08;
  --mx-type-heading-letter-spacing: -.025em;
  --mx-type-h2-letter-spacing: -.02625em;
  --mx-type-eyebrow-size: 10.7px;
  --mx-type-eyebrow-weight: 750;
  --mx-type-eyebrow-letter-spacing: .137em;
  --mx-type-lead-size: 14.75px;
  --mx-type-hero-tagline-size: 15.36px;

  font-family: var(--mxe-font, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--mx-type-body-size);
  line-height: var(--mx-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#mxe-root h1,
#mxe-root h2,
#mxe-root h3,
#mxe-root h4 {
  font-family: var(--mxe-font, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: 800;
  letter-spacing: var(--mx-type-heading-letter-spacing);
  line-height: var(--mx-type-heading-line-height);
}

#mxe-root h1 { font-size: var(--mx-type-h1-size); }
#mxe-root h2 {
  font-size: var(--mx-type-h2-size);
  letter-spacing: var(--mx-type-h2-letter-spacing);
}
#mxe-root h3 { font-size: var(--mx-type-h3-size); }

/* Paragraphs inherit the general size and rhythm from #mxe-root. */
#mxe-root .mxe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: var(--mx-type-eyebrow-size);
  font-weight: var(--mx-type-eyebrow-weight);
  letter-spacing: var(--mx-type-eyebrow-letter-spacing);
  line-height: 1.3;
  text-transform: uppercase;
}

#mxe-root .mxe-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 99px;
}

#mxe-root .mxe-lead {
  font-size: var(--mx-type-lead-size);
  line-height: var(--mx-type-body-line-height);
}

#mxe-root .mxe-hero-sub {
  font-size: var(--mx-type-hero-tagline-size);
  line-height: var(--mx-type-body-line-height);
}

@media (min-width: 621px) {
  #mxe-root {
    --mx-type-h1-size: clamp(38px, 4.94vw, 64.6px);
    --mx-type-h2-size: clamp(30.4px, 3.8vw, 45.6px);
    --mx-type-h3-size: clamp(18.05px, 1.9vw, 21.85px);
    --mx-type-eyebrow-size: 12px;
    --mx-type-eyebrow-weight: 700;
    --mx-type-eyebrow-letter-spacing: .16em;
    --mx-type-lead-size: clamp(17px, 1.55vw, 20px);
    --mx-type-hero-tagline-size: clamp(17px, 1.5vw, 20px);
  }
}

@media (min-width: 1041px) {
  #mxe-root {
    --mx-type-h1-size: clamp(36px, 4.68vw, 61.2px);
    --mx-type-h2-size: clamp(28.8px, 3.6vw, 43.2px);
    --mx-type-h3-size: clamp(17.1px, 1.8vw, 20.7px);
  }
}