/* Make It a Video — phone and tablet experience. Loaded on every page after v2/site/visuals. */

/* ============ full-screen menu ============ */
.mnav{position:fixed;inset:0;z-index:99;background:var(--bg);color:var(--text);clip-path:circle(0 at var(--ox,92%) var(--oy,30px));transition:clip-path .6s cubic-bezier(.7,0,.2,1);overscroll-behavior:contain}
.mnav.is-open{clip-path:circle(150vmax at var(--ox,92%) var(--oy,30px))}
.mnav[hidden]{display:none}
html.mn-open{overflow:hidden}
html.mn-open .site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.mn-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mn-bg video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:.32;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.mnav.is-open .mn-bg video{transform:scale(1)}
.mn-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,15,.82),rgba(7,9,15,.6) 40%,rgba(7,9,15,.94) 78%),radial-gradient(80% 50% at 100% 0%,rgba(47,107,255,.28),transparent 70%)}
.mn-track{position:absolute;left:0;right:0;top:var(--hdr);bottom:118px;overflow:hidden}
.mn-panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:10px var(--gut) 28px;max-width:620px;margin:0 auto;transition:transform .55s var(--ease),opacity .4s var(--ease);scrollbar-width:none}
.mn-panel::-webkit-scrollbar{display:none}
.mn-l1{transform:none}
.mn-track[data-level="2"] .mn-l1{transform:translateX(-30%);opacity:0}
.mn-l2{transform:translateX(100%);opacity:0}
.mn-l2.is-current{transform:none;opacity:1}

/* staggered entrance: replayed every time a panel becomes current */
.mn-panel li,.mn-feature,.mn-reel-card,.mn-back,.mn-h{opacity:0;transform:translateY(26px)}
.mnav.is-open .mn-panel.is-in li,.mnav.is-open .mn-panel.is-in .mn-feature,.mnav.is-open .mn-panel.is-in .mn-reel-card,.mnav.is-open .mn-panel.is-in .mn-back,.mnav.is-open .mn-panel.is-in .mn-h{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i,0) * 55ms + 140ms),transform .7s var(--ease) calc(var(--i,0) * 55ms + 140ms)}
.mn-l2.is-in .mn-back{--i:0}.mn-l2.is-in .mn-h{--i:0}

.mn-top{list-style:none;margin:0;padding:0}
.mn-big{display:flex;align-items:center;gap:12px;width:100%;padding:16px 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:800 clamp(1.9rem,8.6vw,2.6rem)/1.05 Manrope,system-ui,sans-serif;letter-spacing:-.045em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-big .mn-num{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--blue-hi);align-self:flex-start;margin-top:.5em;min-width:22px}
.mn-big .mn-gthumb{margin-left:auto;width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--line2);transition:transform .4s var(--ease)}
.mn-big svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
a.mn-big svg,a.mn-big .mn-gthumb{display:none}
.mn-big:active .mn-gthumb{transform:scale(.92) rotate(-4deg)}
.mn-big:active svg{transform:translateX(4px)}
.mn-big.is-active,.mn-big[aria-current=page]{color:var(--blue-hi)}

