/* Progressive enhancement of the eight supplied illustrations, scoped to this page. */
.marketing-ops .mo-animation {
    --mo-motion-css: 1;
    --ink: #1e1e1e;
    --grey: #dee1e6;
    --cream: #f9f5ec;
    --lime: #e4f2b3;
    --orange: #ff5d02;
    --white: #fff;
    --n300: #c2c3c5;
    --n700: #4f4f50;
    --font-sans: "PolySans", sans-serif;
    --font-mono: "Azeret Mono", ui-monospace, monospace;
    --w-slim: 300;
    --w-neutral: 400;
    --w-median: 500;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.marketing-ops .mo-animation .mo-animation-fallback > .mo-illustration { margin: 0; }
.marketing-ops .mo-animation .mo-animation-art { display: none; }
.marketing-ops .mo-animation.mo-motion-enabled .mo-animation-art { display: block; }
.marketing-ops .mo-animation.mo-motion-enabled .mo-animation-fallback { display: none; }
.marketing-ops .mo-animation .viz { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; }
.marketing-ops .mo-animation .viz-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.marketing-ops .mo-animation .viz-stage :where(p,h1,h2,h3) { margin: 0; }
.marketing-ops .mo-animation .viz-stage img { display: block; max-width: 100%; width: auto; height: auto; }
.marketing-ops .mo-animation .viz-stage svg { overflow: visible; }
.marketing-ops .mo-animation .viz-phone { display: none; }
.marketing-ops .mo-animation .viz-pop,
.marketing-ops .mo-animation .viz-node,
.marketing-ops .mo-animation .viz-fade,
.marketing-ops .mo-animation .viz-wipe {
    transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), clip-path 1.2s var(--ease-out);
    transition-delay: var(--d, 0ms);
}
.marketing-ops .mo-animation .viz-node { transform-origin: 50% 50%; }
.marketing-ops .mo-animation .viz-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1); transition-delay: var(--d, 0ms); }
.marketing-ops .mo-animation .viz-bar { transform-origin: center bottom; transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.marketing-ops .mo-animation .viz.is-pending .viz-pop { opacity: 0; transform: translateY(18px) scale(.96); }
.marketing-ops .mo-animation .viz.is-pending .viz-fade { opacity: 0; }
.marketing-ops .mo-animation .viz.is-pending .viz-node { opacity: 0; transform: scale(0); }
.marketing-ops .mo-animation .viz.is-pending .viz-draw { stroke-dashoffset: 1; }
.marketing-ops .mo-animation .viz.is-pending .viz-wipe { clip-path: inset(0 100% 0 0); }
.marketing-ops .mo-animation .viz.is-pending .viz-bar { transform: scaleY(0); }
/* Arming must be instantaneous: delayed transitions otherwise prevent a real reveal. */
.marketing-ops .mo-animation .viz.is-pending * { transition: none !important; animation: none !important; }
/* Also settle off-screen entrances in browsers without Element.getAnimations(). */
.marketing-ops .mo-animation.mo-motion-enabled:not(.mo-animation-visible) .viz.is-in * { transition: none !important; }
.marketing-ops .mo-animation .viz-early-access { overflow: visible; }
.marketing-ops .mo-animation .mo-cta-card { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; color: #fff; text-transform: uppercase; text-align: center; font: 400 30px/1.09 "PolySans", sans-serif; letter-spacing: .02em; }
.marketing-ops .mo-animation .mo-cta-card img { position: absolute; left: 0; width: 100%; object-fit: cover; }
.marketing-ops .mo-animation .mo-cta-card span { position: relative; }
.marketing-ops .mo-animation .mo-cta-card-3 { font-size: 24px; }
.marketing-ops .mo-animation .mo-cta-line { position: absolute; }
.marketing-ops .mo-animation .mo-cta-dot { position: absolute; width: 8.3px; height: 8.3px; background: var(--lime); }
.marketing-ops .mo-animation .viz-early-access.is-in .mo-cta-card { animation: mo-collage-drift 6s ease-in-out 1.6s infinite; animation-play-state: paused; }
.marketing-ops .mo-animation .viz-early-access.is-in .mo-cta-card-1 { animation-delay: 2.4s; animation-duration: 7s; }
.marketing-ops .mo-animation .viz-early-access.is-in .mo-cta-card-2 { animation-delay: 3.1s; animation-duration: 6.5s; }
.marketing-ops .mo-animation .viz-early-access.is-in .mo-cta-card-3 { animation-delay: 2s; animation-duration: 7.5s; }
.marketing-ops .mo-animation.mo-loop-playing .viz-early-access.is-in .mo-cta-card { animation-play-state: running; }
.marketing-ops .mo-animation .viz-phone .mo-cta-card { font-size: 18px; }
.marketing-ops .mo-animation .viz-phone .mo-cta-card-1,
.marketing-ops .mo-animation .viz-phone .mo-cta-card-3 { font-size: 16px; }
.marketing-ops .mo-animation-pause { position: absolute; bottom: 24px; right: 32px; padding: 8px 12px; min-height: 44px; border: 1px solid currentColor; border-radius: 24px; background: #1e1e1e; color: var(--mo-paper); font-size: 14px; cursor: pointer; }
@keyframes mo-collage-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 700px) {
    .marketing-ops .mo-animation .viz-desk { display: none; }
    .marketing-ops .mo-animation .viz-phone { display: block; }
    .marketing-ops .mo-animation-pause { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .marketing-ops .mo-animation.mo-motion-enabled .mo-animation-art { display: none; }
    .marketing-ops .mo-animation.mo-motion-enabled .mo-animation-fallback { display: block; }
    .marketing-ops .mo-animation *, .marketing-ops .mo-animation *::before, .marketing-ops .mo-animation *::after { animation: none !important; transition: none !important; }
    .marketing-ops .mo-animation-pause { display: none; }
}