/* Surf motion layer (owned by "motion"). Pairs with js/motion.js.
   Rules: transform/opacity only (individual translate/scale/rotate properties so we never clobber
   the page's own transform), content is visible without JS, and html.m-static (reduced motion,
   ?qa, or JS failure) shows every final state with no decorative motion. */



/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- page-to-page fade ---------- */
html.m-on body{animation:m-page-in .55s var(--m-ease) both}
html.m-leave body{opacity:0;transition:opacity .22s ease}
@keyframes m-page-in{from{opacity:0}to{opacity:1}}

/* ---------- nav shrink + hairline ---------- */
html.m-on .site-header{transition:translate .35s var(--m-ease),box-shadow .35s ease}
html.m-on .site-header>*{transition:translate .35s var(--m-ease),scale .35s var(--m-ease)}
html.m-on .site-header.is-scrolled{translate:0 -8px;box-shadow:0 1px 0 var(--surface-40),0 8px 24px var(--surface-41)}
html.m-on .site-header.is-scrolled>*{translate:0 4px}
html.m-on .site-header.is-scrolled .wordmark{scale:.9;transform-origin:left center}

/* ---------- buttons: press + hover ---------- */
html.m-on .button,html.m-on button,html.m-on .btn{transition:scale .18s var(--m-spring),translate .25s var(--m-ease),background-color .18s,color .18s,box-shadow .18s}
html.m-on .button:hover,html.m-on .btn:hover{translate:0 -1px}
html.m-on .button:active,html.m-on button:active,html.m-on .btn:active{scale:.96;translate:0 0}

/* ---------- generic reveal (only when JS has claimed the element) ---------- */
html.m-on .m-hide{opacity:0;translate:0 28px;transition:opacity .85s var(--m-ease),translate .85s var(--m-ease);transition-delay:calc(var(--m-i,0) * 90ms)}
html.m-on .m-hide.m-in{opacity:1;translate:0 0}
html.m-on .m-hide.m-scale{translate:0 36px;scale:.96;transition-property:opacity,translate,scale}
html.m-on .m-hide.m-scale.m-in{scale:1}
html.m-on .m-word{display:inline-block}
html.m-on .m-words-wait .m-word{opacity:0}

/* ---------- eyes: blink everywhere ---------- */
html.m-on .eyes i,html.m-on .m-eye{animation:m-blink 5.2s infinite;transform-origin:50% 50%}
html.m-on .eyes i:nth-child(2){animation-delay:.04s}
html.m-on .eyes:nth-of-type(2n) i{animation-duration:6.4s}
@keyframes m-blink{0%,93%,100%{scale:1 1}95.5%{scale:1 .1}}
html.m-on .eyes.m-look{transition:translate .25s var(--m-ease)}

/* overlay eyes for master_straight Surf images */
.m-face{position:absolute;pointer-events:none;display:flex;justify-content:space-between;align-items:center}
.m-face .m-eye{display:block;width:26%;height:100%;border-radius:45%;background:var(--surface-42);box-shadow:0 0 6px var(--surface-43),0 0 14px var(--surface-44)}
.m-face.m-happy .m-eye{scale:1 .45;translate:0 -20%}
html.m-static .m-face{display:none}

/* ---------- mascots ---------- */
html.m-on [data-mascot="wave"] .doodle,html.m-on .meet-mascot .doodle{animation:m-wave 1.6s ease-in-out infinite;transform-origin:20% 90%}
@keyframes m-wave{0%,100%{rotate:0deg}25%{rotate:14deg}50%{rotate:-6deg}75%{rotate:10deg}}
html.m-on .m-bob{animation:m-bob 3.6s ease-in-out infinite}
@keyframes m-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
html.m-on .m-jump{animation:m-jump 2.8s var(--m-ease) infinite;transform-origin:50% 100%}
@keyframes m-jump{0%,58%,100%{translate:0 0;scale:1 1}64%{translate:0 0;scale:1.08 .9}74%{translate:0 -34px;scale:.95 1.06}84%{translate:0 0;scale:1.06 .94}90%{scale:1 1}}
.m-hop{animation:m-hop .5s var(--m-spring)!important}
@keyframes m-hop{0%,100%{translate:0 0}40%{translate:0 -16px}}