.mn-reel{display:flex;gap:10px;margin:22px calc(var(--gut) * -1) 0;padding:0 var(--gut) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mn-reel::-webkit-scrollbar{display:none}
.mn-reel-card{position:relative;flex:0 0 112px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;scroll-snap-align:start;background:var(--panel);box-shadow:0 0 0 1px var(--line2)}
.mn-reel-card video{width:100%;height:100%;object-fit:cover;display:block}
.mn-reel-card span{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:99px;background:rgba(7,9,15,.7);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.mn-back{display:inline-flex;align-items:center;gap:4px;padding:8px 10px 8px 2px;border:0;background:none;color:var(--dim);font:700 .95rem Manrope,system-ui,sans-serif;cursor:pointer}
.mn-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mn-h{margin:4px 0 14px;font-size:clamp(2.2rem,10vw,3rem);letter-spacing:-.05em;line-height:1}
.mn-feature{display:block;position:relative;border-radius:20px;overflow:hidden;margin-bottom:14px;background:var(--panel);box-shadow:0 0 0 1px var(--line2),0 30px 60px -30px rgba(0,0,0,.9)}
.mn-media{position:relative;display:block;aspect-ratio:16/9}
.mn-media img,.mn-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mn-app .mn-media .mn-in{inset:auto;left:3.33%;top:20.19%;width:67.6%;height:67.4%;border-radius:4px}
.mn-fcap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(7,9,15,.85));font-weight:800;font-size:.95rem}
.mn-list{list-style:none;margin:0;padding:0}
.mn-list a{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
.mn-list img,.mn-ph{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--panel2);box-shadow:0 0 0 1px var(--line2);transition:transform .35s var(--ease)}
.mn-list strong{display:block;font-size:1.06rem;letter-spacing:-.02em}
.mn-list small{display:block;color:var(--dim);font-size:.84rem;margin-top:2px}
.mn-list a:active img{transform:scale(.93)}
.mn-list a[aria-current=page] strong{color:var(--blue-hi)}

