/* Steps on a line that fills when it comes into view: when, what, what you get. Needs ../base/base.css. */

/* ---------- the next steps: when, what happens, what you have in hand ---------- */
.tl{--q:22px;list-style:none;padding:0;position:relative;margin-top:clamp(56px,6vw,88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
/* the line runs through the middle of the dots: the label row is var(--q) high, then the 10px gap, then half the 14px dot */
.tl::before,.tl::after{content:"";position:absolute;left:0;right:0;top:calc(var(--q) + 16px);height:2px;border-radius:2px;background:var(--riga-2)}
.tl::after{background:var(--blu-t);transform-origin:0 50%;transform:scaleX(0);transition:transform 2s var(--e-esce) .2s}
.tl.vis::after{transform:none}
.tl-passo{position:relative;display:grid;align-content:start;gap:10px}
.tl-quando{height:var(--q);line-height:var(--q);white-space:nowrap;font-size:calc(14 * var(--px));font-weight:600;letter-spacing:.005em;color:var(--blu-t)}
.tl-punto{position:relative;z-index:1;width:14px;height:14px;margin:0 0 14px;border-radius:50%;background:var(--fondo);box-shadow:inset 0 0 0 2px var(--riga-2);transition:background-color .4s var(--e-ui),box-shadow .4s var(--e-ui),transform .6s var(--e-molla)}
.tl.vis .tl-punto{background:var(--blu);box-shadow:0 0 0 4px oklch(57% .2 258/.22);transform:scale(1.1);transition-delay:calc(.3s + var(--i) * .42s)}
.tl-passo h3{font-size:var(--t-lead);font-weight:650;letter-spacing:-.025em;line-height:1.15}
.tl-passo p{font-size:calc(15 * var(--px));line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.tl-ottieni{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--riga);font-size:calc(15 * var(--px));line-height:1.45;color:var(--ink)}
.tl-ottieni svg{width:17px;height:17px;margin-top:.15em;fill:none;stroke:var(--blu-t);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


@media (max-width:980px){
  .tl{grid-template-columns:minmax(0,1fr);gap:28px;padding-left:34px}
  .tl::before,.tl::after{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .tl::after{transform:scaleY(0);transform-origin:50% 0}
  .tl.vis::after{transform:none}
  .tl-punto{position:absolute;left:-34px;top:4px;margin:0}
  .tl-quando{height:auto;line-height:1.5}
}