.steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.step { padding-top: var(--s-4); border-top: 2px solid var(--ink); position: relative; }
.step__number {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.step__title { font-size: var(--step-1); margin-bottom: var(--s-2); }
.step__body { color: var(--ink-soft); font-size: var(--step--1); }

/* The rule above each step steps down in weight, so the sequence reads
   left to right even before you get to the numbers. */
.step:nth-child(2) { border-top-color: var(--ink-soft); }
.step:nth-child(3) { border-top-color: var(--line-firm); }
.step:nth-child(n+4) { border-top-color: var(--line); }