/* Keep hero copy readable in every browser/theme state. */

/* Use one stable hero surface in every browser and viewport. A single surface
   prevents text contrast from changing halfway through a line. */
.landing-page .landing-hero.landing-hero--illustrated,
body.dark-mode .landing-hero.landing-hero--illustrated {
  background: linear-gradient(135deg, #122333 0%, #163b43 100%) !important;
  background-color: #16333b !important;
}

.landing-page .landing-hero__copy {
  width: min(100%, 38rem);
  max-width: 38rem;
  justify-self: start;
  color: var(--landing-hero-text, #f8ffff) !important;
}

.landing-page .landing-hero__copy .landing-hero__title,
.landing-page .landing-hero__copy .landing-hero__lede {
  color: inherit !important;
}

.landing-page .landing-hero__proofline {
  color: var(--landing-hero-text, #f8ffff) !important;
  opacity: 1;
}

/* All hero copy shares the same dark surface. */
.landing-page .landing-hero__proofline {
  color: var(--landing-hero-text-muted, #f8ffff) !important;
  opacity: 1;
}

.landing-page .landing-hero__proofline::before {
  background: var(--landing-accent, #2f9e8f);
  box-shadow: 0 0 0 0.34rem rgba(var(--accent-rgb, 47, 158, 143), 0.22);
}

/* Dark-mode landing-shell still uses the split hero. Do not flatten it
   onto a pale surface under the light hero type. */
body.dark-mode .landing-hero.landing-hero--illustrated {
  background:
    linear-gradient(115deg, rgba(18, 35, 51, 0.98) 0%, rgba(18, 55, 62, 0.95) 44%, rgba(234, 252, 250, 0.72) 44.2%, rgba(246, 251, 255, 0.92) 100%);
  background-color: #16333b;
}

@media (max-width: 768px) {
  .landing-page .landing-hero__copy {
    width: 100%;
    max-width: none;
  }

  .landing-page .landing-hero__proofline {
    color: var(--landing-hero-text-muted, #f8ffff) !important;
  }
}