/* index.html page-only rules. Shared rules live in css/global.css. */
html{overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable}
body{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;background:#EDF2FF;color:#111A3D;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-transparency: reduce){[data-glass-btn]{background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}[data-glass-btn] > [aria-hidden="true"]{display:none !important}}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
[data-rail]{scrollbar-width:none;-ms-overflow-style:none}
[data-rail]::-webkit-scrollbar{display:none}
[data-tg-track]::-webkit-scrollbar{display:none}
[data-card]{touch-action:pan-y}
/* testimonial tiles show a video, never a real dropped photo — the image-slot's
   empty-state dashed ring would otherwise stay visible on all 4 edges forever */
[data-tg-media] image-slot::part(ring){display:none}
/* Same reason, for the product cards: image-slot only sets data-filled for
   a dropped image, so an author-supplied src leaves the dashed drop ring
   painted on top of real artwork. */
[data-app-art] image-slot::part(ring){display:none}
/* and the how-it-works step art, which carries an author-supplied src in
   both the mobile deck and the desktop tab panels */
image-slot[id^="v5-step-"]::part(ring){display:none}
@keyframes bnBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes bnStep{0%,100%{opacity:.28}12%,26%{opacity:1}}
@keyframes bnPing{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.4);opacity:0}}
@keyframes bnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bnGlow{0%,100%{text-shadow:0 0 22px rgba(255,255,0,.4)}50%{text-shadow:0 0 46px rgba(255,255,0,.8)}}
@keyframes bnTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bnDrift{0%{transform:translate(0,0)}100%{transform:translate(-50px,40px)}}
@keyframes bnFall{0%{transform:translateY(-2px);opacity:0}14%{opacity:1}82%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes bnBar{0%{width:6%}100%{width:100%}}
@keyframes bnJitter{0%,100%{transform:translate(0,0)}20%{transform:translate(-.4px,.3px)}40%{transform:translate(.4px,-.3px)}60%{transform:translate(-.3px,.4px)}80%{transform:translate(.3px,-.4px)}}
@keyframes bnRattle{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1.6px) rotate(-.4deg)}50%{transform:translate(3px,-1.6px) rotate(.4deg)}75%{transform:translate(-1.8px,2.2px) rotate(-.3deg)}}
@keyframes bnConfetti{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.9}100%{transform:translateY(46px) rotate(var(--r,8deg));opacity:0}}
@keyframes bnShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
@keyframes bnLed{0%,100%{opacity:.35;box-shadow:0 0 0 rgba(0,212,106,0)}50%{opacity:1;box-shadow:0 0 8px rgba(0,212,106,.9)}}
@keyframes bnHead{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes bnRing{0%{transform:scale(.65);opacity:.85}100%{transform:scale(2.1);opacity:0}}
/* hero transaction-card ambient loops (chrome "Live" dot, network pulse ring):
   these run forever regardless of the orchestrated story below, so give them
   an explicit reduced-motion opt-out — narrowly scoped to this card's two
   [data-anim-deco] elements, not a site-wide sweep of every bnBlink/bnFall use */
@media (prefers-reduced-motion: reduce){[data-anim-deco]{animation:none !important}}