* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'NZPSans', arial, sans-serif !important;
  font-style: normal;
  min-height: 100vh;
  min-height: 100svh;
  /* pages stack above the ONE shared footer */
  display: flex;
  flex-direction: column;
}

p {
  font-family: 'NZPSans', arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  font-size: 14px !important;
  color: #1c2023de;
}

/* ── Page system ── */
.page { display: none; flex-direction: column; }
/* the active page fills the screen above the footer, and only grows
   (scrolls) if its content genuinely can't fit */
.page.active { display: flex; flex: 1 0 auto; }

/* ── Shared footer ── */
.footer {
  background: #0d1f4e;
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  flex-shrink: 0;
}
.footer-left { display: flex; align-items: center; gap: 18px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-logo img { height: 26px; }
.fb-icon { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 480px) {
  .footer { padding: 12px 16px; font-size: 12px; }
  .footer-left { gap: 12px; }
  .footer a { white-space: nowrap; }
  .footer-logo img { height: 22px; }
}

/* ── Shared primary button ── */
.btn-primary {
  background: #1a3fad;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 2px 5px 8px 0 rgba(0,0,0,0.35);
  font-family: inherit;
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: #1530a0; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.btn-primary::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h10V5l8 7-8 7v-4H4V9z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h10V5l8 7-8 7v-4H4V9z'/%3E%3C/svg%3E") no-repeat center / contain;
}


.btn-sm { font-size: 16px; padding: 10px 22px; }

.btn-outline {
  background: transparent;
  border: 2px solid #1a3fad;
  color: #1a3fad;
  box-shadow: none;
}
.btn-outline:hover { background: #f0f3fc; }

/* ════════════════════════════════════════
   PAGE 1 — LANDING (illustrated street scene)

   The scene is authored on a 1920×1080 artboard. --u is one artboard
   pixel. It is sized to CONTAIN a "core" box (houses, Santa, reindeer,
   van, Cora) so that part is always fully in frame, and the page never
   scrolls. Leftover space is filled by the sky and road, clouds rise
   into the extra sky, and the bush and car stay pinned to the bottom
   corners of the screen.
════════════════════════════════════════ */
/* landing is exactly the screen minus the footer — never scrolls */
#page-landing.active {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: #0d133a;
}

.landing-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  background-color: #0d133a;
  /* sparse starfield for any sky outside the artboard */
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 190px 140px, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 300px 30px, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 210px, rgba(255,255,255,0.6) 50%, transparent 51%);
  background-size: 360px 260px;
}

.ls-root {
  /* core box that must stay in frame (artboard px) */
  --cx0: 0;  --cx1: 1920;
  --cy0: 30; --cy1: 1030;
  /* space reserved for UI above / below the core (portrait only) */
  --top: 0px; --bot: 0px;
  --fg: 1;   /* extra scale for the pinned foreground (bush, car) */

  --u: min(calc(100cqw / (var(--cx1) - var(--cx0))),
           calc((100cqh - var(--top) - var(--bot)) / (var(--cy1) - var(--cy0))));
  --sl: calc((100cqw - (var(--cx1) - var(--cx0)) * var(--u)) / 2 - var(--cx0) * var(--u));
  --st: calc(var(--top) + (100cqh - var(--top) - var(--bot) - (var(--cy1) - var(--cy0)) * var(--u)) / 2 - var(--cy0) * var(--u));
  position: absolute;
  inset: 0;
}

.ls-stage {
  position: absolute;
  left: var(--sl);
  top: var(--st);
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  pointer-events: none;
  user-select: none;
}

/* Generic artboard placement: set --x / --y / --w on each layer */
.ls-stage > * {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 0) * var(--u));
}
.ls-stage img { display: block; height: auto; }

/* ── Ground: starts under the houses, runs edge to edge and down to the
      bottom of the screen ── */
.ls-stage > .ls-ground {
  left: calc(-1 * var(--sl));
  top: calc(700 * var(--u));
  width: 100cqw;
  height: calc(100cqh - var(--st) - 700 * var(--u));
  background: linear-gradient(to bottom,
    #416ca0 0,
    #416ca0 calc(76 * var(--u)),
    #8e8a9c calc(76 * var(--u)),
    #8e8a9c calc(180 * var(--u)),
    #5e5b73 calc(180 * var(--u)));
}

/* ── Clouds: slow left → right parallax. Each cloud crosses the whole
      screen and wraps; bigger (nearer) clouds move faster than the small
      far ones. Negative delays start each one near its design position.
      They also rise into any extra sky above the artboard ── */
.ls-stage > .ls-cloud {
  top: max(calc(var(--y) * var(--u) - 0.6 * var(--st)), calc(8px - var(--st)));
  animation:
    ls-parallax var(--dur) linear infinite var(--delay),
    ls-bob 9s ease-in-out infinite var(--delay);
}
.ls-cloud--1 { --x: 67;   --y: 220; --w: 331; --dur: 110s; --delay: -19s;  }
.ls-cloud--2 { --x: 766;  --y: 16;  --w: 238; --dur: 150s; --delay: -70s;  }
.ls-cloud--3 { --x: 1690; --y: 226; --w: 331; --dur: 110s; --delay: -99s;  }
.ls-cloud--4 { --x: 1636; --y: 14;  --w: 221; --dur: 170s; --delay: -147s; }

@keyframes ls-parallax {
  from { left: calc(-1 * var(--sl) - var(--w) * var(--u)); }
  to   { left: calc(-1 * var(--sl) + 100cqw); }
}
@keyframes ls-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-4 * var(--u))); }
}

/* ── Houses, Santa, sleigh, moon (one flattened layer) ── */
.ls-houses { --x: -447; --y: 0; --w: 2514; }

