/* Approved cozy hero refinements. Scoped to hero typography and secondary CTAs. */
.home-page .hero-headline-balanced,
.home-page .hero-headline-balanced * {
  /* Even reduced-motion's inherited .01ms transitions must not affect metrics. */
  transition: none !important;
}
.home-page .hero-slide:first-child .hero-headline-balanced {
  --hero-prominent-size: clamp(52px, 5.1vw, 104px);
  font-size: var(--hero-prominent-size);
  line-height: 1.01;
  letter-spacing: -.058em;
}
.home-page .hero .hero-headline-balanced .hero-headline-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: normal;
  /* Resolve spacing against each line's own size, not inherited h1 pixels. */
  letter-spacing: -.058em;
}
.home-page .hero .hero-headline-balanced:is(.is-fitting, .is-fitted) .hero-headline-line {
  max-width: none;
  white-space: nowrap;
}
.home-page .hero .hero-headline-balanced .hero-headline-intro {
  font-size: var(--hero-intro-fitted, calc(var(--hero-prominent-size) * .8));
  margin-bottom: .11em;
}
.home-page .hero .hero-headline-balanced .hero-headline-emphasis {
  font-size: var(--hero-emphasis-fitted, var(--hero-prominent-size));
}
/* A graphite surface softens the contrast without relying on the photograph. */
.home-page .hero .button-ghost,
.solutions-page-v3 .solutions-specialist-button {
  background: #262a30;
  border-width: 2px;
  font-weight: 800;
  text-shadow: none;
  transition: box-shadow 160ms, transform 160ms;
}
.home-page .hero .button-ghost::before,
.solutions-page-v3 .solutions-specialist-button::before {
  inset: -2px;
  padding: 2px;
}
.home-page .hero .button-ghost span,
.solutions-page-v3 .solutions-specialist-button span {
  /* Same brand hues, small lightness lift only on the tiny action label. */
  background-image: linear-gradient(100deg,
    color-mix(in srgb, #206aff 70%, white) 0%,
    color-mix(in srgb, #5160ff 70%, white) 52%,
    color-mix(in srgb, #7a45ff 70%, white) 100%);
}
.home-page .hero .button-ghost:hover,
.solutions-page-v3 .solutions-specialist-button:hover {
  background: #262a30;
  box-shadow: 0 0 0 2px rgba(81,96,255,.17);
}
@media (max-width: 1100px) {
  .home-page .hero-slide:first-child .hero-headline-balanced {
    --hero-prominent-size: clamp(47px, 5.1vw, 63px);
  }
}
@media (max-width: 760px) {
  .home-page .hero-slide:first-child .hero-headline-balanced {
    --hero-prominent-size: clamp(42px, 8vw, 58px);
  }
}
