@layer blocks {
  .hero {
    padding-block-start: 5.25rem; /* spec 84px; section is otherwise 96px */
  }

  /* Absolute margin notes still occupy a sibling slot, so flow would add a
     gap before the eyebrow. Zero it; the note's own margin handles narrow. */
  .hero > .margin-note + * {
    --flow-space: 0;
  }

  .hero .eyebrow {
    font-size: 0.78rem;
    font-weight: var(--weight-semi);
    letter-spacing: 0.14em;
  }

  .hero h1 {
    --flow-space: 1.125rem; /* spec eyebrow → h1: 18px */
  }

  .hero .lead {
    --flow-space: 1.375rem; /* spec h1 → lead: 22px */
    max-inline-size: 37.5rem; /* spec 600px */
    font-size: 1.28rem;
  }

  .hero > .cluster {
    --flow-space: 2.125rem; /* spec lead → CTA: 34px */
  }

  .hero .demo {
    --flow-space: 4.25rem; /* spec CTA → demo: 68px */
  }

  /* The beta clause inside the eyebrow is the one word of colour in that line */
  .hero b {
    color: var(--color-accent-strong);
  }

  @container (width < 52rem) {
    .hero {
      padding-block-start: 3.5rem; /* spec 56px */
    }

    .hero .demo {
      --flow-space: 2.875rem; /* spec 46px */
    }
  }
}