.vpp-process{margin-top:48px;background:#fff;--flow:0}
.vpp-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.vpp-process-step{position:relative;text-align:center;min-width:0;transition:opacity .4s,transform .4s}
.process-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #dcd4ef;border-radius:50%;font-size:14px;font-weight:600;color:#744bca;background:#fff;transition:background .3s,color .3s}
.process-art{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.process-art img{width:100%;height:100%;object-fit:contain;display:block}
.vpp-process-step:nth-child(2) .process-art img{width:90%;height:82%;align-self:flex-start}
.process-nodes{position:absolute;width:96%;height:auto;bottom:-4px;left:2%;color:#7040c8;overflow:visible}
.process-nodes>g:nth-child(2) rect{transform-box:fill-box;transform-origin:center;transform:scale(1.3);fill:#f5f0ff;stroke-width:1.7}
.process-nodes>g:last-child{stroke-width:2}
.process-nodes>g:last-child path{transform-box:fill-box;transform-origin:center;transform:scale(1.3)}
.vpp-process h3{font-size:clamp(17px,1.7vw,23px);line-height:1.25;letter-spacing:0;margin:20px 0 10px;color:#101943}
.vpp-process-step p{font-size:14px;line-height:1.5;color:#61677b;margin:0}
.process-arrow{position:absolute;right:-25px;top:45%;font-size:32px;color:#a286dc}
.process-track{height:2px;background:#e9e4f3;margin-top:32px;overflow:hidden}
.process-track>span{display:block;height:100%;background:linear-gradient(90deg,#784ce0,#bf9aff);transform:scaleX(var(--flow));transform-origin:left}
.vpp-process.is-enhanced .vpp-process-step{opacity:.55;transform:translateY(6px)}
.vpp-process.is-enhanced .vpp-process-step.is-reached{opacity:1;transform:none}
.vpp-process-step.is-current .process-number{background:#7951cf;color:#fff;border-color:#7951cf}
.vpp-process-step.is-current .process-nodes path{animation:vpp-data-flow 2s linear infinite}
@keyframes vpp-data-flow{to{stroke-dashoffset:-28}}
.vpp-process.is-enhanced{min-height:0}.vpp-process-pin{position:static;padding-block:16px;background:#fff}
.process-pause{display:block;margin:16px 0 0 auto;background:transparent;border:1px solid #dcd4ef;border-radius:6px;color:#51566d;padding:7px 12px;font:inherit;font-size:12px;cursor:pointer}
@media(max-width:900px){.vpp-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.process-arrow{display:none}.process-art{max-height:260px}.vpp-process h3{font-size:21px}}
@media(max-width:520px){.vpp-process-grid{grid-template-columns:1fr;gap:36px}.process-art{height:250px;max-width:300px;margin:auto}.vpp-process{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.vpp-process *{animation:none!important;transition:none!important}.process-track>span{transform:scaleX(1)}}
.process-png-nodes{position:absolute;bottom:0;left:5%;width:90%;height:76px}
.process-png-nodes .process-nodes{position:static;display:block;width:100%;height:36px;overflow:hidden}
.process-png-nodes .process-nodes>g:last-child path{transform:none;stroke-width:1.2}
.process-node-images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:34px;gap:0;align-items:center;margin-top:6px}
.vpp-process-step:nth-child(2) .process-art .process-node-images img{position:static;display:block;width:32px;height:32px;object-fit:contain;align-self:center;justify-self:center}