@layer components {
  /* The top of a signed-out page: a two-beat line in the serif, the one call, and the product
     itself running beneath them. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-11);
    padding: var(--space-12) var(--gutter-fluid) var(--space-13);
    background-color: var(--color-surface-sunken);
    text-align: center;
    overflow: clip;
  }

  .hero__words {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-7);
  }

  .hero__title {
    display: flex;
    flex-direction: column;
    font: var(--type-site-hero);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .hero__line--beat {
    color: var(--color-ink-faint);
  }

  .hero__lead {
    max-inline-size: var(--measure-site-lead);
    font: var(--type-site-lead);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-4);
  }

  .hero__stage {
    inline-size: var(--size-fill);
    max-inline-size: var(--max-content);
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__stage {
      animation: hero-rise var(--dur-site-reveal) var(--ease-site) both;
    }
  }

  @keyframes hero-rise {
    from {
      opacity: var(--opacity-none);
      translate: var(--space-0) var(--space-11);
    }
  }

  @media (width >= 900px) {
    .hero {
      gap: var(--space-12);
      padding-block-start: var(--space-13);
    }

    .hero__title {
      font: var(--type-site-hero-lg);
    }

    .hero__lead {
      font: var(--type-site-lead-lg);
    }
  }
}