/* ============================================================
   Moonpath — single-screen splash
   Navy night sky, Moony front and center, store badges below.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #0f1c4a;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* ── Splash container ── */
.splash {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-align: center;
  background:
    linear-gradient(180deg, #0f1c4a 0%, #1c2a5e 30%, #1a2855 70%, #0f1c4a 100%);
  /* Browsers can interpolate same-shape linear-gradients, so swapping
     [data-time-mode] crossfades the sky instead of snapping. */
  transition: background 1600ms ease;
}
.splash__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 72px;
  padding: calc(max(env(safe-area-inset-top, 0px), 16px) + 48px) 32px 0;
}
/* Nav flanking the big splash wordmark. Links inherit the same
   warm-white-on-navy treatment used elsewhere; "Gift Moonpath" uses
   the cream pill (.site-nav__gift). */
.splash__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.splash__nav a {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}
.splash__nav a:hover,
.splash__nav a[aria-current="page"] {
  color: #fff;
}
/* Phones: hide the side nav. Wordmark centers, footer carries the
   links so nothing's stranded. */
@media (max-width: 720px) {
  .splash__top { gap: 16px; }
  .splash__nav { display: none; }
}
.splash__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px 24px;
}

/* ── Starfield ── */
.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  /* opacity is reserved for the day/night fade — twinkle below
     varies scale + box-shadow alpha so the static opacity is
     free to transition cleanly without an animation fighting it. */
  opacity: 1;
  transition: opacity 700ms ease;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 9px rgba(255, 255, 255, 0.5);
  animation: twinkle 4s ease-in-out var(--d, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.85); box-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0  5px rgba(255, 255, 255, 0.30); }
  50%      { transform: scale(1.10); box-shadow: 0 0 6px rgba(255, 255, 255, 1.0), 0 0 12px rgba(255, 255, 255, 0.70); }
}
.cloud {
  position: absolute;
  left: 100%;                 /* start just off-screen right */
  border-radius: 50%;
  filter: blur(20px);
  background: radial-gradient(ellipse, rgba(220, 225, 255, 0.10) 0%, rgba(220, 225, 255, 0) 70%);
  /* Hidden by default (night). Day-mode rules below fade these
     in over 700ms via the same opacity transition pattern. */
  opacity: 0;
  transition: opacity 700ms ease;
  animation: drift 160s linear infinite;
}
/* Per-cloud vertical position + drift duration. Bigger / closer
   clouds drift slower than smaller / distant ones — classic parallax
   so the sky reads as having depth. Negative animation-delays stagger
   them across the journey so on first paint the sky isn't empty. */
.cloud--1 { top:  8%; width: 460px; height: 180px; animation-duration: 130s; animation-delay:   0s; }
.cloud--2 { top: 22%; width: 380px; height: 150px; animation-duration: 165s; animation-delay: -40s; }
.cloud--3 { top: 55%; width: 500px; height: 200px; animation-duration: 145s; animation-delay: -80s; }
.cloud--4 { top: 12%; width: 280px; height: 110px; animation-duration: 215s; animation-delay: -25s; }
.cloud--5 { top: 42%; width: 320px; height: 130px; animation-duration: 175s; animation-delay: -110s; }
.cloud--6 { top: 70%; width: 360px; height: 145px; animation-duration: 155s; animation-delay: -55s; }
.cloud--7 { top: 28%; width: 220px; height:  90px; animation-duration: 235s; animation-delay: -150s; }
@keyframes drift {
  /* Start at left:100% (just off right edge), drive translateX
     enough to fully exit off the left edge for any viewport. */
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100vw - 500px)); }
}

/* Shooting star — rotated wrapper that translates along its own
   local x-axis so the tapered tail always trails the head. The
   `rotate(angle) translateX(...)` order matters: rotate first,
   then translate in the rotated frame. */
.shoot {
  position: absolute;
  left: -25%;
  width: 220px;
  height: 2px;
  border-radius: 999px;
  transform-origin: 0% 50%;
  transform: rotate(var(--angle, 14deg)) translateX(0);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 247, 220, 0) 55%,
    rgba(255, 247, 220, 0.45) 78%,
    rgba(255, 255, 255, 0.95) 96%,
    #ffffff 100%
  );
  opacity: 0;
  animation: shoot var(--dur, 22s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes shoot {
  0%   { transform: rotate(var(--angle, 14deg)) translateX(0);     opacity: 0; }
  1%   { opacity: 0; }
  3%   { opacity: 1; }
  9%   { opacity: 1; }
  12%  { transform: rotate(var(--angle, 14deg)) translateX(150vw); opacity: 0; }
  100% { transform: rotate(var(--angle, 14deg)) translateX(150vw); opacity: 0; }
}

/* All foreground content sits above the sky */
.wordmark, .hero, .tagline, .badges { position: relative; z-index: 1; }

/* ── Wordmark ── */
.wordmark {
  width: 220px;
  max-width: 50vw;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(255, 246, 205, 0.18));
}

/* ── Moony hero ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.bubble {
  position: relative;
  background: #ffffff;
  color: #1f2937;
  padding: 12px 18px;
  border-radius: 18px;
  border: 2px solid #EFE9E0;
  border-bottom-width: 4px;
  font-size: 14px;
  font-weight: 700;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
  /* Hidden until JS adds .is-popped — keeps the visual pop in
     sync with the bubble.mp3 sfx that's gated on user gesture. */
  opacity: 0;
}
.bubble.is-popped {
  animation:
    reveal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    bob 4s ease-in-out 540ms infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.bubble__tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-right: 2px solid #EFE9E0;
  border-bottom: 2px solid #EFE9E0;
}

