[data-role="hero"] { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 64px; padding-block: 44px 76px; }
[data-role="hero-copy"] { min-width: 0; }
[data-role="hero"] h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); max-width: 13ch; }
[data-role="hero"] h1 span { display: block; }
[data-role="hero"] [data-role="lede"] { margin-top: 1.75rem; max-width: 46ch; }
[data-role="hero"] [data-role="button"] { margin-top: 1.6rem; }
[data-role="illustration"] { min-width: 0; margin: 0; }
[data-role="image-field"] { position: relative; padding: 14px; border-radius: 12px; background: #f8f5ee; box-shadow: var(--shadow); }
[data-role="image-field"]::before { position: absolute; inset: -10px 18px 18px -10px; z-index: -1; content: ""; border-radius: 12px; background: var(--blue); opacity: .32; }
[data-role="illustration"] img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 8px; object-fit: cover; color: var(--muted); font-size: 1rem; }
[data-role="illustration"] figcaption { padding: 24px 18px 0; color: var(--muted); max-width: 44ch; }
[data-role="hero"][data-size="chapter"] { grid-template-columns: 1.4fr .8fr; padding-block: 32px 64px; gap: 80px; }
[data-role="hero"][data-size="chapter"] h1 { font-size: clamp(2.25rem, 3.6vw, 3.4rem); max-width: 18ch; }
[data-picture="safety"] [data-role="image-field"]::before { background: var(--green); }
[data-picture="cost"] [data-role="image-field"]::before { background: var(--pink); }
[data-picture="questions"] [data-role="image-field"]::before { background: var(--green); }

@media (max-width: 900px) {
  [data-role="hero"], [data-role="hero"][data-size="chapter"] { gap: 36px; }
}
@media (max-width: 700px) {
  [data-role="hero"], [data-role="hero"][data-size="chapter"] { grid-template-columns: 1fr; padding-block: 24px 48px; gap: 36px; }
  [data-role="hero"] h1 { max-width: 15ch; font-size: 2.7rem; }
  [data-role="hero"][data-size="chapter"] h1 { font-size: 2.4rem; }
  [data-role="hero"] [data-role="lede"] { margin-top: 1.25rem; }
  [data-role="hero"] [data-role="button"] { margin-top: 1rem; }
  [data-role="image-field"] { padding: 10px; margin-inline: 10px; }
  [data-role="illustration"] figcaption { padding-top: 18px; }
}