/* ЛОКАЛЬНЫЙ СЛОЙ — порядок работы.
   Через все пять шагов идёт одна линия, поверх неё красный прогресс до
   последнего шага и тёмные бейджи с номерами. Линия рисуется в слое ниже
   бейджей, поэтому не рвётся и не требует псевдоэлементов на каждом шаге. */
.zw-steps__rail { position: relative; margin-top: var(--sp-7); }

.zw-steps__line,
.zw-steps__progress {
  position: absolute;
  left: 0;
  pointer-events: none;
}
.zw-steps__line { top: 21px; right: 0; height: 1px; background: var(--line); }
.zw-steps__progress {
  top: 20px;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transition: width 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zw-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zw-steps__item { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.zw-steps__num {
  --bevel: 10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);
}
/* Пока скрипт не вмешался, все бейджи тёмные, а линия полная: это конечное
   состояние, и без скрипта блок выглядит именно так. Скрипт гасит бейджи
   и обнуляет линию, чтобы зажечь шаги по очереди. */
.zw-steps__num { transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.zw-steps__rail.is-armed .zw-steps__num { background: var(--surface-raised); color: var(--ink); }
.zw-steps__rail.is-armed .zw-steps__num.is-done {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
}

.zw-steps__title {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}
.zw-steps__text { font-size: var(--size-small); line-height: 1.5; color: var(--ink-body); }

@media (max-width: 1100px) {
  .zw-steps__list { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-6); }
  .zw-steps__line, .zw-steps__progress { display: none; }
}
@media (max-width: 700px) {
  .zw-steps__list { grid-template-columns: 1fr; }
}