/* Reach & Reward motion system v4.4 · applies to every page, desktop and mobile
   Tokens: ease cubic-bezier(.2,.7,.2,1) · load rise 16px / 0.6s · scroll rise 24px / 0.7s
           slide 40px · scale from .96 · count and bar grow 1.2s · stagger step 0.08s (up to 8 items)
   On load (hero only)
     data-rr="load"          rises and fades in once (sequence with --rr-delay)
     data-rr="load-grow"     bar grows left to right
   On scroll (every section below the hero)
     data-rr="reveal"        section headings, intro copy and CTAs rise and fade in
     data-rr="stagger"       direct children (cards, list rows, steps, FAQ items) reveal one after another
     data-rr="reveal-scale"  product mockups and screenshots rise and settle from 96% scale
     data-rr="reveal-left"   visual slides in from the left (alternating layouts)
     data-rr="reveal-right"  visual slides in from the right (alternating layouts)
     data-rr="drift"         decorative shapes move gently against the scroll (parallax, decor only)
   Rules: only opacity and transform animate. Each element reveals once. Without the script, or with
   reduced motion on, everything shows in its final state; drift needs scroll-driven animation support
   and is simply static elsewhere. */
:root{--rr-ease:cubic-bezier(.2,.7,.2,1);--rr-rise:16px;--rr-dur:.6s;--rr-long:1.2s;--rr-scroll-rise:24px;--rr-scroll-dur:.7s;--rr-slide:40px}
@keyframes rr-rise{from{opacity:0;transform:translateY(var(--rr-rise))}to{opacity:1;transform:none}}
@keyframes rr-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-rr="load"]{animation:rr-rise var(--rr-dur) var(--rr-ease) both;animation-delay:var(--rr-delay,0s)}
[data-rr="load-grow"]{transform-origin:left center;animation:rr-grow var(--rr-long) var(--rr-ease) both;animation-delay:var(--rr-delay,0s)}
[data-rr-js] [data-rr="reveal"],[data-rr-js] [data-rr="stagger"]>*,[data-rr-js] [data-rr="reveal-scale"],[data-rr-js] [data-rr="reveal-left"],[data-rr-js] [data-rr="reveal-right"]{opacity:0;transition:opacity var(--rr-scroll-dur) var(--rr-ease),transform var(--rr-scroll-dur) var(--rr-ease);transition-delay:var(--rr-delay,0s)}
[data-rr-js] [data-rr="reveal"],[data-rr-js] [data-rr="stagger"]>*{transform:translateY(var(--rr-scroll-rise))}
[data-rr-js] [data-rr="reveal-scale"]{transform:translateY(var(--rr-scroll-rise)) scale(.96)}
[data-rr-js] [data-rr="reveal-left"]{transform:translateX(calc(var(--rr-slide) * -1))}
[data-rr-js] [data-rr="reveal-right"]{transform:translateX(var(--rr-slide))}
[data-rr-js] [data-rr="reveal"][data-rr-in],[data-rr-js] [data-rr="stagger"][data-rr-in]>*,[data-rr-js] [data-rr="reveal-scale"][data-rr-in],[data-rr-js] [data-rr="reveal-left"][data-rr-in],[data-rr-js] [data-rr="reveal-right"][data-rr-in]{opacity:1;transform:none}
[data-rr="stagger"]>:nth-child(2){transition-delay:.08s}
[data-rr="stagger"]>:nth-child(3){transition-delay:.16s}
[data-rr="stagger"]>:nth-child(4){transition-delay:.24s}
[data-rr="stagger"]>:nth-child(5){transition-delay:.32s}
[data-rr="stagger"]>:nth-child(6){transition-delay:.4s}
[data-rr="stagger"]>:nth-child(7){transition-delay:.48s}
[data-rr="stagger"]>:nth-child(n+8){transition-delay:.56s}
@supports (animation-timeline: view()){
@keyframes rr-drift{from{transform:translateY(-28px)}to{transform:translateY(28px)}}
[data-rr="drift"]{animation:rr-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@media (prefers-reduced-motion: reduce){[data-rr],[data-rr]>*{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
@media print{[data-rr],[data-rr]>*{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
/* v4 · section layering (all pages)
   data-rr-stack       container whose cards stick and stack as you scroll (wide, tall screens only;
                       each earlier card stays visible as a 64px title strip; a spacer after the last card (data-rr-stack-spacer) lets it settle before the stack scrolls away). Smaller screens: a plain list.
   data-rr-sheet       full-width panel that overlaps the section above with a rounded top and slides up
                       into place as it enters (scroll-linked where supported, static overlap elsewhere)
   data-rr-curve       full-width section whose bottom edge becomes an arch of the next section's colour
                       (set --rr-curve-color inline when the next section is not #f8fafd) */
[data-rr-stack]{display:flex;flex-direction:column;gap:24px}
[data-rr-stack]>*{position:relative}
[data-rr-stack]>:nth-child(2){--rr-i:1}[data-rr-stack]>:nth-child(3){--rr-i:2}[data-rr-stack]>:nth-child(4){--rr-i:3}[data-rr-stack]>:nth-child(5){--rr-i:4}[data-rr-stack]>:nth-child(6){--rr-i:5}
[data-rr-stack]>[data-rr-stack-spacer]{position:static;height:0;margin-top:-24px}
@media (min-width:1024px) and (min-height:720px){
[data-rr-stack]{gap:40px}
[data-rr-stack]>*{position:sticky;top:calc(24px + var(--rr-i,0) * 64px)}
[data-rr-stack]>[data-rr-stack-spacer]{position:static;height:360px;margin-top:0}
}
[data-rr-sheet]{position:relative;z-index:1;margin-top:-40px;border-radius:40px 40px 0 0;box-shadow:0 -16px 40px rgba(7,11,31,.18)}
@media (max-width:600px){[data-rr-sheet]{margin-top:-28px;border-radius:28px 28px 0 0}}
@supports (animation-timeline: view()){
@keyframes rr-sheet{from{transform:translateY(72px)}to{transform:none}}
[data-rr-sheet]{animation:rr-sheet linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
[data-rr-curve]{position:relative}
[data-rr-curve]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--rr-curve-h,72px);background:var(--rr-curve-color,#f8fafd);border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}
@media (max-width:600px){[data-rr-curve]{--rr-curve-h:28px}}
@media (prefers-reduced-motion: reduce){[data-rr-sheet]{animation:none!important;transform:none!important}}
@media print{[data-rr-stack]>*{position:relative!important;top:auto!important}[data-rr-sheet]{animation:none!important;transform:none!important}}
/* v4.3 · detail motion
   data-rr="reveal-grow"  progress lines and bars grow left to right when they scroll into view
   data-rr="pop"          small badges and icons snap in (scale from 60% with a slight overshoot)
   data-rr-count="10000"  numbers count up from 0 when they scroll into view (data-rr-prefix="$"; markup keeps the final value)
   data-rr-pulse          a status dot sends out a soft ring, on a loop (decor only) */
[data-rr-js] [data-rr="reveal-grow"]{transform:scaleX(0);transform-origin:left center;transition:transform var(--rr-long) var(--rr-ease);transition-delay:var(--rr-delay,0s)}
[data-rr-js] [data-rr="reveal-grow"][data-rr-in]{transform:none}
@keyframes rr-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
[data-rr-js] [data-rr="pop"]{opacity:0}
[data-rr-js] [data-rr="pop"][data-rr-in]{animation:rr-pop .5s var(--rr-ease) both;animation-delay:var(--rr-delay,0s)}
[data-rr-pulse]{position:relative}
[data-rr-pulse]::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:rr-pulse 1.8s ease-out infinite}
@keyframes rr-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion: reduce){[data-rr-pulse]::after{animation:none!important;display:none}}
/* v4.4 · stacking on laptop-height windows (720-939px tall, e.g. a 14" MacBook Pro)
   strips shrink to 56px, the scroll room after the last card shrinks, and step cards
   (data-rr-stack-body) get tighter padding, type and visuals so each card fits on screen while stuck */
@media (min-width:1024px) and (min-height:720px) and (max-height:939px){
[data-rr-stack]{gap:32px}
[data-rr-stack]>*{top:calc(16px + var(--rr-i,0) * 56px)}
[data-rr-stack]>[data-rr-stack-spacer]{height:240px}
[data-rr-stack-body]{padding:0 40px 24px!important;gap:32px!important}
[data-rr-stack-body] h2{font-size:clamp(28px,2.5vw,36px)!important}
[data-rr-stack-body] p{font-size:16px!important}
[data-rr-stack-body] [role="img"]{aspect-ratio:16/4!important}
}