/* Hub hero — the ONE centered hero shared by the Platform and Products
   hubs (Sofia, 2026-07-26: same layout, one implementation; 2026-07-28:
   one component — src/components/HubHero.astro — and one ground). Anatomy:
   kicker (.kicker primitive) · one-line display title · centered sub ·
   CTA pair · a full-width stage at the foot whose visual is the page's
   own (capability fan / product orbit, slot "stage") and crops at the
   fold. Exactly one viewport tall. The shared ground is the 22px dot
   grid + the blue-100 corner wash + the smooth blue foot wash (same
   round-4 recipe as capability.css .cap-hero, keep in sync) — both hubs,
   identical; the pages' own ::before/::after glows are retired. */

.hub-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--color-grey-200) 55%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
    var(--color-background);
  color: var(--color-foreground);
}
.hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg,
      color-mix(in oklab, var(--color-blue-500) 28%, var(--color-white)) 0%,
      color-mix(in oklab, var(--color-blue-500) 11%, transparent) 16%,
      transparent 38%),
    radial-gradient(60% 80% at 88% 8%, color-mix(in oklab, var(--color-blue-100) 75%, transparent), transparent 70%);
}
/* the copy lockup sits on clean white — a soft halo clears the dot grid
   under the text so the texture never runs through the letters (Sofia
   2026-08-18); dots fade back in around it, no hard edge */
.hub-hero__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1080px, 96%);
  height: min(560px, 100%);
  background: radial-gradient(
    closest-side,
    var(--color-white) 52%,
    color-mix(in oklab, var(--color-white) 72%, transparent) 78%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}
.hub-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the copy lockup CENTERS in the estate between the nav and the stage
     (Sofia, 2026-08-14: "center it between the main nav and the product
     cards below" — hub heroes are the sanctioned centered heroes). The
     164px floor keeps the 2026-07-28 nav clearance on short viewports;
     extra height splits evenly around the lockup instead of pooling
     below the buttons. */
  flex: 1 0 auto;
  justify-content: center;
  width: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
  padding: 164px 20px 56px;
  text-align: center;
}
.hub-hero__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 40px;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--color-black);
}
@media (min-width: 640px) { .hub-hero__title { font-size: 52px; } }
@media (min-width: 1280px) { .hub-hero__title { font-size: 62px; } }
.hub-hero__sub {
  margin-top: 20px;
  margin-inline: auto;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
@media (min-width: 640px) { .hub-hero__sub { font-size: var(--fs-body); } }
.hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
/* the stage: whatever the page floats at the hero's foot */
.hub-hero__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin-top: 44px;
}


/* the 2026-08-05 tall-screen padding ramp retired 2026-08-14 — the
   flex centering above holds every height, no threshold. */