/* ============================================================================
   Santa Magic - proof-of-concept design system
   Ebenezer Systems  |  stub host: santamagic.ebenezersystems.com
   One stylesheet, mobile-first, no framework, no build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Night - the ground everything sits on */
  --night-950:#080C15; --night-900:#0D1420; --night-850:#131C2C; --night-800:#1A2539;
  --night-700:#22314B; --night-600:#2C3E5D;

  /* Candlelight - the warm primary */
  --gold-200:#FFE9B8; --gold-300:#FFD98A; --gold-400:#F0C05A; --gold-500:#D9A33C; --gold-600:#A97B23;

  /* Velvet - the accent that says Christmas without shouting it */
  --velvet-400:#D8465C; --velvet-500:#B5253A; --velvet-600:#8E1F2B; --velvet-700:#5E1220;

  /* Pine and frost */
  --pine-400:#3E8C61; --pine-500:#2E6B4A; --pine-600:#1B4632;
  --frost-50:#F4F9FF; --frost-100:#E7F0FB; --frost-200:#C9DAEE; --frost-300:#9CB4D2;
  --frost-400:#6E88A8; --ice:#7FD8F5;

  --ok:#3E8C61; --warn:#D99A2B; --stop:#C94F4F;

  /* Surfaces */
  --surface:var(--night-900);
  --surface-raised:rgba(255,255,255,.045);
  --surface-glass:rgba(13,20,32,.80);
  --hairline:rgba(255,255,255,.10);
  --hairline-strong:rgba(255,255,255,.18);

  --text:var(--frost-50); --text-soft:var(--frost-200); --text-mute:var(--frost-400);

  /* Type */
  --display:"Fraunces","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Scale - fluid, so nothing needs a breakpoint to stay readable */
  /* Bumped for a readership whose median age is 42 in Talladega County and 50
     in Coosa County. Small type is a barrier before it is a style. */
  --step--1:clamp(.84rem,.80rem + .18vw,.93rem);
  --step-0 :clamp(1.02rem,.97rem + .25vw,1.14rem);
  --step-1 :clamp(1.12rem,1.03rem + .42vw,1.36rem);
  --step-2 :clamp(1.34rem,1.17rem + .82vw,1.86rem);
  --step-3 :clamp(1.62rem,1.30rem + 1.52vw,2.62rem);
  --step-4 :clamp(1.95rem,1.38rem + 2.72vw,3.70rem);
  --step-5 :clamp(2.35rem,1.35rem + 4.75vw,5.20rem);

  /* Space and shape */
  --gut:clamp(1.15rem,4vw,2.5rem);
  --bay:clamp(3.5rem,9vw,7.5rem);
  --wide:78rem; --mid:62rem; --read:38rem;
  --r-sm:.55rem; --r:1rem; --r-lg:1.6rem; --r-xl:2.2rem; --r-pill:99rem;

  --lift:0 1px 2px rgba(0,0,0,.4),0 12px 34px -12px rgba(0,0,0,.65);
  --lift-lg:0 2px 4px rgba(0,0,0,.4),0 34px 70px -24px rgba(0,0,0,.8);
  --glow-gold:0 0 0 1px rgba(240,192,90,.28),0 18px 50px -18px rgba(240,192,90,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.42s var(--ease);

  color-scheme:dark;
}

/* ---------- 2. Reset / base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--text);
  font:400 var(--step-0)/1.65 var(--sans);
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.018em;
  font-variation-settings:"SOFT" 28,"WONK" 1,"opsz" 40}
p{margin:0 0 1em}
:focus-visible{outline:2.5px solid var(--gold-300);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-400);color:var(--night-950)}
hr{border:0;border-top:1px solid var(--hairline);margin:var(--gut) 0}

/* ---------- 3. Atmosphere ------------------------------------------------ */
.sky{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(58rem 34rem at 82% -6%, rgba(240,192,90,.20), transparent 60%),
    radial-gradient(64rem 40rem at 14% 2%, rgba(46,107,74,.30), transparent 62%),
    radial-gradient(50rem 32rem at 50% 42%, rgba(181,37,58,.16), transparent 68%),
    radial-gradient(56rem 36rem at 88% 78%, rgba(240,192,90,.14), transparent 64%),
    radial-gradient(48rem 32rem at 6% 96%, rgba(46,107,74,.22), transparent 66%),
    linear-gradient(180deg,var(--night-950),var(--night-900) 40%,var(--night-850));}
/* Film grain - the single most effective "this is not a template" cue */
.grain{position:fixed;inset:-50%;z-index:-2;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grainShift 6s steps(6) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)}66%{transform:translate(3%,1%)}83%{transform:translate(-1%,3%)}100%{transform:translate(0,0)}}
#snow{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.85}
@media (prefers-reduced-motion:reduce){.grain{animation:none}#snow{display:none}}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{width:min(100% - var(--gut)*2,var(--wide));margin-inline:auto}
.wrap-mid{width:min(100% - var(--gut)*2,var(--mid));margin-inline:auto}
.bay{padding-block:var(--bay)}
.bay-sm{padding-block:calc(var(--bay)*.55)}
.stack>*+*{margin-top:var(--flow,1.1rem)}
.grid{display:grid;gap:clamp(1rem,2.6vw,1.9rem)}
@media(min-width:44rem){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:44rem) and (max-width:61.99rem){.g-4{grid-template-columns:repeat(2,1fr)}}
.center{text-align:center}
.mt0{margin-top:0}

/* ---------- 5. Type helpers --------------------------------------------- */
.eyebrow{font:600 var(--step--1)/1 var(--sans);letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-400);display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:2rem;height:1px;background:linear-gradient(90deg,var(--gold-500),transparent);flex:none}
.center .eyebrow{justify-content:center}
.center .eyebrow::before{display:none}
.h-xl{font-size:var(--step-5)} .h-lg{font-size:var(--step-4)} .h-md{font-size:var(--step-3)}
.h-sm{font-size:var(--step-2)} .h-xs{font-size:var(--step-1)}
.lede{font-size:var(--step-1);color:var(--text-soft);line-height:1.6;max-width:var(--read)}
.center .lede{margin-inline:auto}
.muted{color:var(--text-mute)}
.soft{color:var(--text-soft)}
.gilt{background:linear-gradient(103deg,var(--gold-200),var(--gold-400) 44%,var(--velvet-400));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ital{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 6. Header ---------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:70;transition:background var(--t),border-color var(--t),backdrop-filter var(--t);
  border-bottom:1px solid transparent}
.hdr.stuck{background:var(--surface-glass);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom-color:var(--hairline)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:4.4rem;padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;flex:none}
.brand svg{width:2.05rem;height:2.05rem;flex:none}
.brand b{font:600 1.16rem/1 var(--display);letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1}
.brand b span{display:block;font:600 .55rem/1.5 var(--sans);letter-spacing:.30em;color:var(--gold-400);text-transform:uppercase}
.nav{display:none;gap:.15rem;align-items:center}
.nav a{padding:.5rem .72rem;border-radius:var(--r-pill);font-size:var(--step--1);font-weight:500;
  color:var(--text-soft);transition:color .2s,background .2s;position:relative}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav a[aria-current=page]{color:var(--gold-300)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.24rem;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent)}
