@font-face{font-family:'Plus Jakarta Sans';src:url('./assets/jakarta-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('./assets/jakarta-700.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html{background:#000;color:#fff}body{margin:0;font-family:'Plus Jakarta Sans',sans-serif}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible{outline:2px solid #c8a4ff;outline-offset:5px}button:hover{color:#fff}img,video{display:block;max-width:100%}button img{pointer-events:none}button[aria-disabled=true]{cursor:default}.site-header{position:fixed;z-index:20;top:0;width:100%;height:64px;background:#000}.nav{height:100%;max-width:1024px;margin:auto;display:flex;align-items:center;gap:16px}.brand{padding:0;flex:none}.brand img{width:104px;height:auto}.nav-left,.nav-right{display:flex;align-items:center}.nav-right{margin-left:auto;gap:16px}.nav-button{padding:8px 16px;font-size:16px;line-height:24px;color:#bfc0c5;border-radius:24px}.nav-button:hover,.nav-button[aria-expanded=true]{background:#181818}.contact{background:white;color:#000;border-radius:100px;padding:8px 16px;font-weight:700;font-size:16px;line-height:24px;white-space:nowrap}.contact:hover{color:#000;background:#eee}.ads-wrap{position:relative}.ads-menu{position:absolute;left:-16px;top:48px;width:200px;padding:16px;background:black;border-radius:24px;box-shadow:0 0 0 1px #222}.ads-menu button{display:block;text-align:left;width:100%;padding:16px;color:#bfc0c5;font-size:14px}.menu-toggle{display:none;padding:8px;width:40px;height:40px}.menu-toggle img{width:24px;height:24px}.mobile-menu{display:none}.hero{height:100svh;min-height:560px;position:relative;display:flex;align-items:center;justify-content:center;padding:192px 64px;isolation:isolate}.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.grain{position:absolute;inset:0;pointer-events:none;background-image:url('./film-grain-tile.png');mix-blend-mode:overlay;opacity:.20;z-index:-2}.hero-content{width:100%;max-width:1024px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}.hero-logo{width:142px;height:auto}.hero h1{margin:0;font-size:48px;line-height:56px;font-weight:700;letter-spacing:-1.2px}.download{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;line-height:24px;min-height:40px;padding:0}.download img{width:24px;height:24px}.features{padding:96px 0}.features-inner{max-width:1024px;margin:auto;display:flex;flex-direction:column;gap:128px}.feature{display:grid;grid-template-columns:426.6667px 1fr;gap:64px;align-items:center}.feature.reverse{grid-template-columns:1fr 426.6667px}.feature.reverse .feature-media{order:2}.feature-media{width:100%;aspect-ratio:3/4;overflow:hidden}.feature-media video{width:100%;height:100%;object-fit:cover}.feature-copy h2{font-size:48px;line-height:56px;letter-spacing:-1.2px;font-weight:700;margin:0 0 32px}.feature-copy p{font-size:18px;line-height:28px;color:#bfc0c5;margin:0}.mobile-copy{display:none}.footer{max-width:1024px;margin:auto;padding:64px 0 128px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14px;line-height:20px}.footer-brand img{width:128px;height:auto}.tagline{margin:12px 0 32px}.copyright{font-size:16px;line-height:24px;color:#bfc0c5;margin:0 0 32px}.language{display:flex;align-items:center;width:200px;padding:10px;background:#252934;border-radius:8px;text-align:left;gap:8px;color:#d2d3d7}.language img{width:16px;height:16px}.language img:last-child{margin-left:auto;width:12px}.footer-column h3{font-size:16px;line-height:24px;margin:0 0 16px}.footer-column button{display:block;text-align:left;font-size:14px;line-height:20px;color:#bfc0c5;padding:0;margin:0 0 16px}.mobile-copyright{display:none}[hidden]{display:none!important}
@media(min-width:768px) and (max-width:1223.98px){.nav{max-width:none;margin:0 48px}.features,.footer{margin-left:48px;margin-right:48px}.feature{grid-template-columns:minmax(0,40%) minmax(0,1fr)}.feature.reverse{grid-template-columns:minmax(0,1fr) minmax(0,40%)}.hero{padding-left:48px;padding-right:48px}}
@media(max-width:767.98px){.nav{margin:0 24px;justify-content:space-between}.nav-left,.nav-right{display:none}.menu-toggle{display:block}.mobile-menu{display:block;position:absolute;left:0;right:0;top:64px;background:#000;padding:8px 24px 28px}.mobile-menu>button{display:block;padding:20px 0;font-size:14px;line-height:22px;color:#bfc0c5}.mobile-actions{display:flex;gap:16px;align-items:center;margin-top:16px}.mobile-actions .nav-button{font-size:14px}.hero{padding:128px 24px;min-height:540px}.hero h1{font-size:32px;line-height:40px;letter-spacing:-.8px}.hero-logo{width:142px}.features{padding:48px 24px 0}.features-inner{gap:64px}.feature,.feature.reverse{display:flex;flex-direction:column;gap:32px}.feature-copy{text-align:center;width:100%;order:0}.feature-copy h2{font-size:32px;line-height:40px;letter-spacing:-.8px;margin-bottom:32px}.feature-copy p{font-size:18px;line-height:28px}.feature-media,.feature.reverse .feature-media{width:80%;order:1;aspect-ratio:3/4}.desktop-copy{display:none}.mobile-copy{display:block}.mobile-copy p+p{margin-top:8px}.footer{padding:112px 24px 64px;grid-template-columns:1fr 1fr;gap:32px 8px}.footer-brand{grid-column:1/-1}.tagline{margin:12px 0 16px}.footer-brand .copyright{display:none}.mobile-copyright{display:block;grid-column:1/-1;margin:0}.footer-column button{max-width:100%;overflow-wrap:anywhere}.footer-brand img{width:128px}.language img{width:16px}.language img:last-child{width:12px}}

.menu-toggle[aria-expanded=true] img{display:none}.menu-toggle[aria-expanded=true]{position:relative}.menu-toggle[aria-expanded=true]::before,.menu-toggle[aria-expanded=true]::after{content:"";position:absolute;left:10px;top:19px;width:20px;height:1.5px;background:white;transform:rotate(45deg)}.menu-toggle[aria-expanded=true]::after{transform:rotate(-45deg)}
/* Split hero: original hand artwork with a restrained pointer parallax. */
.hero{overflow:hidden;padding-top:128px;padding-bottom:80px}
.hero-content{align-items:flex-start;text-align:left;position:relative;z-index:2;pointer-events:none}
.hero-content .download{pointer-events:auto}
.hero h1{max-width:470px;font-size:clamp(40px,4.3vw,62px);line-height:1.12}
.hero-art{position:absolute;inset:80px max(0px,calc((100vw - 1320px)/2)) -100px 45%;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
.hero-hand{height:100%;width:100%;object-fit:contain;object-position:center bottom;max-width:none;transform:translate3d(var(--hand-x,0px),var(--hand-y,0px),0) rotate(var(--hand-r,0deg));transform-origin:50% 90%;will-change:transform}
@media(min-width:768px) and (max-width:1000px){.hero h1{max-width:340px}.hero-art{left:43%;right:-90px;top:130px;bottom:-70px}}
@media(max-width:767.98px){.hero{height:100svh;min-height:760px;padding:112px 24px 0;align-items:flex-start}.hero-content{align-items:center;text-align:center;gap:24px}.hero h1{max-width:340px;font-size:36px;line-height:1.15}.hero-art{inset:300px -55px -100px;justify-content:center}.hero-hand{transform:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){.hero-hand{transform:none;will-change:auto}}
/* Campaign hero composition. */
.hero-content{max-width:1120px;align-items:flex-start;gap:24px}
.hero-brand-icon{width:124px;height:124px;object-fit:contain;margin-left:190px}
.hero-wordmark{width:510px;overflow:hidden}
.hero-wordmark img{width:125%;max-width:none;margin-left:-25%}
.hero h1{font-size:30px;line-height:1.3;letter-spacing:-.8px;max-width:540px;white-space:nowrap}
.store-badges{display:flex;gap:16px;align-items:center;pointer-events:auto;margin-top:10px}
.store-badges a{padding:0;height:56px}
.store-badges a>img{height:56px;width:auto;max-width:none}
.store-badges .google-badge{width:190px;position:relative}
.store-badges .google-badge img{position:absolute;height:82px;top:-13px;left:-14px}
.hero-art{inset:22px max(-70px,calc((100vw - 1540px)/2)) -230px 42%}
.hero-hand{filter:drop-shadow(-24px 28px 24px rgba(37,7,67,.34))}
@media(min-width:768px) and (max-width:1100px){.hero-content{gap:22px}.hero-brand-icon{width:100px;height:100px;margin-left:132px}.hero-wordmark{width:370px}.hero h1{font-size:23px}.store-badges{gap:8px}.store-badges a,.store-badges a>img{height:46px}.store-badges .google-badge{width:156px}.store-badges .google-badge img{height:67px;top:-10.5px;left:-11px}.hero-art{left:41%;right:-140px;top:50px;bottom:-170px}}
@media(max-width:767.98px){.hero{padding-top:90px;min-height:800px}.hero-content{align-items:center;gap:16px}.hero-brand-icon{width:76px;height:76px;margin:0}.hero-wordmark{width:280px}.hero h1{font-size:21px;letter-spacing:-.6px;max-width:100%;white-space:normal}.store-badges{margin-top:4px;gap:12px}.store-badges a,.store-badges a>img{height:42px}.store-badges .google-badge{width:142px}.store-badges .google-badge img{height:61.5px;top:-9.75px;left:-10.5px}.hero-art{inset:330px -90px -170px}.hero-hand{filter:drop-shadow(-14px 18px 16px rgba(37,7,67,.3))}}
/* Outlined campaign lockup and translucent navigation. */
html,body{background:#0f0d13}
.site-header{background:rgba(15,13,19,.20);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.13)}
.nav-button{color:rgba(255,255,255,.85)}
.nav-button:hover,.nav-button[aria-expanded=true]{background:rgba(255,255,255,.10)}
.ads-menu,.mobile-menu{background:rgba(15,13,19,.88);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.hero-lockup{width:510px;height:auto}
.hero h1{font-size:42px;letter-spacing:-1.1px;line-height:1.25;max-width:510px}
@media(min-width:768px) and (max-width:1100px){.hero-lockup{width:370px}.hero h1{font-size:30.5px;max-width:370px;letter-spacing:-.8px}}
@media(max-width:767.98px){.hero-lockup{width:280px}.hero h1{font-size:23px;max-width:280px;letter-spacing:-.6px;white-space:nowrap}}
/* Floating liquid-glass navigation. */
.site-header{top:12px;left:24px;width:calc(100% - 48px);height:64px;border-radius:32px;background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065) 42%,rgba(255,255,255,.13));border:1px solid rgba(255,255,255,.27);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -1px 1px rgba(255,255,255,.12),inset 1px 0 1px rgba(255,255,255,.25),0 8px 32px rgba(13,5,30,.14)}
.site-header::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.10));z-index:-1}
.nav{padding:0 16px}.nav-button{border:1px solid transparent;transition:background .2s,box-shadow .2s}.nav-button:hover,.nav-button[aria-expanded=true]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.25)}
.contact{background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.67));box-shadow:inset 0 1px 1px white,0 2px 8px rgba(20,7,40,.10);border:1px solid rgba(255,255,255,.4)}
.ads-menu,.mobile-menu{background:linear-gradient(135deg,rgba(65,48,87,.78),rgba(15,13,19,.80));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px rgba(255,255,255,.3),0 16px 40px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%)}
.ads-menu{top:56px}
@media(min-width:768px) and (max-width:1223.98px){.nav{margin:0 16px}}
@media(max-width:767.98px){.site-header{left:12px;top:10px;width:calc(100% - 24px);height:56px;border-radius:28px}.nav{margin:0;padding:0 16px}.mobile-menu{top:64px;border-radius:26px;padding:8px 24px 24px}.hero{padding-top:92px}}
/* Give the hero columns more breathing room; keep the phone's top anchor. */
@media(min-width:1101px){.hero-content{max-width:1176px}.hero-art{transform:translateX(24px)}.hero-hand{scale:1.08;transform-origin:50% 7.2%}}
@media(min-width:768px) and (max-width:1100px){.hero-content{translate:-8px 0}.hero-art{transform:translateX(16px)}.hero-hand{scale:1.06;transform-origin:50% 7.2%}}
/* Fluid hero composition, including large desktop displays. */
@media(min-width:768px){
.hero{--copy-width:clamp(350px,36vw,900px);padding:100px 8vw 40px;min-height:700px}
.hero-content{width:100%;max-width:none;translate:none;gap:clamp(20px,2vw,44px)}
.hero-lockup{width:var(--copy-width)}
.hero h1{font-size:calc(var(--copy-width)*.0815);max-width:var(--copy-width);letter-spacing:calc(var(--copy-width)*-.0021);line-height:1.25}
.hero-art{inset:50px -1vw -29vh 49%;transform:none}
.hero-hand{scale:1.16;transform-origin:50% 7.2%;object-fit:contain}
.store-badges{width:var(--copy-width);gap:calc(var(--copy-width)*.04);margin-top:0;align-items:center}
.store-badges a{width:46%;height:auto;aspect-ratio:120/40}
.store-badges a>img{width:100%;height:100%}
.store-badges .google-badge{width:50%;height:auto;aspect-ratio:135/40}
.store-badges .google-badge img{width:114.7%;height:150%;left:-7.35%;top:-25%}
}
@media(max-width:767.98px){
.store-badges{width:280px;gap:4%;margin-top:4px}
.store-badges a{width:46%;height:auto;aspect-ratio:120/40}
.store-badges a>img{width:100%;height:100%}
.store-badges .google-badge{width:50%;height:auto;aspect-ratio:135/40}
.store-badges .google-badge img{width:114.7%;height:150%;left:-7.35%;top:-25%}
}
@media(min-width:768px){.hero-art{top:70px;bottom:auto;align-items:flex-start}.hero-hand{width:100%;height:auto;object-fit:initial;scale:1.16;transform-origin:50% 7.2%}}
@media(min-width:768px){.hero-hand{min-height:calc(100svh - 20px);object-fit:cover;object-position:center top}.hero-content{transform:translateY(-3vh)}}
/* Slightly smaller hero elements, preserving their established anchors. */
@media(min-width:768px){.hero{--copy-width:clamp(322px,33.12vw,828px)}.hero-hand{scale:1.07}}
/* Responsive hero: proportional artwork, compact store badges. */
@media(min-width:768px){
.hero{--copy-width:clamp(270px,29vw,700px);padding:100px 8vw 40px;min-height:620px}
.hero-content{gap:clamp(18px,1.6vw,32px)}
.hero-art{left:49%;right:0;top:90px;bottom:auto;transform:none}
.hero-hand{width:100%;height:auto;min-height:0;max-width:none;object-fit:contain;scale:1;transform-origin:50% 7.2%}
.store-badges{width:min(var(--copy-width),340px);gap:4%;align-self:flex-start}
}
@media(min-width:768px) and (max-width:1000px){
.hero{padding-left:6vw;padding-right:6vw;--copy-width:clamp(270px,34vw,340px)}
.hero-art{left:48%;right:-6%;top:120px}
.nav{margin:0;padding:0 16px;gap:8px}.nav-button{padding:8px 10px}.nav-right{gap:8px}
}
@media(max-width:767.98px){
.hero{height:auto;min-height:100svh;padding:96px 24px 0;display:flex;flex-direction:column;align-items:center;gap:28px}
.hero-content{width:min(100%,300px);max-width:300px;transform:none;gap:16px}
.hero-lockup{width:100%;height:auto}
.hero h1{font-size:clamp(18px,5.8vw,24.4px);letter-spacing:-.6px;max-width:100%;white-space:nowrap}
.store-badges{width:min(100%,260px);align-self:flex-start;margin-top:2px}
.hero-art{position:relative;inset:auto;width:min(125%,490px);height:auto;margin-bottom:-95px;transform:none;flex:none}
.hero-hand{width:100%;height:auto;min-height:0;scale:1;object-fit:contain;transform:none}
}
@media(max-width:359px){.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:calc((100vw - 40px)*.0815)}}
/* Crop the source before the wrist cut, and anchor that crop to the hero edge. */
.hero-art{aspect-ratio:3028/3100;clip-path:inset(-100px -100px 0 -100px);overflow:visible}
.hero-hand{position:absolute;top:0;left:0;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;scale:1;transform-origin:50% 50%}
@media(min-width:768px){.hero-art{top:auto;bottom:-36px;left:49%;right:0;width:auto;height:auto}}
@media(min-width:768px) and (max-width:1000px){.hero-art{left:48%;right:-6%;top:auto;bottom:-36px}}
@media(max-width:767.98px){.hero-art{position:relative;inset:auto;width:min(125%,490px);height:auto;margin-bottom:0;flex:none}.hero-hand{position:absolute;width:100%;height:auto;transform:none}}
@media(max-width:767.98px){.hero{justify-content:flex-start}.hero-art{margin-top:auto}}
/* Scale the bottom-anchored artwork to the available height and width. */
@media(min-width:768px){.hero-art{left:auto;right:-5vw;width:clamp(51vw,85svh,68vw);top:auto;bottom:-36px}}
@media(max-width:767.98px){
.hero{height:auto;min-height:0;gap:12px;padding-bottom:0}
.hero-art{width:160%;max-width:680px;margin-top:0;margin-bottom:0;aspect-ratio:3028/3100;flex-shrink:0}
.hero-hand{width:100%;height:auto;left:0;top:0}
}
@media(min-width:768px){.hero{height:min(100svh,78vw);min-height:620px}}
/* Bring the columns closer on wide desktop screens. */
@media(min-width:1600px){.hero{padding-left:12vw;padding-right:12vw}.hero-art{right:0}}
/* Mobile: stronger branding and optically centered phone. */
@media(max-width:767.98px){
.hero-content{width:min(100%,340px);max-width:340px}
.hero-lockup{width:100%}
.hero h1{font-size:clamp(20px,6.55vw,27.7px);letter-spacing:-.6px;max-width:100%}
.hero-art{width:175%;max-width:740px;translate:6% 0}
}
@media(max-width:359px){.hero h1{font-size:calc((100vw - 40px)*.0815)}}
/* Center the store row on the branding column at every breakpoint. */
@media(min-width:768px){.store-badges{align-self:flex-start;margin-left:calc((var(--copy-width) - min(var(--copy-width),340px))/2)}}
@media(max-width:767.98px){.store-badges{align-self:center;margin-left:0}}

