/*
 * Mallow, the landing page.
 * Layout: one night, top to bottom. The hero is daytime, the story turns to night halfway down
 * and back to morning, and the page ends under the stars. Every band runs full width; content sits
 * in a 1180px column. Tokens follow HANDOFF.md (day, night, Duolingo-style 3D buttons, Fredoka + Nunito).
 */

@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* day */
  --cream: #FFF7EC;
  --ink: #2E2118;
  --muted: #6E5A4B;
  --soft: #7A6656;
  --faint: #8E7A68;
  --card: #FFEFD9;
  --white: #FFFFFF;
  --line: #F1E3CF;
  --chip-line: #EADBC6;
  --track: #F3E2CA;
  /* night */
  --night: #17183F;
  --night-2: #1E1F4B;
  --night-card: #23245A;
  --night-deep: #2B2A63;
  --night-text: #F3F0FF;
  --night-muted: #B9B6E0;
  --night-soft: #CFCBF2;
  --night-line: #3A3B7A;
  /* 3D button tones: face and lip */
  --yellow: #FFC940;
  --yellow-lip: #E3A21A;
  --green: #58CC7C;
  --green-lip: #3D9E5C;
  --purple: #8E86F0;
  --purple-lip: #6C62D9;
  --gold: #FFE27A;
  --gold-lip: #CDAA3A;
  /* accents */
  --star: #FFB520;
  --pink: #FF8FAB;
  --sky: #6CC2F2;
  --plus-bg: #EDEBFF;
  --plus-text: #5E56B8;
  --focus: #6C62D9;
  /* type */
  --display: 'Fredoka', 'Nunito', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-hero: clamp(2.6rem, 1.5rem + 4.4vw, 5.1rem);
  --t-h2: clamp(2.15rem, 1.45rem + 2.8vw, 3.6rem);
  --t-h3: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  --t-lead: clamp(1.125rem, 1.04rem + .38vw, 1.3rem);
  --t-body: 1.0625rem;
  /* motion (the app's motion vocabulary) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.2, .9, .3, 1.2);
  --ease-tick: cubic-bezier(.2, .9, .3, 1.3);
  --ease-roll: cubic-bezier(.3, 1.5, .5, 1);
  --ease-inout: cubic-bezier(.42, 0, .58, 1);
  --gutter: 20px;
  --nav-h: 72px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 600 var(--t-body)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--cream);
  transition: background-color .6s;
}
.is-top-dark body::before { background: #1C1D4C; }
/* parts of the page off screen pause their loops (main.js, initPauseAway) */
.is-away, .is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--cream);
  font-weight: 800; text-decoration: none; transition: top .2s;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap {
  width: 100%;
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- type ---------- */
.h2 { font: 600 var(--t-h2)/1.03 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.h3 { font: 600 var(--t-h3)/1.1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--muted); max-width: 33em; text-wrap: pretty; }

.pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1.05em .55em .9em; border-radius: 999px;
  font: 600 1rem/1 var(--display); letter-spacing: .005em;
  background: var(--plus-bg); color: var(--plus-text);
}
.pill .icon { font-size: 1.1em; }
.pill--hero { background: var(--white); color: var(--soft); box-shadow: inset 0 0 0 2px var(--line); }
.pill--coral { background: #FFE6DE; color: #A8492F; }
.pill--lilac { background: var(--plus-bg); color: var(--plus-text); }
.pill--night { background: var(--night-deep); color: var(--gold); }
.pill--yellow { background: #FFF1C4; color: #845500; }
.pill--pink { background: #FFE3EC; color: #A3355A; }
.pill--plus { background: rgba(255, 226, 122, .14); color: var(--gold); }
.pill--mint { background: #DFF4E6; color: #2F6B41; }

/* ---------- 3D buttons (HANDOFF: face over a darker lip; pressing pushes the face down 4px) ---------- */
.btn {
  --face: var(--yellow); --lip: var(--yellow-lip); --text: var(--ink); --ring: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 0 1.45em;
  border: 0; border-radius: 18px;
  background: var(--face); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--ring), 0 5px 0 var(--lip);
  font: 600 1.15rem/1.1 var(--display); letter-spacing: .005em;
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .2s;
}
.btn:hover { filter: brightness(1.04) saturate(1.06); }
.btn:active, .btn.is-pressed { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--ring), 0 1px 0 var(--lip); }
.btn .icon { font-size: 1.15em; }
.btn--lg { min-height: 62px; padding: 0 1.65em; border-radius: 20px; font-size: 1.25rem; }
.btn--sm { min-height: 44px; padding: 0 1.05em; border-radius: 14px; font-size: 1rem; box-shadow: inset 0 0 0 2px var(--ring), 0 4px 0 var(--lip); }
.btn--sm:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ring), 0 1px 0 var(--lip); }
.btn--ghost { --face: var(--white); --lip: var(--chip-line); --ring: var(--chip-line); }
.btn--night { --face: var(--gold); --lip: var(--gold-lip); }
.btn--green { --face: var(--green); --lip: var(--green-lip); --text: #fff; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  color: var(--ink);
  transition: background-color .3s, box-shadow .3s, color .6s;
}
.nav__inner { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; border-radius: 14px; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 12px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 8px 18px -8px rgba(94, 86, 184, .55);
}
.brand__word { font: 600 1.8rem/1 var(--display); letter-spacing: -.025em; padding-bottom: 3px; }
.nav__links { display: none; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 10px 13px; border-radius: 12px; text-decoration: none;
  font-weight: 800; font-size: .98rem; color: var(--soft);
  transition: background-color .2s, color .2s;
}
.nav__links a:hover { background: rgba(46, 33, 24, .06); color: var(--ink); }
.nav__cta { margin-left: auto; }
@media (min-width: 940px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 10px; }
}
.nav.is-stuck {
  background: rgba(255, 247, 236, .92);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-stuck.is-over-dark {
  background: rgba(23, 24, 63, .9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.nav.is-dark:not(.is-stuck), .nav.is-over-dark { color: var(--night-text); }
.nav.is-over-dark .nav__links a { color: var(--night-soft); }
.nav.is-over-dark .nav__links a:hover { background: rgba(255, 255, 255, .08); color: var(--night-text); }
.nav.is-dark:not(.is-stuck) .nav__links a { color: var(--night-soft); }
.nav.is-dark:not(.is-stuck) .nav__links a:hover { background: rgba(255, 255, 255, .08); color: var(--night-text); }
@media (max-width: 380px) {
  .brand__word { font-size: 1.55rem; }
  .nav__cta { padding: 0 .85em; font-size: .95rem; }
}

/* ---------- Mallow (a still, then the live Rive duck on top) ---------- */
.duck {
  position: relative; display: block;
  padding: 0; border: 0; background: none;
  aspect-ratio: 1;
  -webkit-tap-highlight-color: transparent;
}
button.duck { cursor: pointer; touch-action: manipulation; border-radius: 40%; }
.duck__still, .duck__live { position: absolute; inset: 0; width: 100%; height: 100%; }
.duck__live { opacity: 0; transition: opacity .35s; pointer-events: none; }
.duck.is-live .duck__live { opacity: 1; }
.duck.is-live .duck__still { opacity: 0; transition: opacity .3s .08s; }
.duck__still.is-swapped { animation: still-pop .42s var(--ease-pop); }
.duck.is-booped .duck__still { animation: boop .5s var(--ease-pop); }
@keyframes still-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes boop {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.08, .9) translateY(4%); }
  60% { transform: scale(.95, 1.06) translateY(-6%); }
  100% { transform: scale(1, 1); }
}

.bubble {
  position: absolute; z-index: 4;
  padding: .55em .95em .6em;
  border-radius: 18px;
  background: var(--white); color: var(--ink);
  font: 600 1.06rem/1.2 var(--display);
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--line), 0 14px 28px -14px rgba(46, 33, 24, .45);
}
.bubble::after {
  content: ""; position: absolute; right: 26px; bottom: -8px;
  width: 18px; height: 18px; background: inherit;
  border-radius: 0 0 6px 0; transform: rotate(45deg);
}
.bubble.is-new { animation: pop-in .5s var(--ease-pop); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h);
  overflow: clip;
  color: var(--ink);
  transition: color 1.2s var(--ease-inout);
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-inout); }
.sky__layer--day { opacity: 1; background: linear-gradient(180deg, #FFEBCF 0%, #FFF3E2 42%, var(--cream) 100%); }
.sky__layer--night { background: radial-gradient(120% 85% at 72% 26%, #34337A 0%, #1E1F4B 46%, #14153A 100%); }
.sky__layer--morning { background: linear-gradient(180deg, #FFCFC2 0%, #FFE2CB 38%, #FFF1DE 72%, var(--cream) 100%); }
.hero[data-sky="night"] .sky__layer--night,
.hero[data-sky="late"] .sky__layer--night { opacity: 1; }
.hero[data-sky="morning"] .sky__layer--morning { opacity: 1; }

.cloud { position: absolute; fill: #FFFFFF; filter: drop-shadow(0 5px 0 rgba(169, 214, 240, .28)); }
.sky__layer--day .cloud--a { width: 150px; left: -30px; top: 30%; animation: drift 34s ease-in-out infinite alternate; }
.sky__layer--day .cloud--b { width: 96px; right: 6%; top: 15%; opacity: .9; animation: drift 26s ease-in-out -8s infinite alternate-reverse; }
.sky__layer--day .cloud--c { width: 120px; right: -36px; top: 62%; animation: drift 40s ease-in-out -14s infinite alternate; }
.sky__layer--morning .cloud { fill: #FFF4F0; filter: drop-shadow(0 5px 0 rgba(242, 185, 176, .35)); }
.sky__layer--morning .cloud--a { width: 140px; left: 4%; top: 22%; }
.sky__layer--morning .cloud--c { width: 110px; right: 4%; top: 58%; }
@keyframes drift { from { transform: translateX(-18px); } to { transform: translateX(22px); } }

.starfield {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 14%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 22% 38%, #fff 60%, transparent 62%),
    radial-gradient(2px 2px at 31% 9%, #FFE27A 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 44% 26%, #fff 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 57% 12%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 68% 44%, #fff 60%, transparent 62%),
    radial-gradient(2px 2px at 79% 18%, #FFE27A 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 91% 33%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 13% 66%, #fff 60%, transparent 62%),
    radial-gradient(1.7px 1.7px at 37% 78%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 62% 70%, #fff 60%, transparent 62%),
    radial-gradient(1.9px 1.9px at 86% 82%, #FFE27A 60%, transparent 62%);
  animation: twinkle 3.8s ease-in-out infinite alternate;
}
.starfield--slow {
  background-image:
    radial-gradient(1.3px 1.3px at 4% 46%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 18% 24%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 27% 56%, #CFCBF2 60%, transparent 62%),
    radial-gradient(1.7px 1.7px at 49% 5%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 52% 48%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 73% 30%, #CFCBF2 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 95% 8%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 75% 62%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 6% 88%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 96% 58%, #fff 60%, transparent 62%);
  animation-duration: 5.6s;
  animation-delay: -2.4s;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

.hero__grid { display: grid; gap: 26px; padding-block: 8px 76px; align-items: center; }
.hero__copy { display: grid; gap: 20px; justify-items: start; }
.hero__title { font: 600 var(--t-hero)/.98 var(--display); letter-spacing: -.028em; text-wrap: balance; max-width: 11em; }
.hero__lead { transition: color 1.2s var(--ease-inout); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 12px; padding-top: 4px; }
.hero__fine { font-size: .95rem; font-weight: 700; color: var(--faint); transition: color 1.2s; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 2px; }
.hero__points li { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .98rem; color: var(--soft); transition: color 1.2s; }
.hero__points .icon {
  width: 22px; height: 22px; padding: 4px; border-radius: 50%;
  background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--green-lip);
}
.hero[data-sky="night"] .hero__points li, .hero[data-sky="late"] .hero__points li { color: var(--night-soft); }

/* Mallow's yellow, with Mallow's outline so it reads on the pale sky (the stroke is painted under the fill) */
.sleep-word {
  position: relative; white-space: nowrap;
  color: var(--yellow); -webkit-text-stroke: .07em #6F3215; paint-order: stroke fill;
  transition: color 1.2s var(--ease-inout), -webkit-text-stroke-color 1.2s var(--ease-inout);
}

/* night: the hero's text follows the sky */
.hero[data-sky="night"], .hero[data-sky="late"] { color: var(--night-text); }
.hero[data-sky="night"] .hero__lead, .hero[data-sky="late"] .hero__lead { color: var(--night-muted); }
.hero[data-sky="night"] .hero__fine, .hero[data-sky="late"] .hero__fine { color: #9D99CF; }
.hero[data-sky="night"] .sleep-word, .hero[data-sky="late"] .sleep-word { color: #FFD54F; -webkit-text-stroke-color: #2B2A63; }
.hero[data-sky="night"] .pill--hero, .hero[data-sky="late"] .pill--hero { background: rgba(255, 255, 255, .08); color: var(--night-soft); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.hero[data-sky="night"] .btn--ghost, .hero[data-sky="late"] .btn--ghost { --face: rgba(255, 255, 255, .08); --lip: rgba(0, 0, 0, .35); --ring: rgba(255, 255, 255, .16); --text: var(--night-text); }

/* the stage: Mallow in front of the sun (or the moon) */
.stage { display: grid; justify-items: center; width: 100%; order: -1; }
.stage__art { position: relative; width: min(86vw, 400px); aspect-ratio: 1 / .96; }
.stage__disc {
  position: absolute; left: 13%; top: 6%; width: 74%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFF6D6 0%, #FFEDB5 58%, #FFE29A 100%);
  box-shadow: 0 0 0 16px rgba(255, 226, 154, .28), 0 0 0 36px rgba(255, 226, 154, .14);
  transition: box-shadow 1.4s var(--ease-inout);
}
.stage__disc::before, .stage__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  opacity: 0; transition: opacity 1.4s var(--ease-inout);
}
.stage__disc::before { background: radial-gradient(circle at 42% 36%, #FFF8DE 0%, #FBEBB8 55%, #EFD796 100%); }
.stage__disc::after { background: radial-gradient(circle at 50% 70%, #FFE6C2 0%, #FFC9A0 70%, #FFB98E 100%); }
.crater { position: absolute; z-index: 1; border-radius: 50%; background: rgba(214, 186, 112, .32); opacity: 0; transition: opacity 1.4s; }
.crater--a { width: 15%; height: 15%; left: 22%; top: 24%; }
.crater--b { width: 9%; height: 9%; left: 66%; top: 18%; }
.crater--c { width: 11%; height: 11%; left: 74%; top: 52%; }
.hero[data-sky="night"] .stage__disc, .hero[data-sky="late"] .stage__disc { box-shadow: 0 0 0 16px rgba(185, 179, 255, .1), 0 0 0 36px rgba(185, 179, 255, .06), 0 0 120px 20px rgba(255, 231, 163, .12); }
.hero[data-sky="night"] .stage__disc::before, .hero[data-sky="late"] .stage__disc::before { opacity: 1; }
.hero[data-sky="night"] .crater, .hero[data-sky="late"] .crater { opacity: 1; }
.hero[data-sky="morning"] .stage__disc { box-shadow: 0 0 0 16px rgba(255, 190, 150, .26), 0 0 0 36px rgba(255, 190, 150, .12); }
.hero[data-sky="morning"] .stage__disc::after { opacity: 1; }

.stage__sparkles .sparkle { position: absolute; fill: var(--star); animation: twinkle-pop 2.6s ease-in-out infinite; }
.sparkle--a { width: 26px; left: 6%; top: 18%; }
.sparkle--b { width: 16px; left: 14%; top: 56%; animation-delay: -.9s !important; fill: #FF8FAB !important; }
.sparkle--c { width: 20px; right: 5%; top: 44%; animation-delay: -1.7s !important; }
.sparkle--d { width: 13px; right: 15%; top: 8%; animation-delay: -.4s !important; fill: #8E86F0 !important; }
.hero[data-sky="night"] .sparkle, .hero[data-sky="late"] .sparkle { fill: var(--gold) !important; }
@keyframes twinkle-pop {
  0%, 100% { opacity: .35; transform: scale(.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(12deg); }
}

.stage__duck { position: absolute; z-index: 2; left: 11%; width: 78%; bottom: 10%; }
/* just over Mallow's head, a little to the left, its tail at his tuft (the duck: left 11%, 78% wide, bottom 10%);
   a long line wraps rather than leaving the stage */
.stage__bubble {
  right: 53%; bottom: 77.5%;
  width: max-content; max-width: 47%; white-space: normal; text-align: center; text-wrap: balance;
  transform-origin: calc(100% - 25px) 100%;
  transition: opacity .4s, transform .4s var(--ease-pop);
}
.stage__bubble::after { right: 16px; }
.hero[data-sky="night"] .stage__bubble { opacity: 0; transform: scale(.8); pointer-events: none; }

/* the Live Activity that counts the night (Widgets.dc.html) */
.activity {
  position: absolute; z-index: 3; left: 50%; top: 0;
  width: min(94%, 360px);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px;
  padding: 10px 16px 14px 10px;
  border-radius: 24px;
  background: rgba(32, 33, 83, .94); color: var(--night-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 40px -20px rgba(0, 0, 0, .7);
  opacity: 0; transform: translate(-50%, -14px) scale(.95);
  transition: opacity .4s, transform .5s var(--ease-pop);
  pointer-events: none;
}
.hero[data-sky="night"] .activity { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 1.2s; }
.activity__duck { width: 52px; height: 52px; }
.activity__text { display: grid; line-height: 1.2; min-width: 0; }
.activity__text b { font: 600 1.05rem/1.2 var(--display); }
.activity__text span { font-size: .85rem; font-weight: 700; color: var(--night-soft); }
.activity__apps { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.app {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; color: #fff;
}
.app::before { /* asleep: the tile dimmed under the night, its lock and z's still bright */
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(23, 24, 63, .34);
}
.app .icon { font-size: 17px; }
.app i {
  position: absolute; right: -5px; top: -7px;
  font: 600 .72rem/1 var(--display); font-style: normal; color: var(--gold);
  animation: zfloat-small 2.4s ease-in-out infinite;
}
/* the scroll apps' own tiles */
.app--tiktok { background: #000; }
.app--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.app--youtube { background: #fff; }
.app--youtube .icon { font-size: 21px; }
.app__lock {
  position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--gold); color: #2B2A63;
  box-shadow: 0 0 0 2px #202153;
}
.app__lock .icon { font-size: 9px; }
.app--instagram i { animation-delay: -.8s; }
.app--youtube i { animation-delay: -1.6s; }
@keyframes zfloat-small { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } }
.activity__more { margin-left: 4px; font-size: .82rem; font-weight: 800; color: var(--night-muted); }
@media (max-width: 520px) {
  .activity { padding: 8px 14px 8px 8px; gap: 10px; border-radius: 20px; top: -4px; }
  .activity__duck { width: 44px; height: 44px; }
  .activity__apps { display: none; }
}

.stars-pop {
  position: absolute; z-index: 4; right: 0; top: 46%;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  background: var(--white); color: var(--ink);
  font: 600 1.12rem/1 var(--display);
  box-shadow: 0 3px 0 var(--line), 0 14px 26px -14px rgba(46, 33, 24, .5);
  opacity: 0; transform: scale(.4); pointer-events: none;
}
.stars-pop .icon { color: var(--star); font-size: 1.25em; }
.hero[data-sky="morning"] .stars-pop { animation: pop-in .6s var(--ease-pop) .7s both; }

.stage__controls { position: relative; z-index: 5; display: grid; width: min(90%, 340px); margin-top: -24px; }
.stage__controls > * { grid-area: 1 / 1; }
.stage__btn { width: 100%; min-height: 64px; border-radius: 22px; font-size: 1.2rem; }
.stage__btn:not([hidden]) { animation: pop-in .5s var(--ease-pop) both; }
.stage__hint { min-height: 1.5em; margin-top: 14px; font-size: .92rem; font-weight: 700; color: var(--faint); text-align: center; transition: color 1.2s, opacity .3s; }
.hero[data-sky="night"] .stage__hint, .hero[data-sky="late"] .stage__hint { color: #9D99CF; }

.hold {
  position: relative; overflow: hidden;
  width: 100%; height: 64px; padding: 0;
  border: 0; border-radius: 22px;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 5px 0 #140D08, 0 22px 34px -18px rgba(23, 24, 63, .55);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hero[data-sky="late"] .hold, .hero[data-sky="night"] .hold { background: #0E0F2E; box-shadow: 0 5px 0 #06061A, inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 22px 34px -18px rgba(0, 0, 0, .7); }
.hold.is-holding { transform: translateY(3px) scale(.985); box-shadow: 0 2px 0 #140D08, 0 12px 24px -16px rgba(23, 24, 63, .5); }
.hold__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1.18rem/1 var(--display);
}
.hold__label .icon { font-size: 1.15em; color: var(--gold); }
.hold__fill {
  position: absolute; inset: 0;
  background: var(--yellow); color: var(--ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .26s var(--ease-out);
}
.hold__fill .hold__label .icon { color: var(--ink); }
.hold.is-holding .hold__fill { clip-path: inset(0 0 0 0); transition: clip-path var(--hold-ms, 1300ms) linear; }
.hold.is-done .hold__fill { clip-path: inset(0 0 0 0); transition: none; }
.hold.is-nudge { animation: nudge .45s var(--ease-out); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 36px;
    padding-block: 36px 110px;
    min-height: min(860px, calc(100svh - var(--nav-h)));
  }
  .stage { order: 0; }
  .stage__art { width: min(100%, 540px); }
  .stage__bubble { font-size: 1.15rem; }
  .sky__layer--day .cloud--a { left: 40%; top: 8%; width: 170px; }
  .sky__layer--day .cloud--b { right: 3%; top: 20%; width: 110px; }
  .sky__layer--day .cloud--c { right: -46px; top: 76%; width: 150px; }
  .sky__layer--morning .cloud--a { left: 46%; top: 12%; width: 160px; }
}
@media (max-width: 959px) {
  .hero__points { justify-content: center; }
  .hero__copy { justify-items: center; text-align: center; }
  .hero__title { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .stage__hint { max-width: 22em; }
}
@media (max-width: 480px) {
  .hero__ctas .btn { flex: 1 1 100%; }
  .stage__bubble { font-size: .98rem; }
}

/* ---------- moods ---------- */
.moods {
  position: relative; z-index: 2;
  margin-top: -40px;
  padding-block: 30px 34px;
  background: var(--white);
  border-radius: 40px 40px 0 0;
}
.moods__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.moods__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.moods__viewport:hover .moods__track { animation-play-state: paused; }
.mood {
  flex: none; width: 152px; margin-right: 14px;
  display: grid; justify-items: center; gap: 4px;
  padding: 10px 10px 14px; border-radius: 28px;
  background: var(--tile);
}
.mood img { width: 122px; height: 122px; transition: transform .3s var(--ease-pop); }
.mood:hover img { transform: translateY(-4px) rotate(-3deg); }
.mood span { font: 600 .98rem/1.15 var(--display); text-align: center; color: var(--ink); text-wrap: balance; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- how it works: one night, top to bottom ---------- */
.how { background: var(--white); }
.how__head { display: grid; justify-items: center; gap: 16px; padding-bottom: 28px; text-align: center; }
.how__head .lead { margin-inline: auto; }
.how__body { display: grid; }
.how__steps, .how__rail { grid-area: 1 / 1; }
.step { position: relative; overflow: clip; }
.step__inner { display: grid; gap: 30px; justify-items: center; padding-block: 72px; }
.step__copy { display: grid; gap: 14px; max-width: 30rem; text-align: center; justify-items: center; }
.step__copy .h3 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); line-height: 1.02; letter-spacing: -.02em; }
.step__copy p:last-child { font-size: var(--t-lead); line-height: 1.55; }
.step__time {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1.05rem/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.step__num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.05rem; background: currentColor;
}
.step__num::first-line { color: inherit; }
.step--evening { background: linear-gradient(180deg, var(--white) 0%, #FFF5E4 30%, #FFE4C2 100%); color: var(--ink); }
.step--evening .step__copy p:last-child { color: var(--muted); }
.step--bedtime {
  background: linear-gradient(180deg, #FFE4C2 0%, #FFC4AE 9%, #F49CB7 17%, #9B83DB 27%, #4B4A9C 37%, #2B2A63 48%, #1E1F4B 100%);
  color: var(--night-text);
}
.step--night { background: linear-gradient(180deg, #1E1F4B 0%, #17183F 45%, #1A1B47 100%); color: var(--night-text); }
.step--morning {
  background: linear-gradient(180deg, #1A1B47 0%, #3B3A8C 12%, #A77FC0 22%, #F4A7A9 31%, #FFCCB0 40%, #FFE4CA 52%, var(--cream) 100%);
  color: var(--ink);
}
.step--morning .step__copy p:last-child { color: var(--muted); }
.step--bedtime .step__copy p:last-child, .step--night .step__copy p:last-child { color: var(--night-soft); }
.step__num { color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-lip); }
.step--bedtime .step__num, .step--night .step__num { background: var(--gold); box-shadow: 0 3px 0 var(--gold-lip); }
@media (max-width: 959px) {
  .step--bedtime .step__inner, .step--morning .step__inner { padding-top: 168px; }
  .step--bedtime {
    background: linear-gradient(180deg, #FFE4C2 0px, #FFC4AE 30px, #F49CB7 62px, #9B83DB 104px, #4B4A9C 136px, #2B2A63 168px, #1E1F4B 100%);
  }
  .step--morning {
    background: linear-gradient(180deg, #1A1B47 0px, #3B3A8C 34px, #A77FC0 70px, #F4A7A9 104px, #FFCCB0 136px, #FFE4CA 168px, var(--cream) 100%);
  }
}
.step--night::before, .step--bedtime::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 20%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 28% 62%, #fff 60%, transparent 62%),
    radial-gradient(2px 2px at 41% 14%, #FFE27A 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 7% 78%, #fff 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 47% 86%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 92% 12%, #fff 60%, transparent 62%),
    radial-gradient(2px 2px at 84% 70%, #FFE27A 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 64% 42%, #fff 60%, transparent 62%);
  animation: twinkle 4.2s ease-in-out infinite alternate;
}
.step--bedtime::after { top: 45%; opacity: .7; }

/* the phone */
.phone {
  --w: 290px;
  position: relative;
  width: var(--w); max-width: 100%;
  aspect-ratio: 390 / 844;
  padding: calc(var(--w) * .036);
  border-radius: calc(var(--w) * .172);
  background: linear-gradient(145deg, #4A4A55 0%, #18181D 22%, #0C0C0F 70%, #34343C 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .14),
    inset 0 0 0 4px rgba(0, 0, 0, .7),
    0 50px 80px -40px rgba(23, 24, 63, .6),
    0 24px 34px -22px rgba(0, 0, 0, .45);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 3px; border-radius: 3px; background: #2A2A31;
}
.phone::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(var(--w) * .2) 0 #2A2A31; }
.phone::after { right: -3px; top: 27%; height: 13%; }
.phone__screen {
  position: relative; height: 100%;
  border-radius: calc(var(--w) * .136);
  overflow: hidden; background: #000;
  container-type: inline-size;
  --u: calc(100cqw / 390);
  isolation: isolate;
}
.screen { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease-inout); }
.screen.is-active { opacity: 1; }
.screen--shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__status {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  height: calc(47 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(38 * var(--u));
  font: 600 calc(16.5 * var(--u))/1 var(--body); letter-spacing: -.01em;
  color: #111; transition: color .5s;
}
.phone__icons { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.phone__icons svg { fill: currentColor; }
.i-signal { width: calc(17 * var(--u)); height: calc(11 * var(--u)); }
.i-wifi { width: calc(15 * var(--u)); height: calc(11 * var(--u)); }
.i-battery { width: calc(26 * var(--u)); height: calc(12 * var(--u)); }
.phone[data-status="light"] .phone__status { color: #fff; }
.phone__island {
  position: absolute; z-index: 4; top: calc(11 * var(--u)); left: 50%;
  width: calc(122 * var(--u)); height: calc(35 * var(--u));
  border-radius: 99px; background: #000; transform: translateX(-50%);
}
.phone__home {
  position: absolute; z-index: 4; bottom: calc(8 * var(--u)); left: 50%;
  width: calc(134 * var(--u)); height: calc(5 * var(--u));
  border-radius: 99px; background: #111; transform: translateX(-50%); transition: background-color .5s;
}
.phone[data-status="light"] .phone__home { background: rgba(255, 255, 255, .9); }

/* the lock screen with Mallow's nudge (Widgets.dc.html) */
.screen--lock {
  background: radial-gradient(120% 70% at 75% 18%, #2E2D6B 0%, #1A1B45 55%, #101133 100%);
  color: #fff; text-align: center;
}
.lock__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(calc(1.8 * var(--u)) calc(1.8 * var(--u)) at 18% 36%, #fff 60%, transparent 62%),
    radial-gradient(calc(1.6 * var(--u)) calc(1.6 * var(--u)) at 82% 31%, #fff 60%, transparent 62%),
    radial-gradient(calc(1.4 * var(--u)) calc(1.4 * var(--u)) at 64% 50%, #fff 60%, transparent 62%),
    radial-gradient(calc(1.4 * var(--u)) calc(1.4 * var(--u)) at 30% 62%, #fff 60%, transparent 62%);
  animation: twinkle 3s ease-in-out infinite alternate;
}
.lock__moon { position: absolute; width: calc(80 * var(--u)); height: calc(80 * var(--u)); right: calc(36 * var(--u)); top: calc(540 * var(--u)); fill: #FFE7A3; opacity: .9; }
.lock__date { position: relative; padding-top: calc(78 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; opacity: .85; }
.lock__clock { position: relative; font: 600 calc(86 * var(--u))/1.1 var(--display); letter-spacing: -.01em; }
.lock__widgets { position: relative; display: flex; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.lock__round, .lock__wide {
  display: flex; align-items: center; justify-content: center;
  height: calc(70 * var(--u)); background: rgba(255, 255, 255, .14);
  font: 600 calc(20 * var(--u))/1 var(--display);
}
.lock__round { width: calc(70 * var(--u)); border-radius: 50%; flex-direction: column; gap: calc(3 * var(--u)); }
.lock__round .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.lock__wide { width: calc(160 * var(--u)); border-radius: calc(22 * var(--u)); flex-direction: column; align-items: flex-start; padding-left: calc(14 * var(--u)); font-size: calc(24 * var(--u)); }
.lock__wide small { font: 800 calc(13 * var(--u))/1.3 var(--body); opacity: .8; }
.lock__note {
  position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(332 * var(--u));
  display: flex; gap: calc(12 * var(--u)); align-items: flex-start;
  padding: calc(14 * var(--u)); border-radius: calc(26 * var(--u));
  background: rgba(255, 255, 255, .19);   /* over a plain night sky a blur adds nothing but work */
  text-align: left; font-size: calc(15 * var(--u)); line-height: 1.33;
}
.lock__note img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(11 * var(--u)); flex: none; }
.lock__note > div { flex: 1; min-width: 0; }
.lock__note-top { display: flex; justify-content: space-between; font-weight: 800; }
.lock__note-top span { font-weight: 700; font-size: calc(13 * var(--u)); opacity: .7; }
.lock__note-title { font-weight: 800; }
.lock__note-body { font-weight: 600; opacity: .88; }
.screen--lock.is-active .lock__note { animation: drop .7s cubic-bezier(.2, .9, .3, 1.1) .35s both; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-24px) scale(.96); } 100% { opacity: 1; transform: none; } }
.lock__btn {
  position: absolute; bottom: calc(52 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u));
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.lock__btn--l { left: calc(46 * var(--u)); }
.lock__btn--r { right: calc(46 * var(--u)); }

/* the morning: your night decides Mallow's day (game/day.ts in the app): what it gets up to after a good night,
   and after a short one */
.days { display: grid; gap: 12px; width: 100%; max-width: 30rem; }
.days__title { font: 600 1.15rem/1.2 var(--display); text-align: center; color: var(--ink); }
.days__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.day {
  margin: 0; display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 12px 10px 16px; border-radius: 26px; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(110, 50, 21, .06), 0 5px 0 rgba(110, 50, 21, .08);
}
.day__duck { width: min(136px, 100%); margin: -8px 0 -6px; }
.day figcaption { display: grid; gap: 3px; }
.day b { font: 600 1.02rem/1.15 var(--display); }
.day span { font-size: .88rem; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.day--good { background: linear-gradient(180deg, #FFF4D9 0%, #FFE6B8 100%); }
.day--good b { color: #A0620A; }
.day--short { background: linear-gradient(180deg, #F1EEF8 0%, #DFDAEE 100%); }
.day--short b { color: #5B4FA8; }

/* phone + Mallow beside it, per step on small screens */
.step__phone { position: relative; display: flex; justify-content: center; width: 100%; }
.step__phone .phone { --w: min(270px, 74vw); }
.step__phone .step__duck {
  position: absolute; z-index: 2; width: min(150px, 40vw);
  left: calc(50% - min(270px, 74vw) / 2 - min(150px, 40vw) * .42); bottom: -4%;
}
.how__rail { display: none; pointer-events: none; }
.how__duck { width: 210px; }

@media (min-width: 960px) {
  .how__head { padding-bottom: 8px; }
  .step { min-height: 96vh; }
  .step__inner { min-height: 96vh; justify-items: start; align-content: center; padding-block: 80px; }
  .step__copy { text-align: left; justify-items: start; max-width: 29rem; }
  .days { max-width: 29rem; }
  .days__title { text-align: left; }
  .step--bedtime .step__copy, .step--night .step__copy { padding-top: 6%; }
  .step__phone { display: none; }
  .how__rail { display: block; }
  .how__sticky {
    position: sticky; top: calc(50vh - 316px + var(--nav-h) / 2);
    width: 100%; max-width: calc(1180px + 2 * var(--gutter));
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    display: flex; justify-content: flex-end;
  }
  .how__sticky { top: calc(50vh - 336px + var(--nav-h) / 2); }
  .how__rail .phone { --w: 306px; margin-right: 7%; pointer-events: auto; }
  .how__duck { position: absolute; z-index: 2; right: calc(7% + 306px - 74px + var(--gutter)); bottom: -6px; }
}
@media (min-width: 1200px) {
  .how__rail .phone { margin-right: 12%; }
  .how__duck { right: calc(12% + 306px - 74px + var(--gutter)); }
}

/* ---------- rewards ---------- */
.rewards { padding-block: 100px; background: var(--white); }
.bento { display: grid; gap: 18px; }
.card {
  position: relative;
  padding: 26px 24px;
  border-radius: 32px;
  background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--line), 0 6px 0 var(--line);
}
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card__title { font: 600 1.4rem/1.15 var(--display); }
.card p { color: var(--muted); }
.counter {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 2px var(--line);
  font: 600 1.15rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.counter .icon { color: var(--star); font-size: 1.15em; }
.counter.is-bump { animation: bump .45s var(--ease-pop); }
.counter.is-bump .icon { animation: glint .45s var(--ease-out); }
@keyframes glint { 50% { scale: 1.35; rotate: 45deg; filter: drop-shadow(0 0 6px rgba(255, 181, 32, .8)); } }
.quests { display: grid; gap: 10px; }
.quest {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 13px 16px 13px 13px; border-radius: 18px;
  background: var(--white); box-shadow: inset 0 0 0 2px var(--line);
  font-weight: 800;
}
.tick {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--chip-line); color: transparent;
  transition: background-color .25s, box-shadow .25s, color .25s;
}
.tick .icon { font-size: 16px; }
.quest.is-done .tick { background: var(--green); box-shadow: none; color: #fff; animation: tick .5s var(--ease-tick); }
.quest__stars { display: inline-flex; align-items: center; gap: 3px; font: 600 1.12rem/1 var(--display); color: #A86F00; }
.quest__stars .icon { color: var(--star); }
.level { margin-top: 20px; display: grid; gap: 8px; }
.level__row { display: flex; justify-content: space-between; font-weight: 800; color: var(--soft); font-variant-numeric: tabular-nums; }
.level__row b { color: var(--ink); }
.level__bar { height: 14px; border-radius: 99px; background: var(--track); overflow: hidden; }
.level__bar i { display: block; height: 100%; width: calc(var(--p, .78) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--purple), #A79FF7); transition: width 1s var(--ease-out); }
.level.is-up .level__row b { display: inline-block; animation: bump .5s var(--ease-pop); color: var(--purple-lip); }

/* level up: the star jar (assets/reward.riv) fills, pops its cork, turns its tag to the next level and pays out
   ten stars, which fly into the wallet */
.levelup-card {
  display: grid; gap: 6px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFF9E6 0%, #FFEFC4 100%);
  box-shadow: inset 0 0 0 2px #FBE6AE, 0 6px 0 #F3D88E;
}
.levelup-card .card__top { position: relative; z-index: 3; margin-bottom: 0; }
.wallet { box-shadow: inset 0 0 0 2px #F6DE9E, 0 3px 0 #F3D88E; }
.levelup__stage { position: relative; height: 248px; }
.jar { position: absolute; inset: 0; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jar__still, .jar__live { position: absolute; inset: 0; width: 100%; height: 100%; }
.jar__still { object-fit: contain; transition: opacity .2s; }
.jar.is-live .jar__still { opacity: 0; }
/* Mallow stands on the jar's floor, to its left: the jar's artboard (320 x 248, the jar's middle at x 190 and its base
   at y 226) is centred in the stage, and his feet are at 96% of his own frame */
.levelup__duck { position: absolute; left: calc(50% - 158px); top: 76px; z-index: 2; width: 150px; }
.levelup__text { position: relative; z-index: 3; }
.levelup__text b { color: #A86A00; }

/* the streak: the night's moon, glowing, and the week ticking off */
.streak-card {
  display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 84% 12%, #fff 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 90% 46%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 8% 52%, #fff 60%, transparent 62%),
    linear-gradient(180deg, #F3F0FF 0%, #E6E2FF 100%);
  box-shadow: inset 0 0 0 2px #DEDAFF, 0 6px 0 #D6D1FF;
}
.streak__badge { position: relative; width: 190px; height: 170px; }
.streak__glow {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(207, 201, 255, .55) 45%, rgba(207, 201, 255, 0));
  animation: streak-glow 4s ease-in-out infinite;
}
@keyframes streak-glow { 0%, 100% { scale: .9; opacity: .75; } 50% { scale: 1.06; opacity: 1; } }
.streak__moon {
  position: absolute; left: 4px; top: 0; width: 170px; height: 170px;
  fill: var(--purple); filter: drop-shadow(0 6px 0 var(--purple-lip));
  transform-origin: 55% 55%; animation: rock 6s ease-in-out infinite;
}
@keyframes rock { 0%, 100% { rotate: -5deg; } 50% { rotate: 4deg; } }
.roll {
  position: absolute; right: 6px; top: 26px;
  height: 1em; overflow: hidden;
  font: 600 7rem/1 var(--display); color: var(--white);
  -webkit-text-stroke: 5px var(--purple-lip); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--purple-lip);
}
.roll__strip { display: grid; transition: transform 1s var(--ease-roll); }
.roll__strip span { display: block; height: 1em; }
.roll.is-rolled .roll__strip, html:not(.js) .roll .roll__strip { transform: translateY(-1em); }
.roll.is-rolled { animation: num-pop .6s .35s var(--ease-pop); }
@keyframes num-pop { 40% { scale: 1.18; } }
.burst { position: absolute; right: 40px; top: 74px; width: 0; height: 0; }
.burst i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); opacity: 0;
}
.burst i:nth-child(even) { background: #FF8FAB; width: 6px; height: 6px; }
.burst.is-on i { animation: burst .75s var(--ease-out) forwards; }
.burst i:nth-child(1) { --a: 0deg; } .burst i:nth-child(2) { --a: 45deg; } .burst i:nth-child(3) { --a: 90deg; }
.burst i:nth-child(4) { --a: 135deg; } .burst i:nth-child(5) { --a: 180deg; } .burst i:nth-child(6) { --a: 225deg; }
.burst i:nth-child(7) { --a: 270deg; } .burst i:nth-child(8) { --a: 315deg; }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(1); }
}
.twinkle { position: absolute; width: 16px; height: 16px; fill: #FFC940; pointer-events: none; }
.twinkle--1 { left: -4px; top: 30px; }
.twinkle--2 { right: -10px; top: 6px; width: 12px; height: 12px; animation-delay: -.7s !important; }
.twinkle--3 { left: 18px; bottom: 6px; width: 11px; height: 11px; fill: #FF8FAB; animation-delay: -1.3s !important; }
.twinkle--4 { right: 4px; bottom: 22px; width: 13px; height: 13px; fill: #fff; animation-delay: -1.8s !important; }
.streak__badge .twinkle { animation: twinkle-star 2.6s ease-in-out infinite; }
@keyframes twinkle-star { 0%, 100% { scale: .35; opacity: .25; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 45deg; } }
.streak__title { font: 600 2.3rem/1 var(--display); color: var(--purple-lip); letter-spacing: -.01em; }
.streak__title.is-bump { animation: bump .5s var(--ease-pop); }
.streak__text { max-width: 20em; }
.week { display: flex; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 20px; background: var(--white); }
.week li { position: relative; display: grid; justify-items: center; gap: 6px; font-weight: 800; font-size: .8rem; color: var(--faint); }
.week li::after {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  background: #F1E9DF; transition: background-color .3s;
}
.week li.is-on::after {
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  animation: tick .5s var(--ease-tick);
}
.week li.is-stamp { color: var(--purple-lip); }
.week li.is-stamp::after { animation: stamp .6s var(--ease-pop); box-shadow: 0 0 0 4px rgba(142, 134, 240, .25); }
.week li.is-stamp::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--purple); animation: ripple .8s var(--ease-out) forwards;
}
@keyframes stamp { 0% { scale: 1.9; opacity: 0; } 55% { scale: .86; opacity: 1; } 100% { scale: 1; } }
@keyframes ripple { from { scale: 1; opacity: .9; } to { scale: 2.1; opacity: 0; } }

/* the streak freeze: a night out gets frozen instead of breaking the streak. Built like the streak card beside it,
   with an ice cube where the moon is: it flies down and freezes over the night that got missed */
.freeze-card {
  display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1.6px 1.6px at 14% 16%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 86% 12%, #fff 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 91% 48%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 7% 54%, #fff 60%, transparent 62%),
    linear-gradient(180deg, #F3FAFF 0%, #E1F1FF 100%);
  box-shadow: inset 0 0 0 2px #D6EBFB, 0 6px 0 #C7E2F7;
}
.freeze__badge { position: relative; display: grid; place-items: center; width: 190px; height: 170px; }
.freeze__glow {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(172, 219, 248, .5) 45%, rgba(172, 219, 248, 0));
  animation: streak-glow 4s ease-in-out infinite;
}
.ice {
  position: relative; flex: none; display: grid; place-items: center;
  width: 120px; height: 120px; border-radius: 36px;
  background: linear-gradient(150deg, #FBFEFF 0%, #D9F0FE 50%, #A9DAF8 100%);
  color: #4FA9E3;
  box-shadow: 0 8px 0 #92C8EC, inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 -10px 18px rgba(79, 169, 227, .18), 0 18px 28px rgba(79, 169, 227, .22);
  animation: ice-float 5s ease-in-out infinite;
}
.ice::before { content: ""; position: absolute; left: 15px; top: 13px; width: 34px; height: 12px; border-radius: 8px; background: rgba(255, 255, 255, .95); rotate: -18deg; }
.ice::after { content: ""; position: absolute; left: 53px; top: 9px; width: 9px; height: 7px; border-radius: 6px; background: rgba(255, 255, 255, .8); rotate: -18deg; }
.ice__flake { position: relative; width: 66px; height: 66px; fill: currentColor; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .9)); animation: frost-spin 12s linear infinite; }
@keyframes frost-spin { to { rotate: 60deg; } }
@keyframes ice-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -6px; rotate: 3deg; } }
.ice b {
  position: absolute; right: -12px; top: -12px; padding: 6px 9px; border-radius: 12px;
  background: var(--ink); color: #fff; font: 600 .95rem/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 rgba(46, 33, 24, .25);
}
.ice b.is-bump { animation: bump .45s var(--ease-pop); }
.flake { position: absolute; width: 16px; height: 16px; fill: #fff; color: #fff; pointer-events: none; filter: drop-shadow(0 0 3px rgba(108, 194, 242, .9)); animation: twinkle-star 2.8s ease-in-out infinite; }
.flake--1 { left: 2px; top: 34px; }
.flake--2 { right: -2px; top: 10px; width: 13px; height: 13px; animation-delay: -.9s; }
.flake--3 { left: 22px; bottom: 4px; width: 12px; height: 12px; animation-delay: -1.6s; }
.freeze__badge .twinkle { animation: twinkle-star 2.6s ease-in-out infinite; }
.freeze__title { font: 600 2.1rem/1 var(--display); color: #2F7FB8; letter-spacing: -.01em; }
.freeze__text { max-width: 20em; }
.week--freeze { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 2px #DCEEFB; }
.week li.is-missed::after { background: #FFF5F5; box-shadow: inset 0 0 0 2.5px #F2A7A7; }
.week li.is-missed.is-shake::after { animation: shake .5s ease-in-out; }
@keyframes shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.week li.is-frozen { color: #3D8FC8; }
.week li.is-frozen::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12L12 3M12 6L9.4 3.6M12 6L14.6 3.6M12 12L19.8 7.5M17.2 9L18 5.5M17.2 9L20.6 10.1M12 12L19.8 16.5M17.2 15L20.6 13.9M17.2 15L18 18.5M12 12L12 21M12 18L14.6 20.4M12 18L9.4 20.4M12 12L4.2 16.5M6.8 15L6 18.5M6.8 15L3.4 13.9M12 12L4.2 7.5M6.8 9L3.4 10.1M6.8 9L6 5.5' fill='none' stroke='%234FA9E3' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat,
    linear-gradient(150deg, #F2FBFF 0%, #BFE5FB 100%);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(108, 194, 242, .35);
  animation: stamp .55s var(--ease-pop);
}
.frost { position: absolute; left: 50%; bottom: 15px; width: 0; height: 0; }
.frost i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #9ED8FA; animation: burst .7s var(--ease-out) forwards; }
.freeze__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 8px; }
.freeze__saved {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 1.05rem/1 var(--display); color: #2F7FB8;
  opacity: 0; translate: 0 8px; transition: opacity .4s, translate .5s var(--ease-pop);
}
.freeze__saved .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #4FA9E3; color: #fff; }
.is-saved .freeze__saved { opacity: 1; translate: 0 0; }
.price {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px 8px 10px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 2px #D6EBFB, 0 3px 0 #C7E2F7;
  font: 600 1.1rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.price .icon { color: var(--star); font-size: 1.15em; }
.price small { font: 700 .8rem/1 var(--body); color: var(--faint); }
.price.is-bump { animation: bump .5s var(--ease-pop); }

/* Mallow's week (assets/week.riv): a tube of moonlight a night, filling one by one; tap to pour again */
.week-card { display: grid; gap: 18px; align-items: center; }
.week-card .card__title { margin-bottom: 8px; }
.weekchart { position: relative; width: 100%; aspect-ratio: 360 / 232; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.weekchart__still, .weekchart__live { position: absolute; inset: 0; width: 100%; height: 100%; }
.weekchart__still { object-fit: contain; transition: opacity .2s; }
.weekchart.is-live .weekchart__still { opacity: 0; }
@media (max-width: 899px) {
  .weekchart { width: calc(100% + 20px); margin-inline: -10px; }
}

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "q q q q q q q l l l l l" "s s s s s s f f f f f f" "w w w w w w w w w w w w"; }
  .week-card { grid-area: w; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 30px 30px 30px 40px; }
  .week-card__copy { max-width: 26em; }
  .weekchart { max-width: 580px; justify-self: end; }
  .quests-card { grid-area: q; padding: 30px; }
  .levelup-card { grid-area: l; }
  .streak-card { grid-area: s; }
  .freeze-card { grid-area: f; }
  .levelup__stage { height: 250px; }
  .levelup__duck { left: calc(50% - 184px); top: 60px; width: 176px; }
}

/* ---------- wardrobe ---------- */
.wardrobe { padding-block: 100px; background: var(--cream); }
.wardrobe__grid { display: grid; gap: 36px; align-items: center; }
.wardrobe__copy { display: grid; gap: 18px; justify-items: start; }
.wardrobe__hint { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--soft); }
.wardrobe__hint .icon { color: #D96A8E; }
.closet { display: grid; gap: 16px; }
.closet__top { display: grid; gap: 14px; }
/* Mallow's bedroom from the app (assets/wardrobe/room.webp, captured by tools/app-screens/wardrobe.js): x 120 to 390
   and y 212 to 544 of the app's 390 x 640 scene, the corner with the reward shelf over the desk. The stage frames a
   part of it (--fx, --fy, --fw, --fh, in scene units) and everything on it is placed in scene units: the treasures
   in their spots on the plank (components/bedroom/parts.tsx), Mallow in front of the desk, 160 units tall, x 220 to
   380, feet at y 512. Wide screens see the whole corner. */
.closet__stage {
  --fx: 174; --fy: 228; --fw: 216; --fh: 312;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--fw) / var(--fh);
  border-radius: 36px;
  background: #F8DFC8;
  box-shadow: inset 0 0 0 2px rgba(46, 33, 24, .06), 0 30px 50px -36px rgba(46, 33, 24, .5);
}
.closet__stage::after { /* the frame's edge, over the picture */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(46, 33, 24, .07);
}
.closet__scene {
  position: absolute; z-index: 0;
  left: calc((120 - var(--fx)) / var(--fw) * 100%);
  top: calc((212 - var(--fy)) / var(--fh) * 100%);
  width: calc(270 / var(--fw) * 100%);
  height: calc(332 / var(--fh) * 100%);
  transform-origin: 0 0;
  transition: transform .8s var(--ease-inout);
}
.closet__room, .closet__shelf { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a spot: the 48-unit box a treasure stands in, from y 244 down to the plank's edge */
.closet__spot { position: absolute; top: calc(32 / 332 * 100%); width: calc(48 / 270 * 100%); height: calc(45.2 / 332 * 100%); }
.closet__spot:nth-child(1) { left: calc(126 / 270 * 100%); } /* x 246 */
.closet__spot:nth-child(2) { left: calc(172 / 270 * 100%); } /* x 292 */
.closet__spot:nth-child(3) { left: calc(218 / 270 * 100%); } /* x 338 */
.closet__spot svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; }
.closet__duck { position: absolute; z-index: 1; left: calc(100 / 270 * 100%); top: calc(145.6 / 332 * 100%); width: calc(160 / 270 * 100%); }
/* what Mallow says: its corner (and tail) over his head's left side, at x 312 in the scene, and high enough to clear
   what he wears even mid-hop (--head: the scene y of its bottom), whatever the frame; never above the frame's top */
.closet__stage { --head: 370; }
.closet__stage[data-hat="beanie"], .closet__stage[data-hat="bunny"] { --head: 364; }
.closet__stage[data-hat="sprout"], .closet__stage[data-hat="wizard"], .closet__stage[data-hat="party"],
.closet__stage[data-hat="crown"] { --head: 360; }
.closet__bubble {
  right: calc((var(--fx) + var(--fw) - 312) / var(--fw) * 100%);
  bottom: min(calc((var(--fy) + var(--fh) - var(--head)) / var(--fh) * 100%), 82%);
  transform-origin: calc(100% - 31px) 100%;
}
.closet__bubble::after { right: 22px; }
.closet__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.closet__tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px;
  background: #F6EDE1; box-shadow: inset 0 0 0 2px var(--chip-line);
}
.closet__tab {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 12px;
  background: none; color: var(--soft); font: 600 1.05rem/1 var(--display);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.closet__tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 0 var(--chip-line); }
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.item {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 12px 4px 10px; border: 0; border-radius: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--chip-line), 0 4px 0 var(--chip-line);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .2s;
}
.item:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--chip-line), 0 1px 0 var(--chip-line); }
.item > svg { width: 44px; height: 44px; }
.item__name { font: 600 .98rem/1.15 var(--display); text-align: center; text-wrap: balance; }
.item__tag { padding: 2px 9px; border-radius: 9px; font: 800 .74rem/1.4 var(--body); color: var(--soft); background: #F6EDE1; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.item__tag .icon { color: var(--star); }
.item__tag--set { background: #FFE3EC; color: #A3355A; }
.item__tag--streak { background: var(--plus-bg); color: var(--plus-text); }
.item[aria-pressed="true"] { background: #FFF6D8; box-shadow: inset 0 0 0 3px var(--yellow), 0 4px 0 var(--yellow-lip); }
.item[aria-pressed="true"] .item__tag { background: var(--green); color: #fff; }
@media (max-width: 559px) {
  /* A phone: the room stays at the top while the picks scroll under it. It's wider than tall here, so its camera
     shows Mallow (x 128 to 390, y 330 to 530). */
  .closet__top {
    position: sticky; z-index: 5; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    margin-top: -8px; padding: 8px 0 12px;
    background: var(--cream);
  }
  .closet__top::after { /* the picks fade out as they go under */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
    background: linear-gradient(var(--cream), rgba(255, 247, 236, 0));
  }
  .closet__stage { --fx: 128; --fy: 330; --fw: 262; --fh: 200; border-radius: 28px; }
}
@media (min-width: 560px) {
  /* the room on the left, as tall as the picks beside it and no taller than the screen */
  .closet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px 18px; align-items: start; }
  .closet__top { display: contents; }
  .closet__stage {
    grid-column: 1; grid-row: 1 / span 2; justify-self: center;
    width: 100%;
    width: min(100%, calc((100svh - var(--nav-h) - 48px) * 216 / 312));
  }
  .closet__bar { grid-column: 2; grid-row: 1; }
  .items { grid-column: 2; grid-row: 2; }
}
@media (min-width: 560px) and (max-width: 719px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) and (max-width: 1139px) {
  .items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1140px) {
  /* the words beside the room once the picks have room for three across; top-aligned, so they don't jump when
     the picks change */
  .wardrobe__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
  .wardrobe__copy { padding-top: 72px; }
}

/* ---------- a peek inside the app ---------- */
.peek { padding-block: 100px 90px; background: var(--white); overflow: clip; }
.peek__rail {
  display: flex; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(var(--gutter), env(safe-area-inset-left, 0px)) 40px max(var(--gutter), env(safe-area-inset-right, 0px));
  scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}
.peek__rail::-webkit-scrollbar { display: none; }
.peek__item { flex: none; display: grid; justify-items: center; gap: 16px; scroll-snap-align: center; }
.peek__item .phone { --w: min(232px, 62vw); }
.peek__caption { font: 600 1.08rem/1.2 var(--display); color: var(--ink); }
@media (min-width: 1100px) {
  .peek__rail { justify-content: center; overflow: visible; padding-bottom: 20px; }
  .peek__item .phone { --w: 214px; }
  .peek__item:nth-child(odd) { margin-top: 44px; }
  .peek__item:nth-child(1) .phone { transform: rotate(-3deg); }
  .peek__item:nth-child(5) .phone { transform: rotate(3deg); }
}

/* ---------- plus ---------- */
.plus { padding-block: 40px 100px; background: var(--cream); }
.plus__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 10px;
  padding: 30px 22px 34px;
  border-radius: 44px;
  background: radial-gradient(110% 100% at 0% 100%, #4A3FB0 0%, #2B2A63 45%, #1E1F4B 100%);
  color: var(--night-text);
  box-shadow: 0 50px 80px -50px rgba(43, 42, 99, .9);
}
.plus__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 10%, #fff 60%, transparent 62%),
    radial-gradient(2px 2px at 70% 8%, #FFE27A 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 92% 40%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 58% 92%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 40% 30%, #fff 60%, transparent 62%);
  animation: twinkle 4.4s ease-in-out infinite alternate;
}
/* Plus: Mallow on a little velvet stage in the moonlight, trying on the looks you can win, each with a pop of light,
   a hop and its name (and how it's won) underneath, while the apps that keep you up fall asleep around him: first
   their red badges, then a moon each, then z's. --burst (how far the sparkles fly) comes from main.js, from the
   art's width. Without the live duck (or with less motion) the apps are simply asleep. */
.plus__art { position: relative; width: min(100%, 360px); margin-inline: auto; aspect-ratio: 1; --burst: 96px; }
.plus__glow {
  position: absolute; left: 12%; top: 10%; width: 76%; height: 76%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(169, 162, 255, .5), rgba(169, 162, 255, .12) 60%, rgba(169, 162, 255, 0));
}
.plus__moonglow {
  position: absolute; left: 34%; top: -9%; width: 32%; height: 32%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 190, .55), rgba(255, 231, 163, .14) 60%, rgba(255, 231, 163, 0));
}
.plus__moon {
  position: absolute; left: 42.5%; top: -1%; width: 15%; height: 15%; max-width: none; overflow: visible;
  fill: #FFE7A3; rotate: 20deg; filter: drop-shadow(0 0 10px rgba(255, 231, 163, .7));
}
.plus__beam { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; animation: beam 6s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
/* One night on the stage (main.js sets data-phase): bedtime, lights out, then morning: the moon sinks, the sun comes
   up, the light warms, and a present drops in (data-gift: drop, shake, pop) */
/* the sunrise: a warm glow centred on the stage that fades out well before its edges (no hard line anywhere) */
.plus__dawn {
  position: absolute; left: -45%; right: -45%; top: 18%; height: 110%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .62), rgba(255, 178, 128, .28) 35%,
    rgba(255, 150, 130, .08) 62%, rgba(255, 150, 130, 0) 85%);
}
/* sun rays turning slowly behind Mallow: faint in the morning, bright when the present pops */
.plus__burst {
  position: absolute; left: 50%; top: 44%; width: 125%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; opacity: 0; scale: .5; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 232, 160, .5) 0deg 4deg, rgba(255, 232, 160, 0) 8deg 16deg, rgba(255, 232, 160, .5) 20deg);
  -webkit-mask: radial-gradient(closest-side, transparent 16%, #000 30%, rgba(0, 0, 0, .45) 62%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 16%, #000 30%, rgba(0, 0, 0, .45) 62%, transparent 100%);
  transition: opacity 1.4s var(--ease-inout), scale 1.6s var(--ease-out);
  animation: burst-spin 40s linear infinite;
}
@keyframes burst-spin { to { rotate: 360deg; } }
.plus__art[data-phase="morning"] .plus__burst { opacity: .45; scale: .9; }
.plus__art.is-won .plus__burst { opacity: 1; scale: 1; transition-duration: .6s, .9s; }
/* the light on the floor around the stage: lavender moonlight, then gold */
.plus__floor { position: absolute; left: -14%; right: -14%; top: 64%; height: 50%; pointer-events: none; }
.plus__floor::before, .plus__floor::after {
  content: ""; position: absolute; inset: 0; transition: opacity 1.2s var(--ease-inout);
}
.plus__floor::before { background: radial-gradient(closest-side, rgba(150, 140, 255, .42), rgba(120, 110, 240, .14) 55%, rgba(120, 110, 240, 0)); }
.plus__floor::after {
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .8), rgba(255, 180, 110, .32) 48%, rgba(255, 150, 110, .08) 75%, rgba(255, 150, 110, 0));
}
.plus__art[data-phase="morning"] .plus__floor::before { opacity: 0; }
.plus__art[data-phase="morning"] .plus__floor::after { opacity: .7; }
.plus__art.is-won .plus__floor::after { opacity: 1; }
/* and the stage's marquee lights chase round when he wins */
.plus__lights { transition: stroke .5s; }
.plus__art.is-won .plus__lights { stroke: #FFF8DA; filter: drop-shadow(0 0 2.5px #FFD45E); animation: rope-chase .6s linear infinite; }
@keyframes rope-chase { to { stroke-dashoffset: -6; } }
.plus__look { transition: box-shadow .6s, background .6s; }
.plus__art.is-won .plus__look {
  box-shadow: inset 0 0 0 2px rgba(255, 226, 122, .9), 0 0 28px -2px rgba(255, 210, 110, .7);
}
.plus__sun {
  position: absolute; left: 41%; top: -3%; width: 18%; height: 18%; max-width: none; overflow: visible;
  opacity: 0; translate: 0 45%; filter: drop-shadow(0 0 12px rgba(255, 212, 94, .75));
}
.plus__rays { transform-origin: 24px 24px; animation: rays 14s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }
.plus__glow, .plus__dawn, .plus__moon, .plus__moonglow, .plus__sun, .plus__beam polygon {
  transition: opacity 1.2s var(--ease-inout), translate 1.2s var(--ease-inout);
}
.plus__beam-sun { opacity: 0; }
.plus__art[data-phase="night"] .plus__glow { opacity: .55; }
.plus__art[data-phase="morning"] .plus__glow { opacity: .7; }
.plus__art[data-phase="morning"] .plus__dawn, .plus__art[data-phase="morning"] .plus__sun { opacity: 1; translate: 0 0; }
.plus__art[data-phase="morning"] .plus__moon, .plus__art[data-phase="morning"] .plus__moonglow { opacity: 0; translate: 0 40%; }
.plus__art[data-phase="morning"] .plus__beam-moon { opacity: 0; }
.plus__art[data-phase="morning"] .plus__beam-sun { opacity: 1; }
/* in the morning the apps wake up quietly: the padlocks spring open and drop off */
.plus__art[data-phase="morning"] .plus__tile { filter: none; }
.plus__art[data-phase="morning"] .plus__app i { opacity: 0; animation: none; }
.plus__art[data-phase="morning"] .plus__shackle { transform: translateY(-4px); transition-delay: var(--d, 0s); }
.plus__art[data-phase="morning"] .plus__badge { transform: scale(0); opacity: 0; transition-delay: calc(var(--d, 0s) + .55s); }
/* the present */
.plus__gift {
  position: absolute; left: 61%; top: 52.5%; width: 22%; height: auto; max-width: none; overflow: visible;
  opacity: 0; transform-origin: 50% 100%; pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(10, 8, 40, .45));
}
.plus__gift-lid, .plus__gift-box { transform-box: fill-box; transform-origin: 50% 100%; }
.plus__art[data-gift="drop"] .plus__gift { animation: gift-drop .8s var(--ease-out) both; }
.plus__art[data-gift="shake"] .plus__gift { opacity: 1; animation: gift-shake .55s ease-in-out both; }
.plus__art[data-gift="pop"] .plus__gift { opacity: 1; }
.plus__art[data-gift="pop"] .plus__gift-lid { animation: lid-off .6s var(--ease-out) forwards; }
.plus__art[data-gift="pop"] .plus__gift-box { animation: box-off .35s ease-in .1s forwards; }
@keyframes gift-drop {
  0% { opacity: 0; transform: translateY(-260%); }
  20% { opacity: 1; }
  60% { transform: translateY(0) scale(1.12, .86); }
  78% { transform: translateY(-12%) scale(.95, 1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes gift-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } }
@keyframes lid-off { 60% { opacity: 1; } to { transform: translate(45%, -190%) rotate(32deg); opacity: 0; } }
@keyframes box-off { to { transform: scale(.6); opacity: 0; } }
/* dust drifting up through the light */
.plus__motes i {
  position: absolute; bottom: 30%; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #FFF1C2; box-shadow: 0 0 6px rgba(255, 236, 170, .9);
  animation: mote 7s linear infinite;
}
.plus__motes i:nth-child(1) { left: 40%; animation-delay: -.4s; }
.plus__motes i:nth-child(2) { left: 47%; animation-delay: -2.1s; }
.plus__motes i:nth-child(3) { left: 55%; animation-delay: -3.6s; }
.plus__motes i:nth-child(4) { left: 61%; animation-delay: -5.2s; }
.plus__motes i:nth-child(5) { left: 36%; animation-delay: -4.4s; }
.plus__motes i:nth-child(6) { left: 51%; animation-delay: -6.1s; }
@keyframes mote { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; translate: 6px -150px; } }
/* the apps: awake (a red badge, bright, a nervous little buzz), then asleep (dimmed, a moon, z's) */
.plus__app { position: absolute; width: 13%; aspect-ratio: 1; }
.plus__app--tiktok { left: 4%; top: 22%; rotate: -9deg; }
.plus__app--instagram { left: 7%; top: 47%; rotate: 6deg; }
.plus__app--youtube { right: 4%; top: 32%; rotate: -6deg; }
.plus__tile {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 28%; color: #fff;
  box-shadow: 0 10px 18px -10px rgba(5, 5, 30, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .18);
  filter: saturate(.55) brightness(.78);
  transition: filter .9s var(--ease-inout);
}
.plus__tile .icon { font-size: 22px; }
.plus__app--tiktok .plus__tile { background: #000; }
.plus__app--instagram .plus__tile { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.plus__app--youtube .plus__tile { background: #fff; }
.plus__app--youtube .plus__tile .icon { font-size: 27px; }
.plus__count, .plus__badge {
  position: absolute; right: -18%; top: -18%; display: grid; place-items: center;
  transition: transform .45s var(--ease-pop), opacity .3s;
}
.plus__count {
  min-width: 46%; height: 46%; padding: 0 5px; border-radius: 999px; background: #FF3B5C; color: #fff;
  font: 700 11px/1 var(--body); box-shadow: 0 0 0 2px #2B2A63;
  transform: scale(0); opacity: 0;
}
/* asleep: a padlock that pops on and clicks shut */
.plus__badge {
  width: 46%; height: 46%; border-radius: 50%; background: var(--gold); color: #2B2A63;
  box-shadow: 0 0 0 2.5px #23245A, 0 4px 8px -3px rgba(5, 5, 30, .7);
  transition-delay: var(--d, 0s);
}
.plus__badge .icon { font-size: 12px; overflow: visible; }
.plus__shackle { transition: transform .2s ease-in calc(var(--d, 0s) + .45s); }
.plus__art.is-awake .plus__shackle { transform: translateY(-4px); transition-delay: 0s; }
.plus__art:not(.is-awake) .plus__badge .icon { animation: lock-click .32s ease-out calc(var(--d, 0s) + .62s) both; }
@keyframes lock-click { 0%, 100% { transform: scale(1); } 45% { transform: scale(.82); } }
.plus__app i {
  position: absolute; right: -26%; top: -48%;
  font: 600 13px/1 var(--display); font-style: normal; color: var(--gold);
  animation: zfloat-small 2.4s ease-in-out infinite;
}
.plus__app--instagram i { animation-delay: -.8s; }
.plus__app--youtube i { animation-delay: -1.6s; }
/* awake, before the lights go out */
.plus__art.is-awake .plus__tile { filter: none; animation: buzz 1.6s ease-in-out infinite; }
.plus__art.is-awake .plus__app--instagram .plus__tile { animation-delay: -.5s; }
.plus__art.is-awake .plus__app--youtube .plus__tile { animation-delay: -1s; }
.plus__art.is-awake .plus__count { transform: scale(1); opacity: 1; }
.plus__art.is-awake .plus__badge { transform: scale(0); opacity: 0; }
.plus__art.is-awake .plus__app i { opacity: 0; animation: none; }
.plus__app--instagram { --d: .18s; }
.plus__app--youtube { --d: .36s; }
@keyframes buzz { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -6deg; } 82% { rotate: 6deg; } 88% { rotate: -4deg; } 94% { rotate: 3deg; } }
.plus__podium { position: absolute; left: 11%; bottom: 7%; width: 78%; height: auto; max-width: none; overflow: visible; }
.plus__duck { position: absolute; left: 19%; top: 10%; width: 62%; }
/* the pop of light that covers each change of look */
.plus__poof { position: absolute; left: 50%; top: 41%; width: 0; height: 0; }
.plus__poof b {
  position: absolute; left: calc(var(--burst) * -.8); top: calc(var(--burst) * -.8);
  width: calc(var(--burst) * 1.6); height: calc(var(--burst) * 1.6); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 248, 225, .6) 45%, rgba(255, 248, 225, 0));
}
.plus__poof i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; opacity: 0; background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.plus__poof i:nth-of-type(even) { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: #FFB3C7; }
.plus__poof i:nth-of-type(1) { --a: 0deg; } .plus__poof i:nth-of-type(2) { --a: 45deg; }
.plus__poof i:nth-of-type(3) { --a: 90deg; } .plus__poof i:nth-of-type(4) { --a: 135deg; }
.plus__poof i:nth-of-type(5) { --a: 180deg; } .plus__poof i:nth-of-type(6) { --a: 225deg; }
.plus__poof i:nth-of-type(7) { --a: 270deg; } .plus__poof i:nth-of-type(8) { --a: 315deg; }
.plus__poof.is-on b { animation: poof-flash .55s var(--ease-out); }
.plus__poof.is-on i { animation: poof-spark .8s var(--ease-out); }
@keyframes poof-flash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes poof-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--burst) * -1)) scale(1); }
}
/* the look on show, and how it's won */
.plus__look {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px 8px 12px; border-radius: 999px; white-space: nowrap;
  /* a solid night-blue pill, so it reads over the moonlight and the sunrise alike */
  background: rgba(22, 22, 60, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 226, 122, .55), 0 8px 18px -8px rgba(5, 5, 30, .85);
  font: 600 1rem/1 var(--display); color: var(--gold);
}
.plus__look .icon { font-size: 15px; }
.plus__look span { font: 700 .88rem/1 var(--body); color: #E9E6FF; }
.plus__look span::before { content: "·"; margin-right: 7px; }
.plus__look.is-flip { animation: look-flip .5s var(--ease-pop); }
@keyframes look-flip { 0% { opacity: 0; transform: translateY(8px) scale(.92); } 100% { opacity: 1; transform: none; } }
.plus__art .sparkle { position: absolute; fill: var(--gold); animation: twinkle-pop 2.6s ease-in-out infinite; }
.sparkle--p1 { width: 5%; left: 27%; top: 6%; }
.sparkle--p2 { width: 4%; right: 25%; top: 13%; animation-delay: -1.1s !important; fill: #FFB3C7 !important; }
.sparkle--p3 { width: 5%; right: 7%; top: 58%; animation-delay: -1.9s !important; }
.plus__copy { display: grid; gap: 18px; justify-items: start; }
.plus__hl { color: #FFD54F; -webkit-text-stroke: .06em #2B2A63; paint-order: stroke fill; white-space: nowrap; }
.plus__offer { margin-top: 6px; font: 600 1.25rem/1.2 var(--display); color: var(--gold); }
.plus__lead { color: var(--night-soft); font-size: var(--t-lead); line-height: 1.5; max-width: 26em; text-wrap: pretty; }
.perks { display: grid; gap: 12px; }
.perks li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.08rem; color: var(--night-text); }
/* the app's paywall perks: an icon on a tinted tile */
.perk__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; color: var(--gold); }
.perk__icon .icon { font-size: 18px; }
.perk__icon--moon { background: #3B3A86; }
.perk__icon--gift { background: #4A2F72; }
.perk__icon--gift .icon { font-size: 22px; }
.perk__icon--star { background: #3A3F7A; color: #FFD45E; }
.perk__icon--mail { background: #2E4378; color: #9FD3FF; }
.perk__icon--sticker { background: #4E2F68; color: #FF8FAB; }
/* the free week, step by step (the app's paywall shows the same) */
.plus__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.plus__cta p { color: var(--night-muted); font-weight: 700; font-size: .98rem; max-width: 16em; }
@media (min-width: 900px) {
  .plus__card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 30px; padding: 56px 64px 56px 40px; }
  .plus__art { width: 100%; max-width: 420px; }
}

/* ---------- faq ---------- */
.faq { padding-block: 100px; background: var(--white); }
.faq__grid { display: grid; gap: 34px; }
.faq__head { display: grid; gap: 16px; justify-items: start; align-content: start; }
.faq__mallow { position: relative; width: 170px; margin-top: 8px; }
.faq__duck { width: 100%; }
.faq__bubble { left: 42%; top: -8%; transform-origin: 31px 100%; }
.faq__bubble::after { left: 22px; right: auto; border-radius: 0 0 0 6px; }
.faq__list { display: grid; gap: 12px; }
.qa {
  border-radius: 22px; background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: background-color .2s;
}
.qa[open] { background: #FFF2E0; }
.qa summary {
  position: relative; display: block; cursor: pointer;
  padding: 20px 60px 20px 22px;
  font: 600 1.2rem/1.3 var(--display);
  list-style: none; border-radius: 22px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%232E2118' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: inset 0 0 0 2px var(--chip-line);
  transition: transform .3s var(--ease-pop);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 22px 22px; color: var(--muted); max-width: 40em; }
@media (max-width: 959px) {
  .faq__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .faq__head .pill { grid-column: 1; }
  .faq__head .h2 { grid-column: 1; }
  .faq__mallow { grid-column: 2; grid-row: 1 / span 2; width: 104px; margin: 0 -6px -6px 0; }
  /* the duck sits at the right edge here, so it talks to the left: the bubble's tail, near its right end, over the
     middle of his head */
  .faq__bubble { left: auto; right: 26%; top: -26%; transform-origin: calc(100% - 27px) 100%; }
  .faq__bubble::after { left: auto; right: 18px; border-radius: 0 0 6px 0; }
}
@media (min-width: 960px) {
  .join__moon { right: 12%; top: 14%; width: 74px; height: 74px; }
  .join__mallow { width: 300px; }
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ---------- join ---------- */
.join {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: 90px 110px;
  background: radial-gradient(120% 90% at 50% 0%, #34337A 0%, #1E1F4B 45%, #14153A 100%);
  color: var(--night-text);
  text-align: center;
}
.join__sky { position: absolute; inset: 0; z-index: -1; }
.join__moon { position: absolute; right: 7%; top: 5%; width: 56px; height: 56px; fill: #FFE7A3; filter: drop-shadow(0 0 30px rgba(255, 231, 163, .45)); }
.join__inner { display: grid; justify-items: center; gap: 18px; }
.join__mallow { position: relative; width: min(64vw, 270px); margin-bottom: 26px; }
/* The app icon (tools/render-icon.mjs), live: the dusk tile, a glow behind Mallow's head, and the duck drawn 1.5
   tiles wide with its corner at (-0.4, -0.16) tiles, so the head sits low left and the wave and heart fill the
   top right. */
.join__tile {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1; border-radius: 22.37%;
  background:
    radial-gradient(62% 62% at 29% 54.5%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #E4DEFF, #9C93F2);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 34px 60px -24px rgba(5, 5, 25, .7), 0 0 90px rgba(142, 134, 240, .4);
  rotate: -4deg;
  animation: tile-float 6s ease-in-out infinite;
}
.join__tile::after { /* a whisper of light along the top edge, over the duck as in the icon */
  content: ""; position: absolute; inset: 0 0 50%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
}
@keyframes tile-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -8px; rotate: -2deg; } }
.join__duck { position: absolute; z-index: 1; left: -40%; top: -16%; width: 150%; }
/* over Mallow's head, which sits low left in the tile (x 35%): the tail points down into the tile at it */
.join__bubble { left: 35%; bottom: calc(100% + 6px); translate: -50% 0; transform-origin: 50% 100%; }
.join__bubble::after { right: auto; left: 50%; margin-left: -9px; }
.join .lead { color: var(--night-muted); margin-inline: auto; }
.signup {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: 100%; max-width: 560px; margin-top: 8px;
}
.signup__input {
  flex: 1 1 260px; min-width: 0; min-height: 62px;
  padding: 0 22px;
  border: 0; border-radius: 20px;
  background: rgba(255, 255, 255, .1); color: var(--night-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
  font: 700 1.1rem/1 var(--body);
  transition: box-shadow .2s, background-color .2s;
}
.signup__input::placeholder { color: #9D99CF; }
.signup__input:focus { outline: none; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2.5px var(--gold); }
.signup__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px #FF9FB8; }
.signup__btn { flex: 0 1 auto; }
.signup { position: relative; }
.signup__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.signup__msg { min-height: 1.6em; font-weight: 800; color: var(--gold); }
.signup__msg.is-error { color: #FFB3C7; }
.signup.is-done { display: none; }
.join__fine { font-size: .9rem; font-weight: 700; color: #9D99CF; }
.join__fine a { color: inherit; text-underline-offset: 3px; }
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.platforms li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1);
  font: 600 1rem/1 var(--display);
}
.platforms li .icon { color: var(--gold); }
.platforms span { font: 700 .82rem/1 var(--body); color: var(--night-muted); }

/* ---------- footer ---------- */
.footer { background: #101133; color: var(--night-soft); padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px)); }
.footer__inner { display: grid; gap: 22px; }
.footer__brand { display: grid; gap: 10px; justify-items: start; }
.brand--light { color: var(--night-text); }
.footer__brand p { font-weight: 700; color: var(--night-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__links a { text-decoration: none; font-weight: 800; color: var(--night-soft); padding: 6px 0; }
.footer__links a:hover { color: var(--gold); }
.footer__contact a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.footer__contact a:hover { text-decoration-thickness: 2.5px; }
.footer__fine { font-size: .88rem; font-weight: 700; color: #8F8BC4; }
@media (min-width: 900px) {
  .footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .footer__links { justify-content: flex-end; }
  .footer__fine { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
}

/* ---------- bedtime mode: the page sends late visitors to bed ---------- */
.nudge {
  position: fixed; z-index: 70; left: 50%;
  bottom: calc(16px + var(--consent-h, 0px) + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 32px), 440px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 16px 18px 18px 10px; border-radius: 28px;
  background: #1E1F4B; color: var(--night-text);
  box-shadow: 0 30px 60px -24px rgba(8, 8, 30, .75), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
  transform: translateX(-50%);
}
.nudge.is-in { animation: nudge-in .65s var(--ease-pop) both; }
.nudge.is-out { animation: nudge-out .3s ease-in both; }
@keyframes nudge-in { from { opacity: 0; transform: translate(-50%, 40px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes nudge-out { to { opacity: 0; transform: translate(-50%, 30px) scale(.97); } }
.nudge__duck { width: 92px; height: 92px; margin: -40px -4px -6px -2px; }
.nudge__words { display: grid; gap: 4px; min-width: 0; }
.nudge__title { font: 600 1.25rem/1.2 var(--display); }
.nudge__body { color: var(--night-soft); font-size: .98rem; line-height: 1.45; }
.nudge__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.nudge__later {
  padding: 6px 2px; border: 0; background: none; cursor: pointer;
  color: var(--night-muted); font: 800 .95rem/1.2 var(--body);
  text-decoration: underline; text-underline-offset: 3px;
}
.nudge__later:hover { color: var(--night-text); }

.goodnight {
  position: fixed; inset: 0; z-index: 90; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: radial-gradient(120% 90% at 50% 8%, #2E2D6B 0%, #17183F 55%, #0E0F2C 100%);
  color: var(--night-text); text-align: center;
}
.goodnight .starfield { z-index: -1; }
.goodnight.is-in { animation: lights-out 1.4s var(--ease-inout) both; }
.goodnight.is-out { animation: lights-on .5s ease-in both; }
@keyframes lights-out { from { opacity: 0; } to { opacity: 1; } }
@keyframes lights-on { to { opacity: 0; } }
.goodnight__moon { position: absolute; right: 10%; top: 9%; width: 60px; height: 60px; fill: #FFE7A3; filter: drop-shadow(0 0 30px rgba(255, 231, 163, .5)); }
.goodnight__inner { display: grid; justify-items: center; gap: 8px; max-width: 420px; }
.goodnight .goodnight__time { color: var(--night-text); font: 600 clamp(3.6rem, 2.2rem + 6vw, 5.6rem)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.goodnight__duck { width: min(62vw, 260px); margin-block: 4px -6px; }
.goodnight__title { font: 600 2.3rem/1.1 var(--display); }
.goodnight p { color: var(--night-soft); font-size: 1.08rem; }
.goodnight__wake {
  margin-top: 22px; padding: 8px 4px; border: 0; background: none; cursor: pointer;
  color: var(--night-muted); font: 800 1rem/1.2 var(--body);
  text-decoration: underline; text-underline-offset: 3px;
}
.goodnight__wake:hover { color: var(--night-text); }
html.is-asleep, html.is-asleep body { overflow: hidden; }

.toast {
  position: fixed; z-index: 75; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 18px;
  background: var(--ink); color: var(--cream); font-weight: 800; text-align: center;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
  transform: translateX(-50%);
}
.toast.is-in { animation: nudge-in .5s var(--ease-pop) both; }

/* ---------- confetti, reveal, shared keyframes ---------- */
.confetti { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.5) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes tick { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }

/* rise-in: things start a little low and settle as they come into view (always visible) */
.js [data-reveal] { transform: translateY(26px); transition: transform .8s var(--ease-out); }
.js [data-reveal].is-in { transform: none; }

/* ---------- the small pages: 404, joined, privacy ---------- */
.mini { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.mini__top { padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.mini__main { display: grid; place-items: center; padding-top: 16px; padding-bottom: 56px; text-align: center; }
.mini__main > div { display: grid; justify-items: center; gap: 0; max-width: 34rem; padding-inline: var(--gutter); }
.mini__duck { width: min(220px, 56vw); margin-bottom: 4px; }
.mini h1 { font: 600 var(--t-h2)/1.05 var(--display); letter-spacing: -.022em; text-wrap: balance; margin-bottom: 14px; }
.mini .lead { margin: 0 auto 28px; }
.mini__fine { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--faint); font-size: .95rem; }
.mini__fine a { color: var(--soft); }
.mini__main--prose { place-items: start center; text-align: left; }
.prose { max-width: 40rem; }
.prose h1 { margin-bottom: 16px; }
.prose .lead { margin: 0 0 8px; }
.prose h2 { margin: 34px 0 8px; font: 600 1.45rem/1.2 var(--display); letter-spacing: -.01em; }
.prose p { margin-bottom: 12px; color: var(--muted); line-height: 1.65; }
.prose h3 { margin: 22px 0 6px; font: 600 1.12rem/1.3 var(--display); }
.prose ul { list-style: disc; margin: 0 0 12px; padding-left: 1.2em; color: var(--muted); line-height: 1.65; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--ink); font-weight: 800; }
.prose a:not(.btn) { color: var(--purple-lip); text-underline-offset: 3px; }
.prose__date { margin-top: 30px; font-size: .95rem; color: var(--faint); }
.prose .btn { margin-top: 10px; }

/* ---------- cookie consent (consent.js): Mallow offers a cookie; bottom left, both answers equally easy ---------- */
.consent {
  position: fixed; z-index: 65;
  left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 16px 18px 18px 10px; border-radius: 28px;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 0 0 2px var(--chip-line), 0 6px 0 var(--track), 0 26px 50px -26px rgba(46, 33, 24, .5);
}
@media (min-width: 560px) { .consent { right: auto; width: 400px; } }
.consent[hidden] { display: none; }
.consent.is-in { animation: consent-in .6s var(--ease-pop) both; }
.consent.is-in .consent__duck { animation: consent-duck .9s .25s var(--ease-roll) both; }
.consent.is-out { animation: consent-out .25s ease-in both; }
@keyframes consent-in { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes consent-out { to { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes consent-duck { from { transform: translateY(14px) rotate(-8deg); } to { transform: none; } }
.consent__duck { width: 84px; height: 84px; margin: -34px -4px -6px -2px; filter: drop-shadow(0 6px 8px rgba(46, 33, 24, .14)); }
.consent__words { display: grid; gap: 4px; min-width: 0; }
.consent__title { margin: 0; font: 600 1.3rem/1.2 var(--display); }
.consent__text { margin: 0; color: var(--muted); font: 600 .95rem/1.45 var(--body); }
.consent__text a { color: var(--ink); font-weight: 800; text-underline-offset: 3px; }
.consent__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 8px; }
.consent .btn { min-height: 44px; padding: 0 .6em; font-size: .98rem; }
@media (max-width: 359px) { .consent__duck { width: 68px; height: 68px; } .consent .btn { font-size: .9rem; } }
.consent .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { transform: none; }
  .moods__viewport { overflow-x: auto; }
  .moods__track { animation: none; }
  .plus__beam, .plus__motes i, .plus__app i { animation: none !important; }
}

/* ---------- the stores (stores.js): their buttons once Mallow is out, the email list until then ---------- */
.stores { display: none; flex-wrap: wrap; align-items: center; gap: 10px; }
.show-stores .stores { display: flex; }
.store { display: none; border-radius: 9px; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.store img { display: block; width: auto; height: 46px; }
.live-ios .store--ios, .live-android .store--android { display: block; }
/* a phone sees only its own store */
.on-ios .store--android, .on-android .store--ios { display: none; }
.store:hover { transform: translateY(-2px); }
.store:active { transform: translateY(1px); }
.store:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.show-stores .wait-only { display: none !important; }
.store-only { display: none !important; }
.show-stores .nav__cta.store-only { display: inline-flex !important; }
.show-stores .footer__stores { display: block !important; }
/* the list, while some phone still waits for its store */
.has-stores:not(.keep-list) .list-only { display: none !important; }
.join__get { display: none; }
.show-stores .join__get { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; }
.join__get .stores { justify-content: center; }
.join__qr { display: none; margin: 0; }
.on-desk .join__qr { display: flex; align-items: center; gap: 14px; text-align: left; }
.join__qr img { width: 112px; height: 112px; padding: 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(10, 10, 40, .35); }
.join__qr figcaption { max-width: 9em; font-weight: 800; font-size: .95rem; line-height: 1.35; color: var(--night-soft); }
.footer__stores { font-size: .78rem; opacity: .75; }

/* the early-bird gift for signing up before Mallow is out: the golden egg (mobile/src/components/decor/art.tsx) */
.earlybird { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 31rem; padding: 12px 18px 12px 12px;
  border: 1px solid rgba(255, 226, 122, .3); border-radius: 22px; background: rgba(255, 226, 122, .08); text-align: left; }
.earlybird__egg { flex: none; width: 64px; height: 64px; filter: drop-shadow(0 4px 14px rgba(255, 213, 74, .4));
  animation: egg-bob 3.4s ease-in-out infinite; }
.earlybird p { margin: 0; color: var(--night-soft); font-weight: 700; font-size: .98rem; line-height: 1.42; }
.earlybird b { color: var(--gold); }
@keyframes egg-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .earlybird__egg { animation: none; } }