/* VoiceOwl homepage: motion layer (thought 04, 2026-11-02). Additive to site.css (management's stylesheet).
   The page is one live contact centre: the hero call drives the headline, and every visual further down plays its
   own frames of the same work. Hidden start states only apply under .mo-js (set by motion.js when motion is allowed),
   so without JavaScript or with reduced motion the page is management's static design. */
:root{--mo-ease:cubic-bezier(.2,.7,.2,1);--mo-gold:#ffd24a;--mo-navy:#004480;--mo-blue:#0a73c0;--mo-teal:#42b49e}

.mo-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the cards' captions sit on light pastel art in both themes (white-on-pastel in dark mode was unreadable) */
.ocard .txt .h24{color:#14161e}
.ocard .txt p{color:#4c4f59}
.ocard.mt48 .txt p{max-width:30ch}

/* management's dark mode put a white chip behind the dark logo; the real light logo from voiceowl.ai needs none */
.logo picture img,.logo img{background:none!important;padding:0!important}

/* ── page chrome ───────────────────────────────────────────────────────────────────────────────────────────────── */
.mo-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:60;pointer-events:none;transform-origin:0 50%;
  transform:scaleX(var(--mo-p,0));background:linear-gradient(90deg,var(--mo-navy),var(--mo-blue),var(--mo-teal),var(--mo-gold))}
header.nav.mo-scrolled{box-shadow:0 10px 30px -14px rgba(0,30,60,.28)}

/* scroll reveals */
.mo-js .mo-rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease);transition-delay:var(--mo-d,0s)}
.mo-js h2.mo-rv{transform:translateY(16px);filter:blur(8px);transition-property:opacity,transform,filter}
.mo-js .mo-rv.mo-in{opacity:1;transform:none;filter:none}

/* pointer spotlight on the art cards */
.mo-spot{position:relative}
.mo-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 46%);mix-blend-mode:soft-light}
.mo-spot:hover::after{opacity:1}

/* ── header: floats over the hero (transparent, white type, light logo), solid again once the hero scrolls away ─── */
.logo .mo-lg-d,.logo .mo-lg-l{height:28px;width:auto;display:block}
.logo .mo-lg-l{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .mo-lg-d{display:none}:root:not([data-theme="light"]) .logo .mo-lg-l{display:block}}
:root[data-theme="dark"] .logo .mo-lg-d{display:none}
:root[data-theme="dark"] .logo .mo-lg-l{display:block}
header.nav{transition:background-color .35s ease,box-shadow .35s ease}
header.nav.mo-over{background:transparent;box-shadow:none}
header.nav.mo-over.mo-glass{background:rgba(6,29,54,.74);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
header.nav.mo-over .logo .mo-lg-d{display:none}
header.nav.mo-over .logo .mo-lg-l{display:block}
header.nav.mo-over .nl,header.nav.mo-over .signin,header.nav.mo-over .burger{color:rgba(255,255,255,.86)}
header.nav.mo-over .nv:hover .nl,header.nav.mo-over .nv:focus-within .nl{color:#fff;background:rgba(255,255,255,.12)}
header.nav.mo-over .btn-dark{background:#fff;color:#0b2440}

/* ── hero ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.mo-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:-64px;padding-top:64px;color:#fff;
  background:radial-gradient(900px 600px at 78% 18%,rgba(249,207,0,.16),transparent 60%),radial-gradient(800px 600px at 8% 92%,rgba(66,180,158,.18),transparent 60%),linear-gradient(160deg,#0b2f55,#061d36 70%)}
.mo-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mo-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000,transparent 75%)}
.mo-aurora{position:absolute;inset:-25%;pointer-events:none;filter:blur(30px)}
.mo-aurora i{position:absolute;border-radius:50%}
.mo-aurora i:nth-child(1){width:48%;height:62%;left:46%;top:2%;background:radial-gradient(circle,rgba(249,207,0,.30),transparent 64%);animation:mo-drift1 19s ease-in-out infinite alternate}
.mo-aurora i:nth-child(2){width:52%;height:70%;left:4%;top:42%;background:radial-gradient(circle,rgba(66,180,158,.30),transparent 64%);animation:mo-drift2 23s ease-in-out infinite alternate}
.mo-aurora i:nth-child(3){width:42%;height:56%;left:58%;top:44%;background:radial-gradient(circle,rgba(10,115,192,.40),transparent 64%);animation:mo-drift3 27s ease-in-out infinite alternate}
/* the hero's living gradient: four soft glows in the logo's colours, drifting on long, eased cycles (transform only) */
.mo-mesh{position:absolute;inset:-20%;pointer-events:none}
.mo-mesh i{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform;
  animation:mo-mesh var(--d,34s) cubic-bezier(.45,.05,.55,.95) var(--l,0s) infinite alternate}
.mo-mesh i:nth-child(1){width:46%;height:56%;left:50%;top:4%;background:radial-gradient(circle,rgba(240,192,0,.30),transparent 62%);--d:34s;--tx:-18%;--ty:14%}
.mo-mesh i:nth-child(2){width:52%;height:62%;left:-2%;top:36%;background:radial-gradient(circle,rgba(48,168,144,.34),transparent 62%);--d:39s;--l:-8s;--tx:20%;--ty:-14%}
.mo-mesh i:nth-child(3){width:44%;height:54%;left:60%;top:42%;background:radial-gradient(circle,rgba(0,96,192,.46),transparent 62%);--d:30s;--l:-14s;--tx:-16%;--ty:-18%}
.mo-mesh i:nth-child(4){width:34%;height:42%;left:26%;top:-4%;background:radial-gradient(circle,rgba(216,24,72,.20),transparent 62%);--d:44s;--l:-20s;--tx:14%;--ty:20%}
@keyframes mo-mesh{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--tx),var(--ty),0) scale(1.16)}}

