.process {
  margin-top: 160px;
  display: flex;
  flex-direction: column;
  gap: 55px;
  scroll-margin-top: 80px;
  position: relative;
  z-index: 3;   /* the badge strap runs up under the tray */
}
.process-head { display: flex; flex-direction: column; gap: 35px; }

.steps { display: flex; flex-direction: column; gap: 35px; }
.step {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  font-size: 17.5px; line-height: 1.45;
}
.step-id { display: flex; align-items: center; gap: 20px; }
.step-n { white-space: nowrap; }
.step-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.step-d { color: var(--muted); text-align: right; }
.steps hr { margin: 0 -30px; border: 0; border-top: 1px solid var(--line); }

@media (max-width: 1100px) { .step { font-size: 16px; } }
@media (max-width: 640px) {
  .process { margin-top: 120px; gap: 40px; }
  .steps { gap: 28px; }
  .steps hr { margin: 0 -18px; }
  .step { flex-direction: column; align-items: stretch; gap: 14px; font-size: 14px; }
  .step-id { justify-content: space-between; }
  .step-n { order: 2; }
  .step-d { text-align: left; }
}