.landing-signal-demo{min-width:0}
.landing-signal-demo [hidden]{display:none!important}
/* Keep the complete example readable before the animation initializes. */
[data-signal-animation]{animation:none!important;--message-opacity:1;--message-y:0px;--pulse-progress:0;--pulse-opacity:0;--order-opacity:1;--check-opacity:0;--check-scale:1}
[data-signal-animation] *,[data-signal-animation] *:before,[data-signal-animation] *:after{animation:none!important;will-change:auto}
[data-signal-animation] .landing-final-signal-flow{grid-template-columns:minmax(210px,280px) minmax(24px,48px) minmax(175px,1fr);gap:17px}
[data-signal-animation] .landing-final-phone{transform:none!important;min-width:0}
[data-signal-animation] .landing-final-phone-input{margin-top:auto;flex-shrink:0}
[data-signal-animation] .landing-final-avatar{flex-shrink:0}
[data-signal-animation] .landing-final-signal-msg{opacity:var(--message-opacity)!important;transform:translateY(var(--message-y))!important}
[data-signal-animation] .landing-final-signal-msg:before,[data-signal-animation] .landing-final-signal-msg:after{display:none!important}
[data-signal-animation] .landing-final-signal-msg-title,[data-signal-animation] .landing-final-signal-msg-list li{border-radius:3px;outline:3px solid transparent;background:transparent}
[data-signal-animation] .animation-highlight{background:#e1f3ff!important;outline-color:#e1f3ff!important}
[data-signal-animation] .landing-final-flow-arrow{position:relative;overflow:visible}
[data-signal-animation] .landing-final-flow-arrow:before,[data-signal-animation] .landing-final-flow-arrow:after{display:none}
.landing-signal-demo .animation-pulse{position:absolute;top:-2px;left:calc(var(--pulse-progress) * (100% - 12px));width:12px;height:6px;border-radius:3px;background:#189dee;opacity:var(--pulse-opacity);box-shadow:0 0 8px #22b8f275}
[data-signal-animation] .landing-final-mt-card{position:relative;transform:none!important;min-width:0;min-height:280px;overflow:visible!important;border:1px solid #cfe4f5}
[data-signal-animation] .landing-final-mt-head{min-height:41px}
[data-signal-animation] .landing-final-mt-brand small{font-size:11px;white-space:normal;line-height:1.5;min-height:17px}
[data-signal-animation][data-phase] .landing-final-mt-brand small{color:#61788e}
[data-signal-animation][data-phase] .landing-final-mt-brand small:before{background:#93a5b7}
[data-signal-animation][data-phase=complete] .landing-final-mt-brand small{color:#128754}
[data-signal-animation][data-phase=complete] .landing-final-mt-brand small:before{background:#18b876}
[data-signal-animation] .landing-final-mt-symbol{opacity:var(--order-opacity);font-size:19px}
[data-signal-animation] .landing-final-mt-table strong{opacity:var(--value-opacity,1);font-variant-numeric:tabular-nums}
.landing-signal-demo .animation-check{position:absolute;right:12px;top:-11px;width:27px;height:27px;display:grid;place-items:center;background:#17a970;border:3px solid white;border-radius:50%;color:white;opacity:var(--check-opacity);transform:scale(var(--check-scale))}
.landing-signal-demo .animation-check svg{width:15px;height:15px;stroke-width:2.5}
.landing-signal-demo .animation-toolbar{display:flex;align-items:center;gap:14px;padding:15px 0 5px;min-height:60px}
.landing-signal-demo .animation-progress{display:flex;gap:4px;flex-shrink:0}
.landing-signal-demo .animation-progress span{width:18px;height:4px;border-radius:2px;background:#d7e4ef}
.landing-signal-demo .animation-progress span.is-active{background:#198ad6}
.landing-signal-demo .animation-progress span.is-complete{background:#16a77b}
.landing-signal-demo #animation-status{font-size:12px;color:#48677f;flex:1;line-height:1.5}
.landing-signal-demo .animation-buttons{display:flex;gap:7px}
.landing-signal-demo .animation-buttons button{width:35px;height:35px;display:grid;place-items:center;padding:0;border:1px solid #ccddea;border-radius:5px;background:white;color:#276b9c;box-shadow:none;cursor:pointer}
.landing-signal-demo .animation-buttons svg{width:16px;height:16px}
.landing-signal-demo .animation-buttons button:hover{background:#eaf5ff}
.landing-signal-demo .animation-buttons button:focus-visible{outline:2px solid #188bde;outline-offset:3px}
.landing-signal-demo #example-disclaimer,.landing-signal-demo #motion-note{font-size:11px;color:#647c91;line-height:1.6;margin:8px 0 0;text-align:center}
.landing-signal-demo #motion-note{color:#3f677d}
@media(max-width:1080px){
  [data-signal-animation] .landing-final-signal-flow{grid-template-columns:minmax(0,1fr)}
  .landing-signal-demo .animation-pulse{width:6px;height:12px;left:-2px;top:calc(var(--pulse-progress) * (100% - 12px))}
  [data-signal-animation] .landing-final-trade-stack{width:min(100%,300px);margin:auto}
}
@media(max-width:650px){
  .landing-signal-demo .animation-toolbar{gap:8px}
  .landing-signal-demo .animation-progress span{width:12px}
  .landing-signal-demo #animation-status{font-size:11px}
}
@media(prefers-reduced-motion:reduce){[data-signal-animation] *,[data-signal-animation] *:before,[data-signal-animation] *:after{transition:none!important}}