@media(min-width:68rem){.nav{display:flex}.burger{display:none}}
.burger{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:var(--r-sm);
  border:1px solid var(--hairline);background:var(--surface-raised);cursor:pointer;flex:none}
.burger i{display:block;width:1.05rem;height:1.5px;background:var(--text);position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:1.05rem;height:1.5px;background:var(--text);transition:transform .3s var(--ease)}
.burger i::before{top:-.33rem}.burger i::after{top:.33rem}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{transform:translateY(.33rem) rotate(45deg)}
.burger[aria-expanded=true] i::after{transform:translateY(-.33rem) rotate(-45deg)}

/* Mobile sheet */
.sheet{position:fixed;inset:0;z-index:69;background:rgba(5,8,15,.94);backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);display:grid;align-content:center;padding:5rem var(--gut) var(--gut);
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s;overflow-y:auto}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font:600 var(--step-2)/1.35 var(--display);padding:.5rem 0;color:var(--text-soft);
  border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),color .2s}
.sheet.open a{opacity:1;transform:none}
.sheet a:hover,.sheet a[aria-current=page]{color:var(--gold-300)}
.sheet a::after{content:"\2192";font-family:var(--sans);font-size:1rem;color:var(--gold-500)}
.sheet .btn{margin-top:1.6rem;justify-content:center;border-bottom:0}
.sheet .btn::after{content:none}

/* ---------- 7. Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.88rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;
  font:600 var(--step--1)/1 var(--sans);letter-spacing:.015em;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s,border-color .22s,color .22s;
  text-align:center;position:relative;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));color:var(--night-950);box-shadow:var(--glow-gold)}
.btn-gold:hover{box-shadow:0 0 0 1px rgba(240,192,90,.45),0 22px 60px -16px rgba(240,192,90,.55)}
.btn-velvet{background:linear-gradient(140deg,var(--velvet-400),var(--velvet-600));color:#fff;box-shadow:var(--lift)}
.btn-ghost{background:var(--surface-raised);border-color:var(--hairline-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--gold-500);color:var(--gold-200)}
.btn-quiet{padding:.5rem .2rem;background:none;color:var(--gold-300);border-radius:0}
.btn-quiet:hover{transform:none;color:var(--gold-200);text-decoration:underline;text-underline-offset:4px}
.btn-lg{padding:1.05rem 2rem;font-size:var(--step-0)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.center .btn-row{justify-content:center}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:clip;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-art picture{display:block;width:100%;height:100%}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:.82;will-change:transform}
/* The wide frame crops to a sliver on a phone and upscales into mush, so the
   phone gets its own portrait frame instead of a zoom of the wide one. */
@media(max-width:48rem){.hero-art img{object-position:50% 42%}}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,21,.74) 0%,rgba(8,12,21,.12) 30%,rgba(8,12,21,.58) 68%,var(--night-900) 100%)}
.hero-in{padding-block:clamp(3rem,12vh,7rem) clamp(3.5rem,10vh,6rem);position:relative}
.hero h1{font-size:var(--step-5);max-width:16ch;font-variation-settings:"SOFT" 44,"WONK" 1,"opsz" 96}
.hero .lede{max-width:44ch;margin-top:1.4rem}
.hero .btn-row{margin-top:2.1rem}
.hero-foot{display:flex;flex-wrap:wrap;gap:.6rem 1.9rem;margin-top:2.6rem;padding-top:1.5rem;
  border-top:1px solid var(--hairline);font-size:var(--step--1);color:var(--text-mute)}
.hero-foot b{color:var(--gold-300);font-weight:600}
.scroll-cue{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;display:grid;justify-items:center;gap:.45rem;
  font:600 .6rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute)}
.scroll-cue::after{content:"";width:1px;height:2.4rem;background:linear-gradient(180deg,var(--gold-400),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.scroll-cue::after{animation:none}}

/* Interior page header */
.phead{position:relative;padding-block:clamp(7rem,18vh,11rem) var(--bay);overflow:clip}
.phead-art{position:absolute;inset:0;z-index:-1}
.phead-art img{width:100%;height:100%;object-fit:cover;opacity:.52}
.phead-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,21,.82),rgba(11,17,28,.50) 50%,var(--night-900))}
.phead h1{font-size:var(--step-4);max-width:18ch}

/* ---------- 9. Cards ----------------------------------------------------- */
.card{background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.042));
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,2rem);
  position:relative;overflow:hidden;transition:transform .34s var(--ease),border-color .34s,box-shadow .34s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
  background:linear-gradient(140deg,var(--gold-400),transparent 42%,transparent 62%,var(--velvet-500));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .34s;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift-lg)}
