/* ============================================================
   Module: journey — numbered step flows (onboarding, how-it-works).
   ============================================================ */

.journey {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  counter-reset: step;
}
@media (min-width: 720px) { .journey { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1020px) { .journey.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1020px) { .journey.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  counter-increment: step;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--s6);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  margin-bottom: var(--s4);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--g1), var(--g-text));
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}
.step h3 { font-size: var(--fs-title); margin-bottom: var(--s2); }
.step p { color: var(--text-2); font-size: var(--fs-label); margin: 0; }

/* Connecting hairline between steps on wide screens */
@media (min-width: 1020px) {
  .journey .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--s6));
    width: var(--s6);
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }
}