/* ---------- hero ---------- */
html.m-on [data-drift] img{animation:m-bob 4.2s ease-in-out infinite}
html.m-on [data-drift]:nth-of-type(2n) img{animation-duration:5s;animation-delay:-1.2s}
html.m-on [data-drift] .doodle,html.m-on .m-wiggle{animation:m-wiggle 3.2s ease-in-out infinite}
@keyframes m-wiggle{0%,100%{rotate:0deg}50%{rotate:7deg}}
html.m-on [data-drift] .confetti{animation:m-float 4.6s ease-in-out infinite}
@keyframes m-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -9px;rotate:18deg}}

/* ---------- live dot pulse ---------- */
html.m-on .working i,html.m-on .live-dot,html.m-on [data-anim~="pulse"]{position:relative}
html.m-on .working i::after,html.m-on .live-dot::after,html.m-on [data-anim~="pulse"]::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--m-green);animation:m-ping 1.8s var(--m-ease) infinite}
@keyframes m-ping{0%{scale:1;opacity:.6}100%{scale:3.2;opacity:0}}

/* ---------- activity feed ---------- */
.m-feed-row{will-change:transform,opacity}

/* ---------- stepper tint (pinned "count on" cards) ---------- */
html.m-on .m-stepper-card{position:relative;isolation:isolate;transition:scale .6s var(--m-ease),opacity .6s var(--m-ease)}
html.m-on .m-stepper-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--m-tint,var(--surface-45));opacity:0;z-index:-1;transition:opacity .6s var(--m-ease)}
html.m-on .m-stepping .m-stepper-card{background-color:var(--surface-46)}
html.m-on .m-stepping .m-stepper-card.is-active{scale:1.025}
html.m-on .m-stepping .m-stepper-card.is-active::before,html.m-on .m-stepping .m-stepper-card.is-done::before{opacity:1}
html.m-on .m-stepping .m-stepper-card:not(.is-active){opacity:.72}

/* ---------- line-icon draw-on ---------- */
html.m-on .m-draw *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--m-ease);transition-delay:calc(var(--m-i,0) * 140ms + 150ms)}
html.m-on .m-draw.m-in *{stroke-dashoffset:0}

/* ---------- tabs: sliding pill + typed prompt ---------- */
html.m-on .m-tabs{position:relative;isolation:isolate}
html.m-on .m-tabs>.m-pill{position:absolute;left:0;top:0;border-radius:999px;background:var(--ink);z-index:-1;pointer-events:none;transition:translate .45s var(--m-spring),width .45s var(--m-spring),height .3s var(--m-ease)}
html.m-on .m-tabs [role="tab"][aria-selected="true"]{background:transparent!important;color:var(--surface-2)}
html.m-on .m-tabs [role="tab"]{transition:color .3s ease}
.m-caret{display:inline-block;width:1px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:m-caret 1s steps(1) infinite}
@keyframes m-caret{50%{opacity:0}}
.m-chip-in{animation:m-chip-in .5s var(--m-ease) both;animation-delay:calc(var(--m-i,0) * 80ms)}
@keyframes m-chip-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ---------- storyboard phone ---------- */
.m-sb-progress{height:3px;border-radius:3px;background:var(--surface-47);overflow:hidden;margin:14px 0 0}
.m-sb-progress i{display:block;height:100%;background:var(--m-green);transform-origin:0 50%;scale:0 1;transition:scale .8s var(--m-ease)}
.m-scene{display:grid;gap:7px;margin-top:10px}
.m-scene .m-row{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:10px;padding:7px 9px;font-size:10px;line-height:1.35;box-shadow:0 1px 0 var(--surface-48)}
.m-scene .m-row b{font-weight:600}
.m-scene .m-row em{margin-left:auto;font-style:normal;color:var(--surface-36);white-space:nowrap}
.m-scene .m-thumb{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:12px}
.m-scene .m-chips{display:flex;flex-wrap:wrap;gap:5px}
.m-scene .m-chips span{background:var(--surface-2);border-radius:20px;padding:4px 9px;font-size:9.5px}
.m-scene .m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.m-scene .m-grid i{display:block;aspect-ratio:1;border-radius:7px}
.m-scene .m-track{height:5px;border-radius:5px;background:var(--surface-49);overflow:hidden}
.m-scene .m-track i{display:block;height:100%;width:100%;background:var(--surface-50);transform-origin:0 50%;animation:m-track 3.4s var(--m-ease) both}
@keyframes m-track{from{scale:.08 1}to{scale:.62 1}}
.m-scene .m-pay{background:var(--ink);color:var(--surface-2);border-radius:30px;text-align:center;padding:9px;font-size:10px;font-weight:600;position:relative;overflow:hidden;border:0;width:100%;cursor:pointer}
.m-scene .m-pay.m-tapped{scale:.95}
.m-scene .m-pay::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:var(--surface-51);opacity:0;scale:0}
.m-scene .m-pay.m-tapped::after{animation:m-ripple .6s ease-out}
@keyframes m-ripple{0%{opacity:.9;scale:0}100%{opacity:0;scale:6}}
.m-scene .m-skel{height:30px;border-radius:9px;background:linear-gradient(90deg,var(--surface-52),var(--surface-53),var(--surface-52));opacity:.9}
html.m-on .m-skel{animation:m-skel 1s ease-in-out infinite alternate}
@keyframes m-skel{from{opacity:.45}to{opacity:1}}
.m-pop{animation:m-pop .55s var(--m-spring) both;animation-delay:calc(var(--m-i,0) * 120ms)}
@keyframes m-pop{from{opacity:0;scale:.86;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
.m-spring-in{animation:m-spring-in .7s var(--m-spring) both}
@keyframes m-spring-in{from{opacity:0;scale:.7;translate:0 24px}to{opacity:1;scale:1;translate:0 0}}
.m-toggle{width:30px;height:18px;border-radius:20px;background:var(--surface-54);position:relative;flex:none;margin-left:auto}
.m-toggle::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface-2);transition:translate .4s var(--m-spring)}
.m-toggle.on{background:var(--surface-50)}.m-toggle.on::after{translate:12px 0}
.m-typed::after{content:"";display:inline-block;width:1px;height:1em;background:var(--surface-55);margin-left:1px;vertical-align:-2px;animation:m-caret 1s steps(1) infinite}
html.m-static .m-pop,html.m-static .m-spring-in,html.m-static .m-chip-in{animation:none}

