@layer components {
  .landing {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding-block-end: var(--block-space-double);
  }

  .landing__header {
    padding-block: var(--block-space) var(--block-space-half);
    text-align: center;
  }

  .landing__title {
    font-size: var(--text-x-large);
    font-weight: 800;
    line-height: var(--leading-snug);
    margin: 0;
  }

  .landing__lead {
    color: var(--color-ink-dark);
    margin: 0.25em 0 0;
  }

  .landing__group {
    &:not(:has(.row:not([hidden]))) {
      display: none;
    }
  }

  .landing__group-title {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 600;
    margin: 0 0 0.25em;
    padding-inline: calc(var(--inline-space) + var(--inline-space-half));
  }

  .landing__rows {
    --rows-margin: var(--block-space-half) 0 0;

    .row__body {
      padding-block: 0.6em;
    }
  }

  .landing__icon {
    --icon-size: 1.5rem;

    margin-inline: 0.25em;
  }

  .landing__step-number {
    display: inline-grid;
    flex: none;
    place-items: center;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: var(--color-ink-dark);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .landing__step--done {
    color: var(--color-ink-dark);

    .row__title {
      font-weight: normal;
    }
  }
}