/* ============ Hero V3 — premium founder editorial ============ */
.ampd-herov3 {
  position: relative;
  /* Straight top-to-bottom warm ramp, warm side up — a soft cream/orange tint
     (accent mixed at 14→0%) is deepest at the very top and eases gradually
     down to pure white, which holds through the CTA end of the hero. Stops
     are close together in tint so there are no visible bands, hotspots or
     diagonal concentration; expressed via color-mix of the scheme accent
     (same approach as tokens.css's soft backgrounds) so every colour scheme
     gets an on-brand hero wash for free. The hero ends on white, flowing
     seamlessly into the white founder section below. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-primary) 14%, white) 0%,
    color-mix(in srgb, var(--accent-primary) 9%, white) 22%,
    color-mix(in srgb, var(--accent-primary) 5%, white) 44%,
    color-mix(in srgb, var(--accent-primary) 2%, white) 64%,
    #ffffff 84%,
    #ffffff 100%);
  padding: 22px 20px 0;
  overflow: hidden;
}

.ampd-herov3__rating {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 500; color: var(--ampd-label); opacity: 0.78;
}

.ampd-herov3__stage { position: relative; margin-top: 20px; min-height: 428px; }

.ampd-herov3__text { position: relative; z-index: 3; width: 80%; }
.ampd-herov3__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.24;
  letter-spacing: -0.02em; color: var(--ampd-ink);
}
.ampd-herov3__subtitle { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ampd-black); width: 70%; }

/* Text scrim retired — the white fade that used to sit behind the headline
   read as a visible white block once the gradient's warm end moved to the
   top of the hero. The type sits directly on the wash now; the scrim divs
   stay in the markup (both variants) but render nothing. */
.ampd-herov3__text-scrim { display: none; }

/* Ross — sits inside the gradient (no glow, no card), dominates the right side, right
   shoulder/arm cropping off-screen (.ampd-page clips it). True aspect ratio on the box
   itself so object-fit:contain never letterboxes. Stage is sized tall enough to hold his
   whole figure — feet, the pouch, his shorts all sit fully inside it with no overlap into
   the actions row below, so there's nothing there that needs to be faded away. */
.ampd-herov3__figure { position: absolute; top: 0px; right: -80px; width: 120%; aspect-ratio: 1500 / 1248; z-index: 1; }
.ampd-herov3__cutout {
  width: 100%; height: 100%; object-fit: contain; object-position: top left; display: block;
  /* Barely-there softening of the raw PNG's bottom pixel edge only. A fade that starts any
     earlier dissolves real in-frame content (his shoe, the pouch, his shorts) into the
     background and reads as a muddy smear rather than a clean blend. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%);
}

/* Actions sit below Ross with generous internal spacing throughout. */
.ampd-herov3__actions { position: relative; z-index: 3; margin-top: -35px; }
.ampd-herov3__actions .ampd-btn-group { margin: 0; }
.ampd-herov3__actions .ampd-perks { margin: 20px 0 0; padding-bottom: 8px; }

/* Hero ends cleanly here — no fade, no glow, no scrim into the next section. Scoped to
   "the founder section immediately after this hero" only (via adjacent-sibling), so V1
   and V2's founder sections keep their own shared background untouched. Crisp white +
   generous top space for a deliberate, visible break rather than a blend. */
.ampd-herov3 + #founder { background: #ffffff; padding-top: 64px; }

@media (max-width: 360px) {
  .ampd-herov3__title { font-size: 21px; }
  .ampd-herov3__stage { min-height: 358px; }
  .ampd-herov3__figure { top: -30px; width: 460px; }
}