.feature-media.tutorial-animation{aspect-ratio:750/1308}.tutorial-animation svg{display:block;width:100%;height:100%}
/* One shared center line for the entire branding block. */
@media(min-width:768px){
.hero-content{width:var(--copy-width);max-width:var(--copy-width);margin-right:auto;align-items:center;text-align:center}
.hero h1{width:100%;text-align:center}
.store-badges{align-self:center;margin-left:0}
}
@media(min-width:1600px){.store-badges{width:min(var(--copy-width),440px)}}
/* Subtle independent hover feedback on hero branding and store badges. */
.hero-lockup,.hero h1,.store-badges a{pointer-events:auto;transition:scale .32s cubic-bezier(.22,.61,.36,1);transform-origin:center}
@media(hover:hover) and (pointer:fine){.hero-lockup:hover,.hero h1:hover,.store-badges a:hover{scale:.98}}
@media(prefers-reduced-motion:reduce){.hero-lockup,.hero h1,.store-badges a{transition:none}}

/* Slow violet color breathing, with a shallower parallax than the phone. */
.hero-background{inset:-10px;width:calc(100% + 20px);max-width:none;height:calc(100% + 20px);transform:translate3d(var(--background-x,0px),var(--background-y,0px),0);animation:violet-drift 24s ease-in-out infinite;will-change:transform}
@keyframes violet-drift{0%,100%{filter:hue-rotate(0deg) saturate(1)}33%{filter:hue-rotate(-8deg) saturate(1.06)}67%{filter:hue-rotate(6deg) saturate(.97)}}
@media(prefers-reduced-motion:reduce){.hero-background{animation:none;transform:none;will-change:auto}}