.card:hover::before{opacity:1}
.card h3{font-size:var(--step-1);margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card-flat:hover{transform:none;box-shadow:none}
.card-flat::before{content:none}
.card-glow{border-color:rgba(240,192,90,.34);box-shadow:var(--glow-gold);
  background:linear-gradient(165deg,rgba(240,192,90,.10),rgba(142,31,43,.10))}
.card-ico{width:2.9rem;height:2.9rem;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(145deg,rgba(240,192,90,.20),rgba(240,192,90,.05));border:1px solid rgba(240,192,90,.26);
  color:var(--gold-300)}
.card-ico svg{width:1.4rem;height:1.4rem}

/* ---------- 10. Price ladder -------------------------------------------- */
.tier{display:grid;gap:.35rem;padding:1.35rem 0;border-bottom:1px solid var(--hairline);
  grid-template-columns:1fr auto;align-items:baseline}
.tier:last-child{border-bottom:0}
.tier h4{font-family:var(--sans);font-size:var(--step-0);font-weight:600;letter-spacing:0}
.tier .price{font:600 var(--step-2)/1 var(--display);color:var(--gold-300);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tier .note{grid-column:1/-1;font-size:var(--step--1);color:var(--text-mute);max-width:56ch;margin:0}
.tier-hero{background:linear-gradient(150deg,rgba(142,31,43,.24),rgba(240,192,90,.10));
  border:1px solid rgba(240,192,90,.3);border-radius:var(--r-lg);padding:clamp(1.3rem,3.4vw,2.2rem)}

/* ---------- 11. Badges / pills ------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .72rem;border-radius:var(--r-pill);
  font:600 .68rem/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--hairline-strong);
  background:var(--surface-raised);color:var(--text-soft);white-space:nowrap}
.pill-gold{border-color:rgba(240,192,90,.4);color:var(--gold-300);background:rgba(240,192,90,.10)}
.pill-velvet{border-color:rgba(216,70,92,.42);color:#FFB3BE;background:rgba(181,37,58,.16)}
.pill-pine{border-color:rgba(62,140,97,.45);color:#8FE3B4;background:rgba(46,107,74,.18)}
.pill-out{border-color:rgba(255,255,255,.16);color:var(--text-mute);background:rgba(255,255,255,.03)}
.pill i{width:.44rem;height:.44rem;border-radius:50%;background:currentColor;flex:none}

/* ---------- 12. Appearance timeline -------------------------------------- */
.months{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem .25rem 1.1rem;scrollbar-width:thin;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.months button{flex:none;scroll-snap-align:start;padding:.5rem 1rem;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--hairline);background:var(--surface-raised);color:var(--text-soft);
  font:600 var(--step--1)/1 var(--sans);transition:all .2s}
.months button:hover{border-color:var(--gold-500);color:var(--gold-200)}
.months button[aria-pressed=true]{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));
  color:var(--night-950);border-color:transparent}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:.46rem;top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--hairline-strong) 8%,var(--hairline-strong) 92%,transparent)}
.ev{position:relative;padding:1.15rem 0 1.15rem 2.5rem;border-bottom:1px solid var(--hairline)}
.ev:last-child{border-bottom:0}
.ev::before{content:"";position:absolute;left:0;top:1.62rem;width:.95rem;height:.95rem;border-radius:50%;
  background:var(--night-850);border:2px solid var(--gold-500);box-shadow:0 0 0 4px var(--night-900)}
.ev[data-state=full]::before{border-color:var(--text-mute)}
.ev[data-state=soon]::before{border-color:var(--velvet-400);
  box-shadow:0 0 0 4px var(--night-900),0 0 18px rgba(216,70,92,.65)}
.ev-top{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline;margin-bottom:.3rem}
.ev-date{font:600 var(--step--1)/1 var(--mono);color:var(--gold-300);letter-spacing:.02em;flex:none}
.ev h3{font-size:var(--step-1);flex:1 1 14rem;min-width:0}
.ev-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:var(--step--1);color:var(--text-mute);margin-top:.5rem}
.ev-meta span{display:inline-flex;align-items:center;gap:.35rem}
.ev-meta svg{width:.92rem;height:.92rem;opacity:.7;flex:none}
.ev-act{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.5rem}
.ev-act .btn{padding:.52rem 1rem;font-size:.78rem}
.ev-none{padding:2.5rem 0;color:var(--text-mute);text-align:center}

/* ---------- 13. Forms ---------------------------------------------------- */
.field{display:grid;gap:.42rem;margin-bottom:1.05rem}
.field>label,.lbl{font:600 var(--step--1)/1.4 var(--sans);color:var(--text-soft);letter-spacing:.012em}
.field .hint{font-size:.76rem;color:var(--text-mute);line-height:1.5}
.req{color:var(--velvet-400)}
.inp{width:100%;padding:.82rem 1rem;border-radius:var(--r-sm);background:rgba(5,8,15,.55);
  border:1px solid var(--hairline-strong);color:var(--text);transition:border-color .2s,background .2s,box-shadow .2s}
.inp::placeholder{color:rgba(156,180,210,.5)}
.inp:hover{border-color:rgba(255,255,255,.28)}
.inp:focus{outline:0;border-color:var(--gold-400);background:rgba(5,8,15,.8);box-shadow:0 0 0 3px rgba(240,192,90,.16)}
textarea.inp{resize:vertical;min-height:6.5rem;line-height:1.6}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CB4D2' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.05rem;padding-right:2.6rem}
.row2{display:grid;gap:0 1rem}
@media(min-width:34rem){.row2{grid-template-columns:1fr 1fr}}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;cursor:pointer;
  padding:.85rem 1rem;border:1px solid var(--hairline);border-radius:var(--r-sm);background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s;margin-bottom:.6rem}
.check:hover{border-color:var(--hairline-strong);background:rgba(255,255,255,.055)}
.check input{width:1.15rem;height:1.15rem;margin:.18rem 0 0;accent-color:var(--gold-400);flex:none;cursor:pointer}
.check:has(input:checked){border-color:rgba(240,192,90,.45);background:rgba(240,192,90,.08)}
.check span{font-size:var(--step--1);line-height:1.6;color:var(--text-soft)}
.check b{color:var(--text);font-weight:600;display:block;margin-bottom:.12rem;font-size:var(--step-0)}

/* Selectable option tiles */
.opts{display:grid;gap:.7rem}
@media(min-width:44rem){.opts-2{grid-template-columns:1fr 1fr}}
.opt{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:start;text-align:left;width:100%;
  padding:1.05rem 1.2rem;border-radius:var(--r);border:1px solid var(--hairline);background:rgba(255,255,255,.03);
  cursor:pointer;transition:border-color .22s,background .22s,transform .22s var(--ease);position:relative}
.opt:hover{border-color:var(--hairline-strong);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.opt b{font:600 var(--step-0)/1.35 var(--sans)}
.opt .price{font:600 var(--step-1)/1 var(--display);color:var(--gold-300);white-space:nowrap;font-variant-numeric:tabular-nums}
.opt small{grid-column:1/-1;font-size:.78rem;color:var(--text-mute);line-height:1.55;margin-top:.2rem}
.opt[aria-pressed=true]{border-color:var(--gold-400);background:linear-gradient(150deg,rgba(240,192,90,.15),rgba(240,192,90,.05));
  box-shadow:var(--glow-gold)}
.opt[disabled]{opacity:.4;pointer-events:none}

/* ---------- 14. Calendar -------------------------------------------------- */
.cal{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:rgba(5,8,15,.4)}
.cal-hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.8rem 1rem;
  border-bottom:1px solid var(--hairline);background:rgba(255,255,255,.04)}
