/* Opt-in typography for first-screen headings on the main site pages.
 * The repeated homepage attribute outranks its typography sheet loaded in the body. */
:is(#dc-root, x-dc) [data-screen-label="Homepage"] h1[data-equipment-name][data-equipment-name],
body.installation-page #main #service-title,
body.skzi-page #main #service-title,
body.driver-card-page #main #service-title,
body.help-page #main #service-title,
body.glonass-page #main #service-title.monitoring-hero__title,
body.conditioners-page #main .heaters-hero .era-hero__copy h1#heaters-hero-title,
body.era-page #main :is(#heaters-hero-title, #era-hero-title, #dopog-hero-title, #object-hero-title, #video-hero-title),
body.about-page #main #company-title,
body.contacts-page #main #contacts-title,
body.blog-page #main .blog-hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* Inline title fragments keep their own color fills, animation, and weight. */
:is(#dc-root, x-dc) [data-screen-label="Homepage"] h1[data-equipment-name][data-equipment-name] *,
body.installation-page #main #service-title *,
body.skzi-page #main #service-title *,
body.driver-card-page #main #service-title *,
body.help-page #main #service-title *,
body.glonass-page #main #service-title.monitoring-hero__title *,
body.conditioners-page #main .heaters-hero .era-hero__copy h1#heaters-hero-title *,
body.era-page #main :is(#heaters-hero-title, #era-hero-title, #dopog-hero-title, #object-hero-title, #video-hero-title) *,
body.about-page #main #company-title *,
body.contacts-page #main #contacts-title *,
body.blog-page #main .blog-hero h1 * {
  font-family: inherit !important;
  font-size: inherit !important;
}

@media (min-width: 901px) {
  :is(#dc-root, x-dc) [data-screen-label="Homepage"] h1[data-equipment-name][data-equipment-name],
  body.installation-page #main #service-title,
  body.skzi-page #main #service-title,
  body.driver-card-page #main #service-title,
  body.help-page #main #service-title,
  body.glonass-page #main #service-title.monitoring-hero__title,
  body.conditioners-page #main .heaters-hero .era-hero__copy h1#heaters-hero-title,
  body.era-page #main :is(#heaters-hero-title, #era-hero-title, #dopog-hero-title, #object-hero-title, #video-hero-title),
  body.about-page #main #company-title,
  body.contacts-page #main #contacts-title,
  body.blog-page #main .blog-hero h1 {
    font-size: 50px !important;
  }
}

/* The driver-card route sizes H1 through this local custom property. */
@media (min-width: 901px) {
  body.driver-card-page #main #service-title {
    --driver-h1-size: 50px;
  }
}

/* Vertical hero phrases share the autonomous-heater reference font.
 * Keep each route's size, weight, placement, color and motion intact. */
body #main :is(.service-hero, .era-hero) .hero-visual-wordmark {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* Keep the existing experience label close to the first-screen title on phones. */
@media (max-width: 767px) {
  body.heaters-page #main .heaters-hero .heaters-hero__heading > .eyebrow,
  body.skzi-page #main .service-hero .hero-copy > .eyebrow,
  body.video-page #main .video-hero__heading > .eyebrow,
  body.object-video-page #main .object-hero__heading > .eyebrow,
  body.era-page #main .era-hero__heading > .era-eyebrow,
  body.era-page #main .era-hero__copy > .eyebrow,
  body.installation-page #main .service-hero .hero-copy > .eyebrow,
  body.help-page #main .help-hero__heading > .eyebrow {
    margin-bottom: 8px !important;
  }

  body.heaters-page #main .heaters-hero .heaters-hero__heading > h1 {
    margin-top: 0 !important;
  }

  /* The driver-card eyebrow and title are separate grid items below 601px. */
  body.driver-card-page #main .service-hero .hero-copy > .eyebrow {
    margin-bottom: 8px !important;
  }

  body.glonass-page #main .monitoring-hero .monitoring-hero__copy > .eyebrow {
    display: inline-flex !important;
    position: relative !important;
    top: -30px !important;
    margin: 0 0 8px !important;
  }
}

@media (max-width: 600px) {
  /* Offset only the driver's eyebrow's contribution to the hero grid row gap. */
  body.driver-card-page #main .service-hero .hero-copy > .eyebrow {
    margin-bottom: -16px !important;
  }
}