:root .sig.sig--vis-swipe { container-type: inline-size; min-height: 520px; text-align: left; }
:root .sig--vis-swipe svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
:root .sig--vis-swipe .vw, :root .sig--vis-swipe.vw { --mc: #a100ff; position: absolute; inset: 0; overflow: hidden; }
:root .sig--vis-swipe .vw::before, :root .sig--vis-swipe.vw::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); }
:root .sig--vis-swipe .vw__m, :root .sig--vis-swipe.vw__m { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8% 7%; background: radial-gradient(70% 90% at 80% 20%, rgba(227, 184, 255, .5), transparent 60%), var(--mc); color: #fff; transition: background .6s; }
:root .sig--vis-swipe .vw__fig, :root .sig--vis-swipe.vw__fig { position: absolute; right: 8%; bottom: 0; width: 34%; height: 80%; }
:root .sig--vis-swipe .vw__fig i, :root .sig--vis-swipe.vw__fig i { position: absolute; left: 30%; top: 0; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #f1dcff; }
:root .sig--vis-swipe .vw__fig b, :root .sig--vis-swipe.vw__fig b { position: absolute; left: 4%; right: 4%; bottom: 0; top: 40%; border-radius: 999px 999px 0 0; background: #e3b8ff; }
:root .sig--vis-swipe .vw__mh, :root .sig--vis-swipe.vw__mh { position: relative; margin: 0; max-width: 64%; font: 700 1em/1 var(--f-display); letter-spacing: -.04em; }
:root .sig--vis-swipe .vw__m small, :root .sig--vis-swipe.vw__m small { position: relative; display: inline-block; width: max-content; margin-top: .5em; padding: .35em .7em; border-radius: 999px; background: #fff; color: #3b0066; font: 600 .42em/1 var(--f-display); }
:root .sig--vis-swipe .vw__bb, :root .sig--vis-swipe.vw__bb { position: absolute; left: 5%; top: 7%; width: 54%; font-size: clamp(16px, 4.4cqw, 30px); }
:root .sig--vis-swipe .vw__bbf, :root .sig--vis-swipe.vw__bbf { position: relative; aspect-ratio: 1.42; border-radius: 4px; overflow: hidden; background: #2b2731; border: 5px solid #3a3541; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .9); }
:root .sig--vis-swipe .vw__m--bb, :root .sig--vis-swipe.vw__m--bb { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1); }
:root .sig--vis-swipe .is-paste .vw__m--bb, :root .sig--vis-swipe.is-paste .vw__m--bb { clip-path: inset(0 0 0 0); }
:root .sig--vis-swipe .vw__strip, :root .sig--vis-swipe.vw__strip { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .4s 1.4s; }
:root .sig--vis-swipe .vw__strip:nth-of-type(1), :root .sig--vis-swipe.vw__strip:nth-of-type(1) { left: 25%; }
:root .sig--vis-swipe .vw__strip:nth-of-type(2), :root .sig--vis-swipe.vw__strip:nth-of-type(2) { left: 50%; }
:root .sig--vis-swipe .vw__strip:nth-of-type(3), :root .sig--vis-swipe.vw__strip:nth-of-type(3) { left: 75%; }
:root .sig--vis-swipe .is-paste .vw__strip, :root .sig--vis-swipe.is-paste .vw__strip { opacity: 1; }
:root .sig--vis-swipe .vw__legs, :root .sig--vis-swipe.vw__legs { display: flex; justify-content: space-around; padding: 0 22%; }
:root .sig--vis-swipe .vw__legs i, :root .sig--vis-swipe.vw__legs i { width: 7px; height: clamp(26px, 7cqw, 48px); background: #3a3541; }
:root .sig--vis-swipe .vw__tram, :root .sig--vis-swipe.vw__tram { position: absolute; left: 0; right: 0; bottom: 5%; height: 22%; }
:root .sig--vis-swipe .vw__tram::after, :root .sig--vis-swipe.vw__tram::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: repeating-linear-gradient(90deg, #4a4452 0 18px, transparent 18px 26px); }
:root .sig--vis-swipe .vw__tr, :root .sig--vis-swipe.vw__tr { position: absolute; bottom: 0; left: 0; height: 100%; width: 78%; display: flex; gap: 2%; align-items: center; padding: 0 3%; border-radius: 22px 40px 8px 8px; background: #e9e4ee; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); transform: translateX(130%); font-size: clamp(11px, 2.6cqw, 18px); }
:root .sig--vis-swipe .is-tram .vw__tr, :root .sig--vis-swipe.is-tram .vw__tr { animation: vwTram 9s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes vwTram{ 0% { transform: translateX(130%); } 35% { transform: translateX(8%); } 70% { transform: translateX(2%); } 100% { transform: translateX(-24%); } }
:root .sig--vis-swipe .vw__win, :root .sig--vis-swipe.vw__win { flex: none; width: 9%; height: 52%; border-radius: 6px; background: #3a3541; }
:root .sig--vis-swipe .vw__door, :root .sig--vis-swipe.vw__door { flex: none; width: 7%; height: 74%; border-radius: 4px; background: #c9c1d2; }
:root .sig--vis-swipe .vw__m--tram, :root .sig--vis-swipe.vw__m--tram { position: relative; inset: auto; flex: 1; height: 74%; border-radius: 6px; padding: 0 4%; justify-content: center; }
:root .sig--vis-swipe .vw__m--tram .vw__fig, :root .sig--vis-swipe.vw__m--tram .vw__fig { width: 18%; height: 90%; }
:root .sig--vis-swipe .vw__m--tram small, :root .sig--vis-swipe.vw__m--tram small { display: none; }
:root .sig--vis-swipe .vw__phone, :root .sig--vis-swipe.vw__phone { position: absolute; right: 5%; top: 5%; height: 74%; aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 28px; background: #0d0b10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 40px 70px -26px rgba(0, 0, 0, .95); z-index: 2; }
:root .sig--vis-swipe .vw__scr, :root .sig--vis-swipe.vw__scr { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: #f7f3fb; }
:root .sig--vis-swipe .vw__ad, :root .sig--vis-swipe.vw__ad { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1s var(--ease-out); font-size: clamp(18px, 4.4cqw, 28px); }
:root .sig--vis-swipe .is-ad .vw__ad, :root .sig--vis-swipe.is-ad .vw__ad { opacity: 1; transform: none; }
:root .sig--vis-swipe .vw__m--ph, :root .sig--vis-swipe.vw__m--ph { padding: 18% 9% 34%; justify-content: flex-start; }
:root .sig--vis-swipe .vw__m--ph .vw__fig, :root .sig--vis-swipe.vw__m--ph .vw__fig { width: 70%; height: 46%; right: 15%; bottom: 0; }
:root .sig--vis-swipe .vw__m--ph small, :root .sig--vis-swipe.vw__m--ph small { display: none; }
:root .sig--vis-swipe .vw__spon, :root .sig--vis-swipe.vw__spon { position: absolute; left: 10px; top: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .3); color: #fff; font: 500 10px/1 var(--f-body); }
:root .sig--vis-swipe .vw__cta, :root .sig--vis-swipe.vw__cta { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 10px; border-radius: 12px; background: #fff; color: #3b0066; text-align: center; font: 600 12px/1 var(--f-display); transition: transform .2s; }
:root .sig--vis-swipe .vw__cta.press, :root .sig--vis-swipe.vw__cta.press { transform: scale(.94); }
:root .sig--vis-swipe .vw__deck, :root .sig--vis-swipe.vw__deck { position: absolute; inset: 0; padding: 16px 12px 12px; background: #f7f3fb; transform: translateY(100%); transition: transform .8s var(--ease-out); }
:root .sig--vis-swipe .is-deck .vw__deck, :root .sig--vis-swipe.is-deck .vw__deck { transform: none; }
:root .sig--vis-swipe .vw__card, :root .sig--vis-swipe.vw__card { position: absolute; left: 12px; right: 12px; top: 16px; bottom: 70px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -16px rgba(60, 0, 100, .45); color: #1d1a22; transition: transform .9s var(--ease-out), opacity .6s; }
:root .sig--vis-swipe .vw__card[data-n="1"], :root .sig--vis-swipe.vw__card[data-n="1"] { transform: scale(.94) translateY(10px); }
:root .sig--vis-swipe .vw__card[data-n="1"].front, :root .sig--vis-swipe.vw__card[data-n="1"].front { transform: none; }
:root .sig--vis-swipe .vw__ph, :root .sig--vis-swipe.vw__ph { flex: 1; min-height: 0; border-radius: 12px; background: radial-gradient(60% 60% at 70% 30%, rgba(227, 184, 255, .7), transparent 70%), var(--mc); position: relative; overflow: hidden; }
:root .sig--vis-swipe .vw__ph::after, :root .sig--vis-swipe.vw__ph::after { content: ""; position: absolute; right: 18%; bottom: -10%; width: 42%; height: 70%; border-radius: 999px 999px 0 0; background: #e3b8ff; box-shadow: 0 -38px 0 -14px #f1dcff; }
:root .sig--vis-swipe .vw__card[data-n="1"] .vw__ph, :root .sig--vis-swipe.vw__card[data-n="1"] .vw__ph { background: radial-gradient(60% 60% at 30% 30%, rgba(227, 184, 255, .6), transparent 70%), #3b0066; }
:root .sig--vis-swipe .vw__card b, :root .sig--vis-swipe.vw__card b { font: 600 13px/1.2 var(--f-display); letter-spacing: -.015em; }
:root .sig--vis-swipe .vw__card small, :root .sig--vis-swipe.vw__card small { align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: #f0e6f9; color: #5b00a8; font: 500 10.5px/1 var(--f-body); }
:root .sig--vis-swipe .vw__card p, :root .sig--vis-swipe.vw__card p { display: flex; align-items: center; gap: 4px; margin: 0; font: 400 10.5px/1 var(--f-body); color: #5b5363; }
:root .sig--vis-swipe .vw__card p svg, :root .sig--vis-swipe.vw__card p svg { width: 12px; height: 12px; flex: none; }
:root .sig--vis-swipe .vw__card p svg + svg, :root .sig--vis-swipe.vw__card p svg + svg { margin-left: 6px; }
:root .sig--vis-swipe .vw__st, :root .sig--vis-swipe.vw__st { position: absolute; top: 18px; width: 44px; height: 44px; padding: 10px; border-radius: 50%; border: 2.5px solid; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease-back); }
:root .sig--vis-swipe .vw__st--no, :root .sig--vis-swipe.vw__st--no { right: 18px; color: #fff; background: rgba(40, 30, 50, .55); }
:root .sig--vis-swipe .vw__st--yes, :root .sig--vis-swipe.vw__st--yes { left: 18px; color: #fff; background: #a100ff; border-color: #a100ff; }
:root .sig--vis-swipe .vw__st svg, :root .sig--vis-swipe.vw__st svg { stroke-width: 3; }
:root .sig--vis-swipe .vw__card.no .vw__st--no, :root .sig--vis-swipe.vw__card.no .vw__st--no, :root .sig--vis-swipe .vw__card.yes .vw__st--yes, :root .sig--vis-swipe.vw__card.yes .vw__st--yes { opacity: 1; transform: rotate(-10deg); }
:root .sig--vis-swipe .vw__card.out-l, :root .sig--vis-swipe.vw__card.out-l { transform: translate(-130%, 20px) rotate(-18deg) !important; opacity: 0; }
:root .sig--vis-swipe .vw__card.out-r, :root .sig--vis-swipe.vw__card.out-r { transform: translate(130%, 20px) rotate(18deg) !important; opacity: 0; }
:root .sig--vis-swipe .vw__btns, :root .sig--vis-swipe.vw__btns { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 22px; }
:root .sig--vis-swipe .vw__btns span, :root .sig--vis-swipe.vw__btns span { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: #fff; color: #6d6475; box-shadow: 0 8px 18px -10px rgba(60, 0, 100, .5); }
:root .sig--vis-swipe .vw__btns span + span, :root .sig--vis-swipe.vw__btns span + span { color: #a100ff; }
:root .sig--vis-swipe .vw__form, :root .sig--vis-swipe.vw__form { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px 14px 14px; background: #fff; color: #1d1a22; transform: translateX(100%); transition: transform .8s var(--ease-out); }
:root .sig--vis-swipe .is-form .vw__form, :root .sig--vis-swipe.is-form .vw__form { transform: none; }
:root .sig--vis-swipe .vw__form > b, :root .sig--vis-swipe.vw__form > b { font: 600 15px/1.1 var(--f-display); letter-spacing: -.02em; margin-bottom: 4px; }
:root .sig--vis-swipe .vw__form label, :root .sig--vis-swipe.vw__form label { display: grid; gap: 5px; font: 500 10.5px/1 var(--f-body); color: #5b5363; }
:root .sig--vis-swipe .vw__form label i, :root .sig--vis-swipe.vw__form label i { position: relative; height: 32px; border-radius: 9px; border: 1px solid #e3dbeb; background: #fbf9fd; overflow: hidden; }
:root .sig--vis-swipe .vw__form label i::after, :root .sig--vis-swipe.vw__form label i::after { content: ""; position: absolute; left: 10px; top: 13px; height: 6px; width: 0; border-radius: 3px; background: #5b5363; transition: width .45s var(--ease-out); }
:root .sig--vis-swipe .vw__form label.on i, :root .sig--vis-swipe.vw__form label.on i { border-color: #b98be2; }
:root .sig--vis-swipe .vw__form label.on i::after, :root .sig--vis-swipe.vw__form label.on i::after { width: 52%; }
:root .sig--vis-swipe .vw__send, :root .sig--vis-swipe.vw__send { margin-top: auto; padding: 11px; border-radius: 999px; background: #a100ff; color: #fff; text-align: center; font: 600 12px/1 var(--f-display); transition: transform .2s; }
:root .sig--vis-swipe .vw__send.press, :root .sig--vis-swipe.vw__send.press { transform: scale(.94); }
:root .sig--vis-swipe .vw__toast, :root .sig--vis-swipe.vw__toast { position: absolute; z-index: 4; left: 50%; top: 42%; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 90%; padding: 14px 18px 14px 14px; border-radius: 18px; background: #1b1820; border: 1px solid rgba(161, 0, 255, .5); color: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); opacity: 0; transform: translate(-50%, 30px) scale(.9); transition: opacity .4s, transform .8s var(--ease-back); }
:root .sig--vis-swipe .is-sent .vw__toast, :root .sig--vis-swipe.is-sent .vw__toast { opacity: 1; transform: translate(-50%, 0); }
:root .sig--vis-swipe .vw__toast > span, :root .sig--vis-swipe.vw__toast > span { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 12px; background: var(--v); }
:root .sig--vis-swipe .vw__toast b, :root .sig--vis-swipe.vw__toast b { display: block; font: 600 15px/1.2 var(--f-display); letter-spacing: -.015em; }
:root .sig--vis-swipe .vw__toast small, :root .sig--vis-swipe.vw__toast small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--f-body); color: var(--ink-2); }
:root .sig--vis-swipe .is-out .vw__toast, :root .sig--vis-swipe.is-out .vw__toast, :root .sig--vis-swipe .is-out .vw__phone, :root .sig--vis-swipe.is-out .vw__phone, :root .sig--vis-swipe .is-out .vw__bb, :root .sig--vis-swipe.is-out .vw__bb, :root .sig--vis-swipe .is-out .vw__tram, :root .sig--vis-swipe.is-out .vw__tram { opacity: 0; transition: opacity .6s; }
@container (max-width: 520px){:root .sig--vis-swipe .vw__bb, :root .sig--vis-swipe.vw__bb { width: 50%; top: 6%; }
:root .sig--vis-swipe .vw__phone, :root .sig--vis-swipe.vw__phone { height: 66%; right: 4%; top: 6%; }
:root .sig--vis-swipe .vw__tram, :root .sig--vis-swipe.vw__tram { height: 18%; }

}
:root .sig--vis-swipe .vw__city, :root .sig--vis-swipe.vw__city { position: absolute; left: 0; right: 0; bottom: 22%; width: 100%; height: 42%; fill: rgba(255, 255, 255, .05); }
:root .sig--vis-swipe .vw__city .w, :root .sig--vis-swipe.vw__city .w { fill: rgba(227, 184, 255, .12); }
:root .sig--vis-swipe .vw__city, :root .sig--vis-swipe .vw__city rect { stroke: none; }
@container (max-width: 520px){:root .sig--vis-swipe .vw__bb, :root .sig--vis-swipe.vw__bb { width: 46%; left: 4%; }
:root .sig--vis-swipe .vw__phone, :root .sig--vis-swipe.vw__phone { height: 62%; }
:root .sig--vis-swipe .vw__city, :root .sig--vis-swipe.vw__city { height: 34%; }

}
@media (prefers-reduced-motion: reduce){:root .sig--vis-swipe .is-tram .vw__tr, :root .sig--vis-swipe.is-tram .vw__tr { animation: none !important; transform: translateX(4%); }
 }