@layer components {
  /* A signed-out form given a page of its own: on the deep stage, what it's for and what
     happens after, beside the form on its raised sheet. */
  .site-form-page {
    display: grid;
    gap: var(--space-11);
    justify-items: center;
    padding: var(--space-12) var(--gutter-fluid) var(--space-13);
    background:
      radial-gradient(ellipse at 20% 30%, var(--color-stage-glow) var(--length-zero), transparent var(--site-glow-reach)),
      var(--color-stage);
    color: var(--color-stage-ink);
  }

  .site-form-page__words {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    max-inline-size: var(--measure-site-lead);
  }

  .site-form-page__eyebrow {
    font: var(--type-label);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-celebrate-soft);
  }

  .site-form-page__title {
    font: var(--type-site-headline);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .site-form-page__lead {
    font: var(--type-site-lead);
    color: var(--color-stage-muted);
    text-wrap: pretty;
  }

  .site-form-page__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-7);
    border-block-start: var(--border-width) solid var(--color-stage-rule);
    list-style: none;
  }

  .site-form-page__step {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font: var(--type-body-lg);
    color: var(--color-stage-muted);
  }

  .site-form-page__number {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--space-9);
    block-size: var(--space-9);
    border: var(--border-width-strong) solid var(--color-stage-rule);
    border-radius: var(--radius-pill);
    font: var(--type-label);
    --icon-size: var(--space-6);
  }

  .site-form-page__step--done .site-form-page__number {
    border-color: var(--color-celebrate);
    color: var(--color-celebrate);
  }

  .site-form-page__step--current {
    color: var(--color-stage-ink);
  }

  .site-form-page__step--current .site-form-page__number {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-ink-on-accent);
  }

  .site-form-page__sheet {
    inline-size: var(--size-fill);
    display: flex;
    justify-content: center;
    color: var(--color-ink);
  }

  @media (width >= 1000px) {
    .site-form-page {
      grid-template-columns: minmax(var(--space-0), 1fr) var(--site-form-inline-size);
      align-items: start;
      column-gap: var(--space-13);
      max-inline-size: none;
      padding-block: var(--space-13);
      padding-inline: max(var(--gutter-fluid), calc((100% - var(--max-content)) / 2));
    }

    .site-form-page__words {
      position: sticky;
      inset-block-start: var(--site-sticky-top);
      justify-self: start;
    }

    .site-form-page__title {
      font: var(--type-site-headline-lg);
    }

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