/* Elf Watch motion pass (Nov 2026 design tweak). Loaded after site-theme.css and the page's own CSS, with
   /js/pizzazz.js. To switch it all off, remove those two lines from a page; nothing else changed.
   What it does:
     - a new snow cap: one drift drawn to fit each panel exactly (soft lumps, rounded drips, a little sparkle),
       replacing the repeating icicle strip
     - panels, pictures and headings come in as you scroll (rise, zoom out, slide from the side, bounce)
     - parallax: the night sky drifts, pictures move inside their frames, the phone and shop boxes float
     - livelier buttons: a light sweep, a springy lift on hover, a nudge on the main "Spot my elf"
   Everything waits for js/pizzazz.js to add html.pz, and nothing moves for people who ask for less motion. */

:root{--pz-spring:cubic-bezier(.34,1.56,.64,1);--pz-out:cubic-bezier(.16,1,.3,1)}

/* ---------- the snow cap ---------- */
/* pizzazz.js draws .pz-snow inside each capped panel; the old repeating strip is switched off there */
.pz-capped::after,.pz-capped-b::before{display:none!important}
.pz-snow{position:absolute;z-index:4;pointer-events:none;height:64px;overflow:visible}
.pz-snow svg{display:block;width:100%;height:100%;overflow:visible}
.pz-snow .pz-twinkle{animation:pzTwinkle 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pzTwinkle{0%,100%{opacity:0;transform:scale(.3)}45%,55%{opacity:1;transform:scale(1)}}

/* ---------- the night sky drifts a little as you scroll ---------- */
html.pz body::before{transform:translate3d(0,var(--pz-sky,0px),0) scale(1.12)!important;transform-origin:50% 0!important;will-change:transform}

/* ---------- things that come in as you scroll ---------- */
html.pz [data-pz]{opacity:0;transition:opacity .55s var(--pz-out),transform 1.4s var(--pz-out),filter .9s var(--pz-out);transition-delay:var(--pz-d,0s)}
html.pz [data-pz="up"]{transform:translate3d(0,90px,0) scale(.94)}
html.pz [data-pz="left"]{transform:translate3d(-160px,0,0) rotate(-3deg)}
html.pz [data-pz="right"]{transform:translate3d(160px,0,0) rotate(3deg)}
html.pz [data-pz="zoom"]{transform:scale(1.35) rotate(2deg);filter:blur(14px) brightness(1.6)}
html.pz [data-pz="pop"]{transform:translate3d(0,70px,0) scale(.6) rotate(-6deg);transition-timing-function:var(--pz-out),var(--pz-spring),var(--pz-out)}
html.pz [data-pz="panel"]{transform:perspective(1400px) translate3d(0,140px,0) rotateX(14deg) scale(.9);transform-origin:50% 0}
html.pz [data-pz].pz-in{opacity:1;transform:none;filter:none}
/* the snow cap settles onto its panel just after the panel arrives */
html.pz [data-pz="panel"]>.pz-snow{opacity:0;transform:translateY(-70px) scaleY(.6);transition:opacity .5s ease .45s,transform 1s var(--pz-spring) .45s}
html.pz [data-pz="panel"].pz-in>.pz-snow{opacity:1;transform:none}

/* headings: each word rises into place */
html.pz .pz-w{display:inline-block;opacity:0;transform:translate3d(0,1.1em,0) rotate(12deg) scale(.7);filter:blur(4px);transform-origin:0 100%;
  transition:opacity .6s var(--pz-out),transform .9s var(--pz-spring),filter .6s ease;transition-delay:calc(var(--pz-hd,0s) + var(--i,0) * 70ms)}
html.pz .pz-words-in .pz-w{opacity:1;transform:none;filter:none}

/* ---------- parallax inside frames (pizzazz.js sets --pz-y on each) ---------- */
html.pz .hm-step__pic{overflow:hidden}
html.pz .hm-step__pic img{transform:translate3d(0,var(--pz-y,0px),0) scale(1.16);transition:transform .2s linear}
html.pz .hm-step:hover .hm-step__pic img{transform:translate3d(0,var(--pz-y,0px),0) scale(1.24);transition:transform .7s var(--pz-out)}
html.pz .hm-phone{translate:0 var(--pz-y,0px);rotate:var(--pz-r,0deg)}
html.pz .hm-products img{translate:0 var(--pz-y,0px)}
html.pz .hm-coming__vid{overflow:hidden}

/* ---------- cards lift on hover ---------- */
.hm-step,.hm-stat,.hm-products li,.hm-coming__list li,.hm-faq details{transition:transform .5s var(--pz-spring),box-shadow .5s var(--pz-out),opacity .9s var(--pz-out)}
@media(hover:hover){
  .hm-step:hover{transform:translateY(-8px) rotate(-.4deg)!important;box-shadow:0 26px 44px -18px rgba(11,29,77,.55)}
  .hm-stat:hover{transform:translateY(-6px) scale(1.03)!important;background:rgba(255,255,255,.11)}
  .hm-products li:hover{transform:translateY(-8px) rotate(1deg)!important}
  .hm-faq details:hover{transform:translateX(6px)!important}
}
.hm-products img{filter:drop-shadow(0 16px 18px rgba(11,29,77,.28))}

/* ---------- the numbers glow as they count up ---------- */
.hm-stat__n.pz-counting{text-shadow:0 0 18px rgba(245,194,74,.55)}

/* ---------- buttons: a light sweep, a springy lift ---------- */
:is(.ew-home .button,.hm-bill__cta,.hm-more,.ew-header a.ew-header__cta,main .g-cta a,main a.button){position:relative;isolation:isolate;
  transition:transform .45s var(--pz-spring),box-shadow .3s ease,background-color .2s!important}
:is(.ew-home .button,.hm-bill__cta,.hm-more,.ew-header a.ew-header__cta,main .g-cta a,main a.button)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;
  animation:pzSweep 4.5s ease-in-out infinite}
