/* GridHabit motion edition. The original icon and ivory/teal identity remain. */
.motion-nav,.motion-nav.open{width:min(1160px,calc(100% - 72px));max-width:none;min-height:74px;padding:12px 16px 12px 22px;top:28px;border-radius:22px;background:#f5f8efed;border:1px solid #ffffffe0;box-shadow:0 10px 35px #041e1a18;transition:width .5s,top .5s,box-shadow .4s,background .4s;gap:24px}
.motion-nav.is-scrolled{top:14px;width:min(1040px,calc(100% - 56px));background:#f7faf3f5;box-shadow:0 10px 32px #05271c20}
.motion-nav .brand{gap:11px;letter-spacing:-.7px;font-size:20px;flex-shrink:0}
.desktop-nav{display:flex;align-items:center;gap:5px}
.desktop-nav a{padding:13px 18px;font-size:12px;color:#586b60;border-radius:30px;transition:background .25s,color .25s}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:#164f41;background:#dfebdc}
.nav-actions{display:flex;gap:9px;align-items:center}
.nav-primary{display:flex;align-items:center;justify-content:center;gap:25px;font-size:11px;font-weight:600;background:#1b5447;color:#f6f9ee;padding:15px 19px;border-radius:13px;min-height:46px;transition:background .25s,transform .25s}
.nav-primary:hover{background:#28715b;transform:translateY(-2px)}
.nav-primary>span{font-size:17px}
.motion-nav .menu-toggle{display:none;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid #dce5d8;border-radius:13px;background:#e8eee2}
.menu-bars{display:flex;flex-direction:column;gap:6px;width:17px}
.menu-bars i{height:1px;width:100%;background:#224b3c;transition:transform .3s}
.open .menu-bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.open .menu-bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.motion-nav #site-menu{top:calc(100% + 10px);left:-1px;right:-1px;padding:12px 23px 16px;border:1px solid #fff;border-radius:20px;background:#f4f8eef7;box-shadow:0 22px 45px #07332728}
.motion-nav #site-menu a{position:relative;padding:18px 2px;font-size:17px;border-top:1px solid #dce6d6;transition:padding .2s,color .2s}
.motion-nav #site-menu a:first-child{border-top:0}
.motion-nav #site-menu a:hover{padding-left:8px;color:#187358}
.motion-nav #site-menu a>span{position:absolute;right:2px;top:20px;font-size:9px;color:#7e927f}
.nav-progress{position:absolute;bottom:0;left:22px;right:22px;height:2px;background:#448169;transform:scaleX(var(--page-progress,0));transform-origin:left;border-radius:2px;opacity:.55;pointer-events:none}

.hero-cinematic{background:#06261e;display:flex;align-items:center;justify-content:flex-start;min-height:810px;max-height:1100px;border-radius:30px;perspective:1400px;--hero-y:0px;--pointer-x:0px;--pointer-y:0px}
.hero-photo-wrap{position:absolute;inset:-3%;z-index:-4;overflow:hidden;transform:translate3d(var(--pointer-x),calc(var(--hero-y) + var(--pointer-y)),0) scale(1.035);will-change:transform}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:right top;display:block}
.hero-photo-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#04261de8 0%,#06291dc7 26%,#08291d12 61%,#061f1905 83%),linear-gradient(0deg,#03261cd6,transparent 27%,transparent 77%,#03201c35)}
.hero-cinematic .hero-grain{z-index:-1;opacity:.09;pointer-events:none}
.hero-atmosphere{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora{position:absolute;width:850px;height:500px;background:conic-gradient(from 140deg,transparent,#7eec9c42,transparent 38%,#9fffd31f,transparent 70%);filter:blur(42px);border-radius:50%;mix-blend-mode:screen;animation:auroraSway 17s ease-in-out infinite alternate;will-change:transform}
.aurora-one{left:4%;bottom:-35%;transform:rotate(-20deg)}
.aurora-two{right:-23%;top:-40%;animation-duration:23s;animation-delay:-8s;opacity:.7}
.light-sweep{position:absolute;inset:-40% auto -40% -45%;width:25%;background:linear-gradient(90deg,transparent,#baffc919,transparent);transform:rotate(24deg);filter:blur(20px);animation:lightSweep 14s ease-in-out infinite;will-change:transform}
.light-line{position:absolute;width:110%;height:55%;border:1px solid #bcffd91a;border-radius:50%;left:-8%;top:37%;transform:rotate(-24deg);box-shadow:0 -3px 28px #9bffc914;animation:lineBreathe 13s ease-in-out infinite alternate}
.line-two{top:44%;left:4%;height:42%;animation-delay:-5s;opacity:.6}
.light-particle{position:absolute;left:calc(8% + var(--i)*16%);top:calc(18% + var(--i)*11%);width:3px;height:3px;border-radius:50%;background:#ddffb7;opacity:.4;box-shadow:0 0 16px #b3ffca;animation:particleDrift 9s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-1.7s)}
.hero-cinematic .hero-content{width:min(1320px,100%);margin:auto;padding:150px 70px 135px;text-align:left;transform:translate3d(0,calc(var(--hero-y)*-.2),0)}
.hero-cinematic .hero-content>.eyebrow{font-size:9px;letter-spacing:.15em;color:#d1e7c8;margin-bottom:27px}
.hero-cinematic h1{font-size:clamp(76px,7vw,112px);line-height:1.01;letter-spacing:-.065em;margin:0 0 30px;max-width:790px}
.hero-cinematic h1 em{color:inherit}
.hero-shimmer{color:#e3f0d3;background:linear-gradient(110deg,#c9dfb8 20%,#f9ffe9 38%,#c5e8bc 50%,#8eb997 63%,#e1f4cd 80%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:typeShimmer 9s ease-in-out infinite}
.hero-cinematic .hero-content>p{font-size:13px;line-height:1.9;max-width:430px;color:#c7dbca;margin-bottom:30px}
.hero-actions{display:flex;gap:28px;align-items:center}
.hero-actions .button{border-radius:14px;padding:19px 23px;gap:34px;background:#ecf3e1;box-shadow:0 8px 28px #001d1826}
.hero-tour{display:flex;align-items:center;gap:10px;font-size:11px;color:#deedda;padding:12px 0}
.hero-tour>span{display:grid;place-items:center;width:33px;height:33px;border:1px solid #dbf3d83d;border-radius:50%;font-size:19px;transition:transform .3s,background .3s}
.hero-tour:hover>span{transform:rotate(-35deg);background:#d2f6bc18}
.hero-promise{display:flex;gap:24px;margin-top:25px;color:#bdd1bd;font-size:9px}
.hero-promise>span{display:flex;align-items:center;gap:7px}
.hero-promise i{font-style:normal;font-size:13px;color:#d6ebbe}
.hero-cinematic .hero-float{animation:cardFloat 8s ease-in-out infinite alternate;left:auto;right:19%;top:auto;bottom:75px;width:272px;opacity:.98;z-index:4;transform:perspective(900px) rotateY(-12deg) rotateZ(5deg);filter:drop-shadow(0 30px 35px #02251a70)}
.hero-cinematic .hero-float .habit-demo{background:#f0f7e6ee;backdrop-filter:blur(18px);border-color:#e6f2d1b3;box-shadow:inset 0 1px #fff}
.hero-cinematic .hero-grid{left:8%;bottom:-36px;width:470px;opacity:.23;transform:perspective(900px) rotateX(54deg) rotateZ(-7deg) translateY(calc(var(--hero-y)*.3));z-index:0;overflow:hidden}
.hero-cinematic .hero-grid::after{content:'';position:absolute;inset:-15%;background:linear-gradient(100deg,transparent 30%,#e2ffd04a 48%,transparent 63%);transform:translateX(-100%);animation:gridShimmer 7s ease-in-out infinite}
.hero-cinematic .hero-grid .heatmap{gap:5px}
.hero-scroll{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);display:flex;gap:11px;align-items:center;color:#d0e6cc;font-size:7px;letter-spacing:.13em;z-index:5}
.scroll-track{height:30px;width:18px;border:1px solid #bedbb777;border-radius:12px;display:block;position:relative}
.scroll-track i{position:absolute;left:7px;top:7px;width:2px;height:6px;background:#e0f2cc;border-radius:2px;animation:scrollNudge 2.6s ease-in-out infinite}
.hero-cinematic .hero-footnote{left:35px;bottom:34px;font-size:6px;letter-spacing:.1em;color:#a8c3a5;max-width:280px}
.motion-toggle{position:absolute;right:32px;bottom:24px;z-index:6;display:flex;gap:9px;align-items:center;padding:9px 11px;background:#092f2666;border:1px solid #d2f5c42b;backdrop-filter:blur(12px);border-radius:30px;color:#daebd0;font-size:8px;min-height:35px}
.motion-icon{font-size:13px;line-height:1}
.hero-enter{animation:heroArrive 1.15s cubic-bezier(.2,.65,.2,1) both}
.hero-enter:nth-child(2){animation-delay:.12s}.hero-enter:nth-child(3){animation-delay:.23s}.hero-enter:nth-child(4){animation-delay:.33s}.hero-enter:nth-child(5){animation-delay:.43s}

/* Unfolding cards and their pointer-following light. */
.mosaic-grid,.three-col{perspective:1400px}
.mosaic-card{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.65,.2,1),box-shadow .45s;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:50%}
.mosaic-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--light-x) var(--light-y),#ffffff45,transparent 58%);transition:opacity .4s}
.mosaic-card:hover::after{opacity:1}
.motion-ready .mosaic-card.reveal:not(.in-view){opacity:0;transform:translateY(65px) rotateX(16deg) rotateY(-7deg);transform-origin:center bottom}
.motion-ready .mosaic-card.reveal.in-view{opacity:1;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.mosaic-card:hover{box-shadow:0 20px 35px #183f3817}
.motion-ready .three-col>.reveal:not(.in-view){transform:translateY(35px) rotateY(-22deg);transform-origin:left center;opacity:0}
.motion-ready .three-col>.reveal.in-view{transform:none;opacity:1}
.three-col>.reveal:nth-child(2){transition-delay:.1s}.three-col>.reveal:nth-child(3){transition-delay:.2s}

/* A real front/back phone: scroll sets its pose; screen changes flip it. */
.story{position:relative;background:radial-gradient(ellipse at 85% 50%,#224c3c 0,transparent 48%),#0b2b25}
.phone-stage{perspective:1500px;isolation:isolate;--phone-lean:3deg;--phone-roll:-3deg;--phone-lift:0px}
.phone-pose{width:325px;height:600px;max-width:100%;position:relative;margin:auto;transform-style:preserve-3d;transform:translate3d(0,var(--phone-lift),0) rotateX(var(--phone-lean)) rotateZ(var(--phone-roll));will-change:transform}
.phone-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.phone-front{position:relative;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(9px)}
.phone-stage .phone{height:600px;min-height:600px;max-width:none;width:100%;position:relative;margin:0;border-width:7px;border-color:#29483a;border-radius:45px;outline-color:#8ba28a;box-shadow:12px 20px 30px #00140b38,0 50px 70px #00150c4d}
.phone-stage .phone-top{margin-bottom:18px}
.phone-stage .phone-brand{margin-bottom:16px}
.phone-stage .phone-screen>small{margin-bottom:7px}
.phone-stage .phone-screen h3{font-size:32px;margin:10px 0 16px;line-height:1.06}
.phone-stage .phone-progress{margin-bottom:16px}
.phone-stage .habit-demo-head{margin-bottom:12px}
.phone-stage .phone-row{padding:10px 3px}
.phone-stage .phone-dock{margin-top:16px}
.phone-stage .month-label{margin:18px 0 14px}
.phone-stage .phone-note{margin:8px 0}
.phone-stage .metric-pair{margin:16px 0}
.phone-stage .metric-pair>div{padding:13px}
.phone-stage .bar-demo{height:90px;margin:16px 0 10px}
.phone::before{content:'';position:absolute;z-index:2;top:8px;left:calc(50% - 27px);height:12px;width:54px;border-radius:14px;background:#233c30}
.phone-front::after{content:'';position:absolute;top:108px;left:-3px;width:3px;height:40px;border-radius:4px;background:#8ba28a;box-shadow:0 52px #8ba28a}
.phone-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) translateZ(9px);border:7px solid #29483a;outline:1px solid #93ab93;border-radius:45px;overflow:hidden;background:linear-gradient(135deg,#8ea989,#416e55 42%,#184937);box-shadow:12px 20px 30px #00140b38,0 50px 70px #00150c4d}
.phone-back::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 10%,#e9ffd82e 45%,transparent 60%);pointer-events:none}
.phone-back-brand{position:absolute;inset:43% 0 auto;text-align:center;display:flex;align-items:center;flex-direction:column;color:#e9f6df}
.phone-back-brand img{border-radius:19px;box-shadow:0 6px 30px #08372630}
.phone-back-brand strong{font-size:21px;letter-spacing:-1px;font-weight:500;margin:20px 0 11px}
.phone-back-brand small{font-size:6px;letter-spacing:.23em;opacity:.7}
.phone-camera{position:absolute;left:18px;top:18px;display:grid;grid-template-columns:28px 28px;gap:7px;padding:9px;background:#234b3c5e;border:1px solid #b4cca34d;border-radius:21px}
.phone-camera i{width:28px;height:28px;border:4px solid #183d31;outline:1px solid #b3cba16e;border-radius:50%;background:radial-gradient(circle at 36% 35%,#637f75 0,#152b26 26%,#061c17 75%)}
.phone-camera span{width:9px;height:9px;background:#e4eac8;border-radius:50%;align-self:center;justify-self:center}
.phone-back-grid{position:absolute;width:180px;bottom:44px;left:calc(50% - 90px);opacity:.16}
.phone-back-line{position:absolute;height:4px;width:65px;border-radius:4px;background:#b3d29c40;bottom:13px;left:calc(50% - 32px)}
.phone-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.phone-aura i{position:absolute;width:390px;height:390px;left:calc(50% - 195px);top:100px;border:1px solid #b9e3a225;border-radius:50%;transform:rotateX(65deg) rotateZ(-25deg);box-shadow:0 0 90px #a7ed9f16;animation:phoneHalo 15s ease-in-out infinite alternate}
.phone-aura i:nth-child(2){width:530px;height:530px;left:calc(50% - 265px);top:40px;animation-delay:-6s;opacity:.5}
.phone-aura i:nth-child(3){width:240px;height:240px;left:calc(50% - 120px);top:170px;border:0;background:#a1d9811c;filter:blur(40px);animation-delay:-9s}
.story-controls{position:relative;z-index:3;width:max-content;max-width:100%;margin:34px auto 20px;padding:5px;border:1px solid #c2e1aa29;border-radius:30px;background:#04241c66;backdrop-filter:blur(10px)}
.story-controls button{min-height:36px;padding:9px 17px;font-size:10px;transition:background .3s,color .3s,transform .3s}
.story-controls button:hover{color:#e2f0d5;transform:translateY(-1px)}
.story-controls button[aria-pressed=true]{background:#d9eac8;color:#153b2c;box-shadow:0 3px 12px #001a1326}
.phone-caption{font-size:6px!important;letter-spacing:.14em!important;color:#a4b89a!important}
.story-step{transition:opacity .5s,transform .5s}
.story-step.is-active .eyebrow{color:#dcf2bd}
.privacy-orbit{animation:privacyTurn 20s ease-in-out infinite alternate}
.closing{position:relative;isolation:isolate;overflow:hidden}
.closing::after{content:'';position:absolute;z-index:-1;inset:-50%;background:conic-gradient(from 60deg,transparent,#b2e99a1a,transparent 45%);animation:closingLight 30s linear infinite}

@keyframes heroArrive{from{opacity:0;translate:0 25px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes auroraSway{to{transform:translate3d(80px,-50px,0) rotate(35deg) scale(1.2)}}
@keyframes lightSweep{0%,15%{transform:translateX(0) rotate(24deg);opacity:0}35%{opacity:1}75%,100%{transform:translateX(650%) rotate(24deg);opacity:0}}
@keyframes lineBreathe{to{transform:translate3d(6%,-4%,0) rotate(-13deg) scale(1.05);opacity:.35}}
@keyframes particleDrift{to{transform:translate3d(10px,-35px,0);opacity:.1}}
@keyframes typeShimmer{0%,15%{background-position:100% 50%}75%,100%{background-position:0% 50%}}
@keyframes cardFloat{to{translate:0 -15px;rotate:-3deg}}
@keyframes gridShimmer{65%,100%{transform:translateX(100%)}}
@keyframes scrollNudge{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
@keyframes phoneHalo{to{transform:rotateX(55deg) rotateZ(15deg) scale(1.12)}}
@keyframes privacyTurn{to{transform:rotate(20deg) scale(1.1)}}
@keyframes closingLight{to{transform:rotate(360deg)}}
.hero-cinematic:not(.is-visible) .hero-atmosphere *,.hero-cinematic:not(.is-visible) .hero-shimmer,.hero-cinematic:not(.is-visible) .hero-float,.hero-cinematic:not(.is-visible) .hero-grid::after,.story:not(.is-visible) .phone-aura i{animation-play-state:paused}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after,html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after{animation-play-state:paused!important}
html.motion-paused .mosaic-card{--tilt-x:0deg!important;--tilt-y:0deg!important}
html.motion-paused .hero-enter{animation:none!important;opacity:1;translate:none;filter:none}

@media(min-width:1700px){.hero-cinematic .hero-content{max-width:1500px;padding-left:70px}.hero-cinematic h1{font-size:132px}.hero-cinematic .hero-float{right:19%;width:280px;bottom:90px}}
@media(min-width:701px){.phone-stage{top:88px;padding-top:16px;padding-bottom:20px}}
@media(max-width:1100px){.motion-nav,.motion-nav.open{width:calc(100% - 56px);gap:16px}.desktop-nav a{padding:12px 13px}.hero-cinematic .hero-content{padding-left:55px;padding-right:55px}.hero-cinematic h1{font-size:88px}.hero-cinematic .hero-content>p{max-width:350px;font-size:12px}.hero-photo{object-position:right top}.hero-photo-shade{background:linear-gradient(90deg,#04261df2 0%,#06291dc9 26%,#08291d33 61%,#061f1900 83%),linear-gradient(0deg,#03261cdb,transparent 40%)}.hero-cinematic .hero-float{width:235px;right:20%;bottom:88px}.hero-cinematic .hero-grid{left:4%;width:370px}}
@media(max-width:840px){.desktop-nav{display:none}.motion-nav .menu-toggle{display:flex}.motion-nav,.motion-nav.open{width:calc(100% - 44px);min-height:66px;padding:10px 12px 10px 17px;border-radius:19px;top:22px}.motion-nav.is-scrolled{width:calc(100% - 36px);top:12px}.nav-actions{margin-left:auto}.motion-nav .brand{font-size:19px}.nav-primary{padding:12px 15px;gap:14px;min-height:44px}.hero-cinematic h1{font-size:80px}.hero-cinematic .hero-content{padding-left:40px}.hero-cinematic .hero-float{right:25px;width:215px}.hero-cinematic .hero-footnote{font-size:5px;left:28px;max-width:170px}.hero-scroll{font-size:6px}.motion-toggle{right:22px}}
@media(max-width:700px){
 .motion-nav,.motion-nav.open{top:18px;width:calc(100% - 32px);min-height:64px;gap:10px;padding:9px 10px 9px 14px;border-radius:18px}
 .motion-nav.is-scrolled{top:10px;width:calc(100% - 24px)}
 .motion-nav .brand{font-size:18px;gap:8px}.motion-nav .brand img{width:27px;height:27px;border-radius:8px}
 .nav-primary{font-size:10px;gap:12px;padding:12px 13px;border-radius:11px}.nav-primary>span{font-size:15px}
 .nav-actions{gap:7px}.motion-nav .menu-toggle{min-width:40px;width:40px;height:42px;min-height:42px;border-radius:11px}
 .motion-nav #site-menu{padding:10px 18px 14px}.motion-nav #site-menu a{font-size:16px;padding:17px 2px}
 .hero-cinematic{height:auto;min-height:1040px;max-height:none;align-items:flex-start;border-radius:24px}
 .hero-cinematic .hero-content{position:relative;padding:144px 24px 0;margin:0;width:100%;transform:none}
 .hero-cinematic .hero-content>.eyebrow{font-size:7px;letter-spacing:.11em;margin-bottom:22px}
 .hero-cinematic h1{font-size:clamp(58px,15.6vw,94px);line-height:1.02;letter-spacing:-.065em;margin:0 0 22px;max-width:none}
 .hero-cinematic .hero-content>p{font-size:11px;line-height:1.85;max-width:330px;margin-bottom:23px}
 .hero-actions{gap:23px}.hero-actions .button{font-size:10px;min-height:48px;padding:16px 18px;gap:22px;border-radius:12px}
 .hero-tour{font-size:10px;gap:8px}.hero-tour>span{width:29px;height:29px;font-size:17px}
 .hero-promise{font-size:8px;gap:22px;margin-top:18px}
 .hero-photo-wrap{inset:410px 0 0;transform:translate3d(0,calc(var(--hero-y)*.35),0) scale(1.04)}
 .hero-photo{object-position:100% center;object-fit:cover}
 .hero-photo-shade{background:linear-gradient(180deg,#06261e 0,#06261e 27%,#06261e9c 39%,transparent 53%,#03251b3b 77%,#03251bea 98%)}
 .hero-cinematic .hero-float{right:22px;bottom:104px;width:224px;opacity:.96;transform:perspective(900px) rotateY(-12deg) rotateZ(5deg)}
 .hero-cinematic .hero-float .habit-demo{padding:15px}.hero-cinematic .hero-float .habit-demo strong{font-size:11px}.hero-cinematic .hero-float .habit-demo small{font-size:7px}.hero-cinematic .hero-float .demo-meta{font-size:6px}
 .hero-cinematic .hero-grid{width:330px;left:-30px;bottom:12px;opacity:.2}
 .hero-scroll{left:24px;bottom:52px;transform:none;font-size:6px;gap:9px}.hero-cinematic .hero-footnote{bottom:24px;left:24px;font-size:5px;max-width:230px}
 .motion-toggle{right:20px;bottom:37px;font-size:7px;padding:8px 10px;min-height:34px}
 .aurora{filter:blur(28px);width:550px;height:400px}.aurora-one{left:-50%;bottom:0}.light-line{top:57%;width:190%;height:30%;left:-50%}.line-two{top:69%}
 .intro{padding-top:85px}
 .phone-pose{width:292px;height:575px}.phone-stage .phone{height:575px;min-height:575px;border-radius:42px}
 .phone-stage{perspective:1300px;padding:32px 0 46px;--phone-lean:3deg;--phone-roll:-3deg}
 .phone-back{border-radius:42px}.phone-back-grid{bottom:30px}.phone-back-brand{inset:42% 0 auto}
 .phone-back-brand img{width:65px;height:65px;border-radius:17px}.phone-back-brand strong{font-size:19px;margin-top:17px}
 .story-controls{margin-top:28px}.story-controls button{padding:8px 14px;font-size:9px;min-height:36px}
 .phone-caption{font-size:5px!important}.phone-aura{inset:0 -24px}
 .motion-ready .mosaic-card.reveal:not(.in-view){transform:translateY(45px) rotateX(11deg)}
}
@media(max-width:360px){.hero-cinematic h1{font-size:52px}.motion-nav .brand{font-size:16px;gap:6px}.motion-nav .brand img{width:24px;height:24px}.nav-primary{font-size:9px;gap:8px;padding:12px 10px}.nav-primary>span{font-size:13px}.motion-nav .menu-toggle{width:36px;min-width:36px}.nav-actions{gap:5px}.hero-cinematic .hero-content{padding-left:20px;padding-right:20px}.hero-actions{gap:15px}.hero-tour{font-size:9px}.hero-promise{gap:17px}.hero-cinematic{min-height:1010px}.hero-cinematic .hero-float{width:207px;right:17px}.phone-pose{width:262px;height:570px}.phone-stage .phone{height:570px;min-height:570px}.phone-screen{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){
 .hero-cinematic,.hero-photo-wrap,.hero-content,.phone-pose{transform:none!important;will-change:auto}
 .hero-photo-wrap{transform:scale(1.035)!important}
 .hero-enter{opacity:1;translate:none;filter:none}
 .hero-shimmer{-webkit-text-fill-color:#e1f0d1;background:none;color:#e1f0d1}
 .motion-ready .mosaic-card.reveal,.motion-ready .three-col>.reveal{opacity:1!important;transform:none!important}
 .phone-flipper{transform:none!important}
}

/* Mobile motion QA: short screens, bounded glass and compositor-only layers. */
.motion-nav #site-menu{max-height:calc(100svh - 116px);max-height:calc(100dvh - 116px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.nav-primary,.hero-actions .button,.hero-tour{white-space:nowrap;flex-shrink:0}
.hero-actions{flex-wrap:wrap}
.phone-stage:not(.is-visible) .phone-aura i{animation-play-state:paused}
.hero-cinematic:not(.is-visible) .hero-photo-wrap,.phone-stage:not(.is-visible) .phone-pose{will-change:auto}
@media(max-width:840px){.motion-nav{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.motion-nav #site-menu{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
@media(max-width:700px){.hero-enter{filter:none!important}.aurora{mix-blend-mode:normal}.story-controls button{min-height:44px}.phone-caption{font-size:6px!important}.phone-stage{padding-bottom:30px}}
@media(min-width:701px) and (max-height:700px){.phone-stage{position:relative;top:auto}}