/* ── Santa's waving arm ── */
.ls-santa-arm {
  --x: 1023; --y: 251; --w: 20;
  transform-origin: 55% 92%;
  animation: ls-wave-santa 2.4s ease-in-out infinite;
}
@keyframes ls-wave-santa {
  0%, 55%, 100% { transform: rotate(0deg); }
  15%, 45%      { transform: rotate(-18deg); }
  30%           { transform: rotate(10deg); }
}

/* ── Twinkling stars (glints over the baked-in stars + extras) ── */
.ls-star {
  --s: 10;
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
  margin: calc(var(--s) * var(--u) / -2) 0 0 calc(var(--s) * var(--u) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255,255,255,0.35) 55%, transparent 72%);
  animation: ls-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ls-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.5); }
}

/* ── Rudolph's nose ── */
.ls-nose {
  --x: 1262; --y: 54; --w: 13;
  height: calc(13 * var(--u));
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 calc(10 * var(--u)) calc(4 * var(--u)) rgba(255, 70, 70, 0.8);
  animation: ls-nose 1.8s ease-in-out infinite;
}
@keyframes ls-nose {
  0%, 40%, 100% { opacity: 0; }
  55%, 85%      { opacity: 1; }
}

/* ── String light glows (house + van) ── */
.ls-bulb {
  --c: 255, 255, 255;
  --w: 16;
  height: calc(16 * var(--u));
  margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c), 0.9) 0 20%, rgba(var(--c), 0.35) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: ls-flicker 2.6s steps(1, end) infinite;
  animation-delay: var(--d, 0s);
}
.ls-bulb.r { --c: 255, 60, 60; }
.ls-bulb.g { --c: 90, 230, 120; }
.ls-bulb.w { --c: 255, 250, 220; }
.ls-bulb--house { opacity: 0.8; animation-duration: 3.4s; }
@keyframes ls-flicker {
  0%   { opacity: 1; }
  18%  { opacity: 0.35; }
  24%  { opacity: 1; }
  61%  { opacity: 0.55; }
  66%  { opacity: 1; }
  88%  { opacity: 0.2; }
  92%  { opacity: 1; }
}

/* ── Van headlights: glowing lenses + beam from the front lens.
      Both sit above the van (Cora stays in front of the beam) and share
      one subtle flicker so they read as the same light ── */
.ls-headlight {
  --y: 836; --w: 33;
  height: calc(28 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fffdf2;
  box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255, 252, 225, 0.75);
}
.ls-headlight--rear  { --x: 422; opacity: 0.85; }
.ls-headlight--front { --x: 493; }

.ls-beam {
  --x: 450; --y: 730; --w: 400;
  height: calc(290 * var(--u));
  background: linear-gradient(to right, rgba(255,253,235,0.85), rgba(255,255,255,0.28) 65%, rgba(255,255,255,0));
  clip-path: polygon(0 36.5%, 0 46.5%, 100% 96%, 100% 6%);
}
.ls-headlight,
.ls-beam { animation: ls-headlight 5s linear infinite; }
@keyframes ls-headlight {
  0%, 100% { opacity: 1; }
  8%       { opacity: 0.86; }
  10%      { opacity: 1; }
  47%      { opacity: 0.93; }
  49%      { opacity: 0.8; }
  52%      { opacity: 1; }
  78%      { opacity: 0.9; }
  80%      { opacity: 1; }
}

