/* =========================================================================
   Page — public marketing (U-701)
   -------------------------------------------------------------------------
   index.html and the marketing pages under {en,de}/: ecosystem, the three
   audience pages, crew and contact.

   ONLY what is genuinely page-level lives here. The blocks these pages share
   with each other — and that U-702 (pricing) and U-507 (blog, changelog) will
   want on sight — are components, and they are filed as components:

       components/band.css        the alternating full-bleed band
       components/split.css       prose beside something
       components/visual.css      a key-visual figure
       components/steps.css       a numbered <ol>
       components/facts.css       a <dl> of short facts
       components/note.css        an inline note
       components/anchor-row.css  in-page anchor chips
       components/card.css        (the .card-link affordance was added there)

   That split is not tidiness. Guideline §2 files one component per file
   precisely so two page branches touch two different files; leaving seven
   shared blocks in a stylesheet named after one page guarantees the next two
   frontend waves both edit this one.

   No literal colour here; every value comes from tokens.css.

   TWO STRUCTURAL DECISIONS, both learned rather than chosen:

   1. The subpages use the THEMED, sticky header and paint a COMPACT gradient
      hero below it. Only index.html has the full-viewport hero with the header
      floating over it — that arrangement needs the header taken out of flow
      (pages/splash.css explains why), and repeating it on six more pages would
      repeat the coupling six more times for no gain.

   2. The gradient is painted BY the hero, never by a wrapper around it. A
      wrapper has to close before the content sections and drags <main> shut
      with it (LEARNING_FRONTEND.md L-FE-12).
   ========================================================================= */

/* ---- Page frame ---------------------------------------------------------- *
 * The footer sits at the bottom even on a short page.
 * ------------------------------------------------------------------------- */

.marketing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.marketing-page > main {
  flex: 1;
}

/* An in-page anchor must not land under the sticky header — including `#main`,
 * which the skip link targets.
 *
 * 120 px, and the number is a deliberate over-estimate. The header measures
 * 65 px at every width in English, but it wraps to a second row as soon as a
 * translation is longer or a nav item is added (the failure pages/splash.css
 * documents), which is about 129 px. Guessing low hides the heading the visitor
 * just asked for; guessing high costs whitespace. There is no token for the
 * header's height, and CSS cannot read one element's height from another — so
 * this is a magic number, and it is the safe direction of one.
 */
.marketing-page main[id],
.marketing-page main [id] {
  scroll-margin-top: 120px;
}

/* ---- Compact page hero --------------------------------------------------- *
 * Dark teal in both themes, so it carries `.on-brand` and uses the
 * theme-invariant ink. Full-strength white only: the gradient's lightest stop
 * leaves 4.69:1 against pure white, so any translucency drops it below AA
 * (DESIGN_TOKENS.md §5a).
 * ------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
  color: var(--brand-on-dark);
  padding: clamp(48px, 8vw, 88px) 0;
}

/* A DARKENING bloom, not a mint one — and the reason is measured, not
 * stylistic.
 *
 * DESIGN_TOKENS.md §5a already records that white on the gradient's lightest
 * stop #04836F is 4.69:1, which clears AA by 0.19. A decorative overlay that
 * LIGHTENS the surface spends that margin: the mint glow this file used to
 * carry pushed the rendered background under the hero lede to #0F876F and the
 * measured ratio to 4.45:1 — a real AA failure, found by sampling the painted
 * pixels under each glyph run rather than by computing against the token.
 *
 * Reducing the mint does not fix it. There is no alpha that does: mint over the
 * lightest stop is already below 4.5:1 at 8 %. Any lightening bloom is unsafe
 * wherever text can land, and text lands wherever a translation or a copy edit
 * puts it.
 *
 * So the bloom composites toward --nav-bg (#063F36), which is darker than every
 * stop of --hero-grad. It can only RAISE the contrast of light text, at any
 * strength, at any position — the failure mode is designed out rather than
 * tuned down.
 */
.page-hero::after {
  content: "";
  position: absolute;
  top: -260px;
  right: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--nav-bg) 42%, transparent),
    transparent 70%
  );
}

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

/* `.eyebrow` is teal on the themed surfaces — unreadable on the gradient. */
.page-hero .eyebrow {
  color: var(--brand-on-dark);
}

.page-hero h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(28px, 5vw, 46px);
  color: var(--brand-on-dark);
}

.page-hero-lede {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--brand-on-dark);
}

.page-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---- The contact page's anchor row --------------------------------------- *
 * The chips themselves are components/anchor-row.css; this is only where the
 * row sits. It hangs directly under the hero rather than inside a full
 * `.section`, which left a band of empty page between the chips and the first
 * heading.
 * ------------------------------------------------------------------------- */

.anchor-nav {
  padding-top: clamp(24px, 4vw, 40px);
}

/* ---- Contact and statutory details --------------------------------------- *
 * <address> is italic by default in every UA stylesheet, which is wrong for a
 * postal address and actively unhelpful for an e-mail address.
 * ------------------------------------------------------------------------- */

.contact-address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.8;
  margin: 0 0 24px;
}