@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__eyebrow {
    font: var(--type-label);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-accent-ink);
  }

  /* The title said whole, for anyone who can't watch the first line turn. */
  .hero__said {
    position: absolute;
    inline-size: var(--border-width);
    block-size: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* One way of saying the first line at a time, each rising into the place of the last. */
  .hero__turns {
    display: grid;
  }

  .hero__turn {
    grid-area: 1 / 1;
    opacity: var(--opacity-none);
    translate: var(--space-0) var(--site-reveal-offset);
    transition: opacity var(--dur-slow) var(--ease-calm), translate var(--dur-slow) var(--ease-calm);
  }

  .hero__turn--current {
    opacity: var(--opacity-full);
    translate: var(--space-0) var(--space-0);
    color: var(--color-accent-ink);
  }

  .hero__turn--gone {
    translate: var(--space-0) calc(-1 * var(--site-reveal-offset));
  }

  .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);
  }

  /* What stands under the words is the product, set as the product sets itself. */
  .hero__stage {
    inline-size: var(--size-fill);
    max-inline-size: var(--max-content);
    text-align: start;
  }

  @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);
    }
  }
}