/*
  Momo — product page.

  Ported from the Claude Design project's `Momo Landing.dc.html`, on the Mosey
  design system's "Cozy Dusk" tokens. The source is a desktop-fixed canvas
  styled inline; this keeps its proportions, colour and type exactly, and adds
  the responsive behaviour a shipped page needs.

  The five-mood hero rotation is pure CSS. The only script on the page is
  momo.js, which does nothing but make Momo giggle when poked.
*/

/* ── Tokens ──────────────────────────────────────────────────────────────
   A low-stimulation plum world with exactly one warm thing glowing in it.
   There is no red anywhere in this system: nothing ever signals failure. */
:root {
  /* Dusk — the ground. Cool plum, never black, never grey. */
  --dusk-900: #171228;
  --dusk-850: #1b1530;
  --dusk-800: #1f1834;
  --dusk-700: #241c38;
  --dusk-500: #2b2145;
  --dusk-400: #2c2344;
  --dusk-300: #372c52;
  --dusk-200: #4a3d6b;

  /* Ink — warm off-white down to dusty lavender. */
  --ink-0: #f2edfa;
  --ink-1: #b7acd1;
  --ink-2: #8a7fa6;

  /* The firefly glow — the only awake colour, always the next action. */
  --amber-400: #ffd79b;
  --amber-500: #ffc978;

  --alt-lavender: #c4a9f5;
  --alt-rose: #f2a6c0;
  --momo-body: #a9c29b;

  --surface-page: var(--dusk-850);
  --surface-card: var(--dusk-400);
  --surface-sunken: var(--dusk-700);
  --surface-calm: var(--dusk-300);

  --text-strong: var(--ink-0);
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: #6e648a;
  --text-on-accent: var(--dusk-700);

  --border-hairline: rgba(242, 237, 250, 0.08);
  --border-subtle: var(--dusk-200);
  --border-calm: var(--dusk-200);

  --accent-primary: var(--amber-500);
  --accent-primary-soft: rgba(255, 201, 120, 0.14);
  --accent-calm-soft: rgba(196, 169, 245, 0.13);
  --accent-calm-ink: var(--alt-lavender);
  --status-gentle: var(--alt-rose);
  --status-gentle-soft: rgba(242, 166, 192, 0.12);

  --focus-ring: var(--alt-lavender);

  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Trebuchet MS", system-ui, -apple-system, sans-serif;

  /* Motion is slow bobbing and fades. That is the whole vocabulary. */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* The one overshoot in the system, reserved for Momo himself. */
  --ease-nudge: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-quick: 160ms;

  --shadow-1: 0 1px 2px rgba(10, 7, 20, 0.28);
  --shadow-glow-warm: 0 0 0 5px rgba(255, 201, 120, 0.13);

  --wrap: 1160px;
  --gutter: 32px;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header is sticky; anchor targets need to clear it. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface-page);
  background-image: linear-gradient(180deg, var(--dusk-850) 0%, var(--dusk-700) 52%, var(--dusk-500) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-strong);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* The only uppercase in the system: the micro-caps label. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-primary);
}

/* Durations and step counts are tabular, so a ticking timer never jitters. */
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 12px 18px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-weight: 700;
  border-radius: 0 0 14px 0;
}

.skip-link:focus {
  left: 0;
}

/* The hero rotation is decorative and hidden from assistive tech; this carries
   the same information as text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Press deepens and moves: the squish is the reassurance. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-quick) var(--ease-settle),
    color var(--dur-quick) var(--ease-settle),
    border-color var(--dur-quick) var(--ease-settle),
    box-shadow var(--dur-quick) var(--ease-settle),
    transform var(--dur-quick) var(--ease-settle);
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  height: 56px;
  padding: 0 28px;
  font-size: 15.5px;
}

.btn-md {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  gap: 8px;
}

.btn-sm {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  gap: 8px;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover {
  background: var(--amber-400);
  box-shadow: var(--shadow-1), var(--shadow-glow-warm);
}

.btn-primary:active {
  background: #f0b963;
  box-shadow: none;
}

.btn-soft {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}

.btn-soft:hover {
  border-color: var(--accent-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-subtle);
}

.btn-ghost:hover {
  background: var(--surface-sunken);
}

.btn-quiet {
  background: transparent;
  color: var(--text-muted);
}

.btn-quiet:hover {
  color: var(--text-strong);
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.btn .icon {
  font-size: 20px;
}

.btn-md .icon,
.btn-sm .icon {
  font-size: 16px;
}

/* ── Tags ────────────────────────────────────────────────────────────── */
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 14px;
  font-weight: 500;
}

