/* "How it works" — overrides for the original scroll-spy layout with wide step images */
#how .proc-layout { grid-template-columns: 1fr 540px; }
#how .proc-media { aspect-ratio: 1.9; }
#how .proc-media__stage { border-radius: 12px; }
#how .proc-slot { object-fit: cover; object-position: center center; }
#how .proc-step__n { text-transform: uppercase; background: none; -webkit-text-fill-color: var(--violet-300); color: var(--violet-300); }
/* load reveal: steps light up top→bottom (stays lit), image wipes in right→left */
#how .proc-layout.seen .proc-step { animation: procStepIn .6s ease backwards; animation-delay: calc(var(--si, 0) * .2s); }
@keyframes procStepIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
#how .proc-layout.seen .proc-media { animation: procImgIn .9s cubic-bezier(.22,1,.36,1) .25s backwards; }
@keyframes procImgIn { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { #how .proc-layout.seen .proc-step, #how .proc-layout.seen .proc-media { animation: none; } }

.proc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 960px) {
  #how .proc-layout { grid-template-columns: 1fr; }
}

/* bottom CTA band */
.how-cta { max-width: 760px; margin: 64px auto 0; text-align: center; padding: 44px; border-radius: 24px; position: relative; }
.how-cta .sw-cta-h { margin: 0 auto; }
.how-cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }