/* =============================================================
   HOW IT WORKS PAGE
   ============================================================= */

.hiw-timeline-section { padding-top: 0; }
.hiw-hero { /* spacing handled by .section; reserved for future tweaks */ }

.hiw-timeline {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.hiw-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 27px;
  width: 2px;
  background: var(--border);
}

.hiw-step {
  position: relative;
  display: flex;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.hiw-step:last-child { padding-bottom: 0; }

.hiw-step-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(184, 57, 15, 0.5);
}
.hiw-step-marker span {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-md);
  color: var(--text-on-brand);
}

.hiw-step-card { flex: 1; padding: var(--sp-5) var(--sp-6); }
.hiw-step-card .icon-plate { display: none; }
.hiw-step-card h3 { margin-bottom: var(--sp-2); }
.hiw-step-card p { font-size: var(--fs-sm); }

.hiw-trust-section { padding-top: 0; }
/* .why-grid / .why-card base styles now live in global.css */

@media (max-width: 720px) {
  .hiw-timeline::before { left: 23px; }
  .hiw-step-marker { width: 48px; height: 48px; }
  .hiw-step-marker span { font-size: var(--fs-sm); }
  .hiw-step-card { padding: var(--sp-4) var(--sp-5); }
  .hiw-trust-grid { grid-template-columns: 1fr; }
}