/* steps — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* timeline — a horizontal run with a connecting rule; the numbers become the
   spine of the process instead of four separate tiles. */
.steps--timeline .features-grid { position: relative; gap: 1rem; }


.steps--timeline .features-grid::before {
  content: '';
  position: absolute;
  top: 1.15rem;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--line);
}

/* stacked — a vertical ladder, one step per row. Best when steps carry real
   sentences rather than three words. */
/* (two classes of the root: over the columns, at every width) */
.steps.steps--stacked .features-grid { grid-template-columns: 1fr; gap: 0; }

@media (max-width: 640px) {
    .steps--timeline .features-grid::before { content: none; }
}