@layer organisms {
  .onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;

    .onboarding-steps__link {
      display: grid;
      justify-items: center;
      gap: var(--space-1);
      color: var(--color-muted);
      font-size: var(--text-s);
      text-decoration: none;
    }
    .onboarding-steps__number {
      display: grid;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      font-variant-numeric: tabular-nums;
    }
    .onboarding-steps__step.is-current .onboarding-steps__link { color: var(--color-text); font-weight: 600; }
    .onboarding-steps__step.is-current .onboarding-steps__number {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-accent-contrast);
    }
  }
}