/* The step names under the progress bar, on wide screens. The label and the native bar above stay for everyone. */
.stepper { display: none; }

@media (min-width: 768px) {
  .stepper { display: flex; justify-content: space-between; gap: var(--s2); list-style: none; margin: var(--s3) 0 0; padding: 0; }
  .stepper__item { flex: none; display: flex; align-items: center; gap: var(--s2); font-size: 14px; line-height: 20px; color: var(--text-2); }
  .stepper__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); }
  .stepper__item--done { color: var(--charcoal); }
  .stepper__item--done .stepper__dot { background: var(--charcoal); border-color: var(--charcoal); }
  .stepper__item--current { color: var(--charcoal); font-weight: 600; }
  .stepper__item--current .stepper__dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
  .stepper__name { white-space: nowrap; }
}