/* Synchro motion 2.1: six independent plates of the approved 3D artwork. */
.synchro-live{display:block;flex-shrink:0;overflow:visible;isolation:isolate}
.synchro-live .synchro-still{display:none}
.synchro-fin{transform-box:view-box;transform-origin:656px 600px;animation:synchro-wave 6.8s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.synchro-fin-0{--fin-x:-8px;--fin-y:-24px;--fin-r:-.45deg;animation-delay:-.85s}
.synchro-fin-1{--fin-x:0px;--fin-y:-28px;--fin-r:.3deg;animation-delay:0s}
.synchro-fin-2{--fin-x:10px;--fin-y:-23px;--fin-r:.45deg;animation-delay:-5.95s}
.synchro-fin-3{--fin-x:10px;--fin-y:-22px;--fin-r:.35deg;animation-delay:-5.1s}
.synchro-fin-4{--fin-x:-7px;--fin-y:-22px;--fin-r:-.3deg;animation-delay:-4.25s}
.synchro-fin-5{--fin-x:-10px;--fin-y:-21px;--fin-r:-.45deg;animation-delay:-3.4s}
@keyframes synchro-wave{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(var(--fin-x),var(--fin-y)) rotate(var(--fin-r))}
  50%{transform:translate(0,-5px) rotate(0deg)}
  75%{transform:translate(calc(var(--fin-x) * -.55),calc(var(--fin-y) * -.65)) rotate(calc(var(--fin-r) * -.6))}
}
:root[data-synchro-motion="paused"] .synchro-fin{display:none;animation:none}
:root[data-synchro-motion="paused"] .synchro-still{display:block}
.synchro-page-hidden .synchro-fin,.synchro-live.is-offscreen .synchro-fin{animation-play-state:paused}
.gateway-symbol .synchro-live{width:100%;height:100%}
.synchro-motion-toggle{appearance:none;border:0;background:transparent;color:var(--tk-text2,var(--text2,#52627A));font:400 12px/1.5 Inter,system-ui,sans-serif;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0;min-height:32px}
.synchro-motion-toggle:focus-visible{outline:3px solid var(--tk-accent,#165DFF);outline-offset:3px;border-radius:4px}
.synchro-motion-toggle:disabled{cursor:default;text-decoration:none}
.brand-gateway footer{flex-wrap:wrap;gap:12px 24px}
.brand-crm .login-card>.synchro-motion-toggle{display:block;margin-top:8px}
.brand-crm #content>.synchro-motion-toggle{display:block;margin-top:16px}
.synchro-motion-demo{display:grid;justify-items:center;gap:16px;padding:32px 0}
.synchro-motion-demo .synchro-mark{width:280px;height:280px;max-width:100%}
@media(max-width:760px){.brand-gateway .brand .synchro-live{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){
  .synchro-live .synchro-fin{display:none;animation:none;will-change:auto}
  .synchro-live .synchro-still{display:block}
}