/* the hero's edge: a band of the logo's colours flows along the bottom, then the navy melts into the page colour,
   so there is no line between the hero and the next section */
.mo-horizon{position:absolute;left:0;right:0;bottom:0;height:320px;overflow:hidden;pointer-events:none}
.mo-horizon::before{content:"";position:absolute;left:0;bottom:84px;width:200%;height:150px;opacity:.55;filter:blur(56px);will-change:transform;
  background:linear-gradient(90deg,#30a890 0%,#0060c0 12.5%,#f0c000 25%,#d81848 37.5%,#30a890 50%,#0060c0 62.5%,#f0c000 75%,#d81848 87.5%,#30a890 100%);
  animation:mo-flow 32s linear infinite}
.mo-horizon::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,29,54,0) 0%,rgba(6,29,54,0) 30%,color-mix(in srgb,var(--bg) 45%,transparent) 68%,var(--bg) 100%)}
@keyframes mo-flow{to{transform:translate3d(-50%,0,0)}}

@keyframes mo-drift1{to{transform:translate(-22%,18%) scale(1.18)}}
@keyframes mo-drift2{to{transform:translate(26%,-20%) scale(1.1)}}
@keyframes mo-drift3{to{transform:translate(-16%,-26%) scale(1.22)}}

.mo-hero-in{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,88px) 20px clamp(104px,11vw,176px);display:grid;
  grid-template-columns:minmax(0,1fr) 520px;gap:clamp(32px,5vw,72px);align-items:center;min-height:min(820px,calc(100vh - 40px))}
.mo-hero-copy{max-width:620px}
.mo-hero h1.h65{font-size:clamp(40px,4.3vw,62px);line-height:1.04;color:#fff;max-width:none;width:100%}
.mo-sub{margin:26px 0 0;font:400 clamp(16px,1.25vw,19px)/1.55 var(--f-sans);color:rgba(255,255,255,.72);max-width:470px}
.mo-ctl{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:40px}
.mo-ctl .pill-btn{padding:13px 24px;font-size:15px;box-shadow:0 10px 30px -12px rgba(255,210,74,.55);transition:transform .2s,box-shadow .2s,background-color .2s}
.mo-ctl .pill-btn:hover{transform:translateY(-1px);background:var(--mo-gold);box-shadow:0 14px 34px -12px rgba(255,210,74,.7)}

.mo-hero-vis{position:relative;width:520px;height:660px;justify-self:end}
.mo-vis-in{position:absolute;left:0;top:0;width:520px;height:660px;transform-origin:0 0;transform:scale(var(--mo-s,1))}
.mo-tiltwrap{position:absolute;left:24px;top:10px;width:340px;height:640px;perspective:1400px}
.mo-tiltwrap .phone{left:0;top:0;transition:transform .9s var(--mo-ease);transform-style:preserve-3d;
  box-shadow:0 50px 90px -40px rgba(0,10,30,.8),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.08)}
