/* Resonant LMS Portal v2.9.1 — deterministic hero wrapping */

/* Home remains the largest display level, but never exceeds 60px. */
.portal-home .hero--brand .hero__title {
  max-width: none;
  font-size: clamp(44px, 3.15vw, 60px) !important;
  line-height: 1.18;
  letter-spacing: -0.048em;
}

.hero-title__line {
  display: block;
}

.hero-title__line:first-child,
.product-title__line:first-child {
  white-space: nowrap;
}

.hero-title__line--message {
  display: flex;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
}

.hero-title__phrase,
.hero-title__accent,
.product-title__phrase,
.product-accent {
  white-space: nowrap;
}

.portal-home .hero__title .hero-title__accent {
  margin: 0;
}

/* Product pages are one level smaller than the portal Home. */
.product-page .product-hero h1 {
  max-width: 12em;
  font-size: clamp(40px, 2.85vw, 54px) !important;
  line-height: 1.22;
  letter-spacing: -0.043em;
}

.product-title__line {
  display: block;
}

.product-title__line--message {
  display: flex;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
}

.product-accent {
  display: inline-block;
}

@media (max-width: 1200px) {
  .portal-home .hero--brand .hero__title {
    font-size: clamp(42px, 4.2vw, 52px) !important;
  }

  .product-page .product-hero h1 {
    font-size: clamp(38px, 4vw, 48px) !important;
  }
}

@media (max-width: 900px) {
  .portal-home .hero--brand .hero__title {
    font-size: clamp(40px, 6.2vw, 50px) !important;
  }

  .product-page .product-hero h1 {
    max-width: 13em;
    font-size: clamp(37px, 6vw, 46px) !important;
  }
}

@media (max-width: 620px) {
  .portal-home .hero--brand .hero__title {
    font-size: clamp(33px, 9.1vw, 40px) !important;
    line-height: 1.22;
  }

  .product-page .product-hero h1 {
    max-width: none;
    font-size: clamp(32px, 8.7vw, 39px) !important;
    line-height: 1.25;
  }
}

@media (max-width: 390px) {
  .portal-home .hero--brand .hero__title {
    font-size: clamp(31px, 8.7vw, 35px) !important;
  }

  .product-page .product-hero h1 {
    font-size: clamp(30px, 8.3vw, 34px) !important;
  }
}