Layout
Hero .
Split flex anti-espaço-vazio; variantes impact/split/compact, display 36→72.
Hero — variants & surfaces
Split, anti-empty-space hero. Flex row: text col flex:1.1 + media col flex:0.9.
Asymmetric clamped padding clamp(48px,7vw,96px) top /
clamp(56px,7vw,104px) bottom.
Title font-size via tokens only — --size-display (36→72) for impact,
--size-h1 (32→52) for split/compact.
Split hero — text left, media right
Flex row: text flex:1.1, media flex:0.9. Paragraph capped at 54ch. Padding clamp(48px,7vw,96px) top / clamp(56px,7vw,104px) bottom. No fixed 100px+ band.
Impact hero — display size, one promise
Title at --size-display (36→72px). One H1, one promise, one CTA. Same split flex row and clamped padding — no tall empty band.
Compact hero — reduced padding, conversion focus
Padding: clamp(40px,5vw,72px). Same 1.1/0.9 flex split. Used on conversion pages where the offer is named in the H1 and the subline reframes it.
Dark hero — carbon surface via data-surface cascade
surface='carbon' sets data-surface='carbon' on the root. The --dark-anchor token and all role tokens re-resolve through tokens.css — zero hex in Hero.astro.
Impact hero on ink surface — display token, dark anchor
Ink surface (--ink token) via data-surface cascade. --text-accent resolves to --green-400 (electric) on dark surfaces. No hardcoded colour.
Media slot — explicit slotted placeholder
Passing a decorative div into slot='media'. The --card-bg role token re-resolves per surface; no hex needed. The slot accepts any block-level element: img, video, or placeholder.