.mo-js .mo-tiltwrap{animation:mo-float 7s ease-in-out infinite}
@keyframes mo-float{50%{transform:translateY(-10px)}}
.mo-hcard{position:absolute;width:196px;padding:18px 18px 20px;border-radius:18px;background:rgba(255,255,255,.94);color:#0b2440;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 60px -28px rgba(0,8,25,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .9s var(--mo-ease),box-shadow .5s}
.mo-hcard.mo-outcome{right:0;top:84px}
.mo-hcard.mo-voice{right:6px;top:392px}
.mo-out{font-size:21px;line-height:1.2;margin:8px 0 12px;color:#0b2440}
.mo-rings{position:absolute;left:194px;top:330px;width:0;height:0}

/* the phone's call screen: the agent (VoiceOwl's mark), what the call is about, a running timer */
.mo-callhd{position:absolute;left:18px;right:18px;top:40px;display:grid;justify-items:center;gap:4px;padding-bottom:14px;border-bottom:1px solid #eef1f5;text-align:center}
.mo-orb{position:relative;width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:6px;
  box-shadow:0 8px 20px -8px rgba(0,40,80,.35),inset 0 0 0 1px #e6edf4}
.mo-orb img{width:40px;height:40px;display:block}
.mo-orb i{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(10,115,192,.4);opacity:0}
.mo-speak-a .mo-orb i{animation:mo-orb 1.5s ease-out infinite}
.mo-speak-a .mo-orb i:nth-child(3){animation-delay:.75s}
@keyframes mo-orb{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.mo-callhd b{font:500 15px/1.2 var(--f-sans);color:#0b2440}
.mo-callhd span{font-size:12px;line-height:1.3;color:#6b7686}
.mo-callhd .mo-timer{font-variant-numeric:tabular-nums;color:#1f7a52;font-weight:500}

.mo-h1{display:block}
.mo-l{display:block;overflow:hidden;padding:.04em 0 .12em;margin:-.04em 0 -.12em}
.mo-l>span{display:inline-block}
.mo-js .mo-l>span{transform:translateY(110%);transition:transform 1.15s var(--mo-ease)}
.mo-js .mo-l:nth-child(2)>span{transition-delay:.12s}
.mo-js .mo-l:nth-child(3)>span{transition-delay:.24s}
.mo-js.mo-ready .mo-l>span{transform:none}
.mo-js .mo-sub,.mo-js .mo-ctl{opacity:0;transform:translateY(14px);transition:opacity .9s var(--mo-ease) .45s,transform .9s var(--mo-ease) .45s}
.mo-js .mo-ctl{transition-delay:.6s}
.mo-js.mo-ready .mo-sub,.mo-js.mo-ready .mo-ctl{opacity:1;transform:none}
.mo-rot{display:inline-block;position:relative;white-space:nowrap;vertical-align:top;transition:width .7s var(--mo-ease)}
.mo-rot .mo-ph{visibility:hidden}
.mo-rot .mo-w{position:absolute;left:0;top:0;color:var(--mo-gold);text-shadow:0 0 28px rgba(255,210,74,.35)}
.mo-ch{display:inline-block;transition:transform .6s var(--mo-ease),opacity .45s ease,filter .45s ease}
.mo-ch.mo-pre{transform:translateY(70%);opacity:0;filter:blur(6px)}
.mo-ch.mo-out{transform:translateY(-70%);opacity:0;filter:blur(6px)}

.mo-segs{display:flex;gap:14px}
.mo-seg{appearance:none;border:0;background:none;padding:6px 0;cursor:pointer;display:grid;gap:9px;min-width:100px;text-align:left;
  font:500 13px/1 var(--f-sans);color:rgba(255,255,255,.6);transition:color .3s}
.mo-seg i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.mo-seg i b{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--mo-gold)}
.mo-seg[aria-pressed="true"],.mo-seg:hover{color:#fff}
.mo-seg:focus-visible{outline:2px solid var(--mo-gold);outline-offset:4px;border-radius:2px}

.mo-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5484d;margin-right:7px;vertical-align:1px;animation:mo-blink 1.6s ease-in-out infinite}
@keyframes mo-blink{50%{opacity:.25}}
[data-mo="lang"],[data-mo="ctx"]{display:inline-block;transition:opacity .35s,transform .35s}
.mo-swap{opacity:0!important;transform:translateY(-6px)}

.mo-chat{position:absolute;left:18px;right:18px;top:196px;bottom:16px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:hidden}
.mo-chat>*{flex:none}
.mo-col{display:flex!important;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:hidden;gap:0}
/* when a chat column fills up, its oldest message shrinks away instead of being cut in half */
.mo-collapse{max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;overflow:hidden;
  transition:max-height .42s var(--mo-ease),margin .42s var(--mo-ease),padding .42s var(--mo-ease),opacity .3s ease}
.mo-col>*{flex:none}
.mo-chat .me,.mo-col .me{align-self:flex-end}
.mo-chat .tool2{align-self:stretch}
.mo-chat.mo-leave>*{transition:opacity .45s ease,transform .45s ease;opacity:0;transform:translateY(-18px)}
.bub2 .mo-en{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;opacity:.72}
.mo-pop{animation:mo-pop .55s var(--mo-ease) both}
.bub2.ai.mo-pop{transform-origin:0 100%}
.bub2.me.mo-pop{transform-origin:100% 100%}
@keyframes mo-pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.mo-typing{display:inline-flex!important;gap:5px;align-items:center;padding:13px 16px!important}
.mo-typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:mo-dot 1s ease-in-out infinite}
.mo-typing i:nth-child(2){animation-delay:.15s}
.mo-typing i:nth-child(3){animation-delay:.3s}
@keyframes mo-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-4px);opacity:.95}}
.mo-caret::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:mo-blink .9s steps(1) infinite}

.mo-flip{perspective:700px}
.mo-flip>*{display:block;width:max-content}
.mo-flipping{animation:mo-flip .75s var(--mo-ease)}
@keyframes mo-flip{0%{transform:none;opacity:1}45%{transform:rotateX(85deg);opacity:0}55%{transform:rotateX(-85deg);opacity:0}100%{transform:none;opacity:1}}
.mo-hit{animation:mo-hit 1.1s ease-out}
@keyframes mo-hit{0%{box-shadow:0 0 0 0 rgba(66,180,158,.7),0 30px 60px -28px rgba(0,8,25,.7)}100%{box-shadow:0 0 0 22px rgba(66,180,158,0),0 30px 60px -28px rgba(0,8,25,.7)}}

.mo-voice .wave2 span{transform-origin:50% 50%;transform:scaleY(.16);transition:transform .45s ease,background-color .4s}
.mo-voice.mo-on .wave2 span{animation:mo-wv var(--wd,.8s) ease-in-out var(--wl,0s) infinite alternate}
.mo-voice.mo-cust .wave2 span{background:var(--mo-teal)}
@keyframes mo-wv{from{transform:scaleY(.22)}to{transform:scaleY(1)}}

.mo-rings i{position:absolute;left:-270px;top:-270px;width:540px;height:540px;border-radius:50%;border:1.5px solid rgba(140,200,255,.36);opacity:0}
.mo-speak .mo-rings i{animation:mo-ring 2.6s cubic-bezier(.2,.6,.2,1) infinite}
.mo-speak .mo-rings i:nth-child(2){animation-delay:.85s}
.mo-speak .mo-rings i:nth-child(3){animation-delay:1.7s}
.mo-speak.mo-custs .mo-rings i{border-color:rgba(66,180,158,.45)}
@keyframes mo-ring{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1.28)}}

