/* =========================================================================
   Page — public splash (index.html)
   The brand gradient hero. Dark teal in both themes, so it carries .on-brand.
   ========================================================================= */

/* The gradient belongs to the HERO, and the header floats over it.
 *
 * The previous shape — a `100% 100vh` background band on <body> plus a hero of
 * `calc(100vh - 64px)` — coupled two declarations in two files through a magic
 * number equal to the header's min-height. The header wraps to a second row as
 * soon as a translation is longer, a nav item is added, or the fallback font
 * has wider metrics (and `--font`'s fallback stack is required to stand on its
 * own). The moment it does, header + hero exceed the band, the bottom of the
 * hero lands on --doc-bg while still coloured --brand-on-dark, and white on
 * the light page background is 1.20:1 — invisible text on the primary call to
 * action.
 *
 * Painting the hero itself and taking the header out of flow removes the
 * coupling: the gradient is exactly as tall as the thing it is behind, whatever
 * the header does. A wrapper element cannot be used — it would have to close
 * before the content sections and would drag <main> shut with it (L-FE-12).
 */
.splash-page {
  background: var(--doc-bg);
}

/* Over the hero, not above it, so the gradient starts at the top of the page.
   `.on-brand` already makes the header transparent and its ink theme-invariant. */
.splash-page > .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: var(--hero-grad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  /* Top padding clears the absolutely positioned header with room for it to
     wrap. Being generous here costs whitespace; being wrong the other way used
     to cost legibility. */
  padding: clamp(96px, 14vh, 140px) clamp(16px, 5vw, 56px) 72px;
  color: var(--brand-on-dark);
}

/* Two soft blooms, decorative only — DARKENING, not mint.
 *
 * These were `--brand-mint` at 28 %. Measuring the painted pixels under each
 * glyph run (rather than computing against the token) found two AA failures the
 * token maths cannot see, because the glow is not in the token: the header's
 * "More" toggle at 4.28:1 over #188A6F, and the `.hero-audience` line, which is
 * width-dependent and worst where the hero is narrowest — 4.45:1 at 500 px and
 * 3.74:1 at 320 px, over rgb(26,149,120). Quoting only the 4.45 read as a near
 * miss; at a phone width it was not close.
 *
 * The full reasoning, and why lowering the mint cannot fix it at any alpha, is
 * in pages/marketing.css beside the same decision. Short form: white on the
 * gradient's lightest stop is 4.69:1 before anything is painted on top, so a
 * lightening bloom has no headroom to spend. --nav-bg is darker than every stop
 * of --hero-grad, so this one can only raise the ratio.
 */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--nav-bg) 42%, transparent),
    transparent 70%
  );
}

.hero::before {
  width: 620px;
  height: 620px;
  top: -220px;
  right: -160px;
}

.hero::after {
  width: 460px;
  height: 460px;
  bottom: -200px;
  left: -140px;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-logo {
  height: 64px;
  width: auto;
}

.hero h1 {
  margin: 8px 0 0;
  max-width: 16ch;
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 700;
  color: var(--brand-on-dark);
}

/* Full-strength ink, not a translucent one: the gradient's lightest stop
   leaves only 4.69:1 against pure white — any opacity below 100 % drops the
   lede under WCAG AA. */
.hero-lede {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--brand-on-dark);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Full-strength ink here too. The soft mint ink #D6EFE7 measures
   4.85:1 against the gradient's middle stop and only 3.87:1 against its
   lightest — and `150deg` puts that lightest stop at the bottom right,
   which is exactly where this line sits. At 13.5 px the requirement is 4.5:1,
   so the soft ink fails. White is 4.69:1 at the worst point and passes.
   Weight and size carry the hierarchy instead of opacity.
   (It was `--nav-ink` until U-728, which made the sidebar a themed surface and
   deleted the token with its last caller. The VALUE is what the measurement is
   about, so the value is what this comment names now — a sentence that explains
   a decision by pointing at a token nobody can look up explains nothing.) */
.hero-audience {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--brand-on-dark);
}

/* Below the first viewport the background layer has run out and --doc-bg
   shows through, so the sections only need to restore the themed ink. */
.splash-sections {
  color: var(--doc-ink);
}