/* ══════════════════════════════════════════
   HOW IT WORKS — 14-step vertical timeline
   ══════════════════════════════════════════ */
.timeline{position:relative;max-width:980px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--border-soft),var(--gold),var(--border-soft));
  transform:translateX(-50%);
}
.timeline-item{
  display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;
  gap:var(--space-8);position:relative;padding:var(--space-6) 0;
}
.timeline-item:nth-child(odd) .timeline-card{grid-column:1;text-align:right}
.timeline-item:nth-child(even) .timeline-card{grid-column:3;text-align:left}

.timeline-marker{
  grid-column:2;justify-self:center;flex:none;width:60px;height:60px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;box-shadow:var(--shadow-sm);
}
.timeline-marker svg{width:26px;height:26px}
.timeline-num{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--navy-900);color:var(--white);font-size:.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
}
.timeline-card{max-width:420px}
.timeline-card h3{margin-bottom:var(--space-2)}
.timeline-card p{font-size:.94rem}

.timeline-phase{
  grid-column:1/-1;display:flex;align-items:center;gap:var(--space-4);
  margin:var(--space-8) 0 var(--space-2);
}
.timeline-phase::before,.timeline-phase::after{content:'';flex:1;height:1px;background:var(--border-soft)}
.timeline-phase span{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d);white-space:nowrap;
}

@media(max-width:820px){
  .timeline::before{left:27px}
  .timeline-item{grid-template-columns:56px 1fr;gap:var(--space-4)}
  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card{grid-column:2;text-align:left}
  .timeline-marker{grid-column:1;width:52px;height:52px}
  .timeline-marker svg{width:22px;height:22px}
}