.moon {
  position: relative;
  width: 280px;
  height: 280px;
  /* The .moon box resizes between modes (see day rule below). If
     that change snapped at the mid-arc mode commit, the incoming
     mascot — sized at width:100% of .moon — would visibly shrink
     mid-flight and read as a glitchy drop. Transitioning width/
     height across the arc duration spreads the resize over the
     full flight so the mascot grows/shrinks smoothly while it
     arcs. The arc-start override below kicks the resize off at
     t=0 (not at the midpoint), so it completes in lockstep with
     the mascot landing. */
  transition:
    width  600ms cubic-bezier(0.4, 0, 0.2, 1),
    height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sunny needs more room than Moony — bumping the layout box itself
   means the bubble above and the tagline below get pushed clear,
   instead of a transform scale silently overflowing onto them. */
[data-time-mode="day"] .moon {
  width: 360px;
  height: 360px;
}
/* During the arc, drive .moon to its TARGET size from t=0 (when
   data-mode-transitioning is set) instead of waiting for the mode
   commit at the midpoint. Higher specificity than the day rule
   above so it wins while the arc is in flight, regardless of
   which data-time-mode is currently set. */
html[data-mode-transitioning="to-night"] .moon { width: 280px; height: 280px; }
html[data-mode-transitioning="to-day"]   .moon { width: 360px; height: 360px; }
.moon__halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 246, 205, 0.40) 0%, rgba(255, 246, 205, 0) 60%);
  filter: blur(8px);
  animation: halo 6s ease-in-out infinite;
}
.moon__pose {
  /* Wrapper for the arc animation — gets the horizontal sweep
     (linear) while the inner .moon__img handles vertical descent
     / rise (ease-in or ease-out) plus scale + opacity. Splitting
     axes across parent + child is how we get a true parabolic
     curve in pure CSS: each axis can have its own easing and
     they compose visually into a projectile arc. */
  position: absolute;
  inset: 0;
  /* CRITICAL: anchor the element's TOP-LEFT (not its center) to
     the path point. The arc paths were authored assuming path
     (0,0) lands the mascot at .moon's center — i.e. coordinates
     are read as "offset from natural-center."

     But the default offset-anchor is `auto` (≡ transform-origin
     ≡ 50% 50%), which places the element's CENTER at the path
     point. Path coords are interpreted in the element's reference
     box, whose origin is at the natural top-left. So at path
     (0, 0) the element's center lands at the natural top-left —
     i.e. the mascot displays at the upper-left corner of where it
     should be. (offset-position can't shift this: per spec it's
     ignored when path() starts with an absolute `M`.)

     With offset-anchor at 0 0, the element's top-left follows the
     path instead. At path (0, 0) the top-left sits at natural
     top-left and the element fills .moon naturally, putting the
     mascot's center at .moon's center. At non-zero points the
     center lands at natural-center + path_point, which is exactly
     the parabolic trajectory the paths were written for. Removing
     offset-path at arc end causes no snap because the path's
     resting point already matches the natural fill position. */
  offset-anchor: 0 0;
}
.moon__img {
  /* Now positioned inside .moon__pose, but the inset: 0 still
     fills the same box so the visual size is unchanged. Day +
     night mascots stack via their respective .moon__pose
     siblings — both poses occupy the same .moon frame, and
     the inner image opacities pick which is visible. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  transition: opacity 600ms ease;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── Tagline ── */
.tagline {
  margin: 0;
  max-width: 28ch;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}
@media (min-width: 600px) { .tagline { font-size: 26px; } }

/* ── Social links — small icon row under the coming-soon eyebrow.
      Same warm cream as accents, modest hover lift. */
.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 18px 0 0;
  position: relative;
  z-index: 1;
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.socials a:hover,
.socials a:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  outline: none;
}
.socials svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Store badges ── */
.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  height: 60px;
  border-radius: 16px;
  /* Night palette — same as the mode toggle. bg matches the top
     of the splash gradient (#0f1c4a); trim is the lighter navy
     used elsewhere as a raised shelf accent. */
  background: #0f1c4a;
  border: 2px solid #3a4a85;
  border-bottom-width: 4px;
  text-decoration: none;
  transition:
    transform 90ms cubic-bezier(0.2, 0, 0, 1),
    border-bottom-width 90ms cubic-bezier(0.2, 0, 0, 1),
    background 600ms ease,
    border-color 600ms ease;
}
.badge:active { transform: translateY(2px); border-bottom-width: 2px; }
/* Pending review state — visually subdued + no press affordance.
   Applied via the .badge--pending modifier when the corresponding
   platform store listing isn't live yet (currently iOS while it's
   under App Store review). */
.badge--pending {
  opacity: 0.55;
  filter: saturate(0.7);
  cursor: not-allowed;
  pointer-events: none;
}
.badge--pending:active { transform: none; border-bottom-width: 4px; }
.badge__img { transition: opacity 500ms ease; }
.badge__img {
  display: block;
  height: 38px;
  width: auto;
}


/* ── Page entrance reveal ──
   Each `.reveal` element starts hidden and fades in on its own
   delay (set per-element via inline `--d`). Overlapping easings
   produce a smooth orchestrated load: wordmark → moony → bubble →
   tagline → badges. Pure CSS, no GSAP needed. */