.tag .icon {
  font-size: 15px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(27, 21, 48, 0.92);
  border-bottom: 1px solid var(--border-hairline);
}

.site-header .wrap {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--momo-body);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 26px;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.site-nav a {
  text-decoration: none;
  color: var(--text-body);
  transition: color var(--dur-quick) var(--ease-settle);
}

.site-nav a:hover {
  color: var(--text-strong);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding-block: 88px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero h1 {
  font-size: 64px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.hero-lede {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-stage {
  position: relative;
  background: var(--surface-calm);
  border: 1px solid var(--border-calm);
  border-radius: 36px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}

/* Poking Momo wiggles him. Without JS there is no chime — see README. */
.poke {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.poke .mascot-cycle.is-poked {
  animation: poke-wiggle 700ms var(--ease-nudge);
}

.mascot-cycle {
  position: relative;
  width: 220px;
  height: 220px;
}

.say-cycle,
.meta-cycle {
  position: relative;
  width: 100%;
  text-align: center;
}

.say-cycle {
  height: 30px;
}

.meta-cycle {
  height: 20px;
}

.say {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-calm-ink);
}

.meta {
  font-size: 13px;
  color: var(--text-muted);
}

/* Five moods share one slot, each visible for 3.4s of a 17s loop — the same
   cadence the prototype drove from a setInterval. */
.cyc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: hero-swap 17s linear infinite both;
  animation-delay: calc(var(--i) * 3.4s);
}

@keyframes hero-swap {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes poke-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(7deg);
  }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.band {
  background: var(--surface-sunken);
  padding-block: 88px;
}

.section {
  padding-block: 88px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 34ch;
}

.section-head h2,
.split h2,
.pricing h2 {
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.stack-44 {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-1);
}

.medallion {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.medallion .icon {
  font-size: 26px;
}

.feature h3 {
  font-size: 20px;
  line-height: 1.3;
}

.feature p {
  font-size: 14px;
  line-height: 1.55;
}

.step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  padding: 16px 20px;
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.step-text span:last-child {
  font-size: 14px;
  line-height: 1.5;
}

/* ── Why no streaks ──────────────────────────────────────────────────── */
.split {
  display: grid;
  gap: 56px;
  align-items: center;
}

.split-left {
  grid-template-columns: 0.9fr 1.1fr;
}

.split-jar {
  grid-template-columns: 0.8fr 1.2fr;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.split-copy h2 {
  max-width: 22ch;
}

.split-copy p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 38ch;
}

.banners {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The re-entry surface. Never states a number, never says "streak". */
.banner {
  border-radius: 22px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.banner-gentle {
  background: var(--status-gentle-soft);
}

.banner-gentle .banner-title {
  color: var(--status-gentle);
}

.banner-calm {
  background: var(--accent-calm-soft);
}

.banner-calm .banner-title {
  color: var(--accent-calm-ink);
}

.banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banner-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.banner p {
  font-size: 14px;
  line-height: 1.45;
  max-width: 58ch;
}

.banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── The jar ─────────────────────────────────────────────────────────── */
.jar-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.jar-lid {
  width: 150px;
  height: 20px;
  border-radius: 10px;
  background: var(--dusk-300);
  border: 1px solid var(--border-subtle);
  margin-bottom: -6px;
}

.jar {
  position: relative;
  width: 240px;
  height: 280px;
  border: 2px solid rgba(196, 169, 245, 0.35);
  border-radius: 30px 30px 58px 58px;
  background: rgba(196, 169, 245, 0.06);
  overflow: hidden;
}

.fly {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-400);
  box-shadow: 0 0 10px 2px rgba(255, 201, 120, 0.55);
  animation: ff-float 5s ease-in-out infinite alternate;
}

.hero-stage .fly {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 10px 2px rgba(255, 201, 120, 0.5);
}

@keyframes ff-float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, -8px);
  }
  100% {
    transform: translate(-4px, -3px);
  }
}

.note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  padding: 12px 16px;
  max-width: 440px;
  font-size: 14px;
}

.note .icon {
  font-size: 21px;
  color: var(--accent-calm-ink);
}

/* ── Pricing ─────────────────────────────────────────────────────────── */
.pricing {
  max-width: 860px;
  margin: 0 auto;
  padding: 88px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}

