/* handly landing motion layer. Transform and opacity only. Every effect has a reduced-motion path. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1);--rv-dur:.9s}
html{scroll-padding-top:84px}

/* Reveal on enter. Elements start hidden only when JS has taken over (html.has-motion). */
.has-motion .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--rv-dur) var(--ease-out),transform var(--rv-dur) var(--ease-out);transition-delay:calc(var(--i,0)*90ms);will-change:opacity,transform}
.has-motion .rv.is-in{opacity:1;transform:none}
.has-motion .rv-line{display:inline-block;overflow:hidden;vertical-align:bottom}
.has-motion .rv-line>span{display:inline-block;transform:translate3d(0,110%,0);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0)*110ms + 80ms)}
.has-motion .is-in .rv-line>span,.has-motion .rv-line.is-in>span{transform:none}

/* Header: compact once the page moves. */
.lp-top{transition:padding .35s var(--ease-soft),box-shadow .35s var(--ease-soft),background .35s}
.lp-top.is-scrolled{padding-top:11px;padding-bottom:11px;box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(var(--shadow-rgb),.25)}
.lp-top-nav a{position:relative;padding:4px 0;transition:color .2s}
.lp-top-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease-out)}
.lp-top-nav a:hover::after,.lp-top-nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.lp-top-nav a.is-active{color:var(--ink)}
.lp-brand-mark{transition:transform .5s var(--ease-out)}
.lp-brand:hover .lp-brand-mark{transform:rotate(-14deg) scale(1.06)}

/* Buttons: quiet lift, arrow that arrives on hover. */
.lp-open,.lp-ghost{position:relative;overflow:hidden;transition:background .22s,color .22s,border-color .22s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.lp-open:hover,.lp-ghost:hover{transform:translateY(-1px)}
.lp-open:active,.lp-ghost:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.lp-open{box-shadow:0 0 0 0 rgba(var(--glow-rgb),0)}
.lp-open:hover{box-shadow:0 10px 24px -14px rgba(var(--glow-rgb),.7)}
.lp-open .arr{display:inline-block;width:0;opacity:0;transform:translateX(-6px);transition:width .3s var(--ease-out),opacity .3s,transform .3s var(--ease-out)}
.lp-open:hover .arr{width:.9em;opacity:1;transform:none}
.lp-open-top .arr{display:none}

/* Strip figures: count in. */
.lp-strip div{position:relative;overflow:hidden;transition:background .3s}
.lp-strip div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease-out)}
.lp-strip div.is-in::before{transform:scaleY(1)}
.lp-strip strong{font-variant-numeric:tabular-nums}

/* Steps: cards lift, numbers move to the accent, line draws under the heading. */
.lp-steps li{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);position:relative}
.lp-steps li:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(var(--shadow-rgb),.35);z-index:1}
.lp-steps .step-number{transition:transform .5s var(--ease-out),letter-spacing .5s var(--ease-out)}
.lp-steps li:hover .step-number{transform:translateX(6px);letter-spacing:.22em}
.lp-steps h3{position:relative;display:inline-block}
.lp-steps h3::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.lp-steps li:hover h3::after{transform:scaleX(1)}

/* Truths: the blue rule grows in as each item lands. */
.has-motion .lp-truth-list li{border-left-color:transparent;position:relative}
.has-motion .lp-truth-list li::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-out);transition-delay:calc(var(--i,0)*90ms + 150ms)}
.has-motion .lp-truth-list li.is-in::before{transform:scaleY(1)}
.lp-truth-list li{transition:color .3s}
.lp-truth-list li:hover{color:var(--ink)}

/* Hero coin: eases in with a settle, drifts on scroll. */
.has-motion .lp-hero-art{opacity:0;transform:translate3d(0,26px,0) scale(.96);transition:opacity 1.1s var(--ease-out) .15s,transform 1.1s var(--ease-out) .15s}
.has-motion .lp-hero-art.is-in{opacity:1;transform:translate3d(0,var(--drift,0px),0) scale(1);transition:opacity 1.1s var(--ease-out) .15s,transform .2s linear}
.lp-coin-btn{transition:border-color .2s,transform .3s var(--ease-out),background .2s}
.lp-coin-btn:hover{transform:translateY(-1px)}
.lp-coin-btn:active{transform:scale(.96);transition-duration:.08s}

/* Footer. */
.lp-footer .footer-word{display:inline-block;transition:letter-spacing .5s var(--ease-out),color .3s}
.lp-footer .footer-word:hover{letter-spacing:-.4px;color:var(--blue)}

/* Progress hairline under the header. */
.lp-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0));z-index:60;pointer-events:none}

/* Dot pulse in the headline, once. */
.has-motion .lp-hero h1 .lp-dot{display:inline-block;animation:dotIn 1.2s var(--ease-out) .9s both}
@keyframes dotIn{0%{opacity:0;transform:translateY(.15em) scale(.6)}60%{opacity:1;transform:translateY(-.06em) scale(1.12)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .has-motion .rv,.has-motion .rv-line>span,.has-motion .lp-hero-art,.has-motion .lp-truth-list li::before,.lp-strip div::before{opacity:1;transform:none;transition:none;animation:none}
  .has-motion .lp-truth-list li{border-left-color:var(--blue)}
  .lp-steps li,.lp-open,.lp-ghost,.lp-coin-btn,.lp-brand-mark,.step-number,.lp-top{transition:none}
  .lp-steps li:hover,.lp-open:hover,.lp-ghost:hover{transform:none}
  .has-motion .lp-hero h1 .lp-dot{animation:none}
  .lp-progress{display:none}
}