.hero-flow-steps{display:grid;gap:12px}.hero-flow-step{position:relative;overflow:hidden;min-height:200px;padding:20px;background:var(--color-raise);border:1px solid var(--color-line);transition:border-color .4s ease,opacity .4s ease}.hero-flow-step:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--color-neon),var(--color-blue),var(--color-cyan));transform:scaleX(0);transform-origin:left}.hero-flow-step[data-state=idle]{opacity:.5}.hero-flow-step[data-state=done]{opacity:.8}.hero-flow-step[data-state=done]:before{transform:scaleX(1);opacity:.4}.hero-flow-step[data-state=active]{border-color:color-mix(in oklab,var(--color-cyan) 55%,transparent)}.hero-flow-step[data-state=active]:before{animation:flow-bar 6s linear forwards}.hero-flow-step[data-state=active] .flow-line{opacity:0;animation:flow-in .4s ease forwards;animation-delay:calc(var(--line, 0) * 1.2s + .3s)}@keyframes flow-bar{to{transform:scaleX(1)}}@keyframes flow-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (min-width:1024px){.hero-flow-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1023.98px){.hero-flow-step{grid-area:1/1}.hero-flow-step[data-state=done],.hero-flow-step[data-state=idle]{opacity:0;visibility:hidden}}@media (prefers-reduced-motion:reduce){.hero-flow-step{grid-area:auto;min-height:0}.hero-flow-step[data-state]{opacity:1;visibility:visible}.hero-flow-step[data-state=active] .flow-line{animation-delay:0s}}.flow-demo-step{transition:opacity .3s ease}.flow-demo-step[data-state=idle]{opacity:.72}.flow-demo-step[data-state=active]{opacity:1}.flow-demo-step[data-state=active] .flow-demo-num{color:var(--color-pink)}.flow-demo-step[data-state=active] [data-flow-title]{color:var(--color-cyan)}.flow-demo-step[data-state=done]{opacity:1}.flow-demo-step[data-state=done] .flow-demo-num{color:var(--color-green)}