.mn-foot{position:absolute;left:0;right:0;bottom:0;padding:16px var(--gut) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease) .35s,transform .6s var(--ease) .35s}
.mnav.is-open .mn-foot{opacity:1;transform:none}
.mn-foot .btn{display:flex;justify-content:center;width:100%;max-width:620px;margin:0 auto}
.mn-foot p{margin:10px auto 0;max-width:620px;text-align:center;font-size:.72rem;color:var(--mute,#7d869c)}
@media (min-width:1081px){.mnav{display:none!important}html.mn-open{overflow:auto}}

/* ============ sticky download bar ============ */
.m-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;display:none;align-items:center;gap:12px;padding:8px 8px 8px 8px;border-radius:18px;background:rgba(15,20,33,.86);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 0 0 1px var(--line2),0 20px 50px -14px rgba(0,0,0,.8);transform:translateY(140%);transition:transform .5s var(--ease)}
.m-dock.is-on{transform:none}
.m-dock img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.m-dock span{display:grid;line-height:1.2;flex:1;min-width:0}
.m-dock b{font-size:.9rem}.m-dock small{font-size:.74rem;color:var(--dim)}
@media (max-width:760px){.m-dock{display:flex}}

/* ============ phone layout + motion ============ */
@media (max-width:760px){
  /* headline words rise one by one */
  .m-motion .m-words .mw{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px)}
  .m-motion .m-words.m-in .mw{opacity:1;transform:none;filter:none;transition:opacity .6s var(--ease) calc(var(--w) * 70ms + 80ms),transform .8s var(--ease) calc(var(--w) * 70ms + 80ms),filter .6s var(--ease) calc(var(--w) * 70ms + 80ms)}
  .m-motion .hero h1.m-words,.m-motion .hero h1.m-words.reveal{opacity:1;transform:none}
  /* groups enter in sequence */
  .m-stagger>*{opacity:0;transform:translateY(28px) scale(.98)}
  .m-stagger.m-in>*{opacity:1;transform:none;transition:opacity .55s var(--ease) calc(var(--i) * 80ms),transform .8s var(--ease) calc(var(--i) * 80ms)}
  /* app screens become a swipeable strip */
  .app-gallery{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .app-gallery::-webkit-scrollbar{display:none}
  .app-gallery>*{flex:0 0 86%;scroll-snap-align:center}
  .app-gallery>.app-tall{flex-basis:62%}
  /* presenter stacks: tighter on phones */
  .vis-people .vis-stage{min-height:300px}
  .pp{width:clamp(118px,34vw,150px)}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .mnav{transition:none;clip-path:none}
  .mn-panel,.mn-foot,.mn-bg video{transition:none}
  .mn-panel li,.mn-feature,.mn-reel-card,.mn-back,.mn-h{opacity:1;transform:none}
  .m-dock{transition:none}
}

/* ============ homepage ============ */
.hero-in{position:absolute;left:3.33%;top:23.17%;width:67.6%;height:60.67%;object-fit:cover;border-radius:.6% / 1%;pointer-events:none}
.m-deck,.m-deck-note,.m-reel{display:none}
@media (max-width:760px){
  .hero{padding-top:28px;overflow-x:clip}
  html,body{overflow-x:clip}
  .hero-copy{text-align:left}
  .hero h1{font-size:clamp(2.6rem,12.5vw,3.6rem);line-height:.95;letter-spacing:-.055em}
  .hero-sub{font-size:1.02rem}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center}
  /* presenter deck: three phones, the front one rotates every few seconds */
  .m-deck{display:block;position:relative;height:min(118vw,470px);margin:34px auto 0;max-width:420px}
  .md-card{position:absolute;top:0;left:50%;width:58%;aspect-ratio:9/16;margin-left:-29%;border-radius:26px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.9);transition:transform .9s var(--ease),filter .9s var(--ease),opacity .9s var(--ease);will-change:transform}
  .md-card video{width:100%;height:100%;object-fit:cover;display:block}
  .md-card[data-pos="0"]{transform:translateX(-46%) translateY(8%) rotate(-9deg) scale(.82);filter:brightness(.6);z-index:1}
  .md-card[data-pos="1"]{transform:none;z-index:3}
  .md-card[data-pos="2"]{transform:translateX(46%) translateY(8%) rotate(9deg) scale(.82);filter:brightness(.6);z-index:2}
  .md-chip{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:99px;background:rgba(7,9,15,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.72rem;font-weight:800;color:#fff}
  .md-chip.md-b{background:rgba(47,180,120,.85)}
  .md-cap{position:absolute;left:10px;right:10px;bottom:16px;text-align:center;font-weight:800;font-size:.95rem;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.6)}
  .md-cap b{display:inline;background:#ffea68;color:#07090f;padding:0 .2em;border-radius:4px;text-shadow:none}
  .m-deck-note{display:block;margin:12px 0 0;font-size:.72rem;color:var(--mute,#7d869c);text-align:center}
  .m-motion .md-card{opacity:0}
  .m-motion .m-deck.m-in .md-card{opacity:1;transition:transform .9s var(--ease),filter .9s var(--ease),opacity .7s var(--ease) calc(var(--k) * 140ms)}
  .hero-stage{margin-top:28px}
  /* use cases: swipeable video reel instead of the ticker */
  .usecases .marquee{display:none}
  .usecases-label{text-align:left!important;font-weight:800;color:var(--text)}
  .m-reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .m-reel::-webkit-scrollbar{display:none}
  .mr-card{position:relative;flex:0 0 44%;aspect-ratio:9/15;border-radius:20px;overflow:hidden;scroll-snap-align:start;background:var(--panel);box-shadow:0 0 0 1px var(--line2)}
  .mr-card video{width:100%;height:100%;object-fit:cover;display:block}
  .mr-card span{position:absolute;inset:auto 0 0 0;padding:40px 12px 12px;background:linear-gradient(transparent,rgba(7,9,15,.88));display:grid}
  .mr-card b{font-size:1rem;letter-spacing:-.02em}
  .mr-card small{font-size:.74rem;color:var(--dim)}
  .m-motion .m-reel .mr-card{opacity:0;transform:translateX(40px)}
  .m-motion .m-reel.m-in .mr-card{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i) * 90ms),transform .8s var(--ease) calc(var(--i) * 90ms)}
  /* the wall band sits taller with the words at the bottom */
  .wall{min-height:78svh;text-align:left;place-items:end start;padding-bottom:64px}
  .wall-copy h2{font-size:clamp(2.4rem,11vw,3.2rem)}
  .wall-copy p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.md-card{transition:none}}
