@layer base {
  body > :where(header.hero, section) {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  body > :where(section) { padding-block: var(--space-l); }

  .hero { padding-block: clamp(var(--space-2xl), 7vw, 4rem) var(--space-l); }

  .tagline {
    font-family: var(--font-display);
    font-size: clamp(var(--text-l), 3.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.0125em;
    margin-block: var(--space-l) var(--space-s);
  }

  .lede {
    color: var(--ink-soft);
    max-inline-size: 72ch;
    margin-block: 0 var(--space-xs);
  }

  .kicker {
    font-size: var(--text-xs);
    letter-spacing: 0.23em;
    text-transform: uppercase;
    color: var(--blip);
    margin-block: 0 var(--space-m);
    font-weight: 700;
  }

  .product-tagline {
    font-family: var(--font-display);
    font-size: var(--text-l);
    font-weight: 700;
    margin-block: var(--space-m) var(--space-2xs);
  }
}