/* Shared Elf Watch header (Oct 2026). Loaded last on every page so it wins over each page's
   inline nav styles. The logo sits on the same sky as the app icon (periwinkle #B7D0FB, pale
   clouds, white snowflakes), which keeps the blue "Elf", the red "Watch" and the white hat trim
   all readable. No garland. White snowdrift edge underneath. */
.nav{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='130' viewBox='0 0 520 130'%3E%3Cg fill='%23e4e9fd' opacity='.9'%3E%3Cpath d='M300 70c0-16 14-28 31-26 6-15 22-24 39-20 12-14 36-14 48 2 16-4 32 6 34 22 16 1 28 12 28 26H300z'/%3E%3Cpath d='M20 128c0-14 12-25 27-23 5-13 19-21 34-17 11-12 31-12 42 2 14-3 28 5 30 19 14 1 25 10 25 22H20z' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") right -40px top -6px/520px 130px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cg stroke='%23fff' stroke-width='1.3' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M30 20v14M23 23l14 8M23 31l14-8'/%3E%3Cpath d='M128 70v10M123 72l10 6M123 78l10-6' opacity='.7'/%3E%3Cpath d='M78 98v8M74 100l8 4M74 104l8-4' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='100' cy='18' r='1.6'/%3E%3Ccircle cx='160' cy='40' r='1.3'/%3E%3Ccircle cx='60' cy='60' r='1.2'/%3E%3Ccircle cx='15' cy='90' r='1.4'/%3E%3Ccircle cx='150' cy='105' r='1.1'/%3E%3C/g%3E%3C/svg%3E") left top/180px 120px repeat,
    linear-gradient(180deg,#bcd3fb 0%,#b7d0fb 60%,#c3d8fc 100%)!important;
  position:relative;z-index:30;border-bottom:none!important;box-shadow:none!important}