/* ---------- fan ---------- */
.m-fan-card{will-change:transform}
html.m-on .fan .blob,html.m-on [data-anim~="fan"] .blob{animation:m-bob 3s ease-in-out infinite}
html.m-on .fan>*:nth-child(2n) .blob{animation-delay:-1.1s}
html.m-on .fan>*:nth-child(3n) .blob{animation-delay:-2s;animation-duration:3.6s}
html.m-on .m-fan-card{transition:box-shadow .3s ease}
html.m-on .m-fan-card:hover{box-shadow:0 18px 40px var(--surface-56);z-index:5}

/* ---------- built different progress ---------- */
.m-step{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:600 12px/1 Figtree,Inter,sans-serif;letter-spacing:.06em;color:var(--surface-57)}
.m-step i{flex:1;height:2px;background:var(--surface-47);position:relative;overflow:hidden;border-radius:2px}
.m-step i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;scale:var(--m-p,0) 1}
.m-step b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
html.m-static .m-step i::after{scale:1 1}

/* ---------- apps marquee ---------- */
html.m-on .m-marquee-row{overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,var(--surface-3) 12%,var(--surface-3) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--surface-3) 12%,var(--surface-3) 88%,transparent);flex-wrap:nowrap!important;justify-content:flex-start!important}
html.m-on .m-marquee-track{display:flex;gap:inherit;flex:none;width:max-content;animation:m-marquee var(--m-dur,30s) linear infinite}
html.m-on .m-marquee-row:nth-child(2n) .m-marquee-track{animation-direction:reverse}
html.m-on .m-marquee-row:hover .m-marquee-track{animation-play-state:paused}
@keyframes m-marquee{from{translate:0 0}to{translate:-50% 0}}
html.m-on .m-blur{will-change:filter,opacity}

/* ---------- pricing shimmer border ---------- */
@property --m-a{syntax:"<angle>";inherits:false;initial-value:0deg}
html.m-on .featured,html.m-on [data-anim~="shimmer"]{position:relative}
html.m-on .featured::after,html.m-on [data-anim~="shimmer"]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--m-a),transparent 0 70%,var(--surface-58) 82%,var(--surface-59) 86%,transparent 92%);-webkit-mask:linear-gradient(var(--surface-3) 0 0) content-box,linear-gradient(var(--surface-3) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--surface-3) 0 0) content-box exclude,linear-gradient(var(--surface-3) 0 0);}


