.stp{color:#111;background:#fff;padding:72px 16px 80px}.stp-in{max-width:1120px;margin:0 auto}.stp h2{letter-spacing:-.025em;font-size:clamp(32px,4.4vw,48px);font-weight:650;line-height:1.05}.stp-map{--tile:76px;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:56px;display:grid;position:relative}.stp-rail{background:#e3e3e3;width:0;height:2px;position:absolute;top:0;left:0}.stp-rail i{transform-origin:0;background:linear-gradient(90deg,#9a9a9a,#111);position:absolute;inset:0}.stp-rail--down i{transform-origin:top;background:linear-gradient(#9a9a9a,#111)}.stp-rail b{opacity:0;background:#111;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:100%;box-shadow:0 0 0 4px #1111111f}.stp-rail--down b{top:100%;left:50%}.stp-step{min-width:0;position:relative}.stp-tile{z-index:1;width:var(--tile);height:var(--tile);color:#fff;background:radial-gradient(120% 120% at 30% 20%,#3a3a3a 0%,#121212 55%,#050505 100%);border-radius:22px;place-items:center;display:grid;position:relative;box-shadow:inset 0 1px #ffffff24,0 18px 30px -12px #0000008c,0 0 0 1px #000}.stp-tile svg{width:34px;height:34px}.stp h3{letter-spacing:-.012em;color:#111;margin:22px 0 0;font-size:21px;font-weight:650;line-height:1.25}.stp p{color:#474747;max-width:32ch;margin-top:8px;font-size:17px;line-height:1.5}@media (prefers-reduced-motion:no-preference){.stp-map[data-armed] .stp-rail i{transform:scaleX(0)}.stp-map[data-armed] .stp-rail--down i{transform:scaleY(0)}.stp-map[data-armed] .stp-tile{opacity:.25;scale:.82;box-shadow:0 0 0 1px #d9d9d9}.stp-map[data-armed] .stp-tile svg *{stroke-dasharray:1;stroke-dashoffset:1px}.stp-map[data-armed] :is(h3,p){opacity:0;translate:0 12px}.stp-map[data-armed][data-play=on] .stp-rail i{transition:transform 1.7s cubic-bezier(.45,0,.25,1);transform:none}.stp-map[data-armed][data-play=on] .stp-rail b{animation:1.7s cubic-bezier(.45,0,.25,1) both stp-dot}.stp-map[data-armed][data-play=on] .stp-rail--down b{animation-name:stp-dot-down}.stp-map[data-armed][data-play=on] .stp-tile{opacity:1;transition:scale .6s cubic-bezier(.2,1.5,.3,1),opacity .3s,box-shadow .5s;transition-delay:var(--at);scale:1;box-shadow:inset 0 1px #ffffff24,0 18px 30px -12px #0000008c,0 0 0 1px #000}.stp-map[data-armed][data-play=on] .stp-tile svg *{stroke-dashoffset:0;transition:stroke-dashoffset .9s;transition-delay:calc(var(--at) + .15s)}.stp-map[data-armed][data-play=on] :is(h3,p){opacity:1;transition:opacity .45s,translate .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--at) + .2s);translate:0}.stp-map[data-armed][data-play=on] p{transition-delay:calc(var(--at) + .32s)}}@keyframes stp-dot{0%{opacity:0;left:0}10%{opacity:1}90%{opacity:1}to{opacity:0;left:100%}}@keyframes stp-dot-down{0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}to{opacity:0;top:100%}}@media (min-width:1024px){.stp{padding:120px 16px 128px}}@media (max-width:760px){.stp{padding:56px 16px 64px}.stp-map{--tile:60px;padding-left:calc(var(--tile) + 20px);grid-template-columns:1fr;gap:36px;margin-top:40px}.stp-step{min-height:var(--tile)}.stp-tile{left:calc(-1 * (var(--tile) + 20px));border-radius:18px;position:absolute;top:0}.stp-tile svg{width:28px;height:28px}.stp h3{margin-top:0}.stp p{margin-top:6px}}