/* Christmas in October VIP page. Night ground, one sunset, neon edges. */
:root{--night:#140B2B;--deep:#2A0F55;--card:#1E1140;--line:#3A2A66;--pink:#FF2D95;--orange:#FF7A1A;--violet:#6A00F4;--cyan:#1FE3FF;--sun:#FFE14D;--paper:#F7F2FF;--mute:#B9ADD6;--dim:#8F84AD;--ink:#120626;
  --display:Impact,"Haettenschweiler","Arial Narrow Bold","Arial Black",system-ui,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font:16px/1.5 var(--body)}
a{color:var(--cyan)}
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.d{font-family:var(--display);text-transform:uppercase;font-style:italic;letter-spacing:.01em;line-height:1}
.btn{display:inline-block;font:700 18px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;background:linear-gradient(90deg,var(--pink),#FF4FB0);padding:18px 34px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.12) inset,0 0 26px rgba(255,45,149,.65)}
.btn:hover,.btn:focus-visible{filter:brightness(1.1);outline:none;box-shadow:0 0 0 3px var(--cyan),0 0 30px rgba(255,45,149,.8)}
.ghost{display:inline-block;font:700 14px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--paper);text-decoration:none;border:1px solid var(--mute);padding:12px 18px;border-radius:999px}
.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ------------------------------------------------------------------ hero */
/* The kit's sunset is the hero. Its own bottom edge only approximates night, so ::after finishes
   the seam at exactly #140B2B. */
.hero{position:relative;overflow:hidden;background:var(--night);min-height:640px}
.hero .bg,.hero .bg img{position:absolute;inset:0;width:100%;height:100%}
.hero .bg img{object-fit:cover;object-position:center 40%}
.hero::after{content:"";position:absolute;inset:72% 0 0;background:linear-gradient(to bottom,transparent 0%,var(--night) 95%);pointer-events:none}
.hero .content{position:relative;z-index:1}
.hero .top{display:flex;justify-content:space-between;align-items:center;padding-top:18px;gap:12px}
.logo{width:190px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.mark{width:170px}
.hero .lockup{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:8px;padding:4px 0 0}
.tcol{display:grid;justify-items:center}
.hero .title{width:100%;max-width:640px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.brush{position:relative;width:min(100%,500px);margin-top:-26px;transform:rotate(-3deg)}
.brush img{display:block;width:100%}
.brush span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(32px,4.2vw,50px);color:var(--ink);padding-bottom:2px}
.hero .invite{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.hero .cta{text-align:center;padding:12px 0 118px}
.hero .when{font:700 clamp(18px,5vw,32px)/1.35 var(--body);text-shadow:0 2px 8px rgba(0,0,0,.7);margin:0 0 20px}
.hero .when b{color:var(--sun)}
.pill{position:relative;display:inline-block;width:min(560px,92%);text-decoration:none}
.pill img{display:block;width:100%;filter:drop-shadow(0 6px 18px rgba(255,45,149,.55))}
.pill span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 clamp(26px,4.2vw,42px)/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);padding-bottom:3px}
.pill:hover img,.pill:focus-visible img{filter:brightness(1.12) drop-shadow(0 6px 22px rgba(255,45,149,.9))}
.pill:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ sash + offers */
.sash{position:relative;margin:-110px auto 0;max-width:1000px;z-index:2}
.sash>img{display:block;width:100%}
.sashtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-1.5deg);padding:0 12%}
.sashtxt .l1{font-size:clamp(26px,5vw,56px);color:#fff;text-shadow:3px 3px 0 var(--ink)}
.sashtxt .l2{font-size:clamp(18px,3.4vw,38px);background:linear-gradient(180deg,#FFF27A,#FF8A3D);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 var(--ink))}
.now{text-align:center;font-size:22px;color:var(--mute);margin:4px 0 30px}
.now b{color:var(--sun)}
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.offer{display:flex;gap:14px;align-items:center;background:linear-gradient(160deg,#241050,#170A33);border:2px solid var(--cyan);border-radius:12px;padding:18px;box-shadow:0 0 18px rgba(31,227,255,.25)}
.offer:nth-child(2){border-color:var(--pink);box-shadow:0 0 18px rgba(255,45,149,.35)}
.offer svg{flex:0 0 54px;width:54px;height:54px}
.offer .big{font-size:42px;color:var(--sun);display:block}
.offer .k{font-size:22px;color:#fff;display:block}
.offer p{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--mute)}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 10px;text-align:center}
.perk .ico{display:block;width:64px;height:64px;margin:0 auto 8px;background:url(/xmas/icons.webp) no-repeat;background-size:400% 100%}
.perk .ico-0{background-position:0 0}.perk .ico-1{background-position:33.333% 0}.perk .ico-2{background-position:66.667% 0}.perk .ico-3{background-position:100% 0}
.perk b{display:block;font:800 14px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase}
.perk span{font-size:13px;color:var(--mute)}

/* ------------------------------------------------------------------ deals */
.sec{padding:56px 0 8px}
.kick{font:800 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:0}
.sec h2{font-size:48px;margin:8px 0 6px;color:#fff;text-shadow:3px 3px 0 var(--ink),5px 5px 0 var(--pink)}
.sec .sub{color:var(--mute);margin:0 0 26px;font-size:17px}
.sec .sub b{color:var(--sun)}
.deals{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.deal{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.deal:hover{border-color:var(--cyan)}
.deal .shot{display:block;position:relative;line-height:0;aspect-ratio:4/3;overflow:hidden}
.deal .shot img{width:100%;height:100%;object-fit:cover}

.deal .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.deal h3{font-size:30px;margin:0;color:#fff}
.deal .meta{margin:-4px 0 0;font-size:13px;color:var(--mute)}
.money{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.money>div{background:#170A33;border-radius:10px;padding:10px 12px}
.money .lbl{display:block;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.money .v{font-size:32px;color:var(--sun)}
.money .v small{font:700 14px var(--body);color:var(--paper);font-style:normal;text-transform:none}
.money s{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.money .terms{display:block;font-size:11px;line-height:1.35;color:var(--mute);margin-top:4px}
.why{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.why li{position:relative;padding-left:26px;font-size:15px;line-height:1.35}
.why li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--pink) 20% 100%);box-shadow:0 0 8px rgba(255,45,149,.8)}
.why-h{font:800 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin:4px 0 0}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.acts .btn{font-size:14px;padding:13px 20px}

/* ------------------------------------------------------------------ RSVP */
.rsvp{margin:60px auto 0;max-width:760px;background:linear-gradient(180deg,#2A0F55,#1A0B3A);border:2px solid var(--pink);border-radius:18px;padding:28px 26px 30px;box-shadow:0 0 40px rgba(255,45,149,.35)}
.rsvp h2{font-size:46px;margin:6px 0 4px;color:#fff;text-shadow:3px 3px 0 var(--ink),5px 5px 0 var(--cyan)}
.rsvp .sub{color:var(--mute);margin:0 0 18px}
form{display:grid;gap:4px}
.row{display:grid;gap:12px}
.row.two{grid-template-columns:1fr 1fr}
.row.three{grid-template-columns:1fr 1fr 1fr}
label{display:grid;gap:6px;font-weight:700;font-size:14px;margin-top:10px}
input,select{font:16px var(--body);color:var(--paper);background:#120626;border:1px solid var(--line);border-radius:8px;padding:12px;width:100%;min-width:0;box-sizing:border-box}
.row>label,.row>*{min-width:0}
fieldset{min-width:0}
input:focus,select:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.opt{font-weight:400;color:var(--dim)}
fieldset{border:0;padding:0;margin:12px 0 0}
legend{font-weight:700;font-size:14px;padding:0;margin-bottom:8px}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.day{margin:0;cursor:pointer;position:relative}
.day input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.day span{display:block;text-align:center;border:2px solid var(--line);border-radius:10px;padding:12px 6px;background:#120626}
.day span b{display:block;font-family:var(--display);font-style:italic;font-size:26px;text-transform:uppercase;color:var(--sun)}
.day span small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.day input:checked+span{border-color:var(--pink);box-shadow:0 0 16px rgba(255,45,149,.6);background:#2A0F55}
.day input:focus-visible+span{outline:2px solid var(--cyan)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:14px}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 20px;accent-color:var(--pink)}
.check em{color:var(--dim)}
.err{color:#FF8FB8;font-size:13px;margin:2px 0 0;min-height:0}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{margin:16px 0 4px;min-height:65px}
.notice{font-size:12px;line-height:1.5;color:var(--dim)}
.notice a{color:var(--mute)}
form .btn{width:100%;margin-top:8px}
.done{text-align:center;padding:16px 0}
.done h2{font-size:52px}
.done p{color:var(--mute)}
.done .ghost{margin-top:8px}

/* ------------------------------------------------------------------ footer */
.foot{margin-top:70px;border-top:1px solid var(--line);padding:30px 0 44px;color:var(--dim);font-size:12px;line-height:1.55}
.foot .store{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:14px;margin-bottom:20px}
.foot .store b{color:var(--paper)}
.foot p{margin:0 0 10px}

/* ------------------------------------------------------------------ Santa's Wish List */
.deals{counter-reset:wish}
.deal{counter-increment:wish}
.deal h3::before{content:"Wish #" counter(wish);display:block;font:800 12px/1 var(--body);font-style:normal;letter-spacing:.2em;color:var(--pink);margin-bottom:6px;text-shadow:0 0 8px rgba(255,45,149,.7)}

/* ------------------------------------------------------------------ neon presents */
/* Pure decoration on pseudo-elements: no markup, nothing to click, nothing a screen reader reads.
   The glow is baked into each SVG; the CSP allows no inline styles, so every one lives here. */
.hero .content::before,.hero .content::after,.sash::before,.sash::after,#deals::before,
.rsvp::before,.rsvp::after,.foot::before,main.wrap::before,main.wrap::after{
  content:"";position:absolute;pointer-events:none;background:no-repeat center/contain;animation:bob 3.2s ease-in-out infinite alternate}
.sec,.rsvp,.foot,main.wrap{position:relative}
html{overflow-x:clip}
@keyframes bob{from{transform:translateY(0) rotate(var(--r,0deg));opacity:.85}to{transform:translateY(-6px) rotate(var(--r,0deg));opacity:1}}
/* Beside the RSVP pill */
.hero .content::before{left:max(0px,calc(50% - 430px));bottom:128px;width:100px;height:100px;background-image:url(/xmas/gift-pink.svg);--r:-8deg}
.hero .content::after{right:max(0px,calc(50% - 430px));bottom:132px;width:92px;height:110px;background-image:url(/xmas/gift-tall-cyan.svg);--r:7deg;animation-delay:-1.4s}
/* The ends of the sash */
.sash::before{left:-62px;bottom:6px;width:76px;height:90px;background-image:url(/xmas/gift-tall-sun.svg);--r:-6deg;animation-delay:-.8s;z-index:1}
.sash::after{right:-58px;bottom:14px;width:72px;height:72px;background-image:url(/xmas/gift-violet.svg);--r:9deg;animation-delay:-2s;z-index:1}
/* A pile beside the Wish List heading */
#deals::before{right:0;top:4px;width:190px;height:125px;background-image:url(/xmas/gift-pile.svg);animation-duration:4s}
/* On the RSVP box's top edge, and one at its foot */
.rsvp::before{right:22px;top:-58px;width:66px;height:66px;background-image:url(/xmas/gift-sun.svg);--r:6deg;animation-delay:-1s}
.rsvp::after{left:-34px;bottom:-26px;width:64px;height:76px;background-image:url(/xmas/gift-tall-pink.svg);--r:-7deg;animation-delay:-2.4s}
/* Under the tree, over the footer line */
.foot::before{left:50%;top:-76px;width:120px;height:79px;margin-left:-60px;background-image:url(/xmas/gift-pile.svg);animation:none}
/* Out in the margins, on screens wide enough to have them */
main.wrap::before{left:-96px;top:980px;width:70px;height:70px;background-image:url(/xmas/gift-cyan.svg);--r:-10deg;animation-delay:-.6s}
main.wrap::after{right:-96px;top:1640px;width:66px;height:78px;background-image:url(/xmas/gift-tall-violet.svg);--r:8deg;animation-delay:-1.8s}
@media (max-width:1360px){main.wrap::before,main.wrap::after{display:none}}
@media (max-width:1140px){.sash::before,.sash::after{display:none}}

@media (max-width:860px){
  .hero{min-height:0}
  .hero .content::before,.hero .content::after{display:none}
  #deals::before{width:96px;height:63px;top:-6px}
  .rsvp::after{left:-10px}
  .hero .lockup{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hero .invite{max-width:260px;margin-top:-4px}
  .hero .cta{padding-bottom:96px}
  .hero::after{inset:65% 0 0}
  .sash{margin-top:-80px}
  .offers,.deals{grid-template-columns:1fr}
  .perks{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .sec h2{font-size:38px}
}
@media (max-width:520px){
  .logo{width:140px}.mark{width:120px}
  .row.two,.row.three{grid-template-columns:1fr}
  .days{grid-template-columns:1fr}
  .money{grid-template-columns:1fr}
  .deal h3{font-size:26px}
  .rsvp{padding:22px 16px 24px}
  .rsvp h2{font-size:38px}
  .now{font-size:18px}
  .sash{margin-top:-56px}
  .sashtxt{padding:0 6%}
  .brush{margin-top:-14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*::before,*::after{animation:none!important}}