.cal-hd b{font:600 var(--step-0)/1 var(--display)}
.cal-nav{display:flex;gap:.35rem}
.cal-nav button{width:2.1rem;height:2.1rem;border-radius:var(--r-sm);border:1px solid var(--hairline);
  background:var(--surface-raised);cursor:pointer;display:grid;place-items:center;transition:all .2s}
.cal-nav button:hover:not([disabled]){border-color:var(--gold-500);color:var(--gold-200)}
.cal-nav button[disabled]{opacity:.3;cursor:not-allowed}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{padding:.55rem .35rem;font:600 .62rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);text-align:center}
.cal-grid{gap:1px;background:var(--hairline);padding:1px}
.cal-day{aspect-ratio:1;min-height:2.6rem;border:0;background:var(--night-900);color:var(--text-soft);cursor:pointer;
  display:grid;place-items:center;align-content:center;gap:.14rem;font:500 var(--step--1)/1 var(--mono);
  transition:background .18s,color .18s;position:relative}
.cal-day:hover:not([disabled]){background:var(--night-700);color:var(--text)}
.cal-day[disabled]{color:rgba(156,180,210,.25);cursor:not-allowed;background:rgba(7,12,22,.7)}
.cal-day i{width:.3rem;height:.3rem;border-radius:50%;background:var(--pine-400);display:block}
.cal-day[data-load=few] i{background:var(--warn)}
.cal-day[data-load=none] i{background:transparent}
.cal-day[data-special]{color:var(--gold-300)}
.cal-day[data-special]::after{content:"";position:absolute;inset:0;border:1px solid rgba(240,192,90,.38);pointer-events:none}
.cal-day[aria-pressed=true]{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));color:var(--night-950);font-weight:700}
.cal-day[aria-pressed=true] i{background:var(--night-950)}
.cal-key{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:.7rem 1rem;border-top:1px solid var(--hairline);
  font-size:.72rem;color:var(--text-mute)}
.cal-key span{display:inline-flex;align-items:center;gap:.4rem}
.cal-key i{width:.44rem;height:.44rem;border-radius:50%;background:var(--pine-400)}
.cal-key i.few{background:var(--warn)}
.cal-key i.sp{background:var(--gold-400)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr));gap:.5rem;margin-top:1rem}
.slot{padding:.65rem .4rem;border-radius:var(--r-sm);border:1px solid var(--hairline);background:rgba(255,255,255,.03);
  cursor:pointer;font:600 var(--step--1)/1 var(--mono);transition:all .18s;text-align:center}
.slot:hover:not([disabled]){border-color:var(--gold-500);color:var(--gold-200);transform:translateY(-1px)}
.slot[aria-pressed=true]{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));color:var(--night-950);border-color:transparent}
.slot[disabled]{opacity:.32;cursor:not-allowed;text-decoration:line-through}

/* ---------- 15. Booking overlay ------------------------------------------ */
.ovl{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto 1fr auto;
  background:linear-gradient(180deg,var(--night-950),var(--night-850));
  opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility .38s}
.ovl.open{opacity:1;visibility:visible}
.ovl-hd{border-bottom:1px solid var(--hairline);background:var(--surface-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ovl-hd-in{display:flex;align-items:center;gap:1rem;min-height:4rem}
.ovl-hd .brand{margin-right:auto}
.ovl-x{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid var(--hairline);background:var(--surface-raised);
  cursor:pointer;display:grid;place-items:center;flex:none;transition:all .25s var(--ease)}
.ovl-x:hover{border-color:var(--velvet-400);color:#FFB3BE;transform:rotate(90deg)}
.ovl-body{overflow-y:auto;overscroll-behavior:contain;padding-block:clamp(1.5rem,4vw,2.6rem) 2rem;
  scroll-behavior:smooth}
.ovl-ft{border-top:1px solid var(--hairline);background:var(--surface-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding-bottom:max(.9rem,env(safe-area-inset-bottom))}
.ovl-ft-in{display:flex;align-items:center;gap:.8rem;min-height:4.2rem;flex-wrap:wrap}
.ovl-total{margin-right:auto;font-size:var(--step--1);color:var(--text-mute);line-height:1.35}
.ovl-total b{display:block;font:600 var(--step-2)/1.1 var(--display);color:var(--gold-300);
  font-variant-numeric:tabular-nums}

/* Step rail */
.steps{display:flex;gap:.3rem;overflow-x:auto;padding:.7rem 0;scrollbar-width:none;list-style:none;margin:0}
.steps::-webkit-scrollbar{display:none}
.steps li{flex:none;display:flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:var(--r-pill);
  font:600 .7rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);
  border:1px solid transparent;transition:all .28s;white-space:nowrap}
.steps li b{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.07);font-size:.66rem;font-family:var(--mono);transition:all .28s}
.steps li[data-on]{color:var(--gold-200);border-color:rgba(240,192,90,.32);background:rgba(240,192,90,.08)}
.steps li[data-on] b{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));color:var(--night-950)}
.steps li[data-done]{color:var(--pine-400)}
.steps li[data-done] b{background:var(--pine-500);color:#fff}
.bar{height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transition:width .5s var(--ease-out)}

.pane{display:none}
.pane.on{display:block;animation:paneIn .5s var(--ease-out) both}
@keyframes paneIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pane.on{animation:none}}
.pane h2{font-size:var(--step-3);margin-bottom:.6rem}
.pane>.lede{margin-bottom:1.9rem}

/* Quote table */
.quote{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.quote-row{display:flex;gap:1rem;align-items:baseline;padding:.85rem 1.15rem;border-bottom:1px solid var(--hairline);
  font-size:var(--step--1)}
.quote-row:last-child{border-bottom:0}
.quote-row span:first-child{flex:1;color:var(--text-soft)}
.quote-row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-row small{display:block;color:var(--text-mute);font-size:.72rem;margin-top:.15rem}
.quote-tot{background:rgba(240,192,90,.09);font-weight:600;font-size:var(--step-0)}
.quote-tot span:last-child{color:var(--gold-300);font-size:var(--step-1)}
.quote-due{background:rgba(142,31,43,.16)}
.quote-due span:last-child{color:#FFB3BE}

/* Terms block */
.terms{max-height:19rem;overflow-y:auto;padding:1.15rem 1.3rem;border:1px solid var(--hairline);
  border-radius:var(--r);background:rgba(5,8,15,.5);font-size:.84rem;line-height:1.72;color:var(--text-soft);
  overscroll-behavior:contain}
.terms h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-400);margin:1.4rem 0 .4rem;font-weight:600}
.terms h4:first-child{margin-top:0}
.terms p{margin-bottom:.8rem}
.sig{font-family:var(--display);font-size:var(--step-2);font-style:italic;padding:.6rem 0;text-align:center;
  font-variation-settings:"SOFT" 70,"WONK" 1;min-height:2.6rem}