.pricing h2 {
  max-width: 22ch;
}

.promise {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-calm-ink);
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 640px;
  text-align: left;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
}

.plan-best {
  border: 2px solid var(--amber-500);
  background: var(--accent-primary-soft);
}

.plan-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber-500);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-strong);
}

.plan-price {
  font-size: 14.5px;
}

.fine {
  font-size: 13px;
  color: var(--text-faint);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--dusk-900);
  padding: 88px 0 44px;
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-cta h2 {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  font-size: 14px;
  opacity: 0.85;
}

.footer-links div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links .eyebrow {
  opacity: 0.6;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-strong);
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  opacity: 0.65;
}

.footer-bottom .wordmark {
  font-size: 20px;
  color: inherit;
}

/* ── Mascot ──────────────────────────────────────────────────────────────
   Momo breathes: a 4.4s bob, with z's drifting up or sparkles when pleased.
   It is the only ambient animation on the page. */
.momo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.momo .bob {
  animation: momo-bob 4.4s cubic-bezier(0.5, 0.05, 0.3, 1) infinite;
}

.momo .z {
  animation: momo-z 3.2s linear infinite;
  opacity: 0;
}

.momo .sp {
  animation: momo-sparkle 2.6s var(--ease-settle) infinite alternate;
}

/* Animates the `translate` property, not `transform` — several moods carry a
   static tilt as a `transform` attribute, and a CSS `transform` would replace
   it. The individual property composes with the attribute instead. */
@keyframes momo-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

@keyframes momo-z {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(4px, -14px);
  }
}

@keyframes momo-sparkle {
  from {
    opacity: 0.35;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root {
    --gutter: 24px;
  }

  .hero,
  .split-left,
  .split-jar,
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split-jar .jar-stack {
    order: -1;
  }

  .hero h1 {
    font-size: 46px;
  }

  .footer-cta h2 {
    font-size: 34px;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .site-nav {
    display: none;
  }

  .hero,
  .section,
  .band,
  .pricing {
    padding-block: 56px;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 36px;
  }

  .section-head h2,
  .split h2,
  .pricing h2 {
    font-size: 27px;
  }

  .hero-stage {
    padding: 28px 20px;
  }

  .mascot-cycle {
    width: 170px;
    height: 170px;
  }

  .plans {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions .btn-quiet {
    display: none;
  }
}

/* Momo stops dead under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .momo .bob,
  .momo .z,
  .momo .sp,
  .fly,
  .poke .mascot-cycle.is-poked {
    animation: none;
  }

  .momo .z {
    opacity: 0.8;
  }

  /* The rotation still has to advance — it just cuts instead of fading. */
  .cyc {
    animation-timing-function: step-end;
  }
}

/* ── Legal documents ─────────────────────────────────────────────────────
   Long-form prose, so the measure is narrower than the marketing page and
   the rhythm is looser. Same voice, same ground. */
.doc {
  max-width: 720px;
  padding-block: 72px 96px;
}

.doc-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-hairline);
}

.doc-head h1 {
  font-size: 38px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.doc-lede {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 52ch;
}

.doc-meta {
  font-size: 13px;
  color: var(--text-faint);
}

.doc-section {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doc-section h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  color: var(--text-strong);
}

.doc-section h3 {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
  color: var(--accent-calm-ink);
  padding-top: 8px;
}

.doc-section p,
.doc-section li {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 62ch;
}

.doc-section ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-section strong {
  color: var(--text-strong);
  font-weight: 700;
}

.doc-section a {
  color: var(--accent-primary);
  text-underline-offset: 3px;
}

.doc-links {
  display: flex;
  gap: 20px;
}

.doc-links a {
  text-decoration: none;
}

.doc-links a:hover {
  color: var(--text-strong);
}

@media (max-width: 560px) {
  .doc { padding-block: 48px 64px; }
  .doc-head h1 { font-size: 28px; }
  .doc-section h2 { font-size: 20px; }
}

/* ---------- questions ---------- */

/*
  A question is a .feature card: same surface, radius, border and shadow as the
  three cards in "Built for the actual problem". Only the two spans need type of
  their own, because .feature styles h3 and p, which these are not.
*/

.faq-q {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}

.faq-a {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}

/* Replaced the beta signup: Momo shipped, so the footer points at the store. */
.store-actions { display: flex; flex-wrap: wrap; gap: 12px; }