/* ---------- accordion ---------- */
html.m-on details.m-acc.m-animating{overflow:clip}
html.m-on details.m-acc summary>b,html.m-on details.m-acc summary .m-plus,html.m-on details.m-acc summary [data-icon]{display:inline-block;transition:transform .35s var(--m-spring),rotate .35s var(--m-spring)}
html.m-on details.m-acc.m-closing summary>b,html.m-on details.m-acc.m-closing summary [data-icon]{transform:none!important}

/* ---------- confetti ---------- */
.m-confetti{position:absolute;display:block;width:12px;height:12px;pointer-events:none;z-index:1;border-radius:1px}
html.m-on .m-confetti.m-landed{animation:m-float 5s ease-in-out infinite}

/* ---------- business chat ---------- */
html.m-on .m-msg-wait{display:none!important}
.m-typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:16px;background:var(--surface-60);width:max-content}
.m-typing i{width:6px;height:6px;border-radius:50%;background:var(--surface-61);animation:m-dots 1s ease-in-out infinite}
.m-typing i:nth-child(2){animation-delay:.15s}.m-typing i:nth-child(3){animation-delay:.3s}
@keyframes m-dots{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -3px}}

/* ---------- about hero image reveal ---------- */
html.m-on .m-clip{overflow:clip;position:relative}
html.m-on .m-clip>img,html.m-on .m-clip>picture{transition:scale 1.6s var(--m-ease),opacity 1s ease;scale:1.14;opacity:0}
html.m-on .m-clip::after{content:"";position:absolute;inset:0;background:var(--m-curtain,var(--surface-2));transform-origin:50% 0;transition:scale 1.1s var(--m-ease);z-index:2;pointer-events:none}
html.m-on .m-clip.m-in>img,html.m-on .m-clip.m-in>picture{scale:1;opacity:1}
html.m-on .m-clip.m-in::after{scale:1 0}

/* ---------- filter list items ---------- */
.m-filter-in{animation:m-chip-in .45s var(--m-ease) both;animation-delay:calc(var(--m-i,0) * 55ms)}

/* ---------- cursor companion ---------- */
.m-companion{position:fixed;left:0;top:0;width:58px;height:66px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s ease;will-change:transform}
.m-companion *{pointer-events:none}
.m-companion.is-on{opacity:1}
.m-companion .m-body{position:absolute;inset:0;transform-origin:50% 90%}
.m-companion img{position:absolute;left:0;top:0;width:58px;height:55px;filter:drop-shadow(0 6px 10px var(--surface-62))}
html.m-static .m-companion,.m-companion.is-off{display:none}

/* ---------- hidden tab: freeze everything ---------- */
html.m-paused *,html.m-paused *::before,html.m-paused *::after{animation-play-state:paused!important}

/* ---------- static mode: everything visible, nothing decorative moves ---------- */
html.m-static .m-hide{opacity:1!important;translate:none!important;scale:none!important}
html.m-static .m-draw *{stroke-dashoffset:0!important}
@media (prefers-reduced-motion:reduce){
  html.m-on body{animation:none}
  .m-hide{opacity:1!important;translate:none!important;scale:none!important}
  .m-marquee-track,.m-confetti,.eyes i,.m-eye,.m-bob,.m-jump,.m-companion{animation:none!important}
  .m-companion{display:none!important}
}

