/* stickers stuck onto things (stickers.js) */
.stk { position: absolute; pointer-events: none; z-index: 3; }
.stk img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgba(40,30,20,.16)); }

/* shelf: something sitting at the end of the "New" line */
.drift-note { margin-top: 72px !important; }
.drift-note .dn-pill { position: relative; }
.stk-shelf { bottom: -6px; transform-origin: 50% 100%; }
.stk-shelf-sheep { width: 92px; right: -84px; transform: rotate(-4deg); }
.stk-shelf-duck { width: 104px; right: -96px; bottom: -8px; animation: stkWaddle 3.2s ease-in-out infinite; }
.stk-shelf-block { width: 54px; right: -48px; bottom: -4px; transform: rotate(9deg); }
.stk-shelf-rider { width: 120px; right: -112px; bottom: -10px; animation: stkRide 6s ease-in-out infinite; }
@keyframes stkWaddle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes stkRide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }

/* pricing card */
.pe-card { position: relative; }
.stk-price-pupik { width: 120px; right: 70px; top: -96px; z-index: -1; }
.stk-price-cup { width: 70px; right: -22px; top: -50px; transform: rotate(12deg); }
.stk-price-block { width: 82px; right: -26px; top: -34px; transform: rotate(12deg); }
.stk-price-etrog { width: 96px; right: -30px; top: -36px; transform: rotate(-10deg); }

/* FAQ astronaut */
.stk-astro-float { position: relative; display: block; width: 190px; margin-top: 40px; transform: rotate(-8deg); animation: stkFloat 7s ease-in-out infinite; }
@keyframes stkFloat { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-14px); } }
.stk-astro-peek { width: 230px; right: -70px; bottom: 120px; transform: rotate(-18deg); }
.fa-help-card { display: grid !important; grid-template-columns: 96px 1fr; column-gap: 26px; align-items: center; background: #F6F2EC; border-radius: 24px; padding: 26px 32px 26px 24px; }
.fa-help-card b, .fa-help-card span { grid-column: 2; }
.stk-astro-card { position: relative; grid-row: 1 / 3; width: 96px; margin: -54px 0 -10px; transform: rotate(-6deg); }

/* heroes: let the stickers sit over the photo's edge */
.o4 .pic { overflow: visible !important; }
.o1 .chero { position: relative; }
.stk-h { z-index: 3; }
@media (max-width: 900px) {
  .stk-h, .o1 .hsp, .o4 .pic .hsp { display: none; }
  .stk-shelf { display: none; }
  .stk-price-pupik { width: 84px; top: -68px; right: 30px; }
  .stk-astro-float { width: 120px; margin-top: 20px; }
  .stk-astro-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stk-shelf, .stk-astro-float { animation: none !important; } }
.stk-price-pupik { top: -112px; }
.stk-astro-peek { width: 210px; left: -66px; right: auto; bottom: 90px; transform: rotate(22deg); }
.fa-help-card { grid-template-columns: 130px 1fr; margin-top: 80px; }
.stk-astro-card { width: 130px; margin: -100px 0 -20px; }
/* more pricing options */
.stk-price-stand { width: 92px; right: 80px; top: -158px; }
.stk-price-side { width: 120px; right: -78px; top: 70px; z-index: -1; transform: rotate(12deg); }
.stk-price-pirate { width: 150px; right: 64px; top: -108px; z-index: -1; }
.stk-price-sheep { width: 120px; right: 70px; top: -80px; }
.stk-price-rider { width: 150px; right: 90px; top: -122px; }
.stk-price-doves { width: 120px; right: -50px; top: -86px; transform: rotate(-6deg); }
.stk-price-b1 { width: 72px; right: -20px; top: -30px; transform: rotate(8deg); }
.stk-price-b2 { width: 60px; right: 0; top: -84px; transform: rotate(-10deg); }
.stk-price-badge { right: -34px; top: -40px; width: 104px; height: 104px; border-radius: 50%; background: #F0B429; color: #1F2A2B; display: grid; place-content: center; text-align: center; font: 600 13px/1.1 "Outfit", sans-serif; letter-spacing: .04em; text-transform: uppercase; transform: rotate(12deg); box-shadow: 0 0 0 5px #fff, 0 14px 22px -8px rgba(40,30,20,.3); }
.stk-price-badge b { display: block; font: 400 40px/.9 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; color: #E8503A; }
.stk-price-ride { width: 170px; right: -196px; bottom: -2px; transform-origin: 50% 100%; animation: stkRide 6s ease-in-out infinite; }
.stk-price-ride img { filter: drop-shadow(0 6px 6px rgba(40,30,20,.12)); }
@media (max-width: 1300px) { .stk-price-ride { width: 130px; right: -40px; bottom: -70px; } }

/* livelier movement everywhere (the heroes' float and twinkle keyframes were missing, so they didn't move at all) */
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-18px) rotate(calc(var(--r, 0deg) + 5deg)); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: .35; transform: scale(.6) rotate(45deg); } }
.calm .fl { animation: floaty 5s ease-in-out infinite; }
.calm .hsp { animation: twinkle 3.2s ease-in-out infinite; }
.stk-shelf-duck { animation: stkWaddle 1.8s ease-in-out infinite; }
@keyframes stkWaddle { 0%, 100% { transform: rotate(-7deg) translateY(0); } 25% { transform: rotate(0deg) translateY(-5px); } 50% { transform: rotate(7deg) translateY(0); } 75% { transform: rotate(0deg) translateY(-5px); } }
.stk-price-ride { animation: stkRide2 5s ease-in-out infinite; }
@keyframes stkRide2 { 0%, 100% { transform: translateX(0) rotate(0deg); } 45% { transform: translateX(34px) rotate(-1.5deg); } 55% { transform: translateX(34px) rotate(0deg); } }
.stk-astro-peek { animation: stkPeek 6s ease-in-out infinite; }
@keyframes stkPeek { 0%, 100% { transform: rotate(22deg) translate(0, 0); } 50% { transform: rotate(14deg) translate(22px, -16px); } }
.stk-price-pupik, .stk-price-pirate { animation: stkBob 4s ease-in-out infinite; }
@keyframes stkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .calm .fl, .calm .hsp, .stk-shelf-duck, .stk-price-ride, .stk-astro-peek, .stk-price-pupik, .stk-price-pirate { animation: none !important; } }
/* each sticker can set how far it floats (--fy) and turns (--fr) */
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(var(--fy, -18px)) rotate(calc(var(--r, 0deg) + var(--fr, 5deg))); } }
/* the duck: a calmer wobble */
.stk-shelf-duck { animation: stkWaddle3 2.8s ease-in-out infinite; }
@keyframes stkWaddle3 { 0%, 100% { transform: rotate(-3deg) translateY(0); } 25% { transform: rotate(0deg) translateY(-2px); } 50% { transform: rotate(3deg) translateY(0); } 75% { transform: rotate(0deg) translateY(-2px); } }
/* the duck is a pull-along toy: it rolls a little forward and back instead of rocking */
.stk-shelf-duck { animation: stkRoll 4s ease-in-out infinite; }
@keyframes stkRoll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
/* phones: no hero stickers (they'd be cut off at the screen edge), no rider beside the plan card */
@media (max-width: 900px) {
  .calm .stk-h, .calm .pic .hsp { display: none !important; }
  .stk-price-ride { display: none !important; }
}