/* Steps (BRAND.md 6.10): four in a row on desktop, stacked on mobile. Numbers dim, never red.
   Detailed variant (How I work): one step per row, with what the client receives. */
.ws-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ws-space-4) var(--ws-space-3);
}
@media (min-width:768px){ .ws-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px){ .ws-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.ws-step{
  display:flex;
  flex-direction:column;
  gap:var(--ws-space-1);
  padding-top:var(--ws-space-3);
  border-top:1px solid var(--ws-line);
}
.ws-step__number{
  margin-bottom:var(--ws-space-1);
  font-family:var(--ws-font-display);
  font-size:56px;
  line-height:.9;
  color:var(--ws-fg-dim);
}
.ws-step__timing{ color:var(--ws-fg-dim); }
.ws-step__text{ color:var(--ws-fg-muted); }
.ws-step__receive{
  margin-top:var(--ws-space-1);
  padding-left:16px;
  border-left:1px solid var(--ws-line);
  font-size:15px;
  color:var(--ws-fg-muted);
}
.ws-step__receive strong{ display:block; color:var(--ws-fg); }

.ws-steps--detailed{ grid-template-columns:1fr; gap:0; }
.ws-steps--detailed .ws-step{ padding-block:var(--ws-space-4); }
@media (min-width:768px){
  .ws-steps--detailed .ws-step{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--ws-space-4);
    align-items:start;
  }
  .ws-steps--detailed .ws-step__number{ grid-row:1 / span 3; }
  .ws-steps--detailed .ws-step__timing{ grid-column:2; }
  .ws-steps--detailed .ws-step__title,
  .ws-steps--detailed .ws-step__text{ grid-column:2; }
  .ws-steps--detailed .ws-step__receive{ grid-column:3; grid-row:1 / span 3; margin-top:0; }
}