.sig-line{border-bottom:1px solid var(--hairline-strong);padding-bottom:.4rem;margin-bottom:.45rem}

/* Confirmation */
.tick{width:4.6rem;height:4.6rem;border-radius:50%;margin:0 auto 1.4rem;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--pine-400),var(--pine-600));box-shadow:0 0 0 8px rgba(62,140,97,.14)}
.tick svg{width:2.1rem;height:2.1rem;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;animation:draw .6s .18s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tick svg{stroke-dashoffset:0;animation:none}}
.ref{font-family:var(--mono);font-size:var(--step-1);letter-spacing:.14em;color:var(--gold-300);
  padding:.8rem 1.3rem;border:1px dashed rgba(240,192,90,.38);border-radius:var(--r-sm);display:inline-block}

/* ---------- 16. Ops console preview -------------------------------------- */
.console{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:rgba(5,8,15,.55)}
.console-bar{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-bottom:1px solid var(--hairline);
  background:rgba(255,255,255,.045)}
.console-bar u{width:.62rem;height:.62rem;border-radius:50%;background:rgba(255,255,255,.18);display:block}
.console-bar b{margin-left:.6rem;font:600 .74rem/1 var(--mono);color:var(--text-mute);letter-spacing:.04em}
.console-body{padding:clamp(1rem,3vw,1.7rem);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:38rem}
.tbl th{text-align:left;font:600 .66rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-mute);padding:0 .9rem .7rem;border-bottom:1px solid var(--hairline);white-space:nowrap}
.tbl td{padding:.85rem .9rem;border-bottom:1px solid var(--hairline);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .18s}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.tbl .num{white-space:nowrap}
.kpis{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);
  overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:50rem){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--night-900);padding:1.1rem 1.15rem}
.kpi b{display:block;font:600 var(--step-3)/1 var(--display);color:var(--gold-300);font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-top:.4rem}
.kpi em{font-style:normal;font-size:.74rem;color:var(--pine-400)}
.alert{display:flex;gap:.8rem;align-items:flex-start;padding:.95rem 1.15rem;border-radius:var(--r-sm);
  border:1px solid rgba(217,154,43,.4);background:rgba(217,154,43,.10);font-size:var(--step--1);color:var(--text-soft)}
.alert svg{width:1.15rem;height:1.15rem;flex:none;color:var(--warn);margin-top:.1rem}
.alert b{color:var(--gold-200)}
.alert p:last-child{margin-bottom:0}

/* ---------- 17. Misc components ------------------------------------------ */
.photo-slot{aspect-ratio:4/5;border-radius:var(--r);border:1.5px dashed rgba(240,192,90,.38);
  background:repeating-linear-gradient(45deg,rgba(240,192,90,.05) 0 10px,transparent 10px 20px);
  display:grid;place-content:center;gap:.4rem;text-align:center;padding:1.2rem;color:var(--gold-400)}
.photo-slot b{font:600 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.photo-slot span{font-size:.74rem;color:var(--text-mute);max-width:22ch;line-height:1.5;margin-inline:auto}
.photo-slot svg{width:1.7rem;height:1.7rem;margin:0 auto;opacity:.65}
.figure{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);position:relative;margin:0}
.figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.figure figcaption{position:absolute;inset:auto 0 0;padding:1.6rem 1.15rem .9rem;font-size:.76rem;color:var(--frost-200);
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.9))}
.split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media(min-width:56rem){.split{grid-template-columns:1fr 1fr}.split-wide{grid-template-columns:1.15fr .85fr}
  .split-flip>*:first-child{order:2}}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;max-width:26rem}
.center .count{margin-inline:auto}
.count div{text-align:center;padding:.85rem .3rem;border-radius:var(--r-sm);border:1px solid var(--hairline);
  background:rgba(255,255,255,.04)}
.count b{display:block;font:600 var(--step-3)/1 var(--mono);color:var(--gold-300);font-variant-numeric:tabular-nums}
.count span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.quotebox{border-left:2px solid var(--gold-500);padding:.3rem 0 .3rem 1.5rem;margin:0;
  font:400 var(--step-2)/1.45 var(--display);font-style:italic;color:var(--frost-100);
  font-variation-settings:"SOFT" 70,"WONK" 1}
.quotebox cite{display:block;font:600 var(--step--1)/1.4 var(--sans);font-style:normal;color:var(--gold-400);
  margin-top:1rem;letter-spacing:.06em}
.faq{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font:600 var(--step-1)/1.4 var(--display);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-300)}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;translate:0 -50%;font:300 1.7rem/1 var(--sans);
  color:var(--gold-500);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 0 1.4rem;color:var(--text-soft);max-width:66ch}
.faq .faq-body>*:last-child{margin-bottom:0}
.strip{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;align-items:center;justify-content:center;
  padding:1.1rem var(--gut);border-block:1px solid var(--hairline);font-size:var(--step--1);color:var(--text-mute)}
.strip b{color:var(--gold-300);font-weight:600}
.rail{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail>*{flex:0 0 min(78vw,20rem);scroll-snap-align:center}
@media(min-width:62rem){.rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.rail>*{flex:auto}}

/* ---------- 18. Footer ---------------------------------------------------- */
.ftr{border-top:1px solid var(--hairline);padding-block:var(--bay) 2rem;margin-top:var(--bay);
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.75))}
.ftr-grid{display:grid;gap:2.4rem}
@media(min-width:52rem){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr h4{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:var(--step--1)}
.ftr a{color:var(--text-soft);transition:color .2s}
.ftr a:hover{color:var(--gold-300)}
.ftr-base{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hairline);font-size:.76rem;color:var(--text-mute)}
.credit a{color:var(--text-soft);border-bottom:1px solid var(--hairline-strong);transition:color .2s,border-color .2s}
.credit a:hover{color:var(--gold-300);border-bottom-color:var(--gold-500)}

