/* ── PROCESS STEP (unified) ──────────────────────────────────────
   Replaces .step/.step__num, .journey-step, .booking-step, .ps-step.
   .flow-arc (dead, no usages) removed outright. See NEXT-STEPS.md.
   Two contexts:
   - inside .process-flow: big circle + connecting gradient line
   - inside .card--compact: small circle, no line, bordered box */
.process-flow {
  display: flex;
  gap: 0;
  margin-top: 3rem;
  position: relative;
}
.process-flow::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(to right, var(--sky), var(--navy));
  opacity: 0.2;
}
.process-step {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.process-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 auto 1rem;
  border: 3px solid var(--light);
  box-shadow: 0 0 0 3px var(--navy);
}
.process-step--highlight .process-step__num {
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--sky);
}
.process-step h4 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.process-step p {
  font-size: 0.82rem;
  color: var(--mid);
}
.card--compact .process-step__num {
  width: 30px;
  height: 30px;
  font-size: 0.82rem;
  border: none;
  box-shadow: none;
  background: var(--sky);
  margin: 0 auto 0.55rem;
}