/* Pillo motion layer — additive, no source layout/content replaced. */
:root { --pillo-motion-ease: cubic-bezier(.22,1,.36,1); scroll-behavior:smooth; }
/* The original typography, surfaces and layouts remain owned by the mirror. */
.pillo-particle-field {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;isolation:isolate;contain:paint;}
.section-hero, .feature-template-hero, .hub-hero {position:relative;isolation:isolate;}
.pillo-particle {position:absolute;top:-72px;left:var(--pill-left,15%);display:block;width:var(--pill-width,36px);height:var(--pill-height,17px);border-radius:999px;opacity:0;will-change:transform,opacity;box-shadow:0 5px 12px rgba(44,59,76,.12),inset 0 -2px 3px rgba(30,45,65,.13),inset 0 2px 3px rgba(255,255,255,.73);background:linear-gradient(115deg,var(--pill-primary,#fff) 0%,var(--pill-primary,#fff) 49.2%,var(--pill-secondary,#8ccff0) 50%,var(--pill-secondary,#8ccff0) 100%);transform:translate3d(0,-75px,0) rotate(-24deg);}
.pillo-particle--tablet {width:var(--pill-height,23px);height:var(--pill-height,23px);background:radial-gradient(circle at 30% 27%,rgba(255,255,255,.9),transparent 42%),var(--pill-primary,#f8c7e8);border-radius:50%;}
.pillo-particle--tablet::after{content:"";position:absolute;top:48%;left:15%;width:70%;height:1px;background:rgba(66,83,103,.14);transform:rotate(-30deg)}
.pillo-particle--fall {animation:pillo-fall var(--pill-duration,4s) cubic-bezier(.32,.03,.6,.99) var(--pill-delay,0s) both;}
@keyframes pillo-fall {0%{opacity:0;transform:translate3d(0,-76px,0) rotate(var(--pill-rot,-24deg)) scale(.77)}10%{opacity:.72}70%{opacity:.66}88%{opacity:.6;transform:translate3d(var(--pill-drift,12px),var(--pill-y,660px),0) rotate(var(--pill-spin,420deg)) scale(1)}94%{opacity:.5;transform:translate3d(var(--pill-drift,12px),calc(var(--pill-y,660px) - 25px),0) rotate(var(--pill-spin,420deg)) scale(1)}100%{opacity:0;transform:translate3d(var(--pill-drift,12px),var(--pill-y,660px),0) rotate(var(--pill-spin,420deg)) scale(.98)}}
.pillo-particle--ambient {top:var(--pill-top,60%);opacity:.26;animation:pillo-drift var(--pill-duration,7s) ease-in-out var(--pill-delay,0s) infinite alternate;will-change:transform;}
@keyframes pillo-drift {0%{transform:translate3d(-3px,4px,0) rotate(-12deg)}100%{transform:translate3d(8px,-11px,0) rotate(12deg)}}
/* Decorative capsule bottle, added in empty edge space, never in a content column. */
.pillo-bottle-scene {position:absolute;inset:auto 1.5% 3% auto;width:105px;height:155px;pointer-events:none;z-index:1;opacity:.5;transform:translate3d(0,15px,0) rotate(4deg);transition:transform 1.2s var(--pillo-motion-ease),opacity .8s ease;}
.pillo-bottle-scene.pillo-bottle-visible {opacity:.66;transform:translate3d(0,0,0) rotate(-7deg)}
.pillo-bottle {position:absolute;bottom:7px;left:22px;width:57px;height:86px;border-radius:10px 10px 13px 13px;border:2px solid rgba(255,255,255,.7);background:linear-gradient(110deg,rgba(255,255,255,.65),rgba(195,225,246,.36) 45%,rgba(255,255,255,.6));box-shadow:0 9px 22px rgba(62,87,103,.1),inset 9px 0 10px rgba(255,255,255,.35);}
.pillo-bottle::before {content:"";position:absolute;left:5px;right:5px;top:25px;height:31px;border-radius:4px;background:linear-gradient(135deg,#f8faff,#dbf2fa);box-shadow:inset 0 0 0 1px rgba(72,136,174,.12)}
.pillo-bottle::after {content:"";position:absolute;left:18px;top:35px;width:19px;height:13px;border-radius:20px;background:linear-gradient(90deg,#8bd6e5 50%,#fbc6c5 50%);transform:rotate(-25deg)}
.pillo-bottle-cap{position:absolute;left:19px;bottom:90px;width:64px;height:19px;border-radius:5px;background:repeating-linear-gradient(90deg,#e6eef7 0 5px,#d8e6f4 5px 7px);box-shadow:0 3px 6px rgba(69,83,110,.15);transform-origin:90% 80%;transition:transform .8s var(--pillo-motion-ease)}
.pillo-bottle-visible .pillo-bottle-cap{transform:translate(15px,-13px) rotate(31deg)}
.pillo-bottle-drop{position:absolute;bottom:87px;left:51px;width:20px;height:9px;border-radius:20px;background:linear-gradient(90deg,#f7abc9 50%,#c6e9f0 50%);opacity:0;transform:translateY(-6px) rotate(0);}
.pillo-bottle-visible .pillo-bottle-drop{animation:pillo-bottle-spill 1.2s ease-out both;animation-delay:.25s}
.pillo-bottle-drop:nth-child(4){animation-delay:.4s;--spill-x:38px;--spill-r:270deg;--spill-y:68px;background:linear-gradient(90deg,#a2b8f8 50%,#f9d4bd 50%)}
.pillo-bottle-drop:nth-child(5){animation-delay:.6s;--spill-x:-22px;--spill-r:390deg;--spill-y:48px;background:linear-gradient(90deg,#e3e4ff 50%,#96decc 50%)}
@keyframes pillo-bottle-spill{0%{opacity:0;transform:translateY(-6px) rotate(0)}12%{opacity:.9}84%{opacity:.86}100%{opacity:.65;transform:translate(var(--spill-x,23px),var(--spill-y,60px)) rotate(var(--spill-r,220deg))}}
/* Extra responsiveness without imposing layout changes. */
.pillo-enhancements-loaded .feature-card,.pillo-enhancements-loaded .donation-card,.pillo-enhancements-loaded .blog-item,.pillo-enhancements-loaded .feedback-card {transition:transform .28s var(--pillo-motion-ease),box-shadow .28s ease,filter .28s ease;}
@media(hover:hover) and (pointer:fine){.pillo-enhancements-loaded .feature-card:hover,.pillo-enhancements-loaded .donation-card:hover,.pillo-enhancements-loaded .blog-item:hover {transform:translate3d(0,-4px,0);box-shadow:0 12px 30px rgba(28,56,80,.12)}
.pillo-enhancements-loaded .button-primary-1,.pillo-enhancements-loaded .hero-button a,.pillo-enhancements-loaded .link-block {transition:transform .18s var(--pillo-motion-ease),filter .18s ease;}
.pillo-enhancements-loaded .button-primary-1:hover,.pillo-enhancements-loaded .hero-button a:hover,.pillo-enhancements-loaded .link-block:hover {transform:translateY(-2px);filter:brightness(1.05)}
.pillo-enhancements-loaded .button-primary-1:active,.pillo-enhancements-loaded .hero-button a:active,.pillo-enhancements-loaded .link-block:active {transform:translateY(1px) scale(.985)} }
.pillo-reveal-ready {opacity:0!important;translate:0 18px;transition:opacity .7s var(--pillo-motion-ease),translate .7s var(--pillo-motion-ease);}
.pillo-reveal-ready.pillo-reveal-visible {opacity:1!important;translate:0 0;}
/* Fixed top reading progress is independent of existing page geometry. */
.pillo-reading-progress {position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;pointer-events:none;}
.pillo-reading-progress::before{content:"";display:block;width:100%;height:100%;transform:scaleX(var(--pillo-progress,0));transform-origin:0 50%;background:linear-gradient(90deg,#74cbe3,#8e99ff,#f4b7d7);box-shadow:0 0 9px rgba(114,165,223,.25);}
.pillo-back-to-top {position:fixed;right:20px;bottom:24px;z-index:200;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(140,174,202,.34);color:#305a76;background:rgba(255,255,255,.94);font:600 21px/1 sans-serif;box-shadow:0 8px 26px rgba(25,53,74,.13);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .24s,transform .24s;}
.pillo-back-to-top.pillo-back-to-top-visible {opacity:1;transform:translateY(0);pointer-events:auto;}
.pillo-back-to-top:hover {transform:translateY(-3px)}
.pillo-back-to-top:focus-visible{outline:3px solid #62b9df;outline-offset:3px}
/* Original headings are unchanged; existing table-of-contents links can receive an active indicator. */
.pillo-toc-active {text-decoration:underline!important;text-underline-offset:4px;}
@media(max-width:767px){.pillo-particle-field{opacity:.5}.pillo-bottle-scene{display:none}.pillo-back-to-top{right:12px;bottom:15px;width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.pillo-particle-field,.pillo-bottle-scene{display:none!important}.pillo-reveal-ready{opacity:1!important;translate:none!important}.pillo-enhancements-loaded .feature-card,.pillo-enhancements-loaded .donation-card,.pillo-enhancements-loaded .blog-item,.pillo-enhancements-loaded .feedback-card,.pillo-enhancements-loaded .button-primary-1,.pillo-enhancements-loaded .hero-button a,.pillo-enhancements-loaded .link-block{transition:none!important;animation:none!important}}

/* ===== v2: physics capsule rain, page transitions, loader, nav polish ===== */
.pillo-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:strict}
.pillo-3d{position:absolute;left:0;top:0;display:block;border-radius:999px;opacity:0;will-change:transform,opacity;
 background:linear-gradient(90deg,var(--a,#4276fc) 0 50%,var(--b,#fff) 50% 100%);
 box-shadow:inset 0 -4px 6px rgba(10,30,80,.22),inset 0 3px 4px rgba(255,255,255,.75),0 8px 16px rgba(10,30,80,.22)}
.pillo-3d::before{content:"";position:absolute;left:14%;right:14%;top:14%;height:24%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.pillo-3d::after{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:1px;background:rgba(10,30,80,.14)}
.pillo-3d--tablet{border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,var(--a,#e2eeff) 46%,color-mix(in srgb,var(--a,#e2eeff) 78%,#5a6f99) 100%)}
.pillo-3d--tablet::before{left:20%;right:auto;width:30%;top:18%;height:22%}
.pillo-3d--tablet::after{left:16%;right:16%;width:auto;top:50%;bottom:auto;height:1px;transform:rotate(-28deg)}
.section-testimonial,.section-blog{isolation:isolate}

/* Page transitions: purely decorative overlays, never intercept clicks. */
.pillo-transition{position:fixed;inset:0;z-index:2147482000;pointer-events:none;overflow:hidden}
.pillo-transition-pill{top:var(--y,50vh);opacity:0}
.pillo-transition--out .pillo-transition-pill{left:-80px;animation:pillo-sweep .75s cubic-bezier(.55,.06,.3,1) var(--dl,0s) forwards}
@keyframes pillo-sweep{0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--r0,0deg))}15%{opacity:.95}100%{opacity:.95;transform:translate3d(calc(100vw + 160px),-8vh,0) rotate(var(--r1,360deg))}}
.pillo-transition--in .pillo-transition-pill{left:50%;top:50%;animation:pillo-disperse .85s cubic-bezier(.16,.84,.3,1) var(--dl,0s) forwards}
@keyframes pillo-disperse{0%{opacity:.95;transform:translate3d(-50%,-50%,0) rotate(var(--r0,0deg)) scale(.6)}100%{opacity:0;transform:translate3d(calc(-50% + var(--dx,20vw)),calc(-50% + var(--dy,10vh)),0) rotate(var(--r1,360deg)) scale(1)}}
/* Native cross-document fade where supported (Chrome/Edge); harmless elsewhere. */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:pillo-vt-out .22s ease both}
 ::view-transition-new(root){animation:pillo-vt-in .32s cubic-bezier(.22,1,.36,1) both}
}
@keyframes pillo-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes pillo-vt-in{from{opacity:0;transform:translateY(8px)}}

/* Pill loader — only appears while something is genuinely loading. */
.pillo-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pillo-loader{display:flex;align-items:center;gap:10px;pointer-events:none;z-index:2147482500}
.pillo-loader-capsule{position:relative;display:flex;width:34px;height:15px;animation:pillo-loader-spin 1.4s cubic-bezier(.6,.05,.3,1) infinite;filter:drop-shadow(0 3px 5px rgba(44,102,252,.25))}
.pillo-loader-capsule i{display:block;width:50%;height:100%;animation:pillo-loader-split 1.4s ease-in-out infinite}
.pillo-loader-capsule i:first-child{border-radius:999px 0 0 999px;background:linear-gradient(180deg,#6f97ff,#2c66fc)}
.pillo-loader-capsule i:last-child{border-radius:0 999px 999px 0;background:linear-gradient(180deg,#fff,#dfe8ff);box-shadow:inset 0 0 0 1px rgba(44,102,252,.18);animation-name:pillo-loader-split-r}
@keyframes pillo-loader-spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes pillo-loader-split{0%,20%,80%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes pillo-loader-split-r{0%,20%,80%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.pillo-loader-dots{display:flex;gap:4px}
.pillo-loader-dots b{width:6px;height:6px;border-radius:50%;background:#4276fc;opacity:.3;animation:pillo-dot 1s ease-in-out infinite}
.pillo-loader-dots b:nth-child(2){animation-delay:.15s}.pillo-loader-dots b:nth-child(3){animation-delay:.3s}
@keyframes pillo-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.pillo-loader--chip{position:fixed;left:50%;top:84px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(25,53,74,.16);transform:translate(-50%,-8px);opacity:0;transition:opacity .2s ease,transform .25s ease}
.pillo-loader--chip.is-on{opacity:1;transform:translate(-50%,0)}
.pillo-loader--page{position:fixed;left:50%;top:50%;padding:16px 20px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(25,53,74,.18);transform:translate(-50%,-50%);animation:pillo-loader-in .25s ease both}
@keyframes pillo-loader-in{from{opacity:0;transform:translate(-50%,-40%)}}

/* Navigation: gentle capsule indicator on hover and for the current page. */
.pillo-enhancements-loaded .nav-right>a.nav-link{position:relative;transition:color .2s ease,opacity .2s ease}
.pillo-enhancements-loaded .nav-right>a.nav-link::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:5px;border-radius:999px;background:linear-gradient(90deg,#4276fc 50%,#9ec0ff 50%);transform:translateX(-50%) scaleX(0);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease;pointer-events:none}
@media(hover:hover){.pillo-enhancements-loaded .nav-right>a.nav-link:hover::after{transform:translateX(-50%) scaleX(1);opacity:1}}
.pillo-enhancements-loaded .nav-right>a.nav-link.w--current::after{transform:translateX(-50%) scaleX(1);opacity:1}
.pillo-enhancements-loaded .mobile-menu-link{transition:transform .2s ease,color .2s ease}
.pillo-enhancements-loaded .mobile-menu-link:active{transform:translateX(4px)}

/* Blog search feedback */
.pillo-searching{position:relative}
.pillo-searching::after{content:"";position:absolute;right:46px;top:50%;width:22px;height:10px;margin-top:-5px;border-radius:999px;background:linear-gradient(90deg,#4276fc 50%,#cfdcff 50%);animation:pillo-loader-spin .7s linear infinite;pointer-events:none}
.pillo-search-in{animation:pillo-search-in .35s cubic-bezier(.22,1,.36,1) var(--sd,0s) both}
@keyframes pillo-search-in{from{opacity:0;transform:translateY(6px)}}

/* Bottle: tilt as the cap pops and capsules spill out. */
.pillo-bottle-scene.pillo-bottle-visible{animation:pillo-bottle-tilt 1.8s cubic-bezier(.3,.7,.3,1) both}
@keyframes pillo-bottle-tilt{0%{transform:translate3d(0,15px,0) rotate(4deg)}35%{transform:translate3d(0,0,0) rotate(-24deg)}60%{transform:translate3d(0,0,0) rotate(-14deg)}100%{transform:translate3d(0,0,0) rotate(-7deg)}}

@media(max-width:767px){.pillo-rain{opacity:.75}}
@media(prefers-reduced-motion:reduce){.pillo-rain,.pillo-transition{display:none!important}.pillo-loader-capsule,.pillo-loader-capsule i,.pillo-loader-dots b,.pillo-searching::after{animation:none!important}.pillo-search-in{animation:none!important}.pillo-bottle-scene{animation:none!important}.pillo-enhancements-loaded .nav-right>a.nav-link::after{transition:none}}
/* Keep the added "Our Team" item on one line at narrower desktop widths. */
.nav-right>a.nav-link[data-nav-link="our-team"]{white-space:nowrap}
@media(min-width:992px) and (max-width:1139px){.navbar .nav-right>a.nav-link.pillo-hide-on-mobile{padding-left:9px;padding-right:9px}}