/* ── Cora and her waving arm ── */
.ls-cora     { --x: 549; --y: 675; --w: 269; }
.ls-cora-arm {
  --x: 713; --y: 700; --w: 48;
  transform-origin: 12% 92%;
  animation: ls-wave-cora 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes ls-wave-cora {
  0%, 55%, 100% { transform: rotate(0deg); }
  15%, 45%      { transform: rotate(16deg); }
  30%           { transform: rotate(-10deg); }
}

/* ── Van (part of the core) ── */
.ls-van { --x: -29; --y: 509; --w: 600; }

/* ── Foreground pinned to the screen's bottom corners ── */
.ls-stage > .ls-bush,
.ls-stage > .ls-car {
  width: calc(var(--w) * var(--u) * var(--fg));
  top: calc(100cqh - var(--st) - var(--from-bottom) * var(--u) * var(--fg));
}
.ls-stage > .ls-bush {
  --w: 651; --from-bottom: 200;              /* artboard: x -95, y 880 */
  left: calc(-1 * var(--sl) + var(--bush-x, -95) * var(--u) * var(--fg));
}
.ls-stage > .ls-car {
  --w: 928; --from-bottom: 370;              /* artboard: x 1243, y 710 */
  left: calc(-1 * var(--sl) + 100cqw - var(--car-in, 677) * var(--u) * var(--fg));
}

/* ── Falling snow: two sparse, tiling layers over the whole scene
      (below the UI). Each layer falls exactly one tile per loop, so it
      repeats seamlessly ── */
.ls-snow {
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--tile));
  bottom: 0;
  pointer-events: none;
  background-size: var(--tile) var(--tile);
  animation: ls-snow var(--speed) linear infinite;
}
.ls-snow--far {
  --tile: 260px; --speed: 18s;
  opacity: 0.45;
  background-image:
    radial-gradient(2.5px 2.5px at 30px 40px,   #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 150px 110px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 220px 200px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 90px 230px,  #fff 50%, transparent 51%);
}
.ls-snow--near {
  --tile: 420px; --speed: 13s;
  opacity: 0.6;
  background-image:
    radial-gradient(3.5px 3.5px at 60px 90px,   #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 300px 40px,      #fff 50%, transparent 51%),
    radial-gradient(3.5px 3.5px at 210px 300px, #fff 50%, transparent 51%);
  animation-delay: -5s;
}
@keyframes ls-snow {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, calc(var(--tile) / 2)); }
  100% { transform: translate(0, var(--tile)); }
}

/* ════ Landing UI (title, Cora's bubble, CTA) ════ */
.ls-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ls-ui * { pointer-events: auto; }
.ls-ui-bottom { pointer-events: none; }

/* Landscape: pin each piece to its artboard position */
.ls-title-card,
.cora-bubble,
.landing-cta,
.landing-note {
  position: absolute;
  left: calc(var(--sl) + var(--x) * var(--u));
  top: calc(var(--st) + var(--y) * var(--u));
}

.ls-title-card {
  --x: 960; --y: 405;
  translate: -50% 0;
  /* grows with the title so the real font never touches the edges */
  width: max-content;
  min-width: calc(640 * var(--u));
  padding: 0 calc(56 * var(--u));
  height: calc(190 * var(--u));
  background: rgba(20, 28, 70, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
}
.ls-title-card .landing-logo img {
  display: block;
  height: calc(50 * var(--u));
  width: auto;
}
.landing-title {
  font-size: calc(88 * var(--u));
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cora-bubble {
  --x: 790; --y: 718;
  min-width: calc(300 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(19 * var(--u));
  text-align: left;
}
.cora-bubble::before {
  content: '';
  position: absolute;
  left: calc(-14 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  border-top: calc(10 * var(--u)) solid transparent;
  border-bottom: calc(10 * var(--u)) solid transparent;
  border-right: calc(15 * var(--u)) solid #fff;
}
.cora-bubble strong {
  display: block;
  font-size: max(15px, calc(24 * var(--u)));
  font-weight: 400;
  color: #1a3fad;
  line-height: 1.15;
}
.cora-bubble span {
  display: block;
  font-size: max(12px, calc(16 * var(--u)));
  color: #111;
  line-height: 1.3;
}

.btn-primary.landing-cta {
  --x: 960; --y: 826;
  translate: -50% 0;
  min-width: calc(320 * var(--u));
  min-height: max(48px, calc(60 * var(--u)));
  white-space: nowrap;
  justify-content: center;
  padding: calc(12 * var(--u)) calc(32 * var(--u));
  background: #12329a;
  border-radius: calc(7 * var(--u));
  font-size: max(16px, calc(23 * var(--u)));
  font-weight: 700;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.35);
}
.btn-primary.landing-cta::after { display: none; }
.btn-primary.landing-cta:hover { background: #1a3fad; }
.btn-primary.landing-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.landing-note {
  --x: 960; --y: 892;
  /* sits a fixed gap below the CTA, whatever height the CTA ends up */
  top: calc(var(--st) + 826 * var(--u) + max(44px, calc(50 * var(--u))) + max(10px, calc(16 * var(--u))));
  translate: -50% 0;
  width: max(260px, calc(340 * var(--u)));
  color: rgba(255, 255, 255, 0.9);
  font-size: max(11px, calc(13 * var(--u))) !important;
  line-height: 1.45;
  text-align: center;
}

/* ── Portrait: the core narrows to the van → main house, sits between
      the title (in the sky) and the CTA stack (on the road) ── */
@media (max-aspect-ratio: 4/5) {
  .ls-root {
    --cx0: 0;  --cx1: 1340;
    --cy0: 40; --cy1: 1030;
    --top: 150px;
    --bot: 150px;
    --fg: 1.3;
    /* push the bush further left and the car further right, leaving a gap */
    --bush-x: -300;
    --car-in: 430;
  }

  .ls-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 18px;
  }
  .ls-title-card,
  .cora-bubble,
  .landing-cta,
  .landing-note { position: relative; left: auto; top: auto; translate: none; }

  .ls-title-card {
    width: 100%;
    max-width: 440px;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: 14px 20px 16px;
    border-radius: 14px;
    gap: 6px;
    /* drop the title down so it sits just above the sleigh (~108px tall card) */
    margin-top: max(0px, calc(var(--st) + 30 * var(--u) - 20px - 14px - 108px));
  }
  .ls-title-card .landing-logo img { height: 32px; }
  .landing-title { font-size: clamp(34px, 10.5vw, 60px); }

  /* Bubble + CTA sit just under Cora's feet */
  .ls-ui-bottom {
    position: absolute;
    left: 16px; right: 16px;
    top: calc(var(--st) + 1025 * var(--u) + 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Bubble sits above the CTA and points up at Cora */
  .cora-bubble {
    min-width: 0;
    padding: 9px 14px;
    border-radius: 8px;
    text-align: center;
  }
  .cora-bubble::before {
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff;
    border-top: 0;
  }
  .cora-bubble strong { font-size: 16px; }
  .cora-bubble span   { font-size: 12px; }

  .btn-primary.landing-cta {
    translate: none;
    width: 100%;
    max-width: 340px;
    min-height: 56px;
    border-radius: 8px;
    font-size: 20px;
  }
  .landing-note {
    width: 100%;
    max-width: 360px;
    font-size: 12px !important;
    background: rgba(13, 19, 58, 0.72);
    padding: 7px 12px;
    border-radius: 8px;
  }
}
@media (min-aspect-ratio: 801/1000) {
  .ls-ui-bottom { display: contents; }
}
/* teachers landing, portrait: taller button stack under Cora */
@media (max-aspect-ratio: 4/5) {
  .page-landing--teachers .ls-root { --bot: 262px; }
  .page-landing--teachers .landing-cta-group {
    position: relative; left: auto; top: auto; translate: none;
    width: 100%; gap: 10px;
  }
  .page-landing--teachers .landing-cta-group .btn-primary.landing-cta { width: 100%; max-width: 340px; min-width: 0; }
  .page-landing--teachers .landing-cta-group .landing-note {
    width: 100%; max-width: 360px; font-size: 12px !important;
    background: rgba(13, 19, 58, 0.72); padding: 7px 12px; border-radius: 8px;
  }
  .page-landing--teachers .cora-bubble.cora-bubble--teachers { max-width: 100%; }
  .page-landing--teachers .ls-ui-bottom { gap: 10px; }
  .page-landing--teachers .landing-cta-group .btn-primary.landing-cta { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-stage *, .ls-stage *::before { animation: none !important; }
  .ls-snow { display: none; }
  .ls-nose { opacity: 1; }
}

/* ════════════════════════════════════════
   SHARED WOOD BACKGROUND (parchment pages)
════════════════════════════════════════ */
#page-child,
#page-almost,
#page-success {
  background: url('https://image.online.nzpost.co.nz/lib/fe4215707564047c731673/m/1/e2bf6496-77d1-40fb-912b-bbc4a9e049af.jpg') center center / cover no-repeat;
}
.wood-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 20px 40px;
}

/* ── Parchment scroll ── */
.parchment {
  background: #f6f2ea;
  border-radius: 10px;
  width: 100%;
  max-width: 720px;
  position: relative;
  padding: 48px 52px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  overflow: visible;
  flex-shrink: 0;
}
.parchment--narrow { max-width: 560px; }

.scroll-edge-top {
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);
  border-radius: 10px 10px 0 0;
}
.scroll-edge-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
  border-radius: 0 0 10px 10px;
}

.clouds-row {
  position: absolute;
  left: -16px; right: -16px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.clouds-row.top    { top: -25px; }
.clouds-row.bottom { bottom: -16px; }
/* Hidden for now (markup kept in the HTML) */
.clouds-row.top,
.clouds-row.bottom { display: none; }
.cloud { width: 120px; height: auto; display: block; }
.cloud.flip-x  { transform: scaleX(-1); }
.cloud.flip-y  { transform: scaleY(-1); }
.cloud.flip-xy { transform: scale(-1, -1); }

.pill-badge {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  background: #1a3fad;
  color: #fff;
  padding: 9px 30px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(26,63,173,0.35);
}

.close-btn {
  position: absolute;
  top: -50px; right: -40px;
  width: 32px; height: 32px;
  background: #1a3fad; color: #fff;
  border: none; border-radius: 2px;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; z-index: 10;
}
.close-btn:hover { background: #1530a0; }

/* ════════════════════════════════════════
   PAGE 2 — CHILD DETAILS (parchment)
════════════════════════════════════════ */
.form-intro {
  text-align: center; font-size: 14px; color: #333;
  margin-bottom: 6px; padding-top: 4px;
}
.form-section-title {
  font-size: 19px; font-weight: 700; color: #111;
  text-align: center; margin-bottom: 22px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.form-fields { display: flex; flex-direction: column; gap: 14px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: #333; margin-bottom: 5px;
}
.form-group input {
  width: 100%; padding: 9px 12px;
  border: 1px solid #ccc9be; border-radius: 2px;
  background: #ede9e0; font-size: 14px; color: #444;
  outline: none; transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}
.form-group input:focus { border-color: #1a3fad; background: #fff; }

.santa-card-img {
  width: 100%; max-width: 500px;
  border-radius: 0; display: block;
  border: 10px solid #fff;
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
  transform: rotate(2deg);
}
.form-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.form-footnote {
  font-size: 12px; color: #777;
  text-align: center; margin-top: 16px; line-height: 1.5;
}

/* ── Custom dropdown ── */
.custom-select { position: relative; width: 100%; }
.cs-trigger {
  width: 100%; padding: 9px 12px;
  border: 1px solid #ccc9be; border-radius: 2px;
  background: #ede9e0; font-size: 14px; color: #888;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; transition: border-color 0.2s, background 0.2s;
  font-family: inherit; outline: none;
}
.cs-trigger.has-value { color: #444; }
.cs-trigger.open,
.cs-trigger:focus { border-color: #1a3fad; background: #fff; }
.cs-arrow { flex-shrink: 0; transition: transform 0.2s ease; }
.cs-trigger.open .cs-arrow { transform: rotate(180deg); }
.cs-options {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #ddd;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  z-index: 200; max-height: 150px; overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin; scrollbar-color: #c5c0b5 transparent;
}
.cs-options::-webkit-scrollbar { width: 4px; }
.cs-options::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.cs-options::-webkit-scrollbar-thumb { background: #c5c0b5; border-radius: 99px; }
.cs-options::-webkit-scrollbar-thumb:hover { background: #a09890; }
.cs-options.open { display: block; }
.cs-options li {
  list-style: none; padding: 6px 12px;
  font-size: 14px; color: #333; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cs-options li:hover { background: #1a3fad; color: #fff; }
.cs-options li.selected { background: #e8eefb; color: #1a3fad; font-weight: 600; }
.cs-options li.selected:hover { background: #1a3fad; color: #fff; }

/* ════════════════════════════════════════
   PAGES 3–5 — LETTER PAPER (wood bg)
════════════════════════════════════════ */
#page-letter-intro,
#page-letter,
#page-nicework {
  background: url('https://image.online.nzpost.co.nz/lib/fe4215707564047c731673/m/1/e2bf6496-77d1-40fb-912b-bbc4a9e049af.jpg') center center / cover no-repeat;
  flex-direction: column;
}

/* The white letter sheet */
.letter-paper {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 560px;
  min-height: 680px;
  margin: 40px auto;
  padding: 32px 36px 80px;
  box-shadow: 4px 8px 24px rgba(0,0,0,0.35), -2px 4px 10px rgba(0,0,0,0.15);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.letter-paper--dimmed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

/* Close button on letter paper */
.close-btn--letter {
  position: absolute;
  top: 12px; right: -40px;
  background: #1a3fad; color: #fff;
  border: none; border-radius: 2px;
  width: 32px; height: 32px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.close-btn--letter:hover { background: #1530a0; }

/* "Dear Santa" script header */
.letter-header-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.letter-dear {
  font-family: 'NZPSans', cursive, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #cc2222;
  line-height: 1;
}
.letter-sub {
  font-family: 'NZPSans', cursive, sans-serif;
  font-size: 18px;
  color: #cc2222;
  font-style: italic;
}

/* Decorative sticker circles */
.letter-sticker-zone {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 0;
}
.letter-sticker-zone.top-right {
  top: 24px; right: 28px;
  flex-direction: column;
  align-items: flex-end;
}
.letter-sticker-zone.bottom-left {
  bottom: 60px; left: 28px;
  flex-wrap: wrap;
  max-width: 110px;
}
.sticker-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px dashed #1a3fad;
  display: flex; align-items: center; justify-content: center;
  color: #1a3fad; font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}
.sticker-circle::before { content: '+'; }
.sticker-circle--sm { width: 36px; height: 36px; font-size: 18px; }

/* ── Letter intro banner ── */
.letter-banner-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.clouds-row-inline {
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
  
}
.clouds-row-inline--bottom { margin-top: -4px; }
.cloud-sm { width: 70px; height: auto; display: block; }
.cloud-sm.flip-x  { transform: scaleX(-1); }
.cloud-sm.flip-y  { transform: scaleY(-1); }
.cloud-sm.flip-xy { transform: scale(-1,-1); }

.letter-banner-card {
  background: #f6f2ea;
  border-radius: 4px;
  padding: 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
    border: 10px solid #fff;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.letter-banner-title {
  font-size: 26px; font-weight: 700; color: #111;
}
.letter-banner-copy {
  font-size: 14px !important; color: #333; line-height: 1.6;
  max-width: 360px;
}

/* ── Letter textarea ── */
.letter-textarea {
  width: 100%;
  flex: 1;
  min-height: 260px;
  border: none;
  outline: none;
  resize: none;
  font-family: 'NZPSans', arial, sans-serif;
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  background: transparent;
  padding: 8px;
  position: relative;
  z-index: 2;
    background: #f6f2ea;
}
.letter-textarea::placeholder { color: #aaa; font-style: italic; }

/* ── Nice Work overlay ── */
.nicework-overlay-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.nicework-card {
  background: #f6f2ea;
  border-radius: 4px;
  padding: 28px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}
.nicework-title {
  font-size: 26px; font-weight: 700; color: #111;
}

/* ── Bottom-right next button on letter pages ── */
.letter-next-row {
  position: absolute;
  bottom: 20px; right: 28px;
  z-index: 15;
}

/* ════════════════════════════════════════
   NIGHT SKY SCENE (pages 2–7, replaces the wood)

   Same 1920×1080 artboard idea as the landing page. --u is one artboard
   pixel, sized to FIT the screen so decorations never crowd the form.
   Each layer is pinned to a side of the screen with --ax / --ay
   (0 = left/top, 1 = right/bottom), so on any screen shape the moon stays
   top-right, the sleigh bottom-left, and the stars keep their corners.
════════════════════════════════════════ */
#page-child,
#page-letter-intro,
#page-letter,
#page-nicework,
#page-almost,
#page-success,
#page-school,
#page-school-success,
/* any page built on the night-sky body gets the navy sky, whatever its id */
.page:has(> .wood-body--night) { background: #0d133a; }
.wood-body--night { background-color: #0d133a; }

/* Card width from the forms design */
#page-child .parchment { max-width: 887px; }

.wood-body--night {
  position: relative;
  flex: 1 1 auto;
  /* card on top, sleigh row underneath — stacked, so they never overlap */
  flex-direction: column;
  justify-content: center;
  /* room above the card for the pill badge and the close button */
  padding: 64px 20px 0;
  overflow: visible;   /* no inner scrollbar */
}

/* Older markup (sleigh in a .ns-front layer): lay it out exactly like the
   .ns-ride row, so both versions of the HTML behave the same */
.wood-body--night > .ns-front {
  position: relative;
  inset: auto;
  z-index: 3;
  align-self: stretch;
  flex: 1 1 0;
  min-height: 120px;
  max-height: 230px;
  margin: -22px -20px 0;
  overflow: visible;
}
.wood-body--night > .ns-front > .ns-sleigh {
  left: clamp(8px, 2.5vw, 47px);
  top: auto;
  bottom: 4px;
  width: min(calc(100cqw - 16px), calc((100cqh - 8px) * 1003 / 330));
  height: auto;
  aspect-ratio: 1003 / 330;
  scale: none;
  animation: ns-ride-bob 6s ease-in-out infinite;
}
.wood-body--night > .ns-front > .ns-sleigh > .ns-santa-arm { left: 74.68%; top: 38.79%; width: 1.4%; }
.wood-body--night > .ns-front > .ns-sleigh > .ns-nose {
  left: 7.18%; top: 3.94%; width: 1.6%; height: auto; aspect-ratio: 1;
  box-shadow: 0 0 calc(100cqh * 0.036) calc(100cqh * 0.015) rgba(255, 70, 70, 0.85),
              0 0 calc(100cqh * 0.09)  calc(100cqh * 0.03)  rgba(255, 60, 60, 0.35);
}

/* While a dropdown is open, lift its card above Santa so the list is
   never hidden behind the sleigh */
.wood-body--night > .parchment:has(.cs-options.open),
.wood-body--night > .letter-paper:has(.cs-options.open) { z-index: 4; }

/* Letters track — manual address fields in a compact grid:
     Street name (full width) / Number + Suburb / Postcode + City
   (the script shows the panel with an inline display:block, hence !important) */
@media (min-width: 641px) {
  #page-almost .manual-address[style*="block"] {
    display: grid !important;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "street street" "num suburb" "post city";
    gap: 10px 12px;
  }
  #page-almost .manual-address > .form-group:nth-child(1) { grid-area: street; }
  #page-almost .manual-address > .form-group:nth-child(2) { grid-area: num; }
  #page-almost .manual-address > .form-group:nth-child(3) { grid-area: suburb; }
  #page-almost .manual-address > .form-group:nth-child(4) { grid-area: city; }
  #page-almost .manual-address > .form-group:nth-child(5) { grid-area: post; }
  #page-almost .manual-address .input--short { max-width: none; }
}

/* ════════════════════════════════════════
   TEACHERS — landing with two CTAs, school details form
════════════════════════════════════════ */

/* Landing: "Welcome teachers" bubble wraps instead of running wide */
.cora-bubble.cora-bubble--teachers { --y: 668; max-width: calc(430 * var(--u)); }
.cora-bubble--teachers span { line-height: 1.35; }

/* Two stacked CTAs + note, centred under Cora's bubble */
.landing-cta-group {
  --x: 960; --y: 790;
  position: absolute;
  left: calc(var(--sl) + var(--x) * var(--u));
  top: calc(var(--st) + var(--y) * var(--u));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(12px, calc(22 * var(--u)));
  pointer-events: auto;
}
.landing-cta-group .btn-primary.landing-cta {
  position: static;
  translate: none;
  min-width: 0;               /* each button sizes to its label, like the design */
  gap: max(8px, calc(12 * var(--u)));
  padding: calc(12 * var(--u)) calc(26 * var(--u));
  text-decoration: none;
}
/* bring back the arrow on these two buttons */
.landing-cta-group .btn-primary.landing-cta::after {
  display: block;
  width: max(18px, calc(26 * var(--u)));
  height: max(18px, calc(26 * var(--u)));
}
.landing-cta-group .landing-note {
  position: static;
  translate: none;
  width: max(260px, calc(380 * var(--u)));
  margin-top: max(2px, calc(4 * var(--u)));
}

/* School details card */
#page-school .school-card { max-width: 960px; }
#page-school .school-intro { font-size: 14px !important; line-height: 1.45; margin: 4px auto 22px; max-width: 780px; }
.school-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
  align-items: start;
}
.school-col { display: flex; flex-direction: column; gap: 14px; }
.school-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-school .form-actions { margin-top: 8px; }

/* Search box + suggestion list (styled like the design) */
.school-search { position: relative; }
.school-suggest {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 50;
  margin: 0; padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-height: 290px;
  overflow-y: auto;
}
.school-suggest[hidden] { display: none; }
.school-suggest li {
  padding: 9px 12px;
  font-size: 14px;
  color: #222;
  border-top: 1px solid #eee;
  display: flex; align-items: center; gap: 8px;
}
.school-suggest .school-suggest-head { border-top: 0; font-weight: 600; font-size: 13px; color: #333; cursor: default; }
.school-suggest .school-suggest-empty { color: #777; font-style: italic; cursor: default; }
.school-suggest .school-suggest-item,
.school-suggest .school-suggest-manual { cursor: pointer; }
.school-suggest .school-suggest-manual { font-weight: 600; font-size: 13px; }
.school-suggest .school-suggest-item:hover,
.school-suggest .school-suggest-item.active,
.school-suggest .school-suggest-manual:hover,
.school-suggest .school-suggest-manual.active { background: #e8eefb; color: #1a3fad; }
.school-pin { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }
/* keep the open list above Santa */
.wood-body--night > .parchment:has(.school-suggest:not([hidden])) { z-index: 4; }

/* Manual address: Street + Number / Suburb / City + Postcode / Contact */
.school-manual {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-areas: "street num" "suburb suburb" "city post" "contact contact";
  gap: 14px 12px;
}
.school-manual[hidden] { display: none; }
.sm-street { grid-area: street; } .sm-num { grid-area: num; }
.sm-suburb { grid-area: suburb; } .sm-city { grid-area: city; }
.sm-post { grid-area: post; }     .sm-contact { grid-area: contact; }
#btn-school-search { margin-top: -4px; }
#btn-school-search[hidden] { display: none; }

@media (max-width: 760px) {
  .school-cols { grid-template-columns: 1fr; }
}

/* Child details: the footnote sits beside the Next button instead of
   below it, which saves a whole row of height */
@media (min-width: 641px) {
  #page-child .form-footnote {
    margin: -46px 0 0;
    max-width: calc(100% - 200px);
    text-align: left;
  }
}

/* ── Sleigh row: sits in the page flow under the card and takes whatever
      height is left (up to 300px), so Santa is as big as the screen allows
      without ever pushing the page into a scroll ── */
.ns-ride {
  position: relative;
  z-index: 3;            /* Santa always drawn in front of the form card */
  align-self: stretch;
  flex: 1 1 0;
  min-height: 120px;
  max-height: 230px;
  /* tucks up into the card's bottom padding (never over its text) */
  margin: -22px -20px 0;
  container-type: size;
  pointer-events: none;
  user-select: none;
}
.ns-ride-sleigh {
  position: absolute;
  left: clamp(8px, 2.5vw, 47px);
  bottom: 4px;
  width: min(calc(100cqw - 16px), calc((100cqh - 8px) * 1003 / 330));
  aspect-ratio: 1003 / 330;
  animation: ns-ride-bob 6s ease-in-out infinite;
}
/* shorter laptop screens: tighter spacing so the page still fits */
@media (min-width: 641px) and (max-height: 820px) {
  .ns-ride,
  .wood-body--night > .ns-front { min-height: 80px; }
}
@keyframes ns-ride-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.4%); }
}
.ns-ride-sleigh > * { position: absolute; display: block; }
.ns-ride-sleigh > .ns-sleigh-img { left: 0; top: 0; width: 100%; height: auto; }
.ns-ride-sleigh > .ns-santa-arm {
  left: 74.68%;
  top: 38.79%;
  width: 1.4%;
  height: auto;
}
.ns-ride-sleigh > .ns-nose {
  left: 7.18%;
  top: 3.94%;
  width: 1.6%;
  height: auto;
  aspect-ratio: 1;
  box-shadow: 0 0 calc(100cqh * 0.036) calc(100cqh * 0.015) rgba(255, 70, 70, 0.85),
              0 0 calc(100cqh * 0.09)  calc(100cqh * 0.03)  rgba(255, 60, 60, 0.35);
}
.wood-body--night > .letter-paper { min-height: 560px; margin: 0 auto; }
.wood-body--night > .parchment,
.wood-body--night > .letter-paper { position: relative; z-index: 1; }

.ns-scene,
.ns-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  container-type: size;
  z-index: 0;
}

.ns-scene > *,
.ns-front > * {
  --ax: 0; --ay: 0;
  --u: max(0.2px, min(calc(100cqw / 1920), calc(100cqh / 1080)));
  position: absolute;
  left: calc(var(--ax) * (100cqw - 1920 * var(--u)) + var(--x, 0) * var(--u));
  top:  calc(var(--ay) * (100cqh - 1080 * var(--u)) + var(--y, 0) * var(--u));
}

/* ── Stars: gentle twinkle; a few "spark" now and then at random ── */
.ns-star {
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
  min-width: 2px; min-height: 2px;
  margin: calc(var(--s) * var(--u) / -2) 0 0 calc(var(--s) * var(--u) / -2);
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  animation: ns-twinkle var(--t, 4s) ease-in-out infinite var(--d, 0s);
}
@keyframes ns-twinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.3; }
}
.ns-star--spark { animation-name: ns-spark; }
@keyframes ns-spark {
  0%, 82%, 100% { opacity: 0.85; transform: scale(1); box-shadow: none; }
  88% {
    opacity: 1;
    transform: scale(1.8);
    box-shadow: 0 0 calc(10 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, 0.8),
                0 0 calc(26 * var(--u)) calc(8 * var(--u)) rgba(200, 225, 255, 0.35);
  }
  94% { opacity: 0.9; transform: scale(1.1); box-shadow: none; }
}

/* ── Moon: a transparent circle whose offset shadow is the crescent ── */
.ns-moon {
  --ax: 1; --x: 1580; --y: 82;
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  box-shadow: calc(27 * var(--u)) calc(16 * var(--u)) 0 0 #d3eaf7;
}

/* ── Clouds: slow left → right parallax (bigger/nearer = faster) ── */
.ns-scene > .ns-cloud {
  left: calc(-1 * var(--w) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  animation: ns-parallax var(--dur) linear infinite var(--delay);
}
@keyframes ns-parallax {
  from { left: calc(-1 * var(--w) * var(--u)); }
  to   { left: 100cqw; }
}
/* Pale, see-through clouds in front of the sleigh: the cloud-1 image,
   desaturated and brightened to the design's lavender */
.ns-cloud--mist {
  filter: saturate(0.3) brightness(4.1);
  opacity: 0.68;
}

/* ── Santa's sleigh + reindeer (bottom-left), gently bobbing ── */
.ns-sleigh {
  --ay: 1; --x: 47; --y: 746;
  width: calc(1003 * var(--u));
  height: calc(330 * var(--u));
  /* drawn at 68% of the design size, shrinking towards the bottom-left
     corner so it still sits in the corner */
  scale: var(--sk, 0.85);
  transform-origin: 0 100%;
  animation: ns-bob 6s ease-in-out infinite;
}
.ns-sleigh > * { position: absolute; display: block; }
.ns-sleigh-img { left: 0; top: 0; width: 100%; height: auto; }
@keyframes ns-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-8 * var(--u))); }
}

.ns-santa-arm {
  left: calc(749 * var(--u));
  top: calc(128 * var(--u));
  width: calc(14 * var(--u));
  height: auto;
  transform-origin: 50% 95%;
  animation: ns-wave 0.9s ease-in-out infinite alternate;
}
/* Continuous back-and-forth wave (no pause) */
@keyframes ns-wave {
  from { transform: rotate(10deg); }
  to   { transform: rotate(-20deg); }
}

/* Rudolph (lead reindeer) — bright blinking nose */
.ns-nose {
  left: calc(72 * var(--u));
  top: calc(13 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background: #ff4040;
  box-shadow: 0 0 calc(12 * var(--u)) calc(5 * var(--u)) rgba(255, 70, 70, 0.85),
              0 0 calc(30 * var(--u)) calc(10 * var(--u)) rgba(255, 60, 60, 0.35);
  animation: ns-nose 1.6s ease-in-out infinite;
}
@keyframes ns-nose {
  0%, 35%, 100% { opacity: 0; }
  50%, 80%      { opacity: 1; }
}

/* The sleigh has its own layer: behind the card by default, in front of
   it (as in the design) once the screen is big enough that it can't cover
   any form fields */
/* (older markup) the floating sleigh layer is always in front of the card */
.ns-front { z-index: 3; }

/* Mobile: the sleigh gets its own space under the form, at 90% of the
   screen width, centred */
@media (max-width: 640px) {
  /* phones: the form scrolls anyway, so give the sleigh a fixed row */
  .ns-ride,
  .wood-body--night > .ns-front { flex: none; height: calc(90vw * 330 / 1003 + 16px); max-height: none; margin-top: -14px; }
  .wood-body--night { padding-top: 56px; }
  .ns-front > .ns-sleigh {
    --sk: 1;
    --u: calc(90cqw / 1003);
    left: 5cqw;
    top: calc(100cqh - 330 * var(--u) - 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-scene *, .ns-front *, .ns-ride * { animation: none !important; }
  .ns-nose { opacity: 1; }
}

/* ════════════════════════════════════════
   PAGE 6 — ALMOST THERE
════════════════════════════════════════ */
.almost-heading {
  font-size: 20px; font-weight: 700; color: #111;
  text-align: center; margin-top: 16px; margin-bottom: 8px;
  line-height: 1.4;
}
.almost-sub {
  font-size: 13px !important; color: #555;
  text-align: center; margin-bottom: 20px; line-height: 1.5;
}
.almost-label {
  font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px;
}
.children-list {
  background: #ede9e0;
  border: 1px solid #ccc9be;
  border-radius: 2px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 12px;
}
.child-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.child-row-name { font-size: 14px; font-weight: 600; color: #222; }
.btn-start-again {
  background: #1a3fad; color: #fff;
  border: none; border-radius: 3px;
  padding: 5px 12px; font-size: 12px;
  font-weight: 600; cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-start-again:hover { background: #1530a0; }

.btn-add-child {
  background: #1a3fad; color: #fff;
  border: none; border-radius: 50px;
  padding: 10px 22px; font-size: 14px;
  font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.3);
}
.btn-add-child:hover { background: #1530a0; }

/* ════════════════════════════════════════
   PAGE 7 — SUCCESS
════════════════════════════════════════ */
.success-body { text-align: center; padding-top: 20px; }
.success-heading {
  font-size: 18px; font-weight: 700; color: #111;
  line-height: 1.5; margin-bottom: 20px;
}
.success-divider {
  border: none; border-top: 1px solid #d0ccbf;
  width: 55%; margin: 0 auto 20px;
}
.success-subtext {
  font-size: 15px !important; color: #333;
  line-height: 1.7; margin-bottom: 28px;
}
.success-actions { display: flex; justify-content: center; }

/* ════════════════════════════════════════
   LETTERS TRACK — ALMOST THERE (two-column)
════════════════════════════════════════ */
.parchment--wide {
  max-width: 860px;
}

.almost-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}

.almost-col-left,
.almost-col-right {
  display: flex;
  flex-direction: column;
}

.almost-col-right .almost-label {
  margin-bottom: 10px;
}

/* Google Places autocomplete dropdown — keep above parchment */
.pac-container { z-index: 9999; }

/* "Enter your address manually" link-style button */
.btn-manual-address {
  background: none;
  border: none;
  padding: 0;
  margin-top: 10px;
  color: #1a3fad;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-align: left;
  align-self: flex-start;
}
.btn-manual-address:hover { color: #1530a0; }

/* Manual address fields wrapper */
.manual-address {
  margin-top: 12px;
}

/* Short inputs (Number, Postcode) */
.input--short {
  max-width: 160px;
}

/* Send button row inside right column — pinned to bottom-right */
.almost-send-row {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* ════════════════════════════════════════
   CONTENT PAGES — Privacy Policy / Help
════════════════════════════════════════ */
.content-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* night sky (was wood) + a sparse starfield */
  background-color: #0d133a;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 190px 140px, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 300px 30px, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 210px, rgba(255,255,255,0.6) 50%, transparent 51%);
  background-size: 360px 260px;
}

/* Wraps hero + body so the night scene covers everything but the footer */
.content-night {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-night > .content-hero,
.content-night > .content-body { position: relative; z-index: 1; }
/* leave room under the card for the sleigh (it scales with page width) */
.content-night > .content-body { padding-bottom: calc(100vw * 330 * 0.85 / 1920 + 40px); }
@media (max-width: 640px) {
  .content-night > .content-body { padding-bottom: calc(90vw * 330 / 1003 + 32px); }
}

/* Night-sky hero banner */
.content-hero {
  position: relative;
  background: transparent;   /* the night scene shows through */
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 70px;
}
.content-hero .hero-header {
  background: rgba(20, 28, 70, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 16px;
  padding: 22px 40px 26px;
}
.content-hero-title {
  color: #fff;
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 700;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 3px 16px rgba(0,0,0,0.55);
  max-width: 760px;
}
/* Wood-background body holding the white card */
.content-body {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 20px 48px;
}

.content-card {
  background: #fff;
  width: 100%;
  max-width: 820px;
  margin-top: -48px;
  padding: 44px 56px 40px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  position: relative;
  z-index: 1;
}

/* Article typography */
.content-card h2 {
  font-size: 20px;
  font-weight: 500;
  color: #111;
  margin: 30px 0 10px;
  line-height: 1.3;
}
.content-card h2:first-child { margin-top: 4px; }
.content-card p {
  font-size: 14px !important;
  line-height: 1.6;
  color: #1c2023de;
  margin-bottom: 14px;
}
.content-card ul {
  margin: 0 0 14px 22px;
  padding: 0;
}
.content-card li {
  font-size: 14px;
  line-height: 1.6;
  color: #1c2023de;
  margin-bottom: 6px;
}
.content-card a {
  color: #1a3fad;
  text-decoration: underline;
  word-break: break-word;
}
.content-card a:hover { color: #1530a0; }
.content-intro { margin-bottom: 22px; }
.content-divider {
  border: none;
  border-top: 1px solid #e2ddd2;
  margin: 26px 0;
}

.content-back {
  margin-top: 34px;
  display: flex;
  justify-content: flex-start;
}
.content-card .content-back a.btn-primary {
  color: #fff;
  text-decoration: none;
}

/* Close buttons sit outside the card on wide screens only; below that
   they move inside so nothing pokes past the screen edge */
@media (max-width: 1000px) {
  .close-btn,
  .close-btn--letter { top: 12px; right: 12px; }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 640px) {
  .parchment  { padding: 44px 24px 32px; }
  .form-grid  { grid-template-columns: 1fr; }
  .cora-bubble { max-width: 100%; }
  .close-btn  { top: 12px; right: 12px; }

  .content-card { padding: 32px 22px 30px; margin-top: -36px; }
  .content-hero { min-height: 200px; padding: 32px 20px 60px; }

  .letter-paper { margin: 20px 12px; padding: 24px 20px 70px; min-height: 560px; }
  .close-btn--letter { top: 10px; right: 10px; }

  .letter-sticker-zone.top-right { top: 14px; right: 14px; }
  .letter-sticker-zone.bottom-left { bottom: 50px; left: 14px; }

  .nicework-card { padding: 20px 20px; }
  .almost-heading { font-size: 17px; }

  /* Letters track — stack columns on mobile */
  .almost-cols { grid-template-columns: 1fr; gap: 20px; }
  .parchment--wide { max-width: 100%; }
}