/* ============================================================
   PROCESS TIMELINE — scroll-animated numbered "How I Work" steps
   Ported verbatim from the ROI calculator's "How to Use" section
   (css/roi-calculator.css .timeline block) so every solutions page
   shares the same vertical timeline: numbered bubbles that scale in
   and a center line that fills as you scroll.
   Markup contract: div.timeline > span.tl-fill + div.tl-item
     (each .tl-item = div.tl-node{N} + div.tl-content{h3 + p}).
   Driven by /js/process-rail.js (toggles .in, grows .tl-fill).
   Design tokens (--s4,--s5,--line-2,--grad,--ease,--bg,--muted)
   come from home.css, which every solutions page loads.
   ============================================================ */

.timeline { position: relative; max-width: 46rem; margin: 0 auto; padding: var(--s4) 0; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background: var(--line-2); }
.tl-fill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 0; background: var(--grad); transition: height .55s var(--ease); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 3.6rem 1fr; align-items: center; column-gap: var(--s5); height: 7rem; }
.tl-node { grid-column: 2; grid-row: 1; justify-self: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; color: #0A0A12; background: var(--grad); position: relative; z-index: 2; opacity: .25; transform: scale(.7); transition: opacity .45s var(--ease), transform .45s var(--ease); box-shadow: 0 0 0 6px var(--bg); }
.tl-item.in .tl-node { opacity: 1; transform: scale(1); }
.tl-content { grid-row: 1; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tl-item.in .tl-content { opacity: 1; transform: none; }
.tl-item:nth-of-type(odd) .tl-content { grid-column: 3; text-align: left; }
.tl-item:nth-of-type(even) .tl-content { grid-column: 1; text-align: right; }
.tl-content h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.tl-content p { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 0; }

@media (max-width: 640px) {
  .timeline::before, .tl-fill { left: 1.8rem; }
  .tl-item { grid-template-columns: 3.6rem 1fr; column-gap: var(--s4); height: auto; min-height: 5.5rem; }
  .tl-node { grid-column: 1; }
  .tl-item .tl-content { grid-column: 2 !important; text-align: left !important; }
}