@media (max-width:1180px){
  .mo-hero-in{grid-template-columns:minmax(0,1fr) 450px}
  .mo-hero-vis{width:450px;height:572px;--mo-s:.866}
}
@media (max-width:900px){
  .mo-hero-in{grid-template-columns:1fr;min-height:0;gap:48px;padding-top:32px}
  .mo-hero-vis{justify-self:center}
}
@media (max-width:520px){
  .mo-hero-vis{width:340px;height:432px;--mo-s:.654}
  .mo-ctl{gap:22px;margin-top:32px}
  .mo-seg{min-width:84px}
}

/* ── customers strip ───────────────────────────────────────────────────────────────────────────────────────────── */
.mq{position:relative;overflow:hidden;padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:0}
.mo-js .mq-track{animation:mo-mq 46s linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
.mq-track li{flex:none;height:76px;padding:0 38px;display:grid;place-items:center}
.mq-track .clogo{max-height:52px;max-width:170px;transition:filter .35s,transform .35s}
.mq-track li:hover .clogo{filter:none;transform:scale(1.07)}
.mq-word{font:500 19px/1 var(--f-display);color:var(--muted);letter-spacing:-.01em;white-space:nowrap}
@keyframes mo-mq{to{transform:translateX(-50%)}}

/* ── scene parts ───────────────────────────────────────────────────────────────────────────────────────────────── */
.scn .card,.scn .row2,.scn .step2,.scn .chip2,.scn .bars2 i,.scn .bars2 em{transition:opacity .45s ease,transform .55s var(--mo-ease),background-color .4s,color .4s,width 1.1s var(--mo-ease),left .8s var(--mo-ease),top .8s var(--mo-ease),box-shadow .5s}
.mo-hide{opacity:0!important;transform:translateY(10px)!important}
.mo-hidex{opacity:0!important;transform:translateX(-12px)!important}
.mo-chip-pop{animation:mo-chip .5s var(--mo-ease)}
@keyframes mo-chip{0%{transform:scale(.55);opacity:0}100%{transform:none;opacity:1}}
.mo-spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid #cfdbe7;border-top-color:var(--mo-blue);animation:mo-turn .7s linear infinite;vertical-align:-2px}
@keyframes mo-turn{to{transform:rotate(360deg)}}
.step2 .n{transition:background-color .4s,color .4s,box-shadow .4s}
.step2.mo-dim{opacity:.42}
.step2.mo-run .n{background:#fff;color:var(--mo-navy);box-shadow:0 0 0 2px var(--mo-blue);animation:mo-ping 1.1s ease-out infinite}
@keyframes mo-ping{0%{box-shadow:0 0 0 2px var(--mo-blue),0 0 0 2px rgba(10,115,192,.45)}100%{box-shadow:0 0 0 2px var(--mo-blue),0 0 0 14px rgba(10,115,192,0)}}
.mo-flash{animation:mo-flash 1.2s ease-out}
@keyframes mo-flash{0%{color:#1f7a52;text-shadow:0 0 12px rgba(31,122,82,.35)}100%{}}
.mo-tick{display:inline-block;animation:mo-tick .45s var(--mo-ease)}
@keyframes mo-tick{0%{transform:translateY(55%);opacity:0}100%{transform:none;opacity:1}}

/* the outcomes stage: use cases on the left, the call, the outcome and the WhatsApp follow-up on the right */
.mo-uc{position:absolute;display:grid;gap:4px}
.mo-uc button{appearance:none;border:0;background:none;text-align:left;padding:10px 0 12px;cursor:pointer;display:grid;gap:9px;font:500 17px/1.2 var(--f-sans);color:rgba(11,36,64,.45);transition:color .3s}
.mo-uc button[aria-pressed="true"]{color:#0b2440}
.mo-uc button i{display:block;height:2px;border-radius:2px;background:rgba(11,36,64,.12);overflow:hidden}
.mo-uc button i b{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mo-navy),var(--mo-blue))}
.mo-uc button:focus-visible{outline:2px solid var(--mo-blue);outline-offset:3px;border-radius:2px}
.mo-wa{position:absolute;border-radius:16px;background:#fff;box-shadow:0 18px 40px -22px rgba(0,30,60,.45);padding:14px 16px;font-size:14px;color:#0b2440;transition:opacity .5s,transform .6s var(--mo-ease)}
.mo-wa .mo-wa-h{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b6575;margin-bottom:10px}
.mo-wa .mo-wa-h b{width:18px;height:18px;border-radius:50%;background:#25d366;display:grid;place-items:center;color:#fff;font-size:11px}
.mo-wa .mo-wa-m{background:#dcf8c6;border-radius:12px 12px 12px 4px;padding:10px 12px;line-height:1.4}
.mo-wa .mo-wa-m em{display:block;font-style:normal;margin-top:8px;padding:7px 10px;border-radius:8px;background:#fff;color:#0a73c0;text-align:center;font-weight:500}
.mo-wa .mo-wa-t{display:block;text-align:right;font-size:11px;color:#6b7686;margin-top:6px}
.mo-wa .mo-wa-t i{font-style:normal;color:#34b7f1}

/* the console */
.mo-ans{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:14px;color:#0b2440;min-height:20px}
.mo-ans b{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--mo-navy),var(--mo-teal))}
.mo-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.mo-drawn{transition:stroke-dashoffset 1.8s var(--mo-ease);stroke-dashoffset:0}

/* compliance badges */
.b4 svg path:nth-of-type(1),.b4 svg path:nth-of-type(3){transition:stroke-dashoffset 1.4s var(--mo-ease)}
.b4{position:relative}
.b4 svg{overflow:visible}
.mo-js .b4.mo-shine svg{animation:mo-glint 1s ease-out}
@keyframes mo-glint{40%{filter:drop-shadow(0 0 10px rgba(10,115,192,.45))}100%{filter:none}}

/* closing band */
.mo-cta{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:linear-gradient(160deg,#0b2f55,#06213d);color:#fff;margin:0 auto;max-width:var(--maxw)}
.mo-cta .mo-aurora{inset:-40%;z-index:-1}
.mo-cta h2,.mo-cta p{color:#fff}
.mo-cta p.grey{color:rgba(255,255,255,.72)}
.mo-cta .pill-btn{background:#fff;color:#0b2440}
.mo-cta .pill-btn:hover{background:var(--mo-gold)}

@media (max-width:700px){
  .mo-l:first-child .mo-rot{display:block}   /* the changing word gets its own line on phones */
  .ocard.mt48 .txt{position:static;padding:14px 2px 0;gap:4px}
  .ocard.mt48 .txt .h24{color:var(--fg)}
  .ocard.mt48 .txt p{color:var(--muted)}
  .mq-track li{padding:0 26px}
  .mo-cta{border-radius:20px}
}
/* one control pauses every animation on the page (WCAG 2.2.2); the choice is remembered on this device */
.mo-pause{appearance:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;
  display:grid;place-items:center;cursor:pointer;align-self:center;transition:background-color .2s,border-color .2s}
.mo-pause:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.mo-pause:focus-visible{outline:2px solid var(--mo-gold);outline-offset:3px}
.mo-pause svg{width:14px;height:14px}
.mo-paused *,.mo-paused *::before,.mo-paused *::after{animation-play-state:paused!important}

/* the outcomes window: a product window with a title bar */
.scn .mo-win{display:flex!important;flex-direction:column;padding:0!important;gap:0!important;overflow:hidden;background:#fff;border-radius:16px;
  box-shadow:0 24px 50px -28px rgba(0,30,60,.45);border:1px solid rgba(11,36,64,.06)}
.mo-win-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid #eef1f5;background:#fbfcfe;font-size:13px;color:#5b6575;flex:none}
.mo-win-bar i{width:9px;height:9px;border-radius:50%;background:#e2e7ee}
.mo-win-bar b{font-weight:500;color:#0b2440;margin-left:8px;display:inline-block}
.mo-win-bar span{margin-left:auto;font-size:12px;padding:4px 10px;border-radius:999px;background:#eef4fa;color:#004480;display:inline-block}
.mo-win-body{flex:1;min-height:0;padding:14px 20px 18px;display:flex}
.mo-win-body .mo-col{flex:1;height:100%}
.mo-fadeout>*{transition:opacity .4s,transform .4s;opacity:0;transform:translateY(-14px)}
.scn .mo-wa,.scn .card.mo-outcome{box-shadow:0 20px 44px -26px rgba(0,30,60,.5)}

/* logo strip: moving, or all logos at once */
.mq-grid{margin-top:4px}
.mq-grid[hidden]{display:none!important}
.mq-grid.mo-in-grid>div{animation:mo-pop .6s var(--mo-ease) both}
.mq-switch{display:none;justify-content:center;gap:4px;margin:22px auto 0;padding:4px;width:max-content;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.mo-ui .mq-switch{display:flex}
.mq-switch button{appearance:none;border:0;background:none;cursor:pointer;padding:8px 16px;border-radius:999px;font:500 13px/1 var(--f-sans);color:var(--muted);transition:background-color .25s,color .25s}
.mq-switch button[aria-pressed="true"]{background:var(--raised);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mq-switch button:focus-visible{outline:2px solid var(--mo-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .mo-aurora i,.mo-live,.mo-tiltwrap,.mo-mesh i,.mo-horizon::before{animation:none!important}
}