/* Motion enhances the commercial pages without hiding content or changing their behavior. */
header.wrap{position:sticky;top:0;z-index:25;background:rgba(255,255,255,.96);transition:box-shadow .25s ease}
header.wrap::before{content:"";position:absolute;inset:0 calc((100vw - 100%)/-2);background:inherit;z-index:-1;pointer-events:none;border-bottom:1px solid transparent;transition:border-color .25s}
header.wrap.is-scrolled::before{border-color:var(--line);box-shadow:0 5px 18px #1c211909}
header nav a{white-space:nowrap;position:relative;transition:color .2s}
header nav a:not(.mobile-login)::after{content:"";position:absolute;height:2px;left:0;right:0;bottom:-7px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
header nav a:hover::after,header nav a[aria-current=page]::after{transform:scaleX(1)}
.nav-actions .btn{white-space:nowrap}
.reading-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;z-index:60;background:linear-gradient(90deg,var(--green),#abc57d);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(750px,100%);height:650px;right:-2vw;top:-70px;background:radial-gradient(ellipse,#dce8ca80,transparent 66%);filter:blur(12px)}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;inset:auto 0 -5px;height:6px;border-radius:100%;background:linear-gradient(90deg,#a9bf7b99,#dae6c433);transform:rotate(-2deg);z-index:-1}
.demo{box-shadow:0 24px 65px -28px #45552b55}
.demo-heading .dot{box-shadow:0 0 0 5px #8ca75d14}
.demo-tabs button{transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.demo-tabs button:active{transform:scale(.96)}
.email-preview{transition:box-shadow .3s ease,transform .3s ease}
.btn{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}
.btn>span{display:inline-block;transition:transform .22s ease}
.btn:hover>span{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.985)}
.text-link{transition:color .2s,border-color .2s}
.use-cases article,.feature-grid article,.price-card,.restored-pricing .plan{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.mini-photo img,.email-body img{transition:transform .6s ease}
.steps>div,.workflow>div{transition:background .25s ease}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--green)}
.faq details[open]{border-color:#a7b78b}
.faq details[open]>p{animation:answer-in .24s ease-out both}
dialog[open]{animation:dialog-in .25s ease-out both}
dialog[open]::backdrop{animation:backdrop-in .25s ease-out both}
.motion-enter{animation:section-in .65s cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--motion-delay,0ms)}
@keyframes section-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px -10px #42532b66}
  .use-cases article:hover,.feature-grid article:hover,.price-card:hover,.restored-pricing .plan:hover{transform:translateY(-6px);border-color:#aab994;box-shadow:0 20px 35px -25px #36472066}
  .mini-photo:hover img{transform:scale(1.05)}
  .demo:hover .email-preview{transform:rotate(0);box-shadow:0 18px 30px #34402020}
}
@media(max-width:800px){header.wrap{height:80px}.hero::before{height:480px;top:0;right:0}.hero h1 em::after{height:4px}html{scroll-padding-top:100px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reading-progress{display:none}
}