.flow-steps__grid{display:grid;grid-template-columns:1fr;align-items:stretch;gap:1rem;text-align:center}@media(min-width:768px){.flow-steps__grid{grid-template-columns:1fr auto 1fr auto 1fr;gap:1.5rem;align-items:stretch}.flow-steps[data-mode=active] .flow-steps__grid{grid-template-columns:minmax(0,260px) auto minmax(0,320px) auto minmax(0,260px);gap:1rem;align-items:center}}.flow-steps__step{border-radius:.75rem;padding:1.5rem 1.25rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}@media(min-width:768px){.flow-steps__step--send,.flow-steps__step--receive{justify-content:center}}.flow-steps__step-label{display:block;font-size:.75rem;font-weight:500;letter-spacing:.02em;color:#64748b;margin:0}.flow-steps__step-label--vault{color:#0048d7}.flow-steps__step-content{margin-top:.75rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.flow-steps__icon{width:48px;height:48px;border-radius:50%;display:block;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.flow-steps__receive-icon{width:52px;height:52px}.flow-steps__symbol{font-size:1.25rem;font-weight:700;color:#0f172a;letter-spacing:-.02em}.flow-steps__label{font-size:.8125rem;color:#64748b;font-weight:500}.flow-steps__hint{display:block;font-size:.6875rem;color:#94a3b8;margin-top:.25rem}.flow-steps__vault-card{width:100%;max-width:320px;min-height:248px;padding:1.5rem 1.25rem;border-radius:.5rem;border:2px solid #cbd5e1;background:linear-gradient(180deg,#f8fafc,#e2e8f0);box-shadow:inset 0 1px #ffffffe6,0 4px 14px #0f172a12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;box-sizing:border-box}.flow-steps__vault-lock{display:flex;align-items:center;justify-content:center;color:#0048d7;width:2.5rem;height:2.5rem}.flow-steps__vault-lock svg{width:100%;height:100%}.flow-steps__vault-card-copy{display:flex;flex-direction:column;align-items:center;gap:.25rem}.flow-steps__vault-title{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:#0f172a;line-height:1.2}.flow-steps__vault-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#64748b;line-height:1.4}.flow-steps__vault-icon{width:40px;height:40px;margin-bottom:8px;border-radius:12px;background:#0048d733;display:flex;align-items:center;justify-content:center}.flow-steps__vault-icon:after{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230048d7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83'/%3E%3C/svg%3E") no-repeat center;background-size:contain}.flow-steps__vault-desc{display:block;font-size:.8125rem;color:#475569;margin-top:2px}.flow-steps__vault-copy{margin:.25rem 0 0;font-size:.8125rem;line-height:1.55;color:#64748b;max-width:28ch}.flow-steps__arrow{flex-shrink:0;align-self:center;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center;background-size:20px;display:none}@media(min-width:768px){.flow-steps__arrow{display:block;align-self:center}}@media(max-width:767px){.flow-steps__grid{flex-direction:column;align-items:center}.flow-steps__arrow{display:block;transform:rotate(90deg)}}.flow-steps[data-mode=static] .flow-steps__vault-icon{display:none}.flow-steps[data-mode=static] .flow-steps__step--send,.flow-steps[data-mode=static] .flow-steps__step--receive{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0f172a0d}.flow-steps[data-mode=static] .flow-steps__step--vault{background:transparent;border:none;box-shadow:none;padding:0;gap:.75rem}.flow-steps[data-mode=static] .flow-steps__vault-copy{margin-top:0}.flow-steps[data-mode=static] .flow-steps__arrow{opacity:.8}.flow-steps[data-mode=active] .flow-steps__step{width:100%;max-width:260px;padding:24px 18px;border-radius:20px;box-sizing:border-box}@media(min-width:768px){.flow-steps[data-mode=active] .flow-steps__step--send,.flow-steps[data-mode=active] .flow-steps__step--receive,.flow-steps[data-mode=active] .flow-steps__step--vault{justify-self:center}}.flow-steps[data-mode=active] .flow-steps__step--send,.flow-steps[data-mode=active] .flow-steps__step--receive{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0f172a0d;transition:box-shadow .2s ease,border-color .2s ease}.flow-steps[data-mode=active] .flow-steps__step--send:hover,.flow-steps[data-mode=active] .flow-steps__step--receive:hover{border-color:#94a3b859;box-shadow:0 4px 12px #0f172a14}.flow-steps[data-mode=active] .flow-steps__step--vault{max-width:320px;padding:0;background:transparent;border:none;box-shadow:none;gap:0}.flow-steps[data-mode=active] .flow-steps__step--vault:hover{border:none;box-shadow:none}.flow-steps[data-mode=active] .flow-steps__vault-card{min-height:248px}.flow-steps[data-mode=active] .flow-steps__arrow{opacity:1}@media(max-width:720px){.flow-steps[data-mode=active] .flow-steps__grid{gap:16px}.flow-steps[data-mode=active] .flow-steps__step{max-width:100%;width:100%;padding:18px}.flow-steps[data-mode=active] .flow-steps__step--vault{max-width:100%}.flow-steps[data-mode=active] .flow-steps__arrow{transform:rotate(90deg)}}
