/* dd/process-steps – v3: čiara postupu sa raz nakreslí, etapy 01–05 sa rozsvietia postupne; data-steps="3|4|5" */
.ps{--n:3;margin:0 auto;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--space-5);max-width:var(--container);position:relative;list-style:none;padding:0;counter-reset:none}
.ps::before,.ps::after{content:"";position:absolute;top:27px;left:28px;right:calc(100% / var(--n) - 28px);height:2px;background:var(--line)}
.ps::after{height:4px;top:26px;background:var(--yellow);transform-origin:0 50%}
.st{position:relative;padding-right:var(--space-2)}
.st .num{position:relative;z-index:1;width:56px;height:56px;border-radius:var(--radius-md);background:var(--navy);color:var(--yellow);font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.5px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--surface-0)}
.dd-bg-100 .st .num{box-shadow:0 0 0 6px var(--surface-100)}
.st h3{margin:var(--space-5) 0 var(--space-2)}
.st p{max-width:260px}
/* pohyb: čiara sa kreslí, čísla sa postupne „zapnú“ (bez JS a pri reduced-motion je všetko hneď hotové) */
html.dd-js .dd-pre .ps::after{transform:scaleX(0)}
html.dd-js .dd-pre.dd-in .ps::after{transform:none;transition:transform calc(var(--n) * 260ms) var(--ease-io) 200ms}
html.dd-js .dd-pre .st .num{background:var(--surface-0);color:var(--ink-muted);outline:2px solid var(--line-strong);outline-offset:-2px}
html.dd-js .dd-pre.dd-in .st .num{background:var(--navy);color:var(--yellow);outline-color:transparent;transition:background 300ms var(--ease-out),color 300ms var(--ease-out),outline-color 300ms var(--ease-out);transition-delay:calc(var(--i,1) * 260ms)}
.ps[data-steps="4"]{--n:4}
.ps[data-steps="5"]{--n:5}
@media (max-width:1023px){
  .ps,.ps[data-steps]{--n:2;row-gap:var(--space-7)}
  .ps::before,.ps::after{display:none}
}
@media (max-width:767px){
  .ps,.ps[data-steps]{grid-template-columns:1fr;gap:var(--space-6)}
  .ps::before,.ps::after{display:block;top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto}
  .ps::after{left:26px;width:4px;transform-origin:50% 0}
  html.dd-js .dd-pre .ps::after{transform:scaleY(0)}
  .st{padding-left:80px;min-height:56px}
  .st .num{position:absolute;left:0;top:0}
  .st h3{margin-top:0;padding-top:var(--space-3)}
}