/* ==========================================================================
   VDPL Next — How we work
   The stage list is the page. It is an <ol> because the stages happen in
   order; the numbers are decorative duplicates of that and are hidden from
   assistive technology.
   ========================================================================== */

.p-steps { display: flex; flex-direction: column; gap: var(--s-12); }

.p-step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-line);
}
@media (max-width: 700px) { .p-step { grid-template-columns: 1fr; gap: var(--s-4); } }

.p-step__aside { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
@media (max-width: 700px) { .p-step__aside { flex-direction: row; align-items: center; } }

.p-step__num {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--t-label-ls);
  color: var(--c-accent-text);
}
.p-step__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-accent-wash);
  color: var(--c-accent-text);
}

.p-step__body > p { max-width: var(--measure); }
.p-step__out { margin-top: var(--s-3); }