/* ---------- 19. Review-scope banner (PoC only - not part of the design) --- */
.poc{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#1B0F14;border-top:2px solid var(--velvet-500);
  padding:.55rem var(--gut) max(.55rem,env(safe-area-inset-bottom));font:500 .72rem/1.5 var(--sans);color:#FFD5DC;
  display:flex;gap:.7rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.poc b{color:#FFB3BE;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;
  border:1px solid rgba(216,70,92,.5);padding:.16rem .5rem;border-radius:var(--r-pill);white-space:nowrap}
.poc button{background:none;border:0;color:#FFB3BE;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;font-size:.72rem;padding:0}
body.poc-on{padding-bottom:4.6rem}

/* ---------- 20. Scroll reveal -------------------------------------------- */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
[data-rise].seen{opacity:1;transform:none}
[data-rise-kids]>*{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-rise-kids].seen>*{opacity:1;transform:none}
[data-rise-kids].seen>*:nth-child(1){transition-delay:.02s}
[data-rise-kids].seen>*:nth-child(2){transition-delay:.10s}
[data-rise-kids].seen>*:nth-child(3){transition-delay:.18s}
[data-rise-kids].seen>*:nth-child(4){transition-delay:.26s}
[data-rise-kids].seen>*:nth-child(5){transition-delay:.34s}
[data-rise-kids].seen>*:nth-child(6){transition-delay:.42s}
[data-rise-kids].seen>*:nth-child(n+7){transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
  [data-rise],[data-rise-kids]>*{opacity:1!important;transform:none!important;transition:none!important}
}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;top:-4rem;left:var(--gut);z-index:200;background:var(--gold-400);color:var(--night-950);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);font-weight:600;transition:top .2s}
.skip:focus{top:1rem}
@media print{.hdr,.poc,.sheet,#snow,.grain,.scroll-cue{display:none!important}body{background:#fff;color:#000}}

/* ---------- 21. Christmas motifs ----------------------------------------
   Tasteful rather than saturated: the motifs mark things that already exist
   (bullets, rules, section marks) instead of being scattered as decoration.
   ---------------------------------------------------------------------- */

/* Candy-cane bulleted list */
.list-cane,.list-flake{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.72rem}
.list-cane li,.list-flake li{position:relative;padding-left:2.1rem;color:var(--text-soft);
  font-size:var(--step--1);line-height:1.6}
.list-cane li::before{content:"";position:absolute;left:0;top:.02em;width:1.25rem;height:1.25rem;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23B5253A' stroke-width='4.6' stroke-linecap='round'/><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23F7FAFF' stroke-width='4.6' stroke-dasharray='2.4 4.6'/></svg>")}
.list-flake li::before{content:"";position:absolute;left:0;top:.05em;width:1.15rem;height:1.15rem;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD98A' stroke-width='1.5' stroke-linecap='round'><path d='M12 2.5v19M3.8 7.2l16.4 9.6M20.2 7.2L3.8 16.8'/><path d='M12 6.2l2.1 2.1M12 6.2L9.9 8.3M12 17.8l2.1-2.1M12 17.8l-2.1-2.1'/><path d='M5.6 9l2.8-.4M5.6 9l-.4 2.8M18.4 15l-2.8.4M18.4 15l.4-2.8'/><path d='M18.4 9l-2.8-.4M18.4 9l.4 2.8M5.6 15l2.8.4M5.6 15l-.4-2.8'/></svg>")}

/* Candy-cane rule, for closing a section without another hairline */
.cane-rule{height:7px;border-radius:99rem;border:0;margin:0;
  background:repeating-linear-gradient(118deg,var(--velvet-500) 0 9px,#F5F9FF 9px 18px);
  opacity:.9;box-shadow:0 2px 14px -4px rgba(181,37,58,.55)}
.cane-rule-sm{height:4px;max-width:6.5rem}
.center .cane-rule-sm{margin-inline:auto}

/* Small inline marks */
.mark{width:1.45rem;height:1.45rem;flex:none;display:inline-block;vertical-align:-.28em}
.mark-elf{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.6 17.4C4.2 10.6 8.4 4.5 13.4 4.5c3.4 0 5.2 2.6 4.4 5.4-.9 3.1-4.3 4.6-7.6 4.9' fill='%232E6B4A'/><path d='M3.6 17.4C4.2 10.6 8.4 4.5 13.4 4.5' fill='none' stroke='%231B4632' stroke-width='.9'/><rect x='1.8' y='16.6' width='12.4' height='4.3' rx='2.15' fill='%23F4F9FF'/><circle cx='19.6' cy='8.4' r='2.5' fill='%23FFD98A'/></svg>") center/contain no-repeat}
.mark-cane{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23B5253A' stroke-width='4.6' stroke-linecap='round'/><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23F7FAFF' stroke-width='4.6' stroke-dasharray='2.4 4.6'/></svg>") center/contain no-repeat}
.mark-flake{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD98A' stroke-width='1.5' stroke-linecap='round'><path d='M12 2.5v19M3.8 7.2l16.4 9.6M20.2 7.2L3.8 16.8'/><path d='M12 6.2l2.1 2.1M12 6.2L9.9 8.3M12 17.8l2.1-2.1M12 17.8l-2.1-2.1'/><path d='M5.6 9l2.8-.4M5.6 9l-.4 2.8M18.4 15l-2.8.4M18.4 15l.4-2.8'/><path d='M18.4 9l-2.8-.4M18.4 9l.4 2.8M5.6 15l2.8.4M5.6 15l-.4-2.8'/></svg>") center/contain no-repeat}

/* Eyebrow variants: swap the plain gold rule for a motif */
.eyebrow-flake::before,.eyebrow-cane::before{width:1.1rem;height:1.1rem;background:none;
  background-repeat:no-repeat;background-position:center;background-size:contain}
.eyebrow-flake::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD98A' stroke-width='1.6' stroke-linecap='round'><path d='M12 2.5v19M3.8 7.2l16.4 9.6M20.2 7.2L3.8 16.8'/><path d='M12 6.2l2.1 2.1M12 6.2L9.9 8.3M12 17.8l2.1-2.1M12 17.8l-2.1-2.1'/></svg>")}
.eyebrow-cane::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23B5253A' stroke-width='4.6' stroke-linecap='round'/><path d='M8.5 22V10.5a5.2 5.2 0 0 1 10.4 0' fill='none' stroke='%23F7FAFF' stroke-width='4.6' stroke-dasharray='2.4 4.6'/></svg>")}
.center .eyebrow-flake::before,.center .eyebrow-cane::before{display:inline-block}

/* A pine-and-berry tint for the cards that should read greenest */
.card-pine{border-color:rgba(62,140,97,.34);
  background:linear-gradient(165deg,rgba(46,107,74,.22),rgba(46,107,74,.06))}
.card-velvet{border-color:rgba(216,70,92,.32);
  background:linear-gradient(165deg,rgba(181,37,58,.22),rgba(142,31,43,.07))}

/* String lights: a thin festive band used once, at the foot of the hero */
.lights{display:flex;gap:1.15rem;justify-content:center;align-items:center;padding:.2rem 0;flex-wrap:wrap}
.lights i{width:.52rem;height:.52rem;border-radius:50%;display:block;flex:none;
  animation:twinkle 3.4s ease-in-out infinite}
.lights i:nth-child(4n+1){background:#FFD98A;box-shadow:0 0 10px 2px rgba(255,217,138,.6)}
.lights i:nth-child(4n+2){background:#D8465C;box-shadow:0 0 10px 2px rgba(216,70,92,.55);animation-delay:.5s}
.lights i:nth-child(4n+3){background:#3E8C61;box-shadow:0 0 10px 2px rgba(62,140,97,.55);animation-delay:1s}
.lights i:nth-child(4n+4){background:#7FD8F5;box-shadow:0 0 10px 2px rgba(127,216,245,.5);animation-delay:1.5s}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.34}}
@media(prefers-reduced-motion:reduce){.lights i{animation:none}}

/* ---------- 22. Christmas theming, made obvious -------------------------
   Third pass: red and green carry equal weight with the gold, and the motifs
   appear on the controls people actually touch rather than only in the margins.
   ---------------------------------------------------------------------- */

/* --- Buttons ---------------------------------------------------------- */
.btn-pine{background:linear-gradient(140deg,var(--pine-400),var(--pine-600));color:#fff;
  box-shadow:0 0 0 1px rgba(62,140,97,.35),0 18px 44px -18px rgba(46,107,74,.7)}
.btn-pine:hover{box-shadow:0 0 0 1px rgba(62,140,97,.5),0 22px 56px -16px rgba(46,107,74,.85)}
.btn-velvet:hover{box-shadow:0 0 0 1px rgba(216,70,92,.45),0 22px 56px -16px rgba(181,37,58,.8)}

/* Candy-cane button: white ground, red stripes, for the one CTA that should
   look like a candy cane and not merely be near one. */
.btn-cane{color:#7E1220;font-weight:700;border:2px solid var(--velvet-500);
  background:repeating-linear-gradient(118deg,#FFFFFF 0 10px,#FFE3E7 10px 20px);
  box-shadow:0 10px 30px -12px rgba(181,37,58,.7)}
.btn-cane:hover{background:repeating-linear-gradient(118deg,#FFFFFF 0 10px,#FFD2D9 10px 20px);
  box-shadow:0 16px 44px -12px rgba(181,37,58,.85)}

/* Icons sitting inside buttons and pills */
.btn svg,.pill svg{width:1.05em;height:1.05em;flex:none}
.btn .mark,.pill .mark{width:1.15em;height:1.15em;vertical-align:-.2em}

/* --- Festive icon tiles ------------------------------------------------ */
.card-ico svg{width:1.75rem;height:1.75rem}
.card-ico-red{background:linear-gradient(145deg,rgba(216,70,92,.26),rgba(181,37,58,.08));
  border-color:rgba(216,70,92,.36)}
.card-ico-green{background:linear-gradient(145deg,rgba(62,140,97,.28),rgba(46,107,74,.08));
  border-color:rgba(62,140,97,.40)}
.card-ico-gold{background:linear-gradient(145deg,rgba(240,192,90,.24),rgba(240,192,90,.05));
  border-color:rgba(240,192,90,.34)}

/* --- Ornament bullets on the appearance timeline ----------------------- */
.ev::before{background:radial-gradient(circle at 34% 30%,#FFE9B8,var(--gold-500) 62%,#A97B23);
  border-color:rgba(255,233,184,.5)}
.ev[data-state=full]::before{background:radial-gradient(circle at 34% 30%,#9CB4D2,#44546A 66%,#2C3A4C);
  border-color:rgba(156,180,210,.35)}
.ev[data-state=soon]::before{background:radial-gradient(circle at 34% 30%,#FFB3BE,var(--velvet-500) 62%,#7E1220);
  border-color:rgba(216,70,92,.6)}
.ev[data-kind=parade]::before,.ev[data-kind=community]::before{
  background:radial-gradient(circle at 34% 30%,#8FE3B4,var(--pine-500) 62%,#123A28);
  border-color:rgba(62,140,97,.5)}

/* --- Holly + garland furniture ----------------------------------------- */
.garland{height:1.5rem;background-repeat:repeat-x;background-position:center top;background-size:auto 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'><path d='M0 4 Q30 20 60 4 T120 4' fill='none' stroke='%232E6B4A' stroke-width='3.4' stroke-linecap='round'/><path d='M0 4 Q30 20 60 4 T120 4' fill='none' stroke='%233E8C61' stroke-width='1.4' stroke-dasharray='1 7' stroke-linecap='round'/><circle cx='22' cy='13' r='2.6' fill='%23B5253A'/><circle cx='60' cy='9.5' r='2.6' fill='%23FFD98A'/><circle cx='98' cy='13' r='2.6' fill='%23B5253A'/></svg>");
  opacity:.9}
.ftr .garland{margin-bottom:2rem}

/* --- Form controls pick up the season ---------------------------------- */
.check input{accent-color:var(--velvet-500)}
.check:has(input:checked){border-color:rgba(62,140,97,.5);background:rgba(46,107,74,.14)}
.slot[aria-pressed=true]{background:linear-gradient(140deg,var(--pine-400),var(--pine-600));color:#fff}
.cal-day[aria-pressed=true]{background:linear-gradient(140deg,var(--velvet-400),var(--velvet-600));color:#fff}
.cal-day[aria-pressed=true] i{background:#fff}

/* --- Step rail marks --------------------------------------------------- */
.steps li[data-done] b{background:var(--pine-500)}
.steps li[data-on] b{background:linear-gradient(140deg,var(--velvet-400),var(--velvet-600));color:#fff}
.steps li[data-on]{color:#FFC2CB;border-color:rgba(216,70,92,.38);background:rgba(181,37,58,.14)}
.bar i{background:repeating-linear-gradient(118deg,var(--velvet-500) 0 8px,#F5F9FF 8px 16px)}

/* --- Headings that want a small mark ----------------------------------- */
.h-cane{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* --- A striped top edge for the page ----------------------------------- */
.ribbon{position:fixed;inset:0 0 auto;height:4px;z-index:80;
  background:repeating-linear-gradient(118deg,var(--velvet-500) 0 12px,#F5F9FF 12px 24px,var(--pine-500) 24px 36px,#F5F9FF 36px 48px)}
.hdr{top:4px}
.sheet{padding-top:5.4rem}

/* ---------- 23. The home page is the magic ------------------------------
   No pricing lives here. This section carries the animation that makes the
   front door worth standing in.
   ---------------------------------------------------------------------- */

/* --- Star field over the hero ----------------------------------------- */
.stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFF6E0;
  box-shadow:0 0 6px 1px rgba(255,233,184,.85);opacity:.15;animation:star 4s ease-in-out infinite}
@keyframes star{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}

/* --- The sleigh crossing the sky -------------------------------------- */
.sleigh{position:absolute;top:14%;left:-22%;width:clamp(7rem,13vw,11rem);z-index:1;pointer-events:none;
  opacity:0;animation:fly 26s linear infinite}
.sleigh svg{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(255,217,138,.55))}
@keyframes fly{
  0%{transform:translate3d(0,0,0) rotate(-4deg);opacity:0}
  6%{opacity:.92}
  46%{transform:translate3d(78vw,-5vh,0) rotate(-7deg);opacity:.92}
  58%{transform:translate3d(128vw,-9vh,0) rotate(-9deg);opacity:0}
  100%{transform:translate3d(128vw,-9vh,0);opacity:0}}

/* --- Shooting star ----------------------------------------------------- */
.shoot{position:absolute;top:9%;right:-12%;width:10rem;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(270deg,rgba(255,246,224,.95),rgba(255,246,224,0));
  border-radius:99rem;opacity:0;animation:shoot 17s ease-in infinite}
@keyframes shoot{
  0%,72%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}
  76%{opacity:.95}
  86%{opacity:0;transform:translate3d(-84vw,30vh,0) rotate(18deg)}
  100%{opacity:0;transform:translate3d(-84vw,30vh,0) rotate(18deg)}}

@media (prefers-reduced-motion:reduce){
  .stars i,.sleigh,.shoot{animation:none}
  .sleigh,.shoot{opacity:0}
  .stars i{opacity:.55}
}

/* --- The letter to Santa ----------------------------------------------- */
.letter{position:relative;background:linear-gradient(168deg,#FFFDF6,#FFF4DE);
  color:#3A2A18;border-radius:var(--r);padding:clamp(1.6rem,4vw,2.8rem) clamp(1.4rem,4vw,3rem);
  box-shadow:0 28px 70px -26px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.4) inset;
  transform:rotate(-1.1deg);max-width:34rem;margin-inline:auto;
  background-image:repeating-linear-gradient(180deg,transparent 0 2.05rem,rgba(58,42,24,.10) 2.05rem 2.1rem)}
.letter::before{content:"";position:absolute;left:0;right:0;top:0;height:.7rem;border-radius:var(--r) var(--r) 0 0;
  background:repeating-linear-gradient(118deg,var(--velvet-500) 0 9px,#F7FAFF 9px 18px)}
.letter p{font:400 clamp(1.5rem,4.4vw,2.2rem)/2.1rem "Caveat","Segoe Script","Bradley Hand",cursive;
  margin:0 0 .2rem;color:#3A2A18}
.letter .sign{text-align:right;margin-top:1.1rem;color:#7E1220}
.letter .pin{position:absolute;top:-.75rem;left:50%;translate:-50% 0;width:1.5rem;height:1.5rem;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFB3BE,var(--velvet-500) 62%,#7E1220);
  box-shadow:0 3px 8px rgba(0,0,0,.5)}

/* Written, not printed: each line sweeps in behind a moving edge. */
.write{display:block;overflow:hidden;white-space:nowrap;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.4,.02,.25,1)}
.seen .write{clip-path:inset(0 0 0 0)}
/* nth-of-type, not nth-child: the pin is the letter's first child. */
.seen p.write:nth-of-type(1){transition-delay:.15s}
.seen p.write:nth-of-type(2){transition-delay:1.0s}
.seen p.write:nth-of-type(3){transition-delay:1.9s}
.seen p.write:nth-of-type(4){transition-delay:2.7s}
@media (prefers-reduced-motion:reduce){.write{clip-path:none;transition:none}}

/* --- Countdown as hanging ornaments ------------------------------------ */
.count div{position:relative;border:0;background:none;padding-top:1.9rem}
.count div::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:1px;height:1rem;
  background:linear-gradient(180deg,transparent,var(--gold-500))}
.count div::after{content:"";position:absolute;top:.85rem;left:50%;translate:-50% 0;width:.5rem;height:.4rem;
  border-radius:2px;background:var(--gold-500)}
.count b{display:grid;place-items:center;width:clamp(3.6rem,15vw,4.8rem);height:clamp(3.6rem,15vw,4.8rem);
  margin:0 auto .5rem;border-radius:50%;color:#fff;font-size:clamp(1.15rem,4.6vw,1.6rem);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.35) inset;
  transform-origin:50% -1.4rem;animation:sway 5.2s ease-in-out infinite}
.count div:nth-child(1) b{background:radial-gradient(circle at 34% 28%,#FFB3BE,var(--velvet-500) 62%,#7E1220)}
.count div:nth-child(2) b{background:radial-gradient(circle at 34% 28%,#8FE3B4,var(--pine-500) 62%,#123A28);animation-delay:.5s}
.count div:nth-child(3) b{background:radial-gradient(circle at 34% 28%,#FFE9B8,var(--gold-500) 62%,#8A5F16);
  color:#3A2A18;animation-delay:1s}
.count div:nth-child(4) b{background:radial-gradient(circle at 34% 28%,#BDEBFF,#3E8FB0 62%,#16465C);animation-delay:1.5s}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@media (prefers-reduced-motion:reduce){.count b{animation:none}}

/* --- A softer, wider home hero ---------------------------------------- */
.hero-magic .hero-foot{border-top-color:rgba(255,217,138,.28)}
.hero-magic .hero-foot span{display:inline-flex;align-items:center;gap:.5rem}
.hero-magic .hero-foot .mark{width:1.1rem;height:1.1rem}