/*
 * Homepage C typography candidate.
 *
 * Scope: reading typography on the homepage only. Shared navigation, icons,
 * diagrams and code-like product UI labels retain their component fonts.
 */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../font/noto-sans-web4-home-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.web4-home-redesign #main-content {
  --w4-home-reading-font: "Noto Sans", Arial, "Helvetica Neue", sans-serif;
}

.web4-home-redesign #main-content :is(
  .hero-copy, .hero-copy :where(h1, p, a, span, strong, em),
  .exploration-benefit > div, .exploration-benefit > div :where(strong, span, em),
  .section-title, .section-title :where(h2, p, span),
  .w4-idc__eyebrow, .w4-idc__title, .w4-idc__title > span, .w4-idc__lede,
  .w4-idc__future-copy, .w4-idc__future-copy :where(h3, p, a, span),
  .tbe-v10-8-head, .tbe-v10-8-head :where(h2, p, span),
  .tbe-v10-8-definition, .tbe-v10-8-definition :where(h3, p, span),
  .cw-copy, .cw-copy :where(h2, h3, p, a, span, strong, em),
  .web4-scenario-card > h3, .web4-scenario-card > h3 :where(a, span),
  .web4-scenario-card > p, .web4-scenario-platform > span,
  .ai-v10-intro, .ai-v10-intro :where(h2, p, span),
  .et-v109-card > h3, .et-v109-card > p,
  .faq-section, .faq-section :where(h2, h3, p, a, span, strong, em, summary),
  .home-trial-scope, .home-trial-scope :where(h2, h3, p, span, strong, em)
) {
  font-family: var(--w4-home-reading-font) !important;
}

/* Product UI, diagrams, icons, code-like labels and the shared CTA are untouched. */
.web4-home-redesign #main-content .web4-scenario-icon,
.web4-home-redesign #main-content .web4-scenario-icon .lni {
  font-family: Arial, "Helvetica Neue", sans-serif !important;
}

/* Direction C: assertive release hierarchy, preserving the confirmed composition. */
.web4-home-redesign #main-content .hero h1 {
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

.web4-home-redesign #main-content :is(
  .section-title, .tbe-v10-8-head, .cw-copy, .ai-v10-intro, .et-v109-head,
  .faq-section > header
) > h2 {
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

.web4-home-redesign #main-content :is(
  .cw-copy, .web4-scenario-card
) h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

.web4-home-redesign #main-content :is(.hero .lead, .hero-copy > .lead, .w4-home-hero .lead) {
  max-width: 64ch;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.web4-home-redesign #main-content :is(
  .section-title, .tbe-v10-8-head, .cw-copy, .web4-scenario-card,
  .ai-v10-intro, .et-v109-card, .faq-section
) > p,
.web4-home-redesign #main-content :is(.cw-copy, .web4-scenario-card, .et-v109-card) p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 820px) {
  .web4-home-redesign #main-content .hero h1 { font-size: 52px !important; }

  .web4-home-redesign #main-content :is(
    .section-title, .tbe-v10-8-head, .cw-copy, .ai-v10-intro, .et-v109-head,
    .faq-section > header
  ) > h2 { font-size: 36px !important; }
}

@media (max-width: 767px) {
  .web4-home-redesign #main-content .hero h1 { font-size: 38px !important; }

  .web4-home-redesign #main-content :is(
    .section-title, .tbe-v10-8-head, .cw-copy, .ai-v10-intro, .et-v109-head,
    .faq-section > header
  ) > h2 { font-size: 32px !important; }
}