/* Round 7: visible first paint, no page-level opacity or CSS costume. */
html.m-on body,html.m-leave body{animation:none!important;opacity:1!important;transition:none!important}
html.m-on .m-hide{opacity:1;translate:none}
html.m-on .m-reveal{transition:transform .65s cubic-bezier(.2,.8,.2,1)}
html.m-on .m-reveal.m-in{animation:m-arrive .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--m-i,0)*60ms)}
@keyframes m-arrive{from{transform:translateY(18px)}to{transform:translateY(0)}}
.pupils{transition:transform 90ms cubic-bezier(.2,.95,.35,1.12)!important}
.m-companion .pupils{left:31%;width:36%;top:24px;height:8px}
.m-companion .pupils i{width:26%;box-shadow:0 0 5px #7fb8ff}
.m-companion .m-body{transition:scale 150ms ease}
.m-reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--ink,#18211f);transform-origin:left;z-index:10000;pointer-events:none}
.toc a,.help-nav a{transition:transform 180ms ease,opacity 180ms ease}
.toc a.is-current,.help-nav a.is-current{transform:translateX(5px);font-weight:700;text-decoration:underline;text-underline-offset:5px}
[data-feature-screen][hidden]{display:none!important}
[data-feature-step]{transition:opacity 220ms ease,transform 350ms ease}
html.m-on [data-feature-step].is-active{transform:translateY(-3px)}
.m-wave-bar{transform-origin:center;animation:m-voice .8s ease-in-out infinite alternate;animation-delay:var(--wave-delay);animation-play-state:paused}
.m-visible .m-wave-bar{animation-play-state:running}
@keyframes m-voice{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
html.m-static *,html.m-static *::before,html.m-static *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.m-static [data-feature-screen]{display:block;opacity:1;transform:none}
html.m-static .m-clip>img,html.m-static .m-clip>picture{opacity:1;scale:1}
html.m-static .m-clip::after{display:none}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.m-companion{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.m-feature-phone{position:relative}
.m-feature-wave{position:absolute;bottom:18%;left:15%;right:15%;display:flex;gap:4px;height:45px;align-items:center;justify-content:center;padding:8px;background:#fff;border-radius:24px;pointer-events:none}
.m-feature-wave i{display:block;width:4px;border-radius:8px;background:var(--eye,#2478ff)}
.m-feature-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.m-shared-stage{display:none}
.m-connector-cloud{position:absolute;inset:20% 7% auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;pointer-events:none}
.m-connector-cloud span{padding:9px 13px;background:#fff;border:1px solid #ddd;border-radius:30px;font-size:12px;font-weight:650}
.m-approval-card{position:absolute;left:8%;right:8%;bottom:12%;display:grid;gap:9px;padding:18px;background:#fff;border:1px solid #ddd;border-radius:20px;color:#171b19;box-shadow:0 9px 30px #17201914;font-size:12px}
.m-approval-card strong{font-size:19px;line-height:1.1}.m-approval-card b{padding:12px;border-radius:20px;background:#181c19;color:white;text-align:center;font-size:11px}
@media(min-width:1100px){
 .m-feature-theater.m-shared{position:relative}
 .m-shared .m-shared-stage{display:flex;position:sticky;top:120px;height:560px;margin:0;justify-content:center;z-index:2;pointer-events:none}
 .m-shared-stage>.feature-phone{width:300px!important;max-width:300px!important;margin:0!important;align-self:flex-start;pointer-events:auto}
 .m-shared .feature-beat{min-height:700px;padding-top:120px;padding-bottom:80px}
 .m-shared .feature-beat>.container{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);column-gap:42px;align-items:start}
 .m-shared .feature-heading{grid-column:1;grid-row:1;max-width:none;margin:0;text-align:left}
 .m-shared .feature-heading h2{font-size:clamp(32px,3vw,46px)}
 .m-shared .feature-stage{display:contents}
 .m-shared .feature-context{grid-column:1;grid-row:2;margin-top:30px;transform:none!important}
 .m-shared .feature-note{grid-column:3;grid-row:1 / 3;margin-top:55px;transform:none!important}
 .m-shared .feature-beat .feature-phone{display:none}
 .m-shared .feature-context,.m-shared .feature-note{opacity:.55;transition:opacity 300ms ease}
 .m-shared .m-feature-active .feature-context,.m-shared .m-feature-active .feature-note{opacity:1}
}
/* A real sticky box bounds the phone at the end of the feature sequence. */
@media(min-width:1100px){
 .m-shared-stage>.feature-phone>img{max-height:calc(100svh - 200px);object-fit:contain}
}
.process-rail,.steps-row{position:relative}
.process-rail::after,.steps-row::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink,#1a1a1a);transform:scaleX(var(--rail-progress,1));transform-origin:left;pointer-events:none}
.m-chat-matched .msg.done{animation:m-match .65s cubic-bezier(.2,.8,.2,1)}
@keyframes m-match{0%{transform:translateY(10px) scale(.97)}60%{transform:translateY(-3px) scale(1.015)}100%{transform:none}}

.m-shared-track{display:none}
@media(min-width:1100px){.m-shared>.m-shared-track{display:block;position:absolute;inset:0;pointer-events:none}}