/* Melafill-inspired pacing, using native observers and compositor-friendly motion. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1);--reading-progress:0}
html[data-motion="full"]{scroll-behavior:smooth}
.site-header{transition:box-shadow .35s ease,background-color .35s ease}
.has-scrolled .site-header{box-shadow:0 7px 24px rgba(34,61,48,.07)}
.motion-ready .site-header::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(var(--reading-progress));transform-origin:left;pointer-events:none}

html[data-motion="full"].motion-ready .motion-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html[data-motion="full"].motion-ready .motion-reveal.is-revealed{opacity:1;transform:none}
html[data-motion="full"].motion-ready .motion-reveal:focus-within{opacity:1;transform:none;transition:none}
.motion-ready .motion-anchor{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
html[data-motion="full"].motion-ready .hero h1>.motion-reveal{transform:translateY(42px);transition-duration:1.15s}
html[data-motion="full"].motion-ready .hero h1>.is-revealed{transform:none}
html[data-motion="full"].motion-ready .hero-application{transform:translateY(20px);clip-path:inset(0 0 7% 0);transition:opacity 1.2s var(--motion-ease),transform 1.2s var(--motion-ease),clip-path 1.2s var(--motion-ease)}
html[data-motion="full"].motion-ready .hero-application.is-revealed{transform:none;clip-path:inset(0)}
html[data-motion="full"] .hero-copy .motion-reveal.is-revealed{animation:hero-enter 1.15s var(--motion-ease) backwards;animation-delay:var(--reveal-delay,0ms)}
html[data-motion="full"] .hero-application.is-revealed{animation:hero-photo-enter 1.2s var(--motion-ease) backwards}
html[data-motion="full"] .hero-copy .motion-reveal:focus-within{animation:none}
@keyframes hero-enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hero-photo-enter{from{opacity:0;transform:translateY(20px);clip-path:inset(0 0 7% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
html[data-motion="full"] .hero-application>img{transform:translateY(var(--photo-drift,0px)) scale(1.06);transition:transform .35s ease-out}
html[data-motion="full"] .hero-application.hero-gallery>img{transform:none;transition:opacity .9s ease}
html[data-motion="full"] .purchase-visual img{animation:product-float 8s ease-in-out infinite;animation-play-state:paused}
html[data-motion="full"] .purchase-visual.motion-in-view img{animation-play-state:running}
html[data-motion="full"].motion-page-hidden .purchase-visual img{animation-play-state:paused}
@keyframes product-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

html[data-motion="full"] .formula-feature .feature-kicker>span{transition:transform .5s var(--motion-ease),background-color .3s,border-color .3s}
html[data-motion="full"].motion-ready .formula-feature.motion-reveal,html[data-motion="full"].motion-ready .routine-steps article.motion-reveal{transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease),translate .3s var(--motion-ease),box-shadow .3s ease,border-color .3s ease;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0s,0s,0s}
html[data-motion="full"] .button{transition:background-color .2s,color .2s,transform .25s var(--motion-ease),box-shadow .25s ease}
html[data-motion="full"] .button span[aria-hidden],html[data-motion="full"] .text-link span[aria-hidden]{display:inline-block;transition:transform .25s var(--motion-ease)}
html[data-motion="full"] .text-link{transition:color .2s,border-color .25s}
html[data-motion="full"] .menu-toggle span{transition:transform .25s var(--motion-ease)}
html[data-motion="full"] #site-navigation>a:not(.button){position:relative}
html[data-motion="full"] #site-navigation>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--motion-ease)}
html[data-motion="full"] #site-navigation>a:not(.button):focus-visible::after{transform:scaleX(1)}
html[data-motion="full"] details[open]>.feature-detail-body,html[data-motion="full"] details[open]>.research-body,html[data-motion="full"] .faq-list details[open]>p{animation:answer-reveal .35s var(--motion-ease) both}
@keyframes answer-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
 html[data-motion="full"] .formula-feature:hover,html[data-motion="full"] .routine-steps article:hover{translate:0 -5px;box-shadow:0 16px 30px -22px rgba(34,61,48,.4);border-color:#9fb298}
 html[data-motion="full"] .formula-feature:hover .feature-kicker>span{transform:rotate(-8deg);background:rgba(255,255,255,.3);border-color:#8ca17e}
 html[data-motion="full"] .button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(34,61,48,.65)}
 html[data-motion="full"] .button:not(:disabled):hover span[aria-hidden],html[data-motion="full"] .text-link:hover span[aria-hidden]{transform:translate(3px,-3px)}
 html[data-motion="full"] #site-navigation>a:not(.button):hover::after{transform:scaleX(1)}
}
@media(max-width:767px){
 html[data-motion="full"].motion-ready .motion-reveal{transform:translateY(22px)}
 html[data-motion="full"].motion-ready .motion-reveal.is-revealed{transform:none}
 html[data-motion="full"] #site-navigation>a:not(.button)::after{bottom:0;right:auto;width:28px}
 .footer-bottom>div{flex-wrap:wrap;row-gap:12px}
}

@media print{.motion-ready .motion-reveal{opacity:1!important;transform:none!important;clip-path:none!important}.site-header::after{display:none!important}}