/* =========================================================
   HALLOWEEN LAYER — Mr. D funnel (Oct 2026)
   To switch off: delete the <link> to this file on each page.
   Every seasonal element has class "sz" and is hidden by styles.css
   when this file isn't loaded.
   ========================================================= */
:root{ --pumpkin:#FF7A1A; --pumpkin-dark:#B04A08; --night:#120F1C; }

.sz{display:revert}
.sz-inline{display:inline-flex}
.sz-block{display:block}

/* Seasonal ribbon above the hero copy */
.sz-ribbon{align-items:center;gap:8px;margin:0 0 14px;padding:7px 12px 6px 8px;background:var(--night);border:2px solid var(--pumpkin);border-radius:3px;transform:rotate(-1deg);
  font:800 15px/1.1 var(--head);letter-spacing:.8px;text-transform:uppercase;color:var(--pumpkin)}
.sz-ribbon svg{flex:0 0 auto}

/* Bats in the hero */
.sz-bats{position:absolute;z-index:2;top:8px;right:6px;width:150px;height:110px;pointer-events:none}
.sz-bats svg{position:absolute;fill:#0B0A10;filter:drop-shadow(0 0 1px rgba(255,122,26,.55))}
.sz-bats .b1{width:58px;top:6px;right:8px;animation:sz-flap 2.6s ease-in-out infinite}
.sz-bats .b2{width:40px;top:52px;right:78px;animation:sz-flap 3.1s ease-in-out .4s infinite}
.sz-bats .b3{width:28px;top:20px;right:108px;animation:sz-flap 2.2s ease-in-out .9s infinite}
@keyframes sz-flap{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}

.sz-moon{display:none !important}

/* Pumpkin sticker on the offer card */
.oto-card{position:relative}
@media (max-width:859px){.oto-hero-grid{gap:44px}}
.sz-sticker{position:absolute;top:-58px;right:-4px;width:74px;height:74px;transform:rotate(10deg);pointer-events:none}
.sz-sticker svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}

/* "So good it's scary" line inside the price box */
.sz-treat{margin:-8px 0 16px !important;font:800 20px/1.15 var(--head) !important;letter-spacing:.5px;text-transform:uppercase;color:var(--pumpkin) !important}

/* Cobweb in the spotlight card corner */
.sz-web{position:absolute;top:0;right:0;width:84px;height:84px;pointer-events:none;opacity:.55}

/* Ghost in the close */
.sz-ghost{width:74px;height:auto;margin:0 auto 10px;animation:sz-float 3.4s ease-in-out infinite}
@keyframes sz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.sz-close-line{margin:6px 0 0 !important;font:800 22px/1.15 var(--head);text-transform:uppercase;color:var(--pumpkin-dark)}

/* Opt-in + confirmation touches */
.sz-note{align-items:center;gap:10px;margin:14px 0 0;font-weight:700;color:var(--pumpkin-dark)}
.oto .sz-note{color:var(--pumpkin)}

@media (min-width:860px){
  .sz-bats{top:4px;right:auto;left:36%;width:300px;height:64px}
  .sz-bats .b1{width:70px;top:2px;right:30px}
  .sz-bats .b2{width:46px;top:24px;right:150px}
  .sz-bats .b3{width:32px;top:6px;right:240px}
  .sz-sticker{top:-38px;right:-34px;width:110px;height:110px}
  .oto .sz-card-gap{margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .sz-bats svg,.sz-ghost{animation:none}
}