/* Motion overrides use the reference's measured values. */
.hero-art,.float-card,.phone,.social{animation:none;translate:none;rotate:none}
.hero-art{--phone-size:440px;--phone-top:104px}
.hero-art .phone{width:var(--phone-size);left:calc(50% - var(--phone-size)/2);top:var(--phone-top);z-index:2}
.hero-art .card-a{width:calc(var(--phone-size)*.55);left:calc(50% + var(--phone-size)*.152);top:calc(var(--phone-top) + var(--phone-size)*.7273);z-index:3;filter:none;transform:rotate(18deg)}
.hero-art .card-c{width:calc(var(--phone-size)*.5);left:calc(50% - var(--phone-size)*.7386);top:calc(var(--phone-top) + var(--phone-size)*.7841);z-index:3;filter:none;transform:rotate(9deg)}
.hero-art .card-b{width:calc(var(--phone-size)*.65);left:calc(50% - var(--phone-size)*.625);top:calc(var(--phone-top) + var(--phone-size)*.202);z-index:1;opacity:.7;transform:rotate(-13deg)}
.hero-art .card-d{width:calc(var(--phone-size)*.65);left:calc(50% - var(--phone-size)*.025);top:calc(var(--phone-top) + var(--phone-size)*.474);z-index:1;opacity:.8;transform:rotate(-12deg)}
.button:hover{transform:none}
.button.primary:hover,.plan.featured .button:hover{box-shadow:inset 0 1px 1px #fff,inset 0 -3px 1px #28109b,inset 0 0 16px #cbc4ea}
.button.dark:hover{box-shadow:inset 0 0 8px #ffffff40,inset 0 -3px 1px #000,inset 0 1px 4px #ffffffcc}
.button.light:hover{box-shadow:inset 0 -2px 1px #1a143340,inset 0 0 16px #a498de}
.benefit:hover{transform:none}
.hero-word,.hero-letter{display:inline-block;color:inherit!important}
.hero-word{white-space:nowrap}
.hero-copy h1{color:var(--ink)}
.reveal,.section-heading.reveal{translate:none;filter:none}
.section-heading.reveal{opacity:1}
.section-heading h2 .char{opacity:1;filter:none;transform:none;transition:none}
.motion-ready .section-heading:not(.visible) h2 .char{opacity:.001;filter:blur(10px);transform:translateY(10px)}
.benefit.reveal{transition:none;transform:none}
.statement .word{color:transparent;background-image:linear-gradient(to left,#222 50%,#0003 50%);background-size:200% 100%;background-position:0 0;background-clip:text;-webkit-background-clip:text;transition:none}
.statement em .word{background-image:linear-gradient(to left,#4c28c7 50%,#4c28c733 50%)}
.integration-icon{transition:none;transform-origin:50% 50%}
.quote{opacity:1!important;box-shadow:0 15px 25px #0000000d;backdrop-filter:blur(10px)}
.quote:nth-child(1){left:29%;top:78%;transform-origin:50% 100%;z-index:5}
.quote:nth-child(2){left:22%;top:59%;transform-origin:0 0;z-index:4}
.quote:nth-child(3){left:34%;top:24%;transform-origin:0 0;z-index:1}
.quote:nth-child(4){left:79%;top:33%;transform-origin:0 0;z-index:2}

.faq details{overflow:hidden}.faq summary:after{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary:after{transform:rotate(45deg);content:'+'}




@media(max-width:809px){.hero-art{--phone-size:375px}}
@media(max-width:600px){.hero-art{--phone-size:300px;--phone-top:115px}}
@media(prefers-reduced-motion:reduce){.motion-ready .section-heading:not(.visible) h2 .char{opacity:1;filter:none;transform:none}.statement .word{background-position:-100% 0}.button{transition:none}}

/* Keep expensive compositor work scoped to the active scene. */
.metric,.quote{will-change:auto}
.metrics.motion-active .metric,.testimonials.motion-active .quote{will-change:transform}
.logo-strip>div,.marquee span,.decor-icons img{animation-play-state:paused}
.logo-strip.in-view>div,.marquee.in-view span,.decor-icons.in-view img{animation-play-state:running}




/* Mobile hero matches the reference's phone, text and navigation proportions. */
@media(max-width:600px){


 header:not(.scrolled){top:36px;left:16px;right:16px;height:66px;padding:12px;border-radius:24px;background:rgba(28,53,120,.36)}
 header:not(.scrolled) .brand{width:104px}
 .menu{position:relative;width:42px;height:42px;flex:0 0 42px;background:#fff;color:#111;border-radius:15px;font-size:0;line-height:0;padding:0}
 .menu:before,.menu:after{content:'';position:absolute;left:10px;width:22px;height:2.5px;border-radius:2px;background:#111;transition:transform .25s,top .25s}
 .menu:before{top:15px}.menu:after{top:23px}
 .menu[aria-expanded='true']:before{top:19px;transform:rotate(45deg)}
 .menu[aria-expanded='true']:after{top:19px;transform:rotate(-45deg)}
 .scrolled .menu{background:#fff}
 .hero{background:linear-gradient(180deg,#3265ee 0px,#83affa 160px,#cbdcfc 270px,#fff 390px,#f2f0fb 470px,#fff 555px,#ffe7ff 650px,#9a62ff 810px,#25115f 920px)}
 .hero:before{display:none}
 .hero:after{height:320px;bottom:70px;background-size:auto 100%}
 .hero-art{--phone-size:240px;--phone-top:105px;height:420px;-webkit-mask-image:linear-gradient(#000 0px,#000 260px,transparent 390px);mask-image:linear-gradient(#000 0px,#000 260px,transparent 390px)}
 /* The white fade is a fallback for mobile browsers without CSS masking. */
 .hero-art:after{content:'';position:absolute;left:0;right:0;top:260px;bottom:0;background:linear-gradient(180deg,#fff0,#fff 130px);z-index:4;pointer-events:none}
 .hero-art .card-a,.hero-art .card-c{display:none}
 .glass-outline{width:256px;height:195px;top:235px;left:calc(50% - 128px);border-radius:24px;background:linear-gradient(#ffffff00,#fff);z-index:1}
 .hero-copy{padding:350px 16px 0;isolation:isolate}
 .hero-copy h1{font-size:48px;line-height:.93;letter-spacing:-2.4px;color:#121214}
 .hero-copy h1>span:first-child{display:block;color:#381ac9}
 .hero-copy h1>span:first-child .hero-word{display:block}
 .hero-copy h1>br{display:none}
 .hero-copy>p{font-size:16px;line-height:25px;max-width:328px;margin:20px auto 0;color:#222}
 .hero-copy .actions{margin-top:40px}
}