/* The timeline: one component for every sequence on the site (/process/, the "What you get" steps
   on offer pages, /vendor-evaluation/). Markup:
     <ol class="timeline" data-timeline>                         vertical everywhere
     <ol class="timeline tl-row" data-timeline style="--n:4">    a row of n steps from 961px
       <li class="tl-step"><span class="tl-n" aria-hidden="true">1</span>
         <div class="tl-body"><p class="tl-when">Days 1–3</p><h3>…</h3><p>…</p></div></li>
   Without JS or under reduced motion every connector is drawn and every number is lit.
   timeline.js adds .tl-live: the connectors become a light track, one gradient fill grows along it
   (scrubbed by scroll when vertical, drawn once on arrival when it is a row) and each number lights
   as the fill reaches it. GSAP only scales .tl-n and moves .tl-body; CSS here only transitions
   colors, shadows and the ::before overlay, so the two never touch the same property.
   Layout only; tokens from ka.css. */

.timeline{--tl-node:44px;--tl-gap:22px;list-style:none;padding:0;margin:8px 0 0;position:relative;max-width:820px}
.tl-step{position:relative;display:grid;grid-template-columns:var(--tl-node) minmax(0,1fr);gap:var(--tl-gap);padding:0 0 34px}
.tl-step:last-child{padding-bottom:0}
/* connectors: each one runs from its number's center to the next number's center */
.tl-step:not(:last-child)::before{content:"";position:absolute;left:calc(var(--tl-node) / 2 - 1px);top:calc(var(--tl-node) / 2);bottom:calc(var(--tl-node) / -2);width:2px;background:var(--blue2);opacity:.45;pointer-events:none}
.tl-n{position:relative;z-index:1;isolation:isolate;width:var(--tl-node);height:var(--tl-node);border-radius:12px;background:var(--grad-btn);color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px var(--disp);font-variant-numeric:tabular-nums;box-shadow:0 0 0 6px var(--bg),0 8px 20px rgb(29 78 216/.22)}
.tl-body{padding-top:2px;min-width:0}
.tl-when{font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.tl-body h3{font-size:var(--fs-xl);margin-bottom:8px}
.tl-body>p:not(.tl-when){font-size:var(--fs-ui)}
.tl-body .checks{margin-top:12px}
.tl-body .checks li{font-size:var(--fs-ui)}
@media (max-width:600px){
  .timeline{--tl-node:36px;--tl-gap:16px}
  .tl-step{padding-bottom:28px}
  .tl-n{border-radius:10px;font-size:14px}
}

/* a row of steps on wide screens: the connectors run across the top, through every number */
@media (min-width:961px){
  .timeline.tl-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:28px;max-width:none}
  /* each step packs to the top: the row stretches every step to the tallest, and spare height must not
     spread between a shorter step's rows (the kickers and titles would zig-zag across the row) */
  .tl-row .tl-step{grid-template-columns:1fr;gap:18px;padding:0;align-content:start}
  .tl-row .tl-step:not(:last-child)::before{left:calc(var(--tl-node) / 2);top:calc(var(--tl-node) / 2 - 1px);bottom:auto;width:calc(100% + 28px);height:2px}
  .tl-row .tl-body{padding-top:0;padding-right:4px}
}

/* live: a light track, one gradient fill that grows along it (--tl-p, 0 to 1), numbers that light up.
   timeline.js sets --tl-end (vertical) so the fill stops at the last number. */
.timeline.tl-live .tl-step::before{background:var(--line-2);opacity:1}
.timeline.tl-live::after{content:"";position:absolute;left:calc(var(--tl-node) / 2 - 1px);top:calc(var(--tl-node) / 2);bottom:var(--tl-end,calc(var(--tl-node) / 2));width:2px;border-radius:2px;background:linear-gradient(var(--blue2),var(--sky));transform-origin:50% 0;transform:scaleY(var(--tl-p,0));pointer-events:none}
@media (min-width:961px){
  .tl-row.tl-live::after{top:calc(var(--tl-node) / 2 - 1px);bottom:auto;left:calc(var(--tl-node) / 2);right:calc((100% - (var(--n,4) - 1) * 28px) / var(--n,4) - var(--tl-node) / 2);width:auto;height:2px;background:linear-gradient(90deg,var(--blue2),var(--sky));transform-origin:0 50%;transform:scaleX(var(--tl-p,0))}
}
.timeline.tl-live.tl-done::after{transform:none}
.tl-live .tl-n{background:var(--surface);color:var(--blue);box-shadow:0 0 0 6px var(--bg),inset 0 0 0 1.5px var(--line-2);transition:color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.tl-live .tl-n::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-btn);opacity:0;transition:opacity var(--dur-ui) var(--ease-ui)}
.tl-live .tl-step.on .tl-n{color:#fff;box-shadow:0 0 0 6px var(--bg),0 8px 20px rgb(29 78 216/.22)}
.tl-live .tl-step.on .tl-n::before{opacity:1}
@media print{.timeline.tl-live::after{display:none}.tl-live .tl-n{background:var(--grad-btn);color:#fff}}