/* One product entrance; motion elsewhere follows the visitor's actions. */
:root{--motion-out:cubic-bezier(.16,1,.3,1);--motion-fast:180ms;--motion-state:280ms}
.title-line{display:block;padding-bottom:.08em;margin-bottom:-.08em}
.title-line>span{display:block}
.hero-showcase{position:relative}
html.lenis{scroll-behavior:auto}
.product-bridge{position:absolute;pointer-events:none;height:16px;color:#769365;overflow:visible}
.product-bridge path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.header{transition:box-shadow 240ms var(--motion-out)}
.header.is-scrolled{box-shadow:0 7px 22px -15px #183a286b}
.header nav a{position:relative;text-decoration:none}
.header nav a::after{content:"";position:absolute;height:1px;bottom:-7px;left:0;right:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-state) var(--motion-out)}
.header nav a[aria-current="location"]::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.button{transition:background var(--motion-fast),transform var(--motion-fast) var(--motion-out),box-shadow var(--motion-state) var(--motion-out)}
.button .icon,.text-link .icon{transition:transform var(--motion-state) var(--motion-out)}
.button:focus-visible .icon{transform:translateX(4px)}
.button:active{transform:scale(.98)}
.text-link:focus-visible .icon{transform:translate(2px,-2px)}
.hero-site>a,.hero-app>a,.app-proof>a{transition:transform 360ms var(--motion-out)}
.store-visual>a{position:relative}
.phone-screen,.browser-screen{position:relative}
.motion-ghost{pointer-events:none!important;position:absolute!important;z-index:2;margin:0!important}
.phone-screen>.motion-ghost{inset:0;width:100%!important;height:100%!important;object-fit:contain!important}
.store-tabs,.app-tabs,.hero-switch{position:relative}
.tab-track{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tab-cursor{position:absolute;top:0;left:0;width:1px;height:2px;transform-origin:left center;background:var(--cursor-color,var(--green));pointer-events:none}
.app-tabs{--cursor-color:#d1e8be}
.app-tabs button,.store-tabs>button{transition:color var(--motion-fast),background var(--motion-fast)}
.app-tabs button span,.store-tabs .step-title{transition:transform var(--motion-state) var(--motion-out)}
.app-tabs button .icon,.step-title .icon{transition:opacity var(--motion-fast),transform var(--motion-state) var(--motion-out)}
.hero-switch.has-cursor button[aria-pressed=true]{border-bottom-color:transparent}
.faq summary{transition:color var(--motion-fast)}
.faq summary .icon{transition:transform var(--motion-state) var(--motion-out)}
.faq details[data-closing] summary .icon{transform:rotate(0)}
.start-grid input{transition:border-color var(--motion-fast),background var(--motion-fast)}
.start-grid input:focus{border-color:var(--green);background:#fefffc}
@media(hover:hover) and (pointer:fine){
 .header nav a:hover::after{transform:scaleX(1)}
 .button:hover{box-shadow:0 9px 16px -10px #082a2366}
 .button:hover .icon{transform:translateX(4px)}
 .text-link:hover .icon{transform:translate(2px,-2px)}
 .hero-site>a:hover,.hero-app>a:hover,.app-proof>a:hover{transform:translateY(-3px)}
 .app-tabs button:hover span,.store-tabs>button:hover .step-title{transform:translateX(3px)}
 .faq summary:hover{color:var(--green)}
}
@media(max-width:700px){
 .hero-showcase{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .product-bridge{display:none}
 .store-tabs.has-cursor>button[aria-selected=true]{border-bottom-color:transparent}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-site>a:hover,.hero-app>a:hover,.app-proof>a:hover,.button:active{transform:none}
}