.timeline{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.pill{
  display:flex;gap:1rem;align-items:center;padding:0.9rem;border-radius:12px;background:linear-gradient(90deg,#fff,#fffefb);
  border-left:6px solid rgba(211,84,0,0.12);
  transition: border-left-color 0.2s ease;
}
.pill:hover{
  border-left-color: var(--brand-primary);
}
.pill .step{
  min-width:56px;height:56px;border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--brand-primary);box-shadow:0 6px 16px rgba(0,0,0,0.04)
}
.pill h4{margin:0;font-size:1rem}
.pill p{margin:0;color:var(--muted);font-size:0.92rem}





/* RESPONSIVE - ADD AT END OF TIMELINE.CSS */
@media (max-width: 760px){
  .pill{
    padding: 0.8rem;
    gap: 0.8rem;
  }
  
  .pill .step{
    min-width: 48px;
    height: 48px;
    font-size: 0.95rem;
  }
  
  .pill h4{
    font-size: 0.95rem;
  }
  
  .pill p{
    font-size: 0.85rem;
  }
}

@media (max-width: 480px){
  .pill{
    padding: 0.7rem;
    gap: 0.7rem;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pill .step{
    min-width: 44px;
    height: 44px;
  }
  
  .pill h4{
    font-size: 0.9rem;
  }
  
  .pill p{
    font-size: 0.8rem;
  }
}