/* Keep a violet fallback during image decode and avoid animated image filters. */
.hero{background:radial-gradient(ellipse at 72% 30%,#dab3fb 0%,#ab5cf0 45%,#8019dc 100%)}
.hero-background{animation:none;filter:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,rgba(116,42,238,.16),rgba(205,94,245,.10));animation:violet-tint 24s ease-in-out infinite alternate;opacity:.12}
@keyframes violet-tint{from{opacity:.12}to{opacity:.65}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none;opacity:.12}}

@font-face{font-family:'BBH Hegarty';src:url('./assets/bbh-hegarty.ttf') format('truetype');font-weight:400;font-display:swap}
.hero-lockup,.hero h1,.store-badges a{transition:none}
.hero-lockup:hover,.hero h1:hover,.store-badges a:hover{scale:1}
.hero-download{font-family:'BBH Hegarty',sans-serif;font-size:clamp(24px,2.5vw,42px);font-weight:400;line-height:1.1;width:100%;padding:20px 14px;border-radius:20px;background:#fff;color:#8b26e8;box-shadow:0 5px 18px #36086a18;cursor:default}
.hero-download:hover{color:#8b26e8}
@media(max-width:767.98px){.hero-download{font-size:clamp(22px,6.5vw,30px);padding:18px 12px;border-radius:17px}}

/* Compact outlined pill with the background showing through the lettering. */
.hero-download{width:min(100%,360px);font-size:25px;padding:18px 22px;border-radius:999px;color:#000;background:#fff;mix-blend-mode:screen;box-shadow:none;outline:3px solid white;outline-offset:5px;margin:7px 0 0;flex-shrink:0}
.hero-download:hover{color:#000}
@media(min-width:1600px){.hero-download{width:420px;max-width:100%;font-size:29px;padding:20px 24px}}
@media(max-width:767.98px){.hero-download{width:min(100%,290px);font-size:21px;padding:16px 16px;border-radius:999px;outline-width:2px;outline-offset:4px;margin-top:5px}.hero-download+.store-badges{margin-top:7px}}
/* Compact download controls aligned with the left edge of the branding. */
.hero-download{width:min(100%,300px);font-size:21px;padding:15px 18px;align-self:flex-start}
.store-badges{width:min(100%,240px);align-self:flex-start;margin-left:0}
@media(min-width:1600px){.hero-download{width:350px;font-size:24px;padding:17px 20px}.store-badges{width:280px}}
@media(max-width:767.98px){.hero-download{width:min(100%,260px);font-size:19px;padding:14px 16px;align-self:flex-start}.store-badges{width:min(100%,210px);align-self:flex-start;margin-left:0}}

/* Store badges anchored to the hero, not to the scrolling viewport. */
.hero>.store-badges{position:absolute;bottom:24px;left:50%;translate:-50% 0;width:340px;max-width:calc(100% - 48px);margin:0;z-index:4;align-self:auto;filter:drop-shadow(0 4px 12px #24054045)}
.hero-download{padding:0;outline:none;margin-top:0;background:transparent;mix-blend-mode:normal;box-shadow:none;border-radius:999px;filter:drop-shadow(0 0 6px #ffffff38);transition:filter .25s ease,transform .25s ease;pointer-events:auto;cursor:pointer}
.hero-download svg{display:block;width:100%;height:auto;overflow:visible}
@media(hover:hover) and (pointer:fine){.hero-download:hover{filter:drop-shadow(0 0 10px #ffffffa0) drop-shadow(0 0 24px #d7a0ff80);transform:translateY(-2px)}}
@media(min-width:1600px){.hero>.store-badges{width:400px;bottom:30px}}
@media(max-width:767.98px){.hero>.store-badges{width:290px;bottom:20px;margin:0}.hero-download{padding:0;margin-top:0;outline:none}}
@media(prefers-reduced-motion:reduce){.hero-download{transition:none}.hero-download:hover{transform:none}}
/* Glow only around the outer pill, never through the cutout lettering. */
.hero-download{filter:none;box-shadow:none;transform-origin:center;transition:transform .25s ease,box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){.hero-download:hover{filter:none;transform:scale(1.035);box-shadow:0 0 12px 2px rgba(255,255,255,.48),0 0 28px 5px rgba(204,149,255,.38)}}
@media(prefers-reduced-motion:reduce){.hero-download{transition:none}.hero-download:hover{transform:none}}
@media(max-width:767.98px){.hero-download{align-self:center}}
/* Mobile crop uses the darker left side behind the white branding. */
@media(max-width:767.98px){.hero-background{object-position:left center}.hero{background:linear-gradient(135deg,#8120db,#ac65eb)}}
/* Compact navigation once the header crosses into the dark content. */
.site-header{transition:left .35s ease,width .35s ease}
@media(min-width:768px){.site-header.is-compact{width:min(1056px,calc(100% - 48px));left:max(24px,calc((100% - 1056px)/2))}.site-header.is-compact .nav{margin:0 auto;width:100%}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Keep comfortable, consistent side padding in both navigation states. */
@media(min-width:768px){.site-header .nav{max-width:1056px;margin:0 auto;padding-inline:32px}}

/* Contact panel: a compact frosted glass surface. */
.contact-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100svh - 48px);padding:26px;border:1px solid rgba(255,255,255,.27);border-radius:32px;color:#fff;background:linear-gradient(125deg,rgba(64,56,80,.88),rgba(24,21,32,.9));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px #ffffff30,0 24px 80px #0006}
.contact-dialog::backdrop{background:rgba(15,13,19,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.contact-heading h2{margin:0;font-size:24px;letter-spacing:-.6px}
.contact-close{width:40px;height:40px;border-radius:50%;background:#ffffff12;font-size:28px;line-height:1}
.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-options>button,.contact-options>a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:76px;padding:16px 12px;border:1px solid #ffffff24;border-radius:22px;background:linear-gradient(135deg,#ffffff20,#ffffff0d);box-shadow:inset 0 1px #ffffff12;color:white;text-decoration:none;font-size:16px;font-weight:700;transition:background .2s ease}
.contact-options>a:hover,.contact-close:hover{background:#ffffff28}
.contact-options>a:focus-visible{outline:2px solid #d5a7ff;outline-offset:3px}
body.contact-open{overflow:hidden}
@media(max-width:359px){.contact-dialog{padding:20px}.contact-options{gap:10px}.contact-options>button,.contact-options>a{font-size:14px;padding:14px 8px}}

/* Anchored glass popover with a soft opening from the contact button. */
.contact-dialog{position:fixed;margin:0;width:min(400px,calc(100% - 32px));transform-origin:calc(100% - 48px) top}
.contact-dialog[open]{animation:contact-in .32s cubic-bezier(.2,.8,.2,1) both}
.contact-dialog[open]::backdrop{background:rgba(15,13,19,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:contact-backdrop-in .3s ease both}
.contact-dialog.is-closing{animation:contact-out .18s ease both}
.contact-dialog.is-closing::backdrop{animation:contact-backdrop-out .18s ease both}
.contact-close{display:flex;align-items:center;justify-content:center;background:transparent;border-radius:10px;padding:0;flex:none}
.contact-close svg{display:block}
@keyframes contact-in{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes contact-out{to{opacity:0;transform:translateY(-5px) scale(.98)}}
@keyframes contact-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes contact-backdrop-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.contact-dialog[open],.contact-dialog[open]::backdrop{animation:none}}

/* Simple contact dropdown: no page dimming or blur. */
.contact-dialog[open]::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.contact-dialog{border-radius:28px}
.contact-options>button,.contact-options>a{border-radius:20px;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
@supports(corner-shape:squircle){.contact-dialog{corner-shape:squircle;border-radius:36px}.contact-options>button,.contact-options>a{corner-shape:squircle;border-radius:26px}}
.contact-dialog[open]{animation:contact-simple-in .18s ease-out both;transform:none}
.contact-dialog.is-closing{animation:contact-simple-out .12s ease-in both}
.contact-close{width:36px;height:36px;color:rgba(255,255,255,.8)}
.contact-close:hover{color:white;background:rgba(255,255,255,.08)}
@media(hover:hover) and (pointer:fine){.contact-options>button:hover,.contact-options>a:hover{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.16);transform:scale(1.015)}}
@keyframes contact-simple-in{from{opacity:0}to{opacity:1}}
@keyframes contact-simple-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.contact-dialog[open]{animation:none}.contact-options>button,.contact-options>a{transition:none;transform:none}}

/* Match the navigation glass, without changing the page's scrollbar. */
body.contact-open{overflow:visible}
.contact-dialog{padding:26px;border-radius:38px;background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065) 42%,rgba(255,255,255,.13));border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.12),0 16px 48px rgba(0,0,0,.2);transform-origin:calc(100% - 48px) top}
.contact-dialog[open]{animation:contact-glass-in .3s cubic-bezier(.16,1,.3,1) both}
.contact-dialog.is-closing{animation:contact-glass-out .12s ease both}
.contact-options>button,.contact-options>a{border-radius:24px;background:linear-gradient(125deg,rgba(255,255,255,.19),rgba(255,255,255,.08));text-shadow:0 1px 5px rgba(0,0,0,.16)}
.contact-close{position:relative;isolation:isolate;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.045));box-shadow:inset 1px 1px 1px rgba(255,255,255,.6),inset -1px -1px 1px rgba(255,255,255,.27),0 3px 10px rgba(0,0,0,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:white;transition:background .2s ease,transform .2s ease}
.contact-close svg{width:22px;height:22px}.contact-close svg path{stroke-width:3.5}
.contact-close:hover{background:rgba(255,255,255,.24);transform:scale(1.04)}
@supports(corner-shape:squircle){.contact-dialog{border-radius:48px}.contact-options>button,.contact-options>a{border-radius:30px}}
@keyframes contact-glass-in{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes contact-glass-out{to{opacity:0;transform:scale(.985)}}
@media(prefers-reduced-motion:reduce){.contact-dialog[open]{animation:none}.contact-close{transition:none}.contact-close:hover{transform:none}}

/* Slightly darker glass, with no automatic focus ring around the close button. */
.contact-dialog{background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065) 42%,rgba(255,255,255,.13)),rgba(15,13,19,.12)}
.contact-close:focus-visible{outline:none;box-shadow:inset 1px 1px 1px rgba(255,255,255,.6),inset -1px -1px 1px rgba(255,255,255,.27),0 3px 10px rgba(0,0,0,.06)}
.contact-close:focus-visible:not(:hover){background:rgba(255,255,255,.22)}

/* Simplified navigation. */
.site-header .brand img{width:112px}
.nav-socials{display:flex;align-items:center;gap:4px}
.social-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:white}
.social-button svg{display:block;flex:none}
.social-button:hover{background:rgba(255,255,255,.14)}
@media(max-width:767.98px){.mobile-menu .nav-socials{margin:4px 0 16px;gap:8px}}

/* Logo and socials left; hamburger and contact right at every width. */
.site-header .nav-brand-group{display:flex;align-items:center;gap:18px;min-width:0}
.site-header .nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.site-header .menu-toggle{display:flex;align-items:center;justify-content:center;flex:none}
.site-header .social-button svg{width:23px;height:23px}
.site-header .mobile-menu{display:block;left:auto;right:32px;top:calc(100% + 16px);width:220px;border-radius:26px;padding:12px;background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065)),rgba(15,13,19,.3);border:1px solid #ffffff40;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px #ffffff30,0 12px 32px #0002}
.site-header .mobile-menu>button{display:block;width:100%;padding:14px 16px;margin:0;text-align:left;font-size:16px;color:white;border-radius:16px}
@media(max-width:767.98px){.site-header .nav{padding:0 12px;gap:8px}.site-header .nav-brand-group{gap:8px}.site-header .nav-right{gap:4px}.site-header .nav-socials{gap:0}.site-header .social-button{width:30px;height:36px}.site-header .contact{font-size:13px;padding:8px 12px}.site-header .mobile-menu{right:12px}.site-header .menu-toggle{width:34px;padding:5px}}
@media(max-width:359px){.site-header .brand img{width:96px}.site-header .nav-brand-group{gap:4px}.site-header .contact{padding:8px 9px}.site-header .social-button{width:27px}}

.site-header .help-center{white-space:nowrap}
@media(max-width:767.98px){.site-header .help-center{font-size:12px;padding:8px 5px}.site-header .nav-brand-group{gap:4px}.site-header .brand img{width:100px}.site-header .nav-right{gap:2px}}
@media(max-width:359px){.site-header .nav{padding:0 8px;gap:4px}.site-header .brand img{width:80px}.site-header .social-button{width:25px}.site-header .help-center{font-size:11px;padding:8px 3px}.site-header .contact{font-size:12px;padding:8px}}

/* Slightly larger navigation wordmark. */
@media(min-width:768px){.site-header .brand img{width:122px}}
@media(min-width:360px) and (max-width:767.98px){.site-header .brand img{width:106px}}

/* Test: compact glass navigation throughout the page. */
@media(min-width:768px){.site-header{width:min(1056px,calc(100% - 48px));left:max(24px,calc((100% - 1056px)/2))}}

/* A little more room around the compact navigation. */
@media(min-width:768px){.site-header,.site-header.is-compact{width:min(1096px,calc(100% - 48px));left:max(24px,calc((100% - 1096px)/2))}.site-header .nav{max-width:1096px;padding-inline:18px}}

/* Cap the hand by available hero height, including ultra-wide windows. */
@media(min-width:768px){.hero-art{width:min(clamp(51vw,85svh,68vw),max(508px,calc(97.677svh - 97.677px)))}}

/* Bring the wide-screen composition closer together while keeping headroom. */
@media(min-width:1600px) and (min-aspect-ratio:21/9){.hero-art{width:min(clamp(51vw,85svh,68vw),max(565px,calc(108svh - 108px)));right:8vw}}

/* Slightly smaller concept screens, preserving their proportions. */
.feature .feature-media.tutorial-animation{width:88%;justify-self:center}
@media(max-width:767.98px){.feature .feature-media.tutorial-animation{width:70.4%}}

/* Navigation now opens the Buddies ambassador page. */
.nav-button.ambassadors{text-decoration:none}
@media(min-width:1001px){
  body[data-language="fr"] .hero-content{align-items:flex-start;text-align:left}
  body[data-language="fr"] .hero h1{width:100%;text-align:left}
  body[data-language="fr"] .hero-lockup,body[data-language="fr"] .hero-download{align-self:flex-start}
}

/* Mobile navigation and consistent tutorial screen proportions. */
.mobile-nav-toggle{display:none}.phone-menu{position:absolute;right:0;top:calc(100% + 12px);width:220px;padding:18px;border:1px solid #ffffff40;border-radius:28px;background:linear-gradient(125deg,#ffffff30,#ffffff12),rgba(15,13,19,.4);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.phone-menu>button{display:block;width:100%;margin:4px 0}
@media(max-width:767.98px){
.site-header .nav-right{display:none}.mobile-nav-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:40px;border-radius:20px;padding:8px;background:transparent}
.mobile-nav-toggle:hover{background:#ffffff15}.site-header .brand img{width:100px}
.hero-lockup{width:94%;align-self:center}.hero-content{align-items:center;text-align:center}.hero-download{align-self:center}
.feature .feature-media.tutorial-animation,.feature.reverse .feature-media.tutorial-animation{width:70.4%;aspect-ratio:750/1308;align-self:center;flex-shrink:0}
}

@media(max-width:767.98px){.site-header .nav-brand-group>.nav-socials{display:none}.mobile-nav-toggle{width:40px;height:40px;border-radius:50%;background:#fff;color:#0f0d13}.mobile-nav-toggle:hover,.mobile-nav-toggle[aria-expanded=true]{background:#eee;color:#0f0d13}.phone-menu .nav-socials{justify-content:center;gap:12px;margin:0 0 12px}.phone-menu .social-button{width:40px;height:40px}}

/* Separate backdrop layer avoids nested glass losing its blur on Safari. */
.phone-menu{position:fixed;z-index:30;top:80px;right:12px;background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065) 42%,rgba(255,255,255,.13)),rgba(15,13,19,.12);border:1px solid rgba(255,255,255,.3);border-radius:32px;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px #ffffff66,inset 0 -1px 1px #ffffff20,0 16px 48px #0003}
.phone-menu .social-button svg{width:23px;height:23px}
.phone-menu .nav-socials{justify-content:center;gap:12px;margin-bottom:12px}
@media(min-width:768px){.phone-menu{display:none}}

/* Rounded Buddies language selector. */
.footer .language{border-radius:999px;padding:11px 16px;background:linear-gradient(125deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),#25232e;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}

/* Four-column simplified footer. */
.footer.footer-simple{grid-template-columns:1.5fr 1fr 1fr auto;align-items:start;gap:32px;padding-bottom:72px}
.footer-simple .tagline{margin:12px 0 0}
.footer-simple .footer-column button:last-child{margin-bottom:0}
.footer-simple .language{width:180px;max-width:100%}
.footer-simple .footer-copyright{margin:0;padding-top:10px;white-space:nowrap;font-size:14px;text-align:right}
@media(max-width:767.98px){.footer.footer-simple{grid-template-columns:1fr;gap:28px;text-align:center;padding:72px 24px 48px}.footer-simple .footer-brand{grid-column:auto}.footer-simple .footer-brand>img{margin:auto}.footer-simple .footer-column button{margin-left:auto;margin-right:auto;text-align:center}.footer-simple .language{margin:auto}.footer-simple .footer-copyright{text-align:center;padding-top:0}}

/* Full-width footer background, keeping the content aligned. */
.footer.footer-simple{background:#1B1921;box-shadow:0 0 0 100vmax #1B1921;clip-path:inset(0 -100vmax)}

.footer-simple .footer-legal button{white-space:nowrap;margin:0;overflow-wrap:normal}
.footer.footer-simple{grid-template-columns:1.4fr auto 1fr auto;gap:28px}
@media(max-width:767.98px){.footer.footer-simple{grid-template-columns:1fr}.footer-simple .footer-legal button{margin-inline:auto}}

/* Three balanced footer columns. */
.footer.footer-simple{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px}
.footer-simple .footer-brand{justify-self:start}
.footer-simple .footer-brand-copyright{display:block;margin:12px 0 0;font-size:14px;line-height:20px}
.footer-simple .footer-legal{justify-self:center}
.footer-simple .footer-language{justify-self:end}
@media(max-width:767.98px){.footer.footer-simple{grid-template-columns:1fr;gap:28px}.footer-simple .footer-brand,.footer-simple .footer-legal,.footer-simple .footer-language{justify-self:center}}

/* One-screen landing page and expanded navigation. */
@media(min-width:768px){.hero{height:max(100svh,620px);min-height:620px}}
@media(max-width:767.98px){.hero{min-height:100svh}}
.site-header .nav{display:flex;align-items:center;justify-content:space-between}
.site-header .nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-header .nav-right .nav-button{font-size:14px;font-weight:700;line-height:20px;color:#fff;padding:10px 12px;white-space:nowrap}
.site-header .nav-right .nav-button:hover{background:rgba(255,255,255,.13)}
.site-header .nav-right .contact{background:transparent;border:none;box-shadow:none;color:#fff;border-radius:24px}
.site-header .nav-right .contact:hover{background:rgba(255,255,255,.13);color:#fff}
.site-header .nav-right .nav-socials{display:flex;align-items:center;gap:0;margin-left:4px}
.site-header .nav-right .social-button{width:34px;height:34px}
.site-header .nav-right .social-button svg{width:20px;height:20px}
.language-switcher{position:relative;flex:none}
.language-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-width:68px;height:32px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:700;letter-spacing:.025em;transition:background .2s ease,border-color .2s ease}
.language-toggle:hover,.language-toggle[aria-expanded=true]{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.52)}
.language-toggle img{width:12px;height:12px;flex:none;filter:brightness(0) invert(1)}
.language-toggle img:last-child{width:9px;height:9px;transition:transform .2s ease}
.language-toggle[aria-expanded=true] img:last-child{transform:rotate(180deg)}
.language-options{position:absolute;top:calc(100% + 11px);right:0;z-index:35;min-width:146px;padding:6px;border:1px solid rgba(255,255,255,.32);border-radius:20px;background:linear-gradient(125deg,rgba(255,255,255,.2),rgba(255,255,255,.07)),rgba(35,15,55,.67);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 12px 30px #15032640}
.language-options button{display:block;width:100%;padding:10px 12px;border-radius:13px;color:#fff;text-align:left;font-size:12px}
.language-options button:hover,.language-options button[aria-selected=true]{background:rgba(255,255,255,.18)}
.phone-menu{width:240px}
.phone-menu>.nav-button{display:block;width:100%;margin:0 0 4px;padding:12px 14px;border-radius:16px;text-align:left;color:#fff;font-size:15px;font-weight:700}
.phone-menu>.nav-button:hover{background:rgba(255,255,255,.16)}
.phone-menu>.contact{background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.15);font-weight:700}
.phone-menu>.contact:hover{background:rgba(255,255,255,.18);color:#fff}
.mobile-menu-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;padding:14px 3px 0;border-top:1px solid rgba(255,255,255,.25)}
.mobile-menu-bottom .nav-socials{display:flex;gap:4px;margin:0}
.mobile-menu-bottom .social-button{width:32px;height:32px}
.mobile-menu-bottom .social-button svg{width:20px;height:20px}
@media(max-width:767.98px){
  .site-header .nav-right{display:none}
  .site-header .nav{padding-inline:12px}
  .phone-menu .nav-socials{justify-content:flex-start;gap:4px;margin:0}
  .phone-menu .social-button{width:32px;height:32px}
}
@media(min-width:768px) and (max-width:950px){.site-header .nav-right{gap:1px}.site-header .nav-right .nav-button{font-size:12px;padding:8px}.site-header .nav-right .social-button{width:29px}.site-header .nav{padding-inline:14px}}


/* Match the visible badge height across all official store artwork. The English
   Google Play file has a 168px-tall visible badge; the localized files have 192px. */
.hero>.store-badges{--badge-height:50px;display:flex;align-items:center;gap:12px;width:auto;max-width:calc(100% - 48px)}
.hero>.store-badges a{flex:none;width:auto;height:var(--badge-height);aspect-ratio:auto;line-height:0}
.hero>.store-badges a:not(.google-badge)>img{position:static;width:auto;height:100%;object-fit:contain}
.hero>.store-badges .google-badge{position:relative;width:calc(var(--badge-height) * 646 / 192);height:var(--badge-height);aspect-ratio:auto;overflow:visible}
body:not([data-language]) .hero>.store-badges .google-badge,body[data-language=en] .hero>.store-badges .google-badge{width:calc(var(--badge-height) * 646 / 168);margin-inline:calc(var(--badge-height) * -41 / 168)}
.hero>.store-badges .google-badge>img{position:absolute;left:0;top:50%;width:100%;height:auto;max-width:none;transform:translateY(-50%)}
.hero>.store-badges img[data-badge-lang]{display:none}
body:not([data-language]) .store-badges img[data-badge-lang=en],
body[data-language=en] .store-badges img[data-badge-lang=en],
body[data-language=fr] .store-badges img[data-badge-lang=fr],
body[data-language=es] .store-badges img[data-badge-lang=es]{display:block}
@media(min-width:1600px){.hero>.store-badges{--badge-height:58px;gap:14px}}
@media(max-width:767.98px){.hero>.store-badges{--badge-height:clamp(42px,12vw,46px);gap:9px}}

/* Primary actions: soft glass, white highlight, and the Buddies purple glow. */
.site-header .nav-right .contact{order:2;display:inline-flex;align-items:center;justify-content:center;padding:8px 17px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(145deg,#fff 12%,#f9eaff 100%);color:#21152b;box-shadow:inset 0 1px 1px #fff,0 3px 12px rgba(43,8,64,.14)}
.site-header .nav-right .contact:hover{background:#fff;color:#21152b;box-shadow:0 4px 16px rgba(43,8,64,.22)}
.hero .hero-download{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:100%;min-height:62px;margin-top:5px;padding:13px 27px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.96);border-radius:999px;outline:0;background:linear-gradient(165deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.92) 56%,rgba(237,230,242,.82) 100%);-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);box-shadow:inset 0 2px 2px #fff,inset 0 -5px 12px rgba(61,43,81,.12),0 4px 18px rgba(37,5,70,.17),0 0 19px rgba(255,255,255,.77),0 0 42px rgba(255,255,255,.48);color:#32145c;font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;line-height:1.15;letter-spacing:-.025em;text-decoration:none;text-transform:uppercase;white-space:nowrap;mix-blend-mode:normal;filter:none;transition:transform .22s ease,box-shadow .22s ease}
.hero .hero-download:hover{color:#32145c}
.hero .hero-download:focus-visible{outline:3px solid #fff;outline-offset:4px}
.store-badges a{display:block;line-height:0;text-decoration:none;cursor:pointer}
.store-badges a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
@media(hover:hover) and (pointer:fine){.hero .hero-download:hover{transform:translateY(-2px) scale(1.025);box-shadow:inset 0 2px 2px #fff,inset 0 -5px 12px rgba(61,43,81,.12),0 6px 20px rgba(37,5,70,.19),0 0 24px rgba(255,255,255,.9),0 0 52px rgba(255,255,255,.62)}}
@media(max-width:767.98px){.hero .hero-download{align-self:center;min-height:56px;padding:12px 20px;gap:9px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero .hero-download{transition:none}.hero .hero-download:hover{transform:none}}

/* Language popover keeps the same frosted treatment in its new position. */
.site-header .nav{gap:9px}
.language-options.language-options-portal{position:fixed;z-index:50;top:0;left:0;right:auto;width:205px;max-width:calc(100vw - 24px);padding:9px;border:1px solid rgba(255,255,255,.3);border-radius:30px;background:linear-gradient(125deg,rgba(255,255,255,.23),rgba(255,255,255,.065) 42%,rgba(255,255,255,.13)),rgba(15,13,19,.12);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.12),0 16px 48px rgba(0,0,0,.2)}
.language-options.language-options-portal button{margin:2px 0;padding:10px 12px;border:1px solid rgba(255,255,255,.24);border-radius:17px;background:linear-gradient(125deg,rgba(255,255,255,.19),rgba(255,255,255,.08));color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 5px rgba(34,6,46,.2)}
.language-options.language-options-portal button:hover,.language-options.language-options-portal button[aria-selected=true]{background:linear-gradient(125deg,rgba(255,255,255,.31),rgba(255,255,255,.15));border-color:rgba(255,255,255,.43)}
@supports(corner-shape:squircle){.language-options.language-options-portal{corner-shape:squircle;border-radius:38px}.language-options.language-options-portal button{corner-shape:squircle;border-radius:22px}}
.mobile-menu-bottom{justify-content:flex-start}
/* Tight glass pill with clear, open Jakarta lettering. */
.hero .hero-download{width:min(310px,100%);min-width:0;min-height:76px;padding:18px 0;font-size:19px;font-weight:700;letter-spacing:.095em;-webkit-text-stroke:.9px currentColor}
@media(max-width:767.98px){.hero .hero-download{width:min(245px,100%);min-width:0;min-height:64px;padding:14px 0;font-size:16px;letter-spacing:.075em;-webkit-text-stroke:.75px currentColor}}

/* Keep the entire hand in view on wide desktop windows. */
@media(min-width:1200px) and (min-aspect-ratio:5/4){
  .hero-art{right:0;bottom:0;width:min(55vw,max(420px,calc(80svh - 70px)));aspect-ratio:3028/3783;clip-path:none}
  .hero-hand{position:absolute;inset:0;width:100%;height:auto;scale:1}
}

/* Tall browser windows and tablets use a vertical composition. */
@media(min-width:768px) and (max-width:1199.98px), (min-width:768px) and (max-aspect-ratio:5/4){
  .hero{height:auto;min-height:100svh;padding:clamp(120px,11svh,150px) 5vw 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(30px,4svh,56px)}
  .hero-content{--copy-width:clamp(340px,45vw,520px);width:min(100%,var(--copy-width));max-width:var(--copy-width);margin:0 auto;transform:none;gap:clamp(16px,2vw,26px);align-items:center;text-align:center}
  .hero-lockup,.hero .hero-download{align-self:center}
  .hero h1{white-space:normal;text-align:center}
  .hero-art{position:relative;inset:auto;right:auto;bottom:auto;width:min(96vw,1000px);height:auto;aspect-ratio:3028/2950;clip-path:none;transform:none;translate:none;margin:auto auto 0;flex:none}
  .hero-hand{position:absolute;inset:0;width:100%;height:auto;scale:1;transform:none}
  .hero>.store-badges{position:relative;inset:auto;left:auto;bottom:auto;translate:none;margin:16px auto 0;max-width:calc(100% - 32px)}
}

/* The same language control lives in the burger menu on phones. */
@media(max-width:767.98px){
  .mobile-menu-bottom{justify-content:space-between}
  .mobile-language-slot{display:flex;align-items:center;justify-content:flex-end}
  .phone-menu .language-toggle{min-width:56px;height:30px;padding:0 8px;font-size:10px}
}

/* Keep each sharp hand render extending beyond the lower edge of the hero.
   The artwork stays full size while its source edge remains out of view. */
.hero-art{aspect-ratio:3028/2950;clip-path:none;-webkit-mask-image:none;mask-image:none}
@media(min-width:1200px) and (min-aspect-ratio:5/4){
  .hero-art{top:auto;bottom:0;width:min(62vw,max(460px,calc(91svh - 80px)))}
}
@media(max-width:767.98px){
  .hero-art{width:min(190%,930px);max-width:none;margin-top:auto;margin-bottom:0}
  .hero>.store-badges{position:relative;inset:auto;left:auto;bottom:auto;translate:none;margin:16px auto 24px}
}

/* Keep the download label centered with a small directional cue. */
.hero .hero-download .download-arrow{display:block;width:21px;height:21px;flex:none;overflow:visible;transform-origin:center;transition:transform .24s ease}
@media(hover:hover) and (pointer:fine){.hero .hero-download:hover .download-arrow{transform:scale(1.08)}}
@media(max-width:767.98px){.hero .hero-download .download-arrow{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.hero .hero-download .download-arrow{transition:none}.hero .hero-download:hover .download-arrow{transform:none}}

/* Legal entry at the lower left; language selector at the lower right. */
.hero-utility-footer{position:absolute;z-index:5;left:24px;right:24px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.hero-utility-footer>*{pointer-events:auto}
.desktop-language-slot{display:flex;align-items:center;justify-content:flex-end}
.hero-utility-footer .language-toggle,.legal-trigger{min-height:34px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:linear-gradient(125deg,rgba(255,255,255,.20),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 3px 12px rgba(28,8,55,.13);color:#fff}
.hero-utility-footer .language-toggle{min-width:68px;padding:0 10px}
.legal-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 13px;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap}
.legal-trigger svg{display:block;width:16px;height:16px;flex:none}
.legal-trigger{text-decoration:none;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.hero-utility-footer .language-toggle{transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){
  .legal-trigger:hover,.hero-utility-footer .language-toggle:hover{transform:scale(1.045);background:linear-gradient(125deg,rgba(255,255,255,.34),rgba(255,255,255,.15));border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 6px 18px rgba(28,8,55,.2)}
}
.legal-trigger:active,.hero-utility-footer .language-toggle:active{transform:scale(.97)}
.phone-menu .language-toggle{transition:transform .2s ease,background .2s ease,border-color .2s ease}
.phone-menu .language-toggle:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.phone-menu .language-toggle:hover{transform:scale(1.045);background:rgba(255,255,255,.27);border-color:rgba(255,255,255,.6)}}
.legal-trigger:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.legal-trigger,.hero-utility-footer .language-toggle,.phone-menu .language-toggle{transition:none}}
@media(min-width:768px) and (max-width:1199.98px), (min-width:768px) and (max-aspect-ratio:5/4){
  .hero-utility-footer{position:relative;left:auto;right:auto;bottom:auto;align-self:center;flex:none;width:100vw;margin:18px auto 0;padding:0 24px 24px}
}
@media(max-width:767.98px){
  .hero-utility-footer{display:none}
  .desktop-language-slot{display:none}
  .phone-menu>.legal-trigger{display:flex;width:100%;justify-content:flex-start;margin:4px 0 0;padding:12px 14px;border-radius:16px;font-size:15px;line-height:20px;letter-spacing:0}
  .hero-art{width:min(188%,930px);aspect-ratio:3028/3783;translate:6% 0}
}

/* Give every primary entry in the phone menu the same simple text treatment. */
@media(max-width:767.98px){
  .phone-menu>:is(.nav-button,.legal-trigger){display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:48px;margin:0 0 4px;padding:12px 14px;border:1px solid transparent;border-radius:16px;background:transparent;box-shadow:none;color:#fff;font-size:15px;font-weight:700;line-height:22px;letter-spacing:0;text-align:left;text-decoration:none;white-space:normal;transform:none}
  .phone-menu>.legal-trigger svg{display:none}
  .phone-menu>:is(.nav-button,.legal-trigger):hover,.phone-menu>:is(.nav-button,.legal-trigger):focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16);box-shadow:none;color:#fff;transform:none}
  .phone-menu>:is(.nav-button,.legal-trigger):active{background:rgba(255,255,255,.22);transform:none}
}
.nav-button.help-center{text-decoration:none}
@media(min-width:768px){.nav-button.help-center{display:inline-flex;align-items:center;justify-content:center}}

/* Optical balance: keep the label/arrow group centered while giving the
   longer label a little more breathing room on its leading edge. */
.hero .hero-download{width:min(320px,100%);padding-left:10px;padding-right:0}
@media(max-width:767.98px){.hero .hero-download{width:min(253px,100%);padding-left:8px;padding-right:0}}

/* On narrow screens the source artwork continues below the hero edge.
   This hides the rendered arm's lower boundary without a fade or mask. */
@media(max-width:767.98px){
  .hero-art{width:min(188%,930px);aspect-ratio:3028/3000;translate:6% 18px;overflow:visible}
}