.hm-bill__cta::before{background-image:linear-gradient(105deg,transparent 35%,rgba(91,140,255,.28) 50%,transparent 65%)}
@keyframes pzSweep{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
@media(hover:hover){
  :is(.ew-home .button,.hm-bill__cta,.hm-more,.ew-header a.ew-header__cta,main .g-cta a,main a.button):hover{transform:translateY(-3px) scale(1.04)!important}
}
:is(.ew-home .button,.hm-bill__cta,.hm-more,.ew-header a.ew-header__cta):active{transform:translateY(2px) scale(.98)!important}
/* the main "Spot my elf": a little hop every few seconds, and a soft gold halo */
html.pz .hm-hero .hm-cta{animation:pzHop 6s var(--pz-out) 2.4s infinite}
html.pz .hm-hero .hm-cta:hover{animation-play-state:paused}
.hm-hero .hm-cta{box-shadow:0 5px 0 #9F1D2B,0 12px 24px rgba(0,0,0,.28),0 0 0 0 rgba(245,194,74,.55)}
@keyframes pzHop{0%,82%,100%{transform:none}86%{transform:translateY(-7px) scale(1.04)}90%{transform:translateY(0) scale(.99)}93%{transform:translateY(-3px)}96%{transform:none}}
.hm-faq details[open] summary::after{transform:rotate(180deg)}
.hm-faq summary::after{transition:transform .4s var(--pz-spring),background .2s}
.hm-faq summary:hover::after{background:var(--ewn-gold)}

/* ---------- the menu: baubles hanging from the garland (computers; phones keep the drop-down list) ---------- */
@media(min-width:961px),(orientation:landscape) and (min-width:600px) and (max-width:960px) and (max-height:520px){
  /* the menu's links join the header grid: three baubles either side, the logo dead centre (the empty 1fr
     columns at each end are the same size, so nothing can push it off centre); "Track my elf" is the
     sliding bauble on the right (.pz-slider), so the header's own button is hidden here */
  .ew-header .ew-header__in{display:grid!important;grid-template-columns:1fr repeat(3,auto) auto repeat(3,auto) 1fr;
    align-items:start!important;column-gap:clamp(8px,1.2vw,18px)!important}
  .ew-header nav.ew-nav{display:contents!important}
  .ew-header nav.ew-nav a{grid-row:1}
  .ew-header nav.ew-nav a:nth-child(1){grid-column:2}.ew-header nav.ew-nav a:nth-child(2){grid-column:3}.ew-header nav.ew-nav a:nth-child(3){grid-column:4}
  .ew-header nav.ew-nav a:nth-child(4){grid-column:6}.ew-header nav.ew-nav a:nth-child(5){grid-column:7}.ew-header nav.ew-nav a:nth-child(6){grid-column:8}
  .ew-header a.ew-header__logo{grid-column:5;grid-row:1;justify-self:center;margin:0 clamp(4px,1.4vw,26px)!important}
  .ew-header :is(a.ew-header__cta,.free-stamp-wrap--nav){display:none!important}
  .ew-header nav.ew-nav a{--b:#D9283E;--b2:#7E0F1E;--drop:0px;position:relative;width:96px;height:96px;min-height:0!important;padding:9px!important;margin-top:calc(var(--drop) - 6px);
    border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;text-align:center;
    font:800 13px/1.12 'Plus Jakarta Sans','Inter',sans-serif!important;letter-spacing:.01em;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.45);text-decoration:none;
    background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 9%,transparent 24%),
      radial-gradient(circle at 70% 82%,rgba(255,255,255,.22),transparent 30%),
      radial-gradient(circle at 40% 35%,var(--b) 0,var(--b) 42%,var(--b2) 100%)!important;
    box-shadow:0 14px 26px rgba(0,0,0,.45),inset 0 -10px 18px rgba(0,0,0,.28),inset 0 4px 10px rgba(255,255,255,.3)!important;
    transform-origin:50% calc(-46px - var(--drop));animation:pzBauble 4.6s ease-in-out infinite;transition:scale .45s var(--pz-spring),filter .3s}
  /* the gold cap and the ribbon up to the garland */
  .ew-header nav.ew-nav a::before{content:"";position:absolute;top:-12px;left:50%;width:30px;height:16px;margin-left:-15px;border-radius:5px 5px 3px 3px;
    background:linear-gradient(90deg,#9A6B1F,#F7DC8C 45%,#C9963A 70%,#9A6B1F);box-shadow:0 2px 3px rgba(0,0,0,.3)}
  .ew-header nav.ew-nav a::after{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;width:2px;height:calc(44px + var(--drop) + var(--cur,0px));margin-left:-1px;background:linear-gradient(#C9963A,#F7DC8C)}
  .ew-header nav.ew-nav a:nth-child(6n+1){--b:#F6F8FC;--b2:#9AA4B8;--drop:4px;color:#0B1D4D!important;text-shadow:0 1px 0 rgba(255,255,255,.6)}
  .ew-header nav.ew-nav a:nth-child(6n+2){--b:#E7B53A;--b2:#8A5A0E;--drop:26px;color:#3A2400!important;text-shadow:0 1px 0 rgba(255,255,255,.4);animation-delay:-1.1s}
  .ew-header nav.ew-nav a:nth-child(6n+3){--b:#1F9A55;--b2:#0B4A27;--drop:12px;animation-delay:-2.3s}
  .ew-header nav.ew-nav a:nth-child(6n+4){--b:#3B6FE0;--b2:#132E7A;--drop:12px;animation-delay:-.6s}
  .ew-header nav.ew-nav a:nth-child(6n+5){--b:#E0283F;--b2:#7E0F1E;--drop:26px;animation-delay:-3.1s}
  .ew-header nav.ew-nav a:nth-child(6n+6){--b:#B04FD8;--b2:#4D1468;--drop:4px;animation-delay:-1.8s}
  .ew-header nav.ew-nav a:hover{scale:1.14;filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,226,140,.75));animation-duration:1.1s;
    color:#fff!important;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 9%,transparent 24%),radial-gradient(circle at 40% 35%,var(--b) 0,var(--b) 42%,var(--b2) 100%)!important}
  .ew-header nav.ew-nav a:nth-child(6n+2):hover{color:#3A2400!important}.ew-header nav.ew-nav a:nth-child(6n+1):hover{color:#0B1D4D!important}
  /* the page you're on: its bauble hangs lower on a longer string */
  .ew-header nav.ew-nav a[aria-current="page"]{--cur:42px;top:var(--cur);box-shadow:0 0 0 4px #F5C24A,0 0 26px 6px rgba(245,194,74,.65),0 14px 26px rgba(0,0,0,.45),inset 0 -10px 18px rgba(0,0,0,.28)!important}
  html.pz .ew-header nav.ew-nav a{opacity:0;translate:0 -160px;transition:translate 1.3s var(--pz-spring),opacity .5s ease,scale .45s var(--pz-spring),filter .3s;transition-delay:calc(var(--n,0) * 110ms + .2s),calc(var(--n,0) * 110ms + .2s),0s,0s}
  html.pz.pz-ready .ew-header nav.ew-nav a{opacity:1;translate:0 0}
}
@keyframes pzBauble{0%,100%{rotate:-4deg}50%{rotate:4deg}}
/* phones: each menu item gets its own little bauble */
@media (max-width:960px) and (orientation:portrait),(max-width:599px),(max-width:960px) and (min-height:521px){
  .ew-header nav.ew-nav a{gap:12px}
  .ew-header nav.ew-nav a::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,#fff 0,rgba(255,255,255,.4) 14%,transparent 34%),var(--b,#E0283F);box-shadow:0 0 10px var(--b,#E0283F)}
  .ew-header nav.ew-nav a:nth-child(6n+1)::before{--b:#F6F8FC}.ew-header nav.ew-nav a:nth-child(6n+2)::before{--b:#E7B53A}.ew-header nav.ew-nav a:nth-child(6n+3)::before{--b:#1F9A55}
  .ew-header nav.ew-nav a:nth-child(6n+4)::before{--b:#3B6FE0}.ew-header nav.ew-nav a:nth-child(6n+5)::before{--b:#E0283F}.ew-header nav.ew-nav a:nth-child(6n+6)::before{--b:#B04FD8}
}

/* ---------- the logo: no bauble, bigger, in the middle ---------- */
/* the homepage hides the header's button (the hero has it), so hide the FREE stamp js/free-stamp.js wraps round it too */
body.ew-home .ew-header .free-stamp-wrap--nav{display:none!important}
.ew-header a.ew-header__logo{width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border-radius:0!important;animation:none!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(184,210,252,.35))}
.ew-header a.ew-header__logo::before,.ew-header a.ew-header__logo::after{content:none!important;display:none!important}
header.ew-header a.ew-header__logo img.ew-logo{width:clamp(200px,17vw,250px)!important;height:auto!important}
html.pz .ew-header a.ew-header__logo{opacity:0;scale:.6;transition:opacity .6s ease .1s,scale 1.1s var(--pz-spring) .1s}
html.pz.pz-ready .ew-header a.ew-header__logo{opacity:1;scale:1}
@media (max-width:960px) and (orientation:portrait),(max-width:599px),(max-width:960px) and (min-height:521px){
  /* phones: logo in the middle, the menu button on the left, the elf bauble on the right */
  .ew-header .ew-header__in{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center!important}
  .ew-header a.ew-header__logo{grid-column:2;grid-row:1;justify-self:center}
  /* the menu button on the left; on the right, the sliding "Track my elf" bauble drops down over the moon */
  .ew-header :is(a.ew-header__cta,.free-stamp-wrap--nav){display:none!important}
  .ew-header button.ew-header__toggle{grid-column:1;grid-row:1;justify-self:start;margin:0!important}
  header.ew-header a.ew-header__logo img.ew-logo{width:150px!important}
}
@media(max-width:400px){
  header.ew-header a.ew-header__logo img.ew-logo{width:124px!important}
  .ew-header a.ew-header__cta{font-size:14px!important;padding:0 12px!important}
}

/* ---------- "Track my elf": a bauble sliding down its string (on the left on computers and sideways phones, clear of the moon), an elf riding it with an IT'S FREE sign (computers) ----------
   pizzazz.js builds .pz-slider from the header's own button (same link, same words). The elf grips the string with
   one hand and holds the sign in the other; the bauble is the button. Phones keep the header's normal button. */
.pz-slider{display:none}
/* (every screen size: computers, phones on their side and upright phones each place and scale it below) */
@media all{
  .pz-slider{display:block;position:absolute;z-index:3;top:62px;width:140px;height:240px;left:max(56px,calc((100% - 980px) / 4 - 70px))}
  .pz-slider__swing{position:absolute;inset:0;transform-origin:70px -60px;animation:pzSlideSwing 5.5s ease-in-out infinite}
  .pz-slider__string{position:absolute;left:69px;top:-480px;width:2px;height:590px;background:linear-gradient(#C9963A,#F7DC8C 50%,#C9963A)}
  /* the elf is flipped so its raised hand grips the string and the sign hangs inwards, towards the page */
  .pz-slider__elf{position:absolute;left:-25px;top:0;width:130px;height:auto;z-index:3;pointer-events:none;transform:scaleX(-1);
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
  /* the sign hangs straight down from the elf's free hand (21px, 81px in the slider) on a cord, swings out and
     knocks back against the side of the bauble */
  .pz-slider__sign{position:absolute;z-index:4;left:21px;top:124px;translate:-50% 0;width:70px;padding:7px 5px 6px;border-radius:8px;text-align:center;
    transform-origin:50% -43px;background:linear-gradient(#FFF8E8,#F4E2B8);border:3px solid #8A5A22;box-shadow:0 6px 12px rgba(0,0,0,.4);pointer-events:none;
    font:900 16px/1.05 'Plus Jakarta Sans','Inter',sans-serif;color:#C8102E;letter-spacing:.02em;text-transform:uppercase;
    animation:pzSign 3s ease-in-out infinite}
  .pz-slider__sign::before{content:"";position:absolute;left:50%;top:-46px;width:2px;height:43px;margin-left:-1px;background:#8A5A22}
  /* the bauble: the link itself */
  .pz-slider a.pz-slider__ball{position:absolute;left:3px;top:104px;width:134px;height:134px;border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:16px;box-sizing:border-box;text-decoration:none;color:#fff;font:900 19px/1.05 'Plus Jakarta Sans','Inter',sans-serif;text-shadow:0 2px 3px rgba(0,0,0,.45);
    background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 8%,transparent 22%),
      radial-gradient(circle at 70% 84%,rgba(255,255,255,.25),transparent 28%),
      repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,215,120,.16) 16px 22px),
      radial-gradient(circle at 40% 35%,#F0334D 0,#D9283E 40%,#6E0B19 100%);
    box-shadow:0 0 0 3px rgba(245,194,74,.85),0 16px 30px rgba(0,0,0,.5),inset 0 -12px 22px rgba(0,0,0,.3),inset 0 5px 12px rgba(255,255,255,.3);
    transition:scale .45s var(--pz-spring),box-shadow .3s}
  .pz-slider a.pz-slider__ball::before{content:"";position:absolute;top:-13px;left:50%;width:34px;height:18px;margin-left:-17px;border-radius:5px 5px 3px 3px;
    background:linear-gradient(90deg,#9A6B1F,#F7DC8C 45%,#C9963A 70%,#9A6B1F);box-shadow:0 2px 3px rgba(0,0,0,.3)}
  .pz-slider a.pz-slider__ball:hover{scale:1.1;box-shadow:0 0 0 4px #F5C24A,0 0 34px 10px rgba(245,194,74,.6),0 16px 30px rgba(0,0,0,.5),inset 0 -12px 22px rgba(0,0,0,.3)}
  .pz-slider a.pz-slider__ball:focus-visible{outline:3px solid var(--ewn-gold);outline-offset:5px}
  .pz-slider:hover .pz-slider__sign{animation-duration:.5s}
  /* it slides down the string from the garland when the page opens, overshoots and bobs */
  html.pz .pz-slider__ride{position:absolute;inset:0;translate:0 -380px;transition:translate 1.9s cubic-bezier(.3,1.45,.5,1) 1s}
  html.pz.pz-ready .pz-slider__ride{translate:0 0}
}
@media(min-width:961px) and (max-width:1220px){.pz-slider{scale:.82;transform-origin:0 0}}
/* upright phones: smaller, dropping down over the moon on the right of the logo */
@media (max-width:960px) and (orientation:portrait),(max-width:599px),(max-width:960px) and (min-height:521px){.pz-slider{scale:.56;transform-origin:100% 0;top:22px;left:auto;right:10px}}
/* a page's own sign (the tracker: "You can't find me!"): a little wider, and the Elf waves cheekily */
@media all{
  .pz-slider--custom .pz-slider__sign{width:96px;font-size:13px;line-height:1.1}
  .pz-slider--custom .pz-slider__elf{animation:pzWave 1.4s ease-in-out infinite}
}
@keyframes pzWave{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@media(prefers-reduced-motion:reduce){.pz-slider--custom .pz-slider__elf{animation:none}}
@keyframes pzSlideSwing{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
/* it rests leaning on the bauble's left side (28deg), swings out, knocks back against the bauble and settles */
@keyframes pzSign{0%,100%{transform:rotate(28deg)}35%{transform:rotate(44deg)}60%{transform:rotate(22deg)}68%{transform:rotate(31deg)}76%{transform:rotate(26deg)}84%{transform:rotate(28deg)}}

/* ---------- phones on their side: keep everything clear of the notch / Dynamic Island ----------
   The pages ask iPhones to fill the whole screen (viewport-fit=cover), so on its side the island would sit
   over the first letters. The safe-area gap from the phone pushes the content in (the garland and sky still run edge to edge); the device preview sets the
   same variables, because a preview frame can't report a real safe area. */
:root{--pz-safe-l:env(safe-area-inset-left,0px);--pz-safe-r:env(safe-area-inset-right,0px)}
@media(orientation:landscape) and (max-height:520px){
  main,.ew-header .ew-header__in,footer.ew-footer .ew-footer__in{padding-left:var(--pz-safe-l)!important;padding-right:var(--pz-safe-r)!important;box-sizing:border-box}
}

/* ---------- phones on their side: the same bauble menu, smaller, either side of the logo ----------
   (a landscape phone has the width for it; the header's "Track my elf" stays a button, on the right) */
@media (orientation:landscape) and (min-width:600px) and (max-width:960px) and (max-height:520px){
  .ew-header .ew-header__in{column-gap:8px!important;padding-top:44px!important;padding-bottom:8px!important}
  .ew-header nav.ew-nav a{width:64px;height:64px;padding:5px!important;font:800 9.5px/1.1 'Plus Jakarta Sans','Inter',sans-serif!important;
    margin-top:calc(var(--drop) * .5 - 4px);transform-origin:50% calc(-30px - var(--drop) * .5)}
  .ew-header nav.ew-nav a::before{top:-9px;width:22px;height:11px;margin-left:-11px}
  .ew-header nav.ew-nav a::after{height:calc(30px + var(--drop) * .5 + var(--cur,0px))}
  .ew-header nav.ew-nav a[aria-current="page"]{--cur:22px}
  header.ew-header a.ew-header__logo img.ew-logo{width:118px!important}
  .ew-header a.ew-header__logo{margin:0 6px!important}
  .ew-header button.ew-header__toggle{display:none!important}
  /* the sliding "Track my elf" bauble with its elf, smaller, in the space right of the baubles */
  .ew-header :is(a.ew-header__cta,.free-stamp-wrap--nav){display:none!important}
  .pz-slider{scale:.56;transform-origin:0 0;top:30px;left:calc(var(--pz-safe-l) + 34px)}
}

/* ---------- the owners' moonlit night sky (wide and tall versions, no sleigh painted in) ---------- */
html body::before{background-image:url(/img/site/night-sky-wide-moonlit.jpg)!important}
@media (max-aspect-ratio:1/1){html body::before{background-image:url(/img/site/night-sky-tall-moonlit.jpg)!important}}
/* Santa's sleigh and its sparkle dust (js/pizzazz.js draws both on this canvas): over the sky on layer 1, behind the
   panels, banners and footer (layer 2) and the header; never clickable */
main>*,footer.ew-footer{position:relative;z-index:2}
canvas.pz-sky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- Elves holding a page's sheet (the FAQ): they hold its outer edges and ride down as you read ---------- */
.pz-side-elf{display:none}
@media(min-width:1100px){
  .pz-side-elf{--w:clamp(220px,calc((100vw - 780px) / 2 / .66 - 10px),380px);display:block;position:absolute;z-index:5;width:var(--w);height:auto;pointer-events:none;
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));transition:top .5s cubic-bezier(.2,.8,.2,1);animation:pzPeekUp 4.8s ease-in-out infinite}
  /* the picture's straight edge is 34% in: on the sheet's outer edge (10px candy-cane border included) */
  .pz-side-elf--right{left:calc(100% + 10px - var(--w) * .34);top:12%}
  .pz-side-elf--left{right:calc(100% + 10px - var(--w) * .34);top:2%;transform:scaleX(-1);animation-delay:-2.4s}
}
@keyframes pzPeekUp{0%,100%{translate:0 0}35%,55%{translate:0 -22px}75%{translate:0 4px}}
@media(prefers-reduced-motion:reduce){.pz-side-elf{animation:none}}

/* a "why?" button in a heading must not make that line taller than the others (even gaps between questions) */
:is(h2,h3)>.why{margin-top:-6px;margin-bottom:-6px;vertical-align:middle}

/* ---------- big falling snow, in front of everything (pizzazz.js draws it; never clickable) ---------- */
canvas.pz-blizzard{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ---------- the red IT'S FREE stamp is replaced by a gift tag dangling off the button on a string ---------- */
.free-stamp{display:none!important}
.pz-tag{position:absolute;z-index:7;top:calc(100% - 6px);right:26px;display:flex;flex-direction:column;align-items:center;pointer-events:none;
  transform-origin:50% 0;filter:drop-shadow(0 5px 7px rgba(0,0,0,.3))}
.pz-tag::before{content:"";width:2px;height:24px;background:linear-gradient(#9A6B1F,#C9963A)}
.pz-tag__card{position:relative;padding:17px 15px 9px;clip-path:polygon(50% 0,100% 13px,100% 100%,0 100%,0 13px);
  background:linear-gradient(160deg,#FFE7A3,#F5C24A 60%,#E3A92B);color:#8A0F22;font:900 17px/1 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pz-tag__card::before{content:"";position:absolute;left:50%;top:7px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#7A4A12}
html.pz .pz-tag{scale:1 0;transition:scale .8s var(--pz-spring) .5s}
html.pz .pz-tag.pz-on{scale:1;animation:pzTag 2.8s ease-in-out 1.3s infinite}
@keyframes pzTag{0%,100%{rotate:9deg}50%{rotate:-9deg}}
/* red buttons turn green when you point at them */
:is(.ew-home .button,.ew-header a.ew-header__cta,main a.button):not(.hm-bill__cta):not([data-opens]):hover{background:#1E9A4F!important;box-shadow:0 5px 0 #11663A,0 12px 24px rgba(0,0,0,.28)!important}

/* ---------- green buttons alongside the red (red = the main "Track my elf", green = the next steps) ---------- */
:is(.hm-bill__cta,[data-opens],.hm-finale .button,.shop-waitlist .button){background:#1E9A4F!important;color:#fff!important;
  box-shadow:0 5px 0 #11663A,0 12px 24px rgba(0,0,0,.28)!important}
:is(.hm-bill__cta,[data-opens],.hm-finale .button,.shop-waitlist .button):hover{background:#18833F!important}
:is(.hm-bill__cta,[data-opens],.hm-finale .button,.shop-waitlist .button):active{box-shadow:0 2px 0 #11663A,0 6px 14px rgba(0,0,0,.25)!important}
.hm-bill__cta::before{background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%)!important}

/* ---------- snowball smash: a panel arrives packed in snow, a snowball flies in and bursts it open ---------- */
html.pz [data-pz="snow"]{opacity:1;transform:none}
html.pz [data-pz="snow"] [data-pz]{transition-delay:calc(var(--pz-d,0s) + .8s)}
html.pz [data-pz="snow"] .pz-w{transition-delay:calc(.8s + var(--i,0) * 70ms)}
.pz-fx{position:absolute;inset:0;z-index:3;border-radius:inherit;overflow:hidden;pointer-events:none}
.pz-fx i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff 0,#fff 52%,#EEF4FD 72%,#D3E1F6 100%);box-shadow:inset -6px -8px 16px rgba(120,150,200,.18)}
.pz-ball{position:absolute;left:0;top:0;z-index:8;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fff 0,#F4F8FF 45%,#C9D9F2 100%);box-shadow:0 10px 18px rgba(0,0,0,.35),inset -6px -8px 12px rgba(110,140,190,.35)}
.pz-puff{position:absolute;left:0;top:0;z-index:8;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,.8)}

/* ---------- sideways parallax: big words sliding across between panels as you scroll ---------- */
.pz-ticker{position:relative;overflow:hidden;margin:10px 0;padding:10px 0;rotate:-2.5deg;pointer-events:none;user-select:none}
.pz-ticker__row{white-space:nowrap;font:900 clamp(40px,7vw,96px)/1.05 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.02em;
  translate:var(--pz-tx,0px) 0;will-change:translate;color:var(--ewn-gold);text-shadow:0 6px 18px rgba(0,0,0,.35)}
.pz-ticker__row--rev{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.75);text-shadow:none}
.pz-ticker__row span{margin-right:.5em}
.pz-ticker__row b{color:#E0283F;margin-right:.5em;font-weight:900}
.pz-ticker__row--rev b{color:transparent;-webkit-text-stroke:2px #F5C24A}
/* headings and cards drift sideways a little as they pass */
html.pz .ew-home main section h2{translate:var(--pz-x,0px) 0}
html.pz .hm-step{translate:var(--pz-x,0px) 0}

/* ---------- less motion: everything simply shows ---------- */
@media(prefers-reduced-motion:reduce){
  html.pz [data-pz],html.pz .pz-w,html.pz [data-pz="panel"]>.pz-snow{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  html.pz body::before{transform:none!important}
  .ew-header nav.ew-nav a,.pz-slider__swing,.pz-slider__sign{animation:none!important}
  canvas.pz-blizzard{display:none}
  .pz-ticker__row{translate:none!important}
  .pz-snow .pz-twinkle,:is(.ew-home .button,.hm-bill__cta,.hm-more,.ew-header a.ew-header__cta,main .g-cta a,main a.button)::before,html.pz .hm-hero .hm-cta{animation:none!important}
  html.pz .hm-step__pic img,html.pz .hm-phone,html.pz .hm-products img{transform:none!important;translate:none!important;rotate:none!important}
}
/* Jay, 2nd November 2026 preview: "Christmas shop" spilled out of its bauble. Two-word labels wrap inside it. */
@media(min-width:961px),(orientation:landscape) and (min-width:600px) and (max-width:960px) and (max-height:520px){
  .ew-header nav.ew-nav a{white-space:normal!important;line-height:1.15!important;hyphens:none;overflow-wrap:normal;word-break:keep-all;text-align:center}
}

/* The language as a round flag button on phones (pizzazz.js langFlag) */
.ew-lang__flag{display:none}
.ew-header .ew-lang.ew-lang--flag{position:absolute;z-index:9;width:46px;height:46px;margin:0;padding:0}
.ew-header .ew-lang.ew-lang--flag .ew-lang__flag{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:rgba(11,29,77,.85);border:1.5px solid rgba(255,255,255,.55);font-size:24px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.ew-header .ew-lang.ew-lang--flag select{position:absolute;inset:0;width:46px!important;height:46px!important;min-height:0!important;max-width:none!important;
  margin:0;padding:0!important;opacity:0;cursor:pointer;border-radius:50%}
.ew-header .ew-lang.ew-lang--flag::after,.ew-header .ew-lang.ew-lang--flag::before{display:none!important}
/* Round 1 (2 Nov 2026, 375 wide): the hero's hanging FREE! tag sat on the radar card's "CAM 01"; on phones it hangs in
   the middle, between "ELF HQ" and "CAM 01". */
@media (max-width:760px){.hm-hero .pz-tag{right:calc(50% - 44px)}}
/* Round 1 (320 wide): the snow cap drawn over a panel's edges stays inside the screen (it made the page 327px wide on
   /faq, /privacy, /terms, /draw-terms, the guides and /delete-account). clip, not hidden: no scroll box, sticky still works. */
@media (max-width:480px){html,body{overflow-x:clip}.pz-snow{max-width:100vw}}
/* Round 3 (1440): the slider's "IT'S FREE!" sign swings 6px past the left edge of the page; keep it on screen. */
@media (min-width:961px){.pz-slider{left:max(72px,calc((100% - 980px) / 4 - 54px))}}
/* Round 4 (2 Nov 2026): the homepage has seven baubles: "Elf Tracker (free)" first, the sections, and "Packages coming
   soon" last, just after FAQs (drawn beside it, so the logo stays dead centre). */
@media(min-width:961px),(orientation:landscape) and (min-width:600px) and (max-width:960px) and (max-height:520px){
  html .ew-header .ew-header__in{grid-template-columns:minmax(150px,1fr) repeat(3,auto) auto repeat(3,auto) minmax(150px,1fr);max-width:1400px;column-gap:10px!important}
  html .ew-header nav.ew-nav a{width:86px;height:86px}   /* seven baubles fit the row with the logo dead centre */   /* the same size both ends: the language picker sits in the left one */
  html .ew-header nav.ew-nav a:nth-child(1){grid-column:2}html .ew-header nav.ew-nav a:nth-child(2){grid-column:3}
  html .ew-header nav.ew-nav a:nth-child(3){grid-column:4}html .ew-header nav.ew-nav a:nth-child(4){grid-column:6}
  html .ew-header nav.ew-nav a:nth-child(5){grid-column:7}html .ew-header nav.ew-nav a:nth-child(6){grid-column:8}
  html .ew-header nav.ew-nav a:nth-child(7){grid-column:8;left:calc(100% + clamp(8px,1.2vw,18px))}   /* after FAQs, outside the grid's sums */
}

/* Small computers (6 Nov 2026): the seventh bauble, Packages, ran off the right edge at 1024. Smaller baubles there. */
@media(min-width:961px) and (max-width:1240px){
  html .ew-header .ew-header__in{grid-template-columns:minmax(110px,1fr) repeat(3,auto) auto repeat(3,auto) minmax(84px,1fr);column-gap:4px!important}
  html .ew-header nav.ew-nav a{width:72px;height:72px;padding:6px!important;font-size:10.5px!important;line-height:1.1!important}
  html .ew-header nav.ew-nav a:nth-child(7){left:calc(100% + 4px)}
}

/* Round 5 (2 Nov 2026). The sliding "Track my Elf free" bauble: only the bauble itself takes taps, so its swinging box
   never covers the language picker (1440). */
.pz-slider,.pz-slider__swing,.pz-slider__ride{pointer-events:none!important}
.pz-slider__ball{pointer-events:auto!important}
/* German and Dutch bauble words fit inside the ball (1440). */
@media(min-width:961px){html:lang(de) .ew-header nav.ew-nav a,html:lang(nl) .ew-header nav.ew-nav a{font-size:10.5px!important;line-height:1.1!important;overflow-wrap:anywhere;hyphens:auto;padding-left:6px!important;padding-right:6px!important}}
/* 5 Nov 2026 site walk: icicles over "That was sighting 1 of 5!" at 320, and over the Back button at the top of the basket and order steps. */
.hpromise.pz-capped{padding-top:40px}
main.tk-callorder>.body.pz-capped{padding-top:38px}