.nav::before{display:none!important;content:none!important;animation:none!important}
/* no wavy edges anywhere: the old snowdrift under the header and the cloud strip under the top section */
.nav::after{display:none!important;content:none!important}
header.hero .clouds{display:none!important}
.nav__snow{display:none!important}
.nav img[src*="logo.png"]{height:72px!important;width:auto!important;filter:none!important}
@media(min-width:760px){.nav img[src*="logo.png"]{height:96px!important}}
/* links and icons: navy on the sky */
.nav .nav__links a,.nav .nav__back,.nav .nav__in>a:not([class]):not(:first-child){color:#16296A!important;font-weight:600}
.nav .nav__links a:hover,.nav .nav__back:hover{color:#E84D4D!important}
.nav .nav__ig,.nav .musicbtn{color:#16296A!important;border-color:rgba(22,41,106,.25)!important;background:rgba(255,255,255,.55)!important}

/* ---- App-icon sky for the big top sections (homepage + grown-ups) and the Instagram panel.
   Navy is kept only for the footer at the bottom. ---- */
header.hero,.ig__art,#reaction{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='%23e6ebfd'%3E%3Cpath opacity='.9' d='M560 120c0-26 22-46 49-43 9-24 35-38 62-31 19-22 56-22 75 3 25-6 50 9 54 34 25 2 44 19 44 41H560z'/%3E%3Cpath opacity='.75' d='M-20 560c0-24 20-42 45-39 9-22 32-35 57-28 18-21 52-21 70 3 23-5 46 8 50 31 23 2 41 18 41 38H-20z'/%3E%3Cpath opacity='.6' d='M640 590c0-18 15-31 34-29 6-16 24-26 43-21 13-15 39-15 52 2 17-4 34 6 37 23 17 1 31 13 31 28H640z'/%3E%3C/g%3E%3C/svg%3E") center top/cover no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'%3E%3Cg stroke='%23fff' stroke-width='1.4' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M40 30v16M32 34l16 8M32 42l16-8'/%3E%3Cpath d='M170 100v12M164 103l12 6M164 109l12-6' opacity='.7'/%3E%3Cpath d='M90 150v10M85 152l10 5M85 158l10-5' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='120' cy='26' r='1.8'/%3E%3Ccircle cx='200' cy='50' r='1.4'/%3E%3Ccircle cx='70' cy='86' r='1.3'/%3E%3Ccircle cx='18' cy='120' r='1.5'/%3E%3Ccircle cx='190' cy='160' r='1.2'/%3E%3C/g%3E%3C/svg%3E") left top/220px 180px repeat,
    linear-gradient(180deg,#c3d8fc 0%,#b7d0fb 45%,#c9dcfc 100%)!important}
header.hero .hero__in,header.hero .hero__copy,header.hero h1,header.hero .sronly{color:#16296A!important}
header.hero p.lead{color:#33456f!important}
header.hero .badge{color:#1E3A8C!important;background:rgba(255,255,255,.6)!important;border-color:rgba(30,58,140,.2)!important}
header.hero .signup input{color:#16296A!important;background:rgba(255,255,255,.85)!important;border-color:rgba(30,58,140,.25)!important}
header.hero .signup input::placeholder{color:#6a7aa3!important}
header.hero .consent,header.hero .consent span{color:#33456f!important}
header.hero .consent a,header.hero .signup a{color:#1E3A8C!important}
.ig__views,.ig__views strong,.ig__views span{color:#16296A!important}
#reaction,#reaction h2,#reaction h3{color:#16296A!important}
#reaction p,#reaction p.sub{color:#33456f!important}
#reaction .eyebrow,#reaction em{color:#E84D4D!important}

/* ---- One snowfall, the same on every page: a single full-screen layer falling at one speed.
   The extra per-section snow layers (which fell at different speeds) are switched off. ---- */
@keyframes ewSnowFall{from{background-position:0 0}to{background-position:260px 780px}}
@keyframes ewSnowTw{0%,100%{opacity:.45}50%{opacity:.9}}
.snow,body::after{animation:ewSnowFall 24s linear infinite,ewSnowTw 4.6s ease-in-out infinite!important;background-size:260px 260px!important}
.snowdots,#reaction::before,.nav__snow{display:none!important}
@media(prefers-reduced-motion:reduce){.snow,body::after{animation:none!important}}

/* ---- Every logo sits on the app-icon sky. The artwork has a pale cut-out edge that looks rough
   on navy, so the footer logo gets a small sky tile like the app icon. ---- */
footer img[src*="logo.png"]{height:96px!important;width:auto!important;padding:12px 18px;border-radius:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90' viewBox='0 0 120 90'%3E%3Cg stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M20 14v10M15 16l10 6M15 22l10-6'/%3E%3Cpath d='M98 60v8M94 62l8 4M94 66l8-4' opacity='.7'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='70' cy='12' r='1.4'/%3E%3Ccircle cx='108' cy='28' r='1.1'/%3E%3Ccircle cx='40' cy='70' r='1.2'/%3E%3C/g%3E%3C/svg%3E") left top/120px 90px repeat,
  #b8d2fc;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);filter:none!important}

/* ---- Same header on every page: same width, height and logo position. ---- */
.nav__in{max-width:1120px!important;padding:4px 20px!important;margin:0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:104px}

/* ---- The whole page sits on the app-icon sky, on every page. ---- */
/* the sky colour sits on html only; body stays clear so the clouds, snow and sparkle layers
   behind it show on every page */
html{background:#b8d2fc!important}
body{background:transparent!important}
body::before{content:""!important;position:fixed!important;inset:0!important;z-index:-2!important;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='%23e6ebfd'%3E%3Cpath opacity='.8' d='M560 120c0-26 22-46 49-43 9-24 35-38 62-31 19-22 56-22 75 3 25-6 50 9 54 34 25 2 44 19 44 41H560z'/%3E%3Cpath opacity='.6' d='M-20 560c0-24 20-42 45-39 9-22 32-35 57-28 18-21 52-21 70 3 23-5 46 8 50 31 23 2 41 18 41 38H-20z'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(180deg,#b8d2fc 0%,#b8d2fc 45%,#c3d8fc 100%)!important}
.inspectors{background:transparent!important}
/* One continuous sky: the header, the top section and the reaction section show the page sky
   rather than painting their own copy (which left visible seams). */
.nav,header.hero,#reaction{background:transparent!important}