/* Shared typography for the four category hero sections. */
html[data-seo-tab] .hero .hero-grid > div:first-child {
  font-family: inherit;
}

html[data-seo-tab] .hero h1,
html[data-seo-tab] .hero .yc-page-heading {
  margin: 0 0 12px !important;
  color: #17131d;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.055em !important;
  word-break: keep-all;
}

html[data-seo-tab] .hero h1 span {
  white-space: nowrap;
}

html[data-seo-tab] .hero .hero-grid > div:first-child > p,
html[data-seo-tab] .hero .ml-hero-description {
  margin: 0 !important;
  color: #625c6b !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.025em !important;
  word-break: keep-all;
}

@media (max-width: 880px) {
  html[data-seo-tab] .hero h1,
  html[data-seo-tab] .hero .yc-page-heading {
    font-size: 34px !important;
  }
}

@media (max-width: 560px) {
  html[data-seo-tab] .hero h1,
  html[data-seo-tab] .hero .yc-page-heading {
    margin-bottom: 10px !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  html[data-seo-tab] .hero .hero-grid > div:first-child > p,
  html[data-seo-tab] .hero .ml-hero-description {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}