.reveal {
  opacity: 0;
  animation: reveal-up 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) forwards;
}
.reveal--down {
  animation-name: reveal-down;
}
.reveal--up {
  animation-name: reveal-up;
}
.reveal--scale {
  animation-name: reveal-scale;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1);
}
.reveal--pop {
  animation-name: reveal-pop;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reveal-up {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-down {
  0%   { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-scale {
  0%   { opacity: 0; transform: scale(0.55) translateY(18px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes reveal-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* The moon entrance and its continuous float live on different
   layers (wrapper handles entrance, .moon__img keeps floating).
   The bubble's pop entrance replaces the standalone pop+bob it had
   before; the bob continues via a delayed second animation. */
.bubble.reveal--pop {
  animation:
    reveal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms) forwards,
    bob 4s ease-in-out calc(var(--d, 0ms) + 540ms) infinite;
}

/* ── Small-screen tuning so the splash fits in 100dvh on
       short/narrow phones (iPhone SE 375×667, mini, etc.) ── */
@media (max-height: 760px), (max-width: 420px) {
  .splash__top { padding-top: calc(max(env(safe-area-inset-top, 0px), 12px) + 28px); }
  .splash__content { gap: 20px; padding: 18px 20px 14px; }
  .wordmark { width: 180px; }
  .moon { width: 224px; height: 224px; }
  [data-time-mode="day"] .moon { width: 288px; height: 288px; }
  html[data-mode-transitioning="to-night"] .moon { width: 224px; height: 224px; }
  html[data-mode-transitioning="to-day"]   .moon { width: 288px; height: 288px; }
  .hero { gap: 14px; }
  .bubble { font-size: 13px; padding: 10px 14px; max-width: 240px; }
  .tagline { font-size: 19px; }
  .badges { gap: 10px; }
  .badge { height: 54px; padding: 5px 8px; }
  .badge__img { height: 34px; }
}
@media (max-height: 640px) {
  .splash__content { gap: 14px; padding: 24px 20px 12px; }
  .moon { width: 196px; height: 196px; }
  [data-time-mode="day"] .moon { width: 252px; height: 252px; }
  html[data-mode-transitioning="to-night"] .moon { width: 196px; height: 196px; }
  html[data-mode-transitioning="to-day"]   .moon { width: 252px; height: 252px; }
  .hero { gap: 10px; }
  .tagline { font-size: 17px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .star, .cloud, .shoot, .moon__img, .moon__halo, .bubble,
  .reveal, .reveal--down, .reveal--up, .reveal--scale, .reveal--pop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Day/night mascot arc swap ───────────────────────────────
   When the EFFECTIVE time-mode changes (day↔night), the outgoing
   mascot arcs down-and-out to the lower-LEFT (sets like the sun
   in the west) while the incoming mascot arcs up-and-in from the
   lower-RIGHT (rises). The rest of the page stays put — gradient
   crossfades behind via the existing .splash transition; stars /
   clouds swap on the data-time-mode change.

   The arc is a TRUE parabola, not an approximation. We split it
   across the .moon__pose wrapper (horizontal sweep, linear) and
   the inner .moon__img (vertical rise/fall + scale + opacity,
   each on its own ease curve). Each axis interpolates smoothly
   from-to with a single easing function — no piecewise-linear
   midpoints kinking the path — and they compose visually into
   a projectile arc. Setting uses ease-in (slow at the peak,
   accelerating like gravity); rising uses ease-out (fast off
   the horizon, decelerating to settle at the peak).

   See window.MP_setMode → arcSwap in i18n.js for the JS
   choreography. Pref-only changes skip the arc; so does
   prefers-reduced-motion (the existing 600ms .moon__img opacity
   crossfade handles those via the static rules). */

/* Mascot motion — true Bezier curve via offset-path. The pose
   wrapper follows an SVG quadratic curve; browser interpolates
   the actual path (not piecewise straight lines between
   keyframes), so the trajectory has no kinks AND we can shape
   the speed along it with a single non-linear timing function
   — much more "celestial drift" than the previous linear-X /
   ease-Y composition, which moved at constant horizontal
   velocity and read as mechanical.

   Paths use absolute pixel coords (the path() function won't
   accept vw/vh). 2000×1500 is sized to push the mascot fully
   off-screen on viewports up to ~3500px wide / 2200px tall —
   covers everything from mobile to 4K. Control point at
   (±900, 0) keeps the curve concave-down: mascot drifts mostly
   horizontally early, then drops rapidly toward the end — the
   shape an actual sun traces between zenith and horizon. */

@keyframes mp-pose-out {
  from { offset-distance: 0%;   opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}
@keyframes mp-pose-in {
  from { offset-distance: 0%;   opacity: 0; }
  to   { offset-distance: 100%; opacity: 1; }
}
@keyframes mp-img-shrink { from { transform: scale(1);    } to { transform: scale(0.42); } }
@keyframes mp-img-grow   { from { transform: scale(0.42); } to { transform: scale(1);    } }

/* Going to night — sun sets, moon rises. */
html[data-mode-transitioning="to-night"] .moon__pose--day {
  offset-path: path("M 0 0 Q -900 0 -2000 1500");
  offset-rotate: 0deg;
  animation: mp-pose-out 600ms cubic-bezier(0.55, 0, 0.95, 0.45) forwards;
}
html[data-mode-transitioning="to-night"] .moon__pose--day .moon__img {
  animation: mp-img-shrink 600ms cubic-bezier(0.55, 0, 0.95, 0.45) forwards;
  opacity: 1;
}
html[data-mode-transitioning="to-night"] .moon__pose--night {
  offset-path: path("M 2000 1500 Q 900 0 0 0");
  offset-rotate: 0deg;
  animation: mp-pose-in 600ms cubic-bezier(0.05, 0.55, 0.35, 1) forwards;
}
html[data-mode-transitioning="to-night"] .moon__pose--night .moon__img {
  animation: mp-img-grow 600ms cubic-bezier(0.05, 0.55, 0.35, 1) forwards;
  opacity: 1;
}

/* Going to day — moon sets, sun rises. */
html[data-mode-transitioning="to-day"] .moon__pose--night {
  offset-path: path("M 0 0 Q -900 0 -2000 1500");
  offset-rotate: 0deg;
  animation: mp-pose-out 600ms cubic-bezier(0.55, 0, 0.95, 0.45) forwards;
}
html[data-mode-transitioning="to-day"] .moon__pose--night .moon__img {
  animation: mp-img-shrink 600ms cubic-bezier(0.55, 0, 0.95, 0.45) forwards;
  opacity: 1;
}
html[data-mode-transitioning="to-day"] .moon__pose--day {
  offset-path: path("M 2000 1500 Q 900 0 0 0");
  offset-rotate: 0deg;
  animation: mp-pose-in 600ms cubic-bezier(0.05, 0.55, 0.35, 1) forwards;
}
html[data-mode-transitioning="to-day"] .moon__pose--day .moon__img {
  animation: mp-img-grow 600ms cubic-bezier(0.05, 0.55, 0.35, 1) forwards;
  opacity: 1;
}

/* Mode-dependent content (bubble + tagline + store badges) has
   i18n strings or SVG variants that swap at the midpoint mode
   commit. textContent and SVG src changes can't be transitioned
   — they snap. Without this, the smooth mascot arc plays
   against jarring text/badge flips and the whole thing reads as
   janky. Fade these elements out before the commit, hold them
   invisible while the swap happens, fade them back in with new
   content. Window is 35%→65% (210→390ms of 600ms total), which
   straddles the midpoint commit at 300ms with margin. */
@keyframes mp-content-fade {
  0%       { opacity: 1; }
  35%, 65% { opacity: 0; }
  100%     { opacity: 1; }
}
/* CRITICAL: when overriding `animation` on .bubble/.tagline, we
   must RE-LIST the element's underlying animations (reveal-pop +
   bob for the popped bubble; reveal-up for the tagline) alongside
   mp-content-fade. Browsers match running animations by name —
   identical names in old and new lists continue uninterrupted;
   missing names restart from 0% when re-added.

   If we only put mp-content-fade in the override, then at arc end
   when the attribute is removed and the underlying class rule
   re-applies, reveal-pop and reveal-up restart fresh: the bubble
   re-pops from scale(0.6) translateY(8px) (briefly invisible and
   8px below its resting spot, then overshoots back up), and the
   tagline drops 18px and re-reveals. Visually this reads as the
   bubble snapping back into place ABOVE the just-landed mascot,
   making the mascot appear to drop below the bubble.

   Badges parent has no underlying animation (the .badge children
   carry reveal independently and stay in forwards-held state), so
   it only needs mp-content-fade. */
html[data-mode-transitioning] .bubble.is-popped {
  animation:
    reveal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    bob 4s ease-in-out 540ms infinite,
    mp-content-fade 600ms ease-in-out forwards;
}
html[data-mode-transitioning] .tagline {
  animation:
    reveal-up 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) forwards,
    mp-content-fade 600ms ease-in-out forwards;
}
html[data-mode-transitioning] .badges {
  animation: mp-content-fade 600ms ease-in-out forwards;
}

/* GPU promotion hint — apply only during the transition so we
   don't keep a compositor layer alive for these elements when
   the page is idle. */
html[data-mode-transitioning] .moon__pose             { will-change: offset-distance, opacity; }
html[data-mode-transitioning] .moon__pose .moon__img  { will-change: transform; }

/* The halo lives at the .moon center; with the mascot off on
   its arc, leaving the halo visible would orphan a glow in the
   middle of the screen. Fade out for the duration. */
html[data-mode-transitioning] .moon__halo { opacity: 0; transition: opacity 180ms ease; }

/* Block re-clicks on the mode toggle mid-arc. (The `flipping`
   JS flag is the authoritative guard; this is the visual
   safety net.) */
html[data-mode-transitioning] body { pointer-events: none; }

/* ============================================================
   Content pages — Pricing, Gift, Features, FAQ, About.
   Share a slim top nav + a multi-column footer; each page's
   content lives between them. Same warm-cream-on-deep-navy
   palette as the splash so they read as one product.
   ============================================================ */

/* ── Site-wide top nav ──
   Mirrors the splash flanking layout (`splash__top` / `splash__nav`)
   so inner pages feel like a continuation of the landing rather than
   a separate, utilitarian sticky bar: transparent background, flex
   centered with a generous gap, wordmark in the middle as the anchor. */
.site-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  padding: calc(max(env(safe-area-inset-top, 0px), 16px) + 28px) 32px 0;
}
.site-nav__left,
.site-nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-nav__logo img {
  height: 32px;
  width: auto;
}
.site-nav__left a,
.site-nav__right a {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 160ms ease;
  white-space: nowrap;
}
.site-nav__left a:hover,
.site-nav__right a:hover,
.site-nav__left a[aria-current="page"],
.site-nav__right a[aria-current="page"] {
  color: #fff;
}
/* "Gift Moonpath" — warm-cream text link so it stands out from
   the other nav links without becoming a button. */
.site-nav__gift {
  color: #FFE3A3 !important;
  font-weight: 800 !important;
  transition: color 160ms ease;
}
.site-nav__gift:hover { color: #ffd97e !important; }

/* Tablet — tighten gaps */
@media (max-width: 900px) {
  .site-nav { gap: 32px; padding-left: 24px; padding-right: 24px; }
  .site-nav__left, .site-nav__right { gap: 22px; }
}
/* Phone — side links collapse (footer carries them); wordmark
   centers solo, matching the splash mobile behavior. */
@media (max-width: 640px) {
  .site-nav { gap: 16px; }
  .site-nav__left, .site-nav__right { display: none; }
  .site-nav__logo img { height: 26px; }
}

/* ── Page wrapper + hero ── */
.page {
  position: relative;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, #0f1c4a 0%, #15235a 50%, #0f1c4a 100%);
  color: #fff;
}
.page__main {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}
.page__hero { text-align: center; margin-bottom: 40px; }
.page__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #FFE3A3;
}
.page__title {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page__subtitle {
  margin: 0 auto;
  max-width: 520px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 640px) {
  .page__main { padding: 36px 20px 56px; }
  .page__title { font-size: 32px; }
  .page__subtitle { font-size: 15px; }
}

/* ── Pricing card ── */
.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.price-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}
.price-toggle button {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.price-toggle button[aria-pressed="true"] {
  background: #FFE3A3;
  color: #0f1c4a;
}
.price-toggle__save {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(255, 227, 163, 0.18);
  color: #FFE3A3;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: 2px;
}
.price-toggle button[aria-pressed="true"] .price-toggle__save {
  background: #0f1c4a;
  color: #FFE3A3;
}

.price-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 28px 28px 24px;
  text-align: center;
}
.price-card__plan {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #FFE3A3;
}
.price-card__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
}
.price-card__amount .num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-card__amount .per {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}
.price-card__note {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.price-card__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%230f1c4a" d="M6.5 11.2 3.7 8.4l1.1-1.1 1.7 1.7 4.7-4.7 1.1 1.1z"/></svg>') center / contain no-repeat,
    #FFE3A3;
}
.price-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  /* Matches the saturated blue of the active Home-tab icon
     (--color-mp-blue-500), with white ink and a deeper-blue
     bottom shelf (--color-mp-blue-700). */
  background: oklch(0.72 0.16 245);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.01em;
  border: 2px solid oklch(0.50 0.17 245);
  border-bottom-width: 4px;
  transition: transform 120ms ease;
}
.price-card__cta:hover { transform: translateY(-1px); }
.price-card__cta:active { transform: translateY(2px); border-bottom-width: 2px; }
.price-card__secondary {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.price-card__secondary:hover { color: #FFE3A3; }
.price-card__fineprint {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* Trust strip below the pricing card */
.trust-strip {
  margin-top: 36px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.trust-card {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.trust-card__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFE3A3;
  margin: 0 0 6px;
}
.trust-card__copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  line-height: 1.4;
}

/* ── Gift page ── */
.gift-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.gift-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  /* Reserved 4px transparent bottom edge so inactive + active
     tiles have the same total height — the active state fills it
     in with a darker-amber shelf to read as raised. */
  border-bottom: 4px solid transparent;
  border-radius: 16px;
  padding: 18px 8px 14px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 160ms ease, transform 120ms ease, color 160ms ease, border-color 160ms ease;
}
.gift-tile:hover { background: rgba(255, 255, 255, 0.10); }
.gift-tile[aria-pressed="true"] {
  background: #FFE3A3;
  border-bottom-color: #c89934;
  color: #0f1c4a;
  transform: translateY(-2px);
}
.gift-tile__duration {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.gift-tile__price {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #FFE3A3;
  transition: color 160ms ease;
}
.gift-tile__save {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 160ms ease;
}
.gift-tile[aria-pressed="true"] .gift-tile__duration { color: #0f1c4a; }
.gift-tile[aria-pressed="true"] .gift-tile__price    { color: #6b4d10; }
.gift-tile[aria-pressed="true"] .gift-tile__save     { color: #6b4d10; opacity: 0.7; }

.gift-form {
  display: grid;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 20px;
  padding: 0;
}
.gift-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.gift-form input,
.gift-form textarea {
  font-family: inherit;
  background: #1c2a5e;
  border: 2px solid #3a4a85;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 18px;
  outline: none;
  transition: border-color 160ms ease;
}
.gift-form input::placeholder,
.gift-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
.gift-form input:focus,
.gift-form textarea:focus {
  border-color: #FFE3A3;
}
.gift-form textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}
.gift-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .gift-row { grid-template-columns: 1fr; }
}
.gift-submit {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 14px;
  /* Matches the active Home-tab blue (--color-mp-blue-500),
     white ink, deeper-blue bottom shelf. */
  background: oklch(0.72 0.16 245);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  border: 2px solid oklch(0.50 0.17 245);
  border-bottom-width: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease;
}
.gift-submit:hover { transform: translateY(-1px); }
.gift-submit:active { transform: translateY(2px); border-bottom-width: 2px; }

/* ── Feature blocks ── */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 160px 0;
}
.feature-block:first-of-type { padding-top: 24px; }
.feature-block:last-of-type  { padding-bottom: 24px; }
.feature-block--reverse { direction: rtl; }
.feature-block--reverse > * { direction: ltr; }
.feature-block__media {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.feature-block__copy h3 {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.feature-block__copy p {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 640px) {
  .feature-block { padding: 96px 0; gap: 32px; }
  .feature-block__media { min-height: 280px; }
  .feature-block__copy h3 { font-size: 32px; }
  .feature-block__copy p { font-size: 18px; }
}
@media (max-width: 640px) {
  .feature-block,
  .feature-block--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ── FAQ ── */
.faq {
  display: grid;
  gap: 10px;
}
.faq details {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0;
  transition: background 280ms ease;
}
.faq details[open] { background: rgba(255, 255, 255, 0.08); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 600;
  color: #FFE3A3;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }

/* Smooth open/close morph via the new ::details-content pseudo-element
   + interpolate-size. Lets us transition from height:0 to height:auto
   without a JS measurement step. Browsers without support (Safari 18.3
   and earlier, Firefox at time of writing) fall through to the default
   snap-open behavior — accordion still works, just no glide. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0;
    opacity: 0;
    overflow: clip;
    transition:
      height 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease,
      content-visibility 320ms allow-discrete;
  }
  .faq details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}
.faq__answer {
  padding: 0 20px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.faq__answer a {
  color: #FFE3A3;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Multi-column site footer (content pages) ── */
.site-footer {
  padding: 80px 24px 64px;
  background: rgba(15, 28, 74, 0.6);
}
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.site-footer__col h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__col a {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  transition: color 160ms ease;
}
.site-footer__col a:hover { color: #fff; }
.site-footer__col--socials .row {
  display: flex;
  gap: 16px;
  margin-top: 2px;
}
.site-footer__col--socials .row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  padding: 0;
  transition: color 160ms ease;
}
.site-footer__col--socials .row a:hover { color: #fff; }
.site-footer__col--socials .row svg { width: 20px; height: 20px; display: block; }
.site-footer__bottom {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

/* Bottom legals row — sits below the col grid, divider on top, copy
   on the left, language switch on the right. Mirrors the visual rhythm
   of a typical marketing footer. */
.site-footer__legals {
  max-width: 960px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site-footer__legals .lang-switch { margin-top: 0; }
@media (max-width: 640px) {
  .site-footer__legals {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  /* Center the footer on mobile + bump small text so it clears the
     iOS 16px readability bar (also prevents auto-zoom on inputs). */
  .site-footer__col { text-align: center; }
  .site-footer__col--socials .row { justify-content: center; }
  .site-footer__col h4 { font-size: 14px; }
  .site-footer__col a  { font-size: 16px; }
  .site-footer__bottom { font-size: 16px; }
  .lang-switch         { font-size: 16px; gap: 12px; }
  .bubble              { font-size: 16px; }
  .faq summary         { font-size: 16px; }
  .faq__answer         { font-size: 16px; }
  .gift-form input,
  .gift-form textarea  { font-size: 16px; }
}

/* ============================================
   Light theme — opt-in via <body class="page page--light">.
   Used on features.html, pricing.html, gift.html.
   Flips backgrounds to warm white and text to navy while
   keeping the cream-and-navy accent palette intact.
   ============================================ */

.page--light {
  background: #ffffff;
  color: #0f1c4a;
}

/* Nav — match the home splash treatment: big wordmark centerpiece,
   more top padding, slightly wider gap between wordmark and links. */
.page--light .site-nav {
  gap: 72px;
  padding-top: calc(max(env(safe-area-inset-top, 0px), 16px) + 48px);
}
.page--light .site-nav__logo img {
  height: auto;
  width: 220px;
  max-width: 50vw;
}
@media (max-width: 900px) {
  .page--light .site-nav__logo img { width: 180px; }
}
@media (max-width: 640px) {
  .page--light .site-nav__logo img { width: 160px; }
}
.page--light .site-nav__left a,
.page--light .site-nav__right a { color: rgba(15, 28, 74, 0.72); }
.page--light .site-nav__left a:hover,
.page--light .site-nav__right a:hover,
.page--light .site-nav__left a[aria-current="page"],
.page--light .site-nav__right a[aria-current="page"] { color: #0f1c4a; }
.page--light .site-nav__gift { color: #b8841a !important; }
.page--light .site-nav__gift:hover { color: #8a5e10 !important; }

/* Hero */
.page--light .page__title    { color: #0f1c4a; }
.page--light .page__subtitle { color: rgba(15, 28, 74, 0.62); }
.page--light .page__eyebrow  { color: #b8841a; }

/* Price toggle */
.page--light .price-toggle {
  background: #fff;
  border-color: #e5dfc8;
}
.page--light .price-toggle button { color: rgba(15, 28, 74, 0.55); }
.page--light .price-toggle button[aria-pressed="true"] {
  background: #0f1c4a;
  color: #fff;
}
.page--light .price-toggle__save {
  background: rgba(255, 227, 163, 0.45);
  color: #8a5e10;
}
.page--light .price-toggle button[aria-pressed="true"] .price-toggle__save {
  background: #FFE3A3;
  color: #0f1c4a;
}

/* Price card */
.page--light .price-card {
  background: #fff;
  border-color: #e8e2cc;
  color: #0f1c4a;
}
.page--light .price-card__plan       { color: #b8841a; }
.page--light .price-card__amount .per,
.page--light .price-card__note       { color: rgba(15, 28, 74, 0.55); }
.page--light .price-card__list li    { color: #2a3760; }
.page--light .price-card__fineprint  { color: rgba(15, 28, 74, 0.50); }
.page--light .price-card__secondary  { color: rgba(15, 28, 74, 0.62); }
.page--light .price-card__secondary:hover { color: #b8841a; }

/* Trust */
.page--light .trust-card { background: #fff; }
.page--light .trust-card__eyebrow { color: #b8841a; }
.page--light .trust-card__copy    { color: rgba(15, 28, 74, 0.65); }

/* Gift tiles — proper white panels matching the other light-theme cards.
   Same 2px-sides + 4px-bottom-shelf structure as the button, just with
   the same cream-grey on all four edges so the perimeter closes cleanly. */
.page--light .gift-tile {
  background: #fff;
  border: 2px solid #e8e2cc;
  border-bottom-width: 4px;
  color: #0f1c4a;
}
.page--light .gift-tile:hover { background: #fbf7eb; }
.page--light .gift-tile__price { color: #b8841a; }
.page--light .gift-tile__save  { color: rgba(15, 28, 74, 0.50); }
.page--light .gift-tile[aria-pressed="true"] {
  background: #FFE3A3;
  border-color: #c89934;
}

/* Gift form */
.page--light .gift-form label { color: rgba(15, 28, 74, 0.62); }
.page--light .gift-form input,
.page--light .gift-form textarea {
  background: #fff;
  border-color: #d8d2bd;
  color: #0f1c4a;
}
.page--light .gift-form input::placeholder,
.page--light .gift-form textarea::placeholder {
  color: rgba(15, 28, 74, 0.40);
}
.page--light .gift-form input:focus,
.page--light .gift-form textarea:focus { border-color: #b8841a; }

/* Feature blocks */
.page--light .feature-block__media {
  background: linear-gradient(180deg, rgba(15, 28, 74, 0.06), rgba(15, 28, 74, 0.02));
  border-color: rgba(15, 28, 74, 0.10);
  color: rgba(15, 28, 74, 0.42);
}
.page--light .feature-block__copy h3 { color: #0f1c4a; }
.page--light .feature-block__copy p  { color: rgba(15, 28, 74, 0.70); }

/* Footer */
.page--light .site-footer {
  background: #fff;
  border-top-color: #ebe4cf;
}
.page--light .site-footer__col h4 { color: #0f1c4a; }
.page--light .site-footer__col a  { color: rgba(15, 28, 74, 0.62); }
.page--light .site-footer__col a:hover { color: #b8841a; }
.page--light .site-footer__col--socials .row a { color: rgba(15, 28, 74, 0.72); }
.page--light .site-footer__col--socials .row a:hover { color: #0f1c4a; }
.page--light .site-footer__bottom { color: rgba(15, 28, 74, 0.40); }
.page--light .site-footer__legals { border-top-color: rgba(15, 28, 74, 0.10); }

/* FAQ */
.page--light .faq details {
  background: #fff;
  border-color: #e8e2cc;
}
.page--light .faq details[open] { background: #fff; }
.page--light .faq summary { color: #0f1c4a; }
.page--light .faq summary::after { color: #b8841a; }
.page--light .faq__answer { color: rgba(15, 28, 74, 0.70); }
.page--light .faq__answer a { color: #b8841a; }

/* ============================================
   TEMPORARY — payments not live yet
   Hides Features / Pricing / Gift Moonpath entry points across the
   site (top nav, mobile menu, footer Product column, splash flanks).
   The pages themselves still exist (features.html, pricing.html,
   gift.html) and are reachable by direct URL, just unlinked from the
   nav. Delete this whole rule to bring the links back.
   ============================================ */
[data-i18n="nav.home"],
[data-i18n="nav.features"],
[data-i18n="nav.pricing"],
[data-i18n="nav.gift"],
[data-i18n="footer.product.features"],
[data-i18n="footer.product.pricing"],
[data-i18n="footer.product.gift"],
[data-i18n="footer.legal.kids"] {
  display: none !important;
}

/* ============================================
   Day / night time mode
   Toggle button sits top-right on every page;
   the splash swaps Moony for Sunny and hides
   the starfield when data-time-mode="day".
   ============================================ */

/* Mascot swap — opacity crossfade (powered by the .moon__img base
   rule above). Both mascots are always rendered, only one is opaque
   at a time, so the day/night flip is a smooth 600ms fade. */
.moon__img--day   { opacity: 0; }
.moon__img--night { opacity: 1; }
[data-time-mode="day"] .moon__img--night { opacity: 0; }
[data-time-mode="day"] .moon__img--day   { opacity: 1; }

/* Hold the non-current-mode mascot's POSE opacity at 0 alongside
   the image's opacity. Without this, at arc end the .moon__pose
   reverts from mp-pose-out's forwards-held 0 back to its default
   1 the instant the data-mode-transitioning rule stops matching —
   a hard snap from invisible to opaque. The .moon__img is still
   transitioning its opacity back to 0 (the 600ms .moon__img fade
   is just starting), so for a beat the combined pose × img is
   1 × 1 = 1: the outgoing mascot flashes back into view behind
   the incoming one before fading out.

   Pinning the pose's opacity at 0 in the new mode means when the
   arc animation falls off, the static opacity it reverts to is
   already 0 — matching where mp-pose-out left it. No snap, no
   flash. The current-mode pose keeps the default opacity 1, so
   the incoming mascot stays fully visible at landing. */
[data-time-mode="day"]   .moon__pose--night { opacity: 0; }
[data-time-mode="night"] .moon__pose--day   { opacity: 0; }

/* Sunny brings his own rays — Moony's halo is hidden in day mode */
[data-time-mode="day"] .moon__halo { display: none; }

/* Starfield is a night thing; clouds emerge in day. Both fade
   via opacity (700ms transition lives on the base .star /
   .cloud rules) so the sky shift reads as a smooth dissolve
   rather than a snap. Shoots get an instant cut — they're
   brief streaks anyway, easier to just stop the animation than
   fade mid-trajectory. */
[data-time-mode="day"] .sky .star  { opacity: 0; }
[data-time-mode="day"] .sky .shoot { animation: none; opacity: 0; }
/* Day clouds — cumulus-shaped via overlapping radial gradients.
   Real clouds have:
     • a flat-ish underside (condensation level) — bottom lobes are
       wider and sit lower, top lobes are smaller and higher
     • bright white tops + softly shadowed undersides
     • asymmetry, so each cloud variant gets its own gradient pattern
   Filter blur smooths the lobe seams so they read as a single body. */
[data-time-mode="day"] .sky .cloud {
  background:
    /* base body — wide bottom lobe sets the flatter underside */
    radial-gradient(ellipse 70% 55% at 50% 70%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 75%),
    /* top puff — left of center */
    radial-gradient(ellipse 35% 55% at 32% 38%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    /* top puff — right of center, slightly bigger */
    radial-gradient(ellipse 40% 60% at 62% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    /* small bonus puff up top for cumulus stacking */
    radial-gradient(ellipse 25% 40% at 48% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 75%),
    /* soft underside shadow — cool blue-tinted, barely there */
    radial-gradient(ellipse 65% 30% at 50% 92%, rgba(170, 195, 220, 0.30) 0%, rgba(170, 195, 220, 0) 70%);
  filter: blur(6px);
  opacity: 1;
}

/* Variant: wispier / longer cloud — used on cloud--2, cloud--5 */
[data-time-mode="day"] .sky .cloud--2,
[data-time-mode="day"] .sky .cloud--5 {
  background:
    radial-gradient(ellipse 78% 45% at 50% 62%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 28% 50% at 25% 42%, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 32% 55% at 55% 38%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 26% 45% at 80% 45%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 60% 25% at 50% 88%, rgba(170, 195, 220, 0.25) 0%, rgba(170, 195, 220, 0) 70%);
}

/* Variant: small/distant cloud — softer, more faded for depth.
   Used on cloud--4, cloud--7 to suggest distance. */
[data-time-mode="day"] .sky .cloud--4,
[data-time-mode="day"] .sky .cloud--7 {
  background:
    radial-gradient(ellipse 65% 60% at 50% 60%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 35% 50% at 30% 40%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 38% 55% at 65% 38%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0) 75%);
  filter: blur(8px);
  opacity: 0.75;
}

/* Day-mode splash gradient — a bright, cheerful sky blue.
   IMPORTANT: stop positions must match the night gradient's
   (0% / 30% / 70% / 100%) so browsers can interpolate between
   them smoothly. Mismatched stop counts force a snap. */
[data-time-mode="day"] .splash {
  background:
    linear-gradient(180deg, #6ba0d8 0%, #8ebfe6 30%, #a4cdeb 70%, #b3d8ef 100%);
}

/* Index splash footer in day mode — bg picks up the sky-gradient's
   bottom stop so the footer continues the sky instead of dropping
   into a navy block. Scoped with body:not(.page--light) so the
   light-themed inner pages keep their existing white footer. */
[data-time-mode="day"] body:not(.page--light) .site-footer { background: #b3d8ef; }
[data-time-mode="day"] body:not(.page--light) .site-footer__col h4 { color: #0f1c4a; }
[data-time-mode="day"] body:not(.page--light) .site-footer__col a  { color: rgba(15, 28, 74, 0.62); }
[data-time-mode="day"] body:not(.page--light) .site-footer__col a:hover { color: #0f1c4a; }
[data-time-mode="day"] body:not(.page--light) .site-footer__col--socials .row a { color: rgba(15, 28, 74, 0.72); }
[data-time-mode="day"] body:not(.page--light) .site-footer__col--socials .row a:hover { color: #0f1c4a; }
[data-time-mode="day"] body:not(.page--light) .site-footer__legals {
  border-top-color: rgba(15, 28, 74, 0.10);
}
[data-time-mode="day"] body:not(.page--light) .site-footer__bottom { color: rgba(15, 28, 74, 0.45); }
[data-time-mode="day"] body:not(.page--light) .lang-switch a { color: rgba(15, 28, 74, 0.45); }
[data-time-mode="day"] body:not(.page--light) .lang-switch a:hover { color: #0f1c4a; }
[data-time-mode="day"] body:not(.page--light) .lang-switch a[aria-current="true"] { color: #b8841a; }
[data-time-mode="day"] body:not(.page--light) .lang-switch__sep { color: rgba(15, 28, 74, 0.22); }

/* App store badges — crossfade between the night SVG (navy pill) and
   day SVG (sky-blue pill) on mode change. Both SVGs occupy the same
   CSS grid cell so they stack on top of each other while keeping the
   .badge container properly sized. */
.badge {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  place-items: center;
}
.badge__img--night,
.badge__img--day {
  grid-area: 1 / 1;
}
.badge__img--day   { opacity: 0; }
.badge__img--night { opacity: 1; }
[data-time-mode="day"] .badge__img--night { opacity: 0; }
[data-time-mode="day"] .badge__img--day   { opacity: 1; }
[data-time-mode="day"] .badge {
  /* Day palette — bg is the lighter stop of the sky gradient
     (#b3d8ef, the bottom of the splash); trim is the mid stop
     (#8ebfe6, slightly darker than bg so the shelf reads). */
  background: #b3d8ef;
  border-color: #8ebfe6;
}

/* The toggle button — absolutely positioned top-right at the start of
   the document so it scrolls away with the rest of the page (not
   sticky). Round, raised, slightly bigger than a chip; matches the
   .badge / .price-card__cta shelf treatment. */
.mode-toggle {
  position: absolute;
  top: calc(max(env(safe-area-inset-top, 0px), 16px) + 32px);
  right: 32px;
  z-index: 100;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Night palette — bg matches the top of the splash gradient
     (#0f1c4a), trim is the lighter navy used elsewhere as raised
     shelf accent. */
  background: #0f1c4a;
  border: 2px solid #3a4a85;
  border-bottom-width: 4px;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition:
    transform 90ms cubic-bezier(0.2, 0, 0, 1),
    border-bottom-width 90ms cubic-bezier(0.2, 0, 0, 1),
    background 600ms ease,
    border-color 600ms ease,
    color 600ms ease;
}
.mode-toggle:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
.mode-toggle__icon { width: 22px; height: 22px; display: block; }
.mode-toggle__sun,
.mode-toggle__moon,
.mode-toggle__auto { display: none; }
/* Icon shows the CURRENT preference. Cycle goes auto → day → night. */
[data-time-pref="auto"]  .mode-toggle__auto { display: block; }
[data-time-pref="day"]   .mode-toggle__sun  { display: block; }
[data-time-pref="night"] .mode-toggle__moon { display: block; }
/* No JS yet → assume auto (the default state) */
html:not([data-time-pref]) .mode-toggle__auto { display: block; }

/* Day palette — bg matches the top of the day splash gradient
   (#6ba0d8). Trim is the lighter mid-gradient blue (#8ebfe6)
   so the raised shelf still reads. White icon for contrast. */
[data-time-mode="day"] .mode-toggle {
  background: #6ba0d8;
  border-color: #8ebfe6;
  color: #ffffff;
}

/* Light pages (Features / Pricing / Gift / FAQ / About / Gift-thanks)
   need a softer treatment — a white pill with a warm-grey shelf
   matches the rest of the light-theme cards instead of plopping a
   heavy navy button on a clean white canvas. Mode just swaps the icon. */
.page--light .mode-toggle,
.page--light .menu-toggle {
  background: #ffffff;
  border-color: #e8e2cc;
  color: #0f1c4a;
}

@media (max-width: 640px) {
  .mode-toggle { right: 16px; }
}

/* ============================================
   Mobile menu — hamburger on the left, full-screen overlay
   with the nav links. Same raised pill style as the mode toggle.
   Desktop nav is untouched (.site-nav__left/--right still show).
   ============================================ */
.menu-toggle {
  display: none;
  position: absolute;
  top: calc(max(env(safe-area-inset-top, 0px), 16px) + 32px);
  left: 32px;
  z-index: 100;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  /* Same palette as .mode-toggle */
  background: #0f1c4a;
  border: 2px solid #3a4a85;
  border-bottom-width: 4px;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition:
    transform 90ms cubic-bezier(0.2, 0, 0, 1),
    border-bottom-width 90ms cubic-bezier(0.2, 0, 0, 1);
}
.menu-toggle:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
[data-time-mode="day"] .menu-toggle {
  background: #6ba0d8;
  border-color: #8ebfe6;
  color: #ffffff;
}
/* Light-page override is shared with .mode-toggle above (selector
   list further up). Defining it once keeps the two buttons in sync. */
.menu-toggle__icon { width: 22px; height: 22px; display: block; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (max-width: 640px) {
  .menu-toggle { display: inline-flex; left: 16px; }
}

/* Full-screen menu overlay — hidden by default; shown when
   html[data-menu-open] is set by the toggle handler in i18n.js. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(15, 28, 74, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
}
html[data-menu-open] .menu-overlay { display: flex; }
[data-time-mode="day"] .menu-overlay { background: rgba(107, 160, 216, 0.96); }

.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.menu-overlay__nav a {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 120ms ease;
}
.menu-overlay__nav a:hover { opacity: 0.8; }
.menu-overlay__nav a.site-nav__gift {
  color: #FFE3A3 !important;
}

/* Language switch lives at the bottom of the overlay on mobile.
   Bigger letters + wider gap to match menu item scale. */
.menu-overlay__lang {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.menu-overlay__lang .lang-switch {
  font-size: 18px;
  gap: 16px;
}
.menu-overlay__lang .lang-switch a {
  color: rgba(255, 255, 255, 0.6);
}
.menu-overlay__lang .lang-switch a:hover { color: #ffffff; }
.menu-overlay__lang .lang-switch a[aria-current="true"] { color: #ffffff; }
.menu-overlay__lang .lang-switch__sep { color: rgba(255, 255, 255, 0.5); }

/* ============================================
   i18n: pre-paint body hide + language switch
   ============================================ */
/* Set by i18n.js (well, by the inline <head> script) — hides the body
   until MP_applyLangSync() has swapped strings to the chosen language,
   preventing an English flash for FR/ES visitors. */
html[data-i18n-hidden] body { visibility: hidden; }

.lang-switch {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lang-switch a {
  display: inline-block;
  padding: 0;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 160ms ease;
}
.lang-switch a:hover { color: rgba(255, 255, 255, 0.85); }
.lang-switch a[aria-current="true"] { color: #FFE3A3; }
.lang-switch__sep {
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}

/* Light theme — switch on white pages */
.page--light .lang-switch a { color: rgba(15, 28, 74, 0.45); }
.page--light .lang-switch a:hover { color: #0f1c4a; }
.page--light .lang-switch a[aria-current="true"] { color: #b8841a; }
.page--light .lang-switch__sep { color: rgba(15, 28, 74, 0.22); }