/* Mochi's website: home page and setup guide. Warm paper and ink, with Mochi's cream, blush and leaf. */

@font-face { font-family: 'Fredoka'; src: url('/fonts/Fredoka.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans.ttf') format('truetype'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
/* While the fonts load, text shows in Arial sized to take the same room (measured per weight against Arial and Arial
   Bold: Plex 0.3% wider / 4% narrower, Fredoka 0.5% / 7% narrower), so nothing reflows when they arrive. system-ui,
   the old stand-in, is 9% narrower than Plex. */
@font-face { font-family: 'Plex Stand-in'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 100.3%; ascent-override: 102.2%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: 'Plex Stand-in'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 95.8%; ascent-override: 107%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: 'Fredoka Stand-in'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 99.5%; ascent-override: 97.9%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: 'Fredoka Stand-in'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 93%; ascent-override: 104.7%; descent-override: 25.4%; line-gap-override: 0%; }

:root {
  --paper: #F5F3ED;
  --paper-deep: #EDECE6;
  --paper-sink: #E4E3DC;
  --hairline: #D7D6CE;
  --muted: #5C5B52;
  --ink: #1B1C15;
  --ink-soft: #2E2F27;
  --cream: #FBF0E2;
  --cream-deep: #F1DFCB;
  --peach: #DEC0A6;
  --blush: #FF8FA6;
  --leaf: #137B44;
  --leaf-light: #58BE7C;
  --display: 'Fredoka', 'Fredoka Stand-in', ui-rounded, system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Plex Stand-in', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --spring: cubic-bezier(0.22, 1.25, 0.36, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.site {
  margin: 0;
  /* viewport-fit=cover: keep content clear of the notch in landscape. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--cream-deep); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
/* Buttons set their own display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }
/* Controls that only work with the page's script: their room is kept while it loads (they used to pop in and push the
   page down), and they stay invisible, not broken, if it never runs. The script removes the class. */
.needs-js { visibility: hidden; }
img, svg, canvas { display: block; }
section[id] { scroll-margin-top: 16px; }

/* Screen-reader-only text, and the skip link that appears on Tab. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline-color: var(--blush); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.fine { font-size: 14px; color: var(--muted); }
.fine a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--peach); text-decoration-thickness: 1.5px; }

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s, box-shadow 0.25s;
}
.pill-btn:active { transform: translateY(0) scale(0.97); }
.pill-btn.ink { background: var(--ink); color: var(--paper); box-shadow: 0 8px 24px -10px rgba(27, 28, 21, 0.55); }
.pill-btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-btn.big { min-height: 54px; padding: 0 28px; font-size: 18px; }
@media (hover: hover) {
  .pill-btn:hover { transform: translateY(-2px); }
}

/* MARK: Nav */

.nav { display: flex; align-items: center; gap: 24px; padding: 18px var(--gutter); max-width: 1240px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 22px; }

/* MARK: Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 84px) var(--gutter) clamp(40px, 7vw, 96px);
}
/* The hero shows straight away (no waiting for scripts), with a gentle staggered entrance. */
.hero-copy > *, .desk { animation: rise 0.8s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.hero-copy > :nth-child(5) { animation-delay: 0.24s; }
.desk { animation-delay: 0.15s; animation-duration: 1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--cream-deep) 62%);
  padding: 0 0.06em;
}
.lede { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 33em; }
.lede b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 6px; }
/* The quiet second way in, for people who already have him on their Mac. */
.hero-copy .fine a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* The desk scene */
.desk { position: relative; margin: 0; padding-bottom: 6px; }
.monitor {
  position: relative;
  border-radius: 20px;
  background: var(--ink);
  padding: 10px;
  box-shadow: 0 40px 80px -40px rgba(27, 28, 21, 0.45);
}
.monitor-bar { display: flex; gap: 6px; padding: 4px 6px 10px; }
.monitor-bar i { width: 9px; height: 9px; border-radius: 50%; background: #45463d; }
.monitor-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  /* Everything inside sizes to the screen, not the window, so it never overflows on a phone. */
  container-type: inline-size;
}
.mock { position: absolute; inset: 0; padding: 7% 7%; display: flex; flex-direction: column; gap: 6%; }
.spot {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  text-align: left; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent;
  transition: outline-color 0.3s, background-color 0.3s;
  position: relative;
}
/* The pretend buttons are tiny on a phone: an invisible ring makes them easy to tap without changing the look. */
.spot::before { content: ''; position: absolute; inset: -9px -6px; }
.mock-chart::before { inset: -4px; }
.spot:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
  .spot:hover:not(.spot-on) { outline: 2px dashed rgba(255, 143, 166, 0.8); outline-offset: 4px; }
}
.mock-title { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2.1vw, 26px); font-size: clamp(14px, 5cqw, 30px); line-height: 1.1; width: fit-content; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.mock-card { border-radius: 12px; background: var(--paper); padding: 6% 8%; display: flex; flex-direction: column; align-items: flex-start; }
.mock-label { font-family: var(--mono); font-size: clamp(9px, 0.9vw, 12px); font-size: clamp(8px, 2cqw, 12px); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mock-num { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2vw, 26px); font-size: clamp(14px, 4.6cqw, 28px); width: fit-content; line-height: 1.2; }
.mock-num.up { color: var(--leaf); }
.mock-chart { flex: 1; width: 100%; display: flex; align-items: flex-end; gap: 4%; padding: 0 2%; border-bottom: 1.5px solid var(--hairline); border-radius: 8px 8px 0 0; }
.mock-chart span { flex: 1; border-radius: 6px 6px 0 0; background: var(--paper-sink); height: 50%; transform-origin: bottom; }
.mock-chart span:nth-child(1) { height: 38%; }
.mock-chart span:nth-child(2) { height: 52%; }
.mock-chart span:nth-child(3) { height: 45%; }
.mock-chart span:nth-child(4) { height: 66%; }
.mock-chart span:nth-child(5) { height: 61%; }
.mock-chart span:nth-child(6) { height: 84%; background: var(--ink); }
.mock-chart.spot-on span:nth-child(6) { animation: bar-pop 0.6s var(--spring); }
@keyframes bar-pop { 40% { transform: scaleY(1.08); } }
.mock-actions { display: flex; gap: 3%; }
.mock-btn { font-size: clamp(10px, 1vw, 13px); font-size: clamp(9px, 2.4cqw, 14px); font-weight: 600; padding: 1.6% 4%; padding: 0.5cqw 3cqw; border-radius: 999px; background: var(--ink); color: #fff; line-height: 1.6; }
.mock-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.spot-on { outline: 2.5px solid var(--blush); outline-offset: 4px; background-color: rgba(255, 143, 166, 0.1); }
.mock-btn.spot-on { background-color: var(--ink); }
.mock-btn.ghost.spot-on { background-color: rgba(255, 143, 166, 0.12); }

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(34px, 4.4vw, 54px);
  height: clamp(34px, 4.4vw, 54px);
  width: clamp(28px, 9cqw, 56px);
  height: clamp(28px, 9cqw, 56px);
  transform: translate(-200px, -200px);
  transition: transform 1.05s var(--spring);
  filter: drop-shadow(0 6px 10px rgba(27, 28, 21, 0.18));
  pointer-events: none;
  z-index: 3;
}
/* He tilts into each flight, then bobs gently while he waits. */
.cursor-body {
  width: 100%; height: 100%;
  transform-origin: 8% 8%;
  rotate: var(--tilt, 0deg);
  transition: rotate 0.45s var(--spring);
  animation: cursor-bob 3.4s ease-in-out infinite;
}
@keyframes cursor-bob { 50% { translate: 1px -3px; } }
.cursor svg { width: 100%; height: 100%; overflow: visible; }
.cursor.press svg { animation: press 0.35s var(--spring); }
@keyframes press { 40% { transform: scale(0.86); } }
.cursor-eyes { transform-box: fill-box; transform-origin: center; animation: cursor-blink 5.2s infinite; }
@keyframes cursor-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.12); } }
.cursor-cheek { opacity: 0.6; transition: opacity 0.4s; }
.cursor.shy .cursor-cheek { opacity: 1; }

/* A soft blush ring where he clicks. */
.ripple {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--blush); opacity: 0; pointer-events: none; z-index: 2;
}
.ripple.go { animation: ripple 0.65s var(--ease); }
@keyframes ripple { from { opacity: 0.9; transform: scale(0.2); } to { opacity: 0; transform: scale(1.5); } }

.bubble {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 62%;
  padding: 9px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 22px -12px rgba(27, 28, 21, 0.4);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 15px);
  font-size: clamp(11px, 2.9cqw, 16px);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: 0 0;
  transition: opacity 0.25s, transform 0.35s var(--spring);
  pointer-events: none;
  z-index: 4;
}
.bubble.show { opacity: 1; transform: none; }
/* The tail points back at his cursor, whichever side the bubble lands on. */
.bubble::after {
  content: ''; position: absolute; left: 14px; top: -6px; width: 11px; height: 11px;
  background: var(--paper); border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink);
  transform: rotate(45deg); border-top-left-radius: 3px;
}
.bubble[data-side="left"] { transform-origin: 100% 0; }
.bubble[data-side="left"]::after { left: auto; right: 14px; }
.bubble[data-v="above"] { transform-origin: 0 100%; }
.bubble[data-v="above"]::after { top: auto; bottom: -6px; border: 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); border-radius: 0 0 3px 0; }

.stand { width: 18%; height: 26px; margin: 0 auto; background: linear-gradient(var(--ink-soft), var(--ink)); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.phone-wrap { position: relative; width: min(62%, 380px); margin: -6px auto 0; }
.phone {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 844 / 390;
  padding: 7px 9px;
  border: 0;
  border-radius: 28px;
  background: #0b0b09;
  box-shadow: 0 0 0 2px #2a2b24, 0 24px 40px -18px rgba(27, 28, 21, 0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.3s var(--spring);
}
@media (hover: hover) { .phone:hover { transform: translateY(-3px) rotate(-0.6deg); } }
.phone:active { transform: scale(0.98); }
.phone:focus-visible { outline-offset: 5px; border-radius: 28px; }
.phone canvas { width: 100%; height: 100%; border-radius: 20px; }
.phone-cam { position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #2a2b24; }
.boop {
  position: absolute; right: 6%; top: -4px; padding: 2px 10px; border-radius: 999px;
  background: var(--blush); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none; transform: translateY(0) rotate(6deg);
}
.boop.go { animation: boop 0.9s var(--ease); }
@keyframes boop {
  0% { opacity: 0; transform: translateY(6px) scale(0.6) rotate(6deg); }
  25% { opacity: 1; transform: translateY(-10px) scale(1.08) rotate(-4deg); }
  70% { opacity: 1; transform: translateY(-16px) scale(1) rotate(2deg); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.95) rotate(4deg); }
}
/* What you said to him, like a caption under the phone, so the demo shows the whole loop: you ask, he points. */
.heard {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; margin: 12px auto 0; max-width: 100%;
  font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.25; color: var(--ink-soft);
  text-align: center; opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s, transform 0.4s var(--spring);
}
.heard.show { opacity: 1; transform: none; }
.heard-mic { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blush); }
.heard.show .heard-mic { animation: heard-pulse 1.2s ease-in-out infinite; }
@keyframes heard-pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 143, 166, 0.28); } }
.desk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin-top: 4px; }
.desk-hint { flex-basis: 100%; font-size: 13px; color: var(--muted); font-family: var(--mono); text-align: center; text-wrap: balance; }
/* The hint gets its own line, so the two toggles always sit together under it (they used to split at desktop widths). */
.sound-toggle {
  min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
}
.sound-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.sound-toggle[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
@media (hover: hover) { .sound-toggle:hover { color: var(--ink); } }
/* Pause / play the tour: two little bars, or a play triangle while paused. */
.tour-toggle::before { width: 8px; height: 9px; border-radius: 0; background: transparent; box-shadow: inset 3px 0 0 var(--muted), inset -3px 0 0 var(--muted); }
.tour-toggle[data-paused="true"]::before { box-shadow: none; background: var(--muted); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* MARK: Sections */

.section { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--gutter) 0; }
.section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

/* What he can do: six short cards, an ink line icon in a cream circle each. */
.can { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.can li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.can-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-deep); }
.can-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.can h3 { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; margin-top: 2px; }
.can p { margin-top: 4px; color: var(--muted); font-size: 16px; }
.can b { color: var(--ink); font-weight: 600; }
.can-more { margin-top: 14px; }
.can-more a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--peach); text-decoration-thickness: 2px; }

/* How it works: the three-step story, big numbers, one line each. */
.story { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story li { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.story-num { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6vw, 84px); line-height: 0.9; color: var(--ink); }
.story li:last-child .story-num { color: var(--leaf); }
.story h3 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2vw, 25px); line-height: 1.2; }
.story p { margin-top: 6px; color: var(--muted); }
.story b { color: var(--ink); font-weight: 600; }
.talk-line { margin-top: 16px; padding: 18px 22px; border-radius: var(--radius); background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-deep); font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; }
.talk-line .eyebrow { display: block; margin-bottom: 6px; font-family: var(--mono); font-weight: 400; }
.talk-line b { font-weight: 700; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; margin-top: 28px; }
.faq details { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; display: flex; justify-content: space-between; gap: 12px; border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; margin: -2px -4px 0 0; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-family: var(--mono); color: var(--ink-soft); transition: transform 0.25s var(--spring), background-color 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--cream-deep); }
@media (hover: hover) { .faq summary:hover::after { background: var(--cream-deep); } }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 68ch; }
.faq details a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--peach); text-decoration-thickness: 1.5px; }
/* Smooth open and close where the browser supports animating to auto height. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

.footer {
  max-width: 1240px;
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding: 36px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
}
.footer span { font-family: var(--display); font-weight: 700; color: var(--ink); margin-right: auto; }
/* The Mochi lockup in a footer (BRAND.md): mark and wordmark as one item, the wordmark at the lockup's weight. */
.footer .mochi-lockup { display: flex; align-items: center; }
.footer .mochi-lockup > span { font-weight: 600; margin-right: 0; }
.footer a { text-decoration: none; }
@media (hover: hover) { .footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.small-print { flex-basis: 100%; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; max-width: none; }

/* MARK: Desk Mochi and his outfits */

.section-lede { margin-top: 12px; max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.new-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--leaf); }
.new-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }

/* A pretend Mac screen: a menu bar, a Notes window, and Desk Mochi in the bottom-right corner. */
.mac-desktop {
  position: relative; margin: 28px 0 0; height: clamp(300px, 33vw, 470px);
  border-radius: 20px; overflow: hidden; background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 30px 60px -40px rgba(27, 28, 21, 0.4);
  /* A soft pattern of dots, like a calm wallpaper. */
  background-image: radial-gradient(rgba(27, 28, 21, 0.07) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.mac-menubar {
  display: flex; align-items: center; gap: 16px; height: 30px; padding: 0 14px;
  background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid var(--hairline);
  font-family: var(--body); font-size: 13px; color: var(--ink);
}
.mac-menubar .mochi-mark { width: 13.09px; height: 12px; }
.mac-menubar b { font-weight: 600; }
.mac-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.mac-window {
  position: absolute; left: 7%; top: 64px; width: min(46%, 420px); padding: 0 22px 22px;
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 40px -24px rgba(27, 28, 21, 0.35);
  display: flex; flex-direction: column; gap: 9px;
}
.mac-window-bar { display: flex; gap: 6px; margin: 0 -10px; padding: 10px 0 8px; }
.mac-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.mac-window-title { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 4px 0 4px; }
.mac-line { height: 7px; border-radius: 4px; background: var(--paper-sink); }
.mac-line.short { width: 72%; }
.mac-line.shorter { width: 44%; }

/* Desk Mochi: see-through, peeking up from the bottom-right corner, his bubble above him. */
.desk-buddy { position: absolute; right: 3%; bottom: 0; width: clamp(180px, 27%, 320px); display: flex; flex-direction: column; align-items: flex-end; }
.desk-buddy-face {
  display: block; width: 100%; aspect-ratio: 21 / 11; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}
.desk-buddy-face canvas { width: 100%; height: 100%; }
.desk-buddy-face:focus-visible { outline-offset: -2px; }
.desk-buddy { transition: transform 0.4s var(--spring); }
.desk-buddy.dragging { transition: none; }
.desk-buddy.dragging .desk-buddy-face { cursor: grabbing; }
.desk-buddy-face { touch-action: pan-y; }
.desk-buddy-face.poof { animation: poof 0.5s var(--spring); }
@keyframes poof { 35% { transform: scale(1.06, 0.94); } 70% { transform: scale(0.98, 1.03); } }
.desk-bubble {
  position: relative; max-width: 100%; margin: 0 8% 8px 0; padding: 9px 14px; border-radius: 16px;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 22px -12px rgba(27, 28, 21, 0.4);
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.3;
  opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: 80% 100%;
  transition: opacity 0.25s, transform 0.35s var(--spring); pointer-events: none;
}
.desk-bubble.show { opacity: 1; transform: none; }
.desk-bubble::after {
  content: ''; position: absolute; right: 28%; bottom: -6px; width: 11px; height: 11px; background: var(--paper);
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); border-bottom-right-radius: 3px;
}

.desk-tips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.desk-tips b { color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--blush); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* His outfits: a row of little live Mochis, today's first. */
.outfits-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 40px; }
.outfits-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }
.outfits-head p { margin-top: 6px; color: var(--muted); }
.year-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; color: var(--ink); white-space: nowrap; text-underline-offset: 4px; text-decoration-color: var(--blush); text-decoration-thickness: 2px; }
.outfits-nav { display: flex; gap: 8px; flex: none; }
.round-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); cursor: pointer;
  transition: transform 0.25s var(--spring), opacity 0.2s;
}
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .round-btn:not(:disabled):hover { transform: translateY(-2px); background: var(--cream); } }
.outfits {
  list-style: none; margin: 18px calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter) 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(160px, 19%, 220px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.outfits li { scroll-snap-align: start; }
.outfit {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 14px 14px 14px; gap: 2px;
  border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
  font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s var(--spring), box-shadow 0.2s;
}
.outfit canvas { width: 100%; aspect-ratio: 21 / 11; margin-bottom: 8px; border-radius: 12px; background: var(--paper-deep); }
.outfit-name { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; }
.outfit-when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.outfit.is-today .outfit-when { color: var(--leaf); }
.outfit[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.outfit:active { transform: scale(0.97); }
@media (hover: hover) { .outfit:hover { transform: translateY(-3px); } }

@media (max-width: 640px) {
  .mac-desktop { height: 330px; border-radius: 16px; }
  .mac-window { left: 16px; top: 52px; width: 64%; padding: 0 16px 16px; }
  .mac-window-title { font-size: 16px; }
  .mac-wide { display: none; }
  .desk-buddy { width: 58%; right: 0; }
  .desk-bubble { font-size: 14px; }
  .outfits-head { margin-top: 32px; }
  .outfits-nav { display: none; }
  .outfits { grid-auto-columns: 46%; gap: 10px; }
}

/* MARK: Things to say (say.html) */

.say { display: block; max-width: 1100px; margin: 0 auto; padding: clamp(16px, 3vw, 40px) var(--gutter) 0; }
.say:focus { outline: none; }
.say-page .nav, .say-page .footer { max-width: 1100px; }
.say-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: end; gap: 24px; }
.say h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.02em; }
.say .section-lede b { color: var(--ink); font-weight: 600; }
.say-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.say-buddy { display: flex; flex-direction: column; align-items: flex-end; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.say-buddy canvas { width: 100%; aspect-ratio: 21 / 11; }
.say-buddy { position: relative; }
/* His bubble floats above him instead of sitting in the page: a new line used to change its height and push the
   whole list up or down (on a phone, every chip or "Surprise me" tap moved the page). */
.say-buddy .desk-bubble { position: absolute; right: 10%; bottom: calc(100% - 4px); width: max-content; max-width: min(300px, 78vw); margin: 0; }
.say-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter); background: var(--paper); box-shadow: 0 1px 0 var(--hairline); }
.say-filters { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-padding: 0 24px; }
/* More chips off to the right: the row fades out at its edge instead of slicing a word in half. */
.say-filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.say-filters > .chip:last-child { margin-right: 22px; }
.say-search { flex: 0 1 220px; min-width: 150px; }
.say-search input {
  width: 100%; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline); font: 500 16px var(--body);
}
.say-search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.say-empty { margin-top: 32px; padding: 18px 20px; border-radius: 18px; background: var(--cream); font-family: var(--display); font-weight: 500; font-size: 18px; }
.say-empty .pill-btn { margin-top: 12px; }
.say-card[hidden] { display: none !important; }
.say-filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline); font-family: var(--display); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip[data-count]::after { content: attr(data-count); margin-left: 7px; font-family: var(--mono); font-size: 12px; font-weight: 400; opacity: 0.75; }
.chip.none[aria-pressed="false"] { color: var(--muted); }
@media (hover: hover) { .chip[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.say-group { margin-top: clamp(32px, 5vw, 52px); scroll-margin-top: 80px; }
.say-group h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.say-group-note { margin-top: 4px; color: var(--muted); }
.say-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.say-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); scroll-margin: 90px; transition: box-shadow 0.3s; }
.say-card.is-today { box-shadow: inset 0 0 0 1.5px var(--leaf); }
.say-today { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--leaf); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.say-card.picked { box-shadow: inset 0 0 0 2px var(--blush), 0 0 0 4px rgba(255, 143, 166, 0.2); }
.say-you { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; }
/* His reply, in a little cream bubble. */
.say-him { align-self: flex-start; position: relative; margin-left: 30px; padding: 7px 12px; border-radius: 14px 14px 14px 4px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-deep); font-size: 15px; color: var(--ink-soft); }
.say-him::before { content: ''; position: absolute; left: -30px; bottom: 0; width: 22px; height: 15px; border-radius: 50% 50% 4px 4px / 80% 80% 4px 4px; background: var(--cream-deep); box-shadow: inset 0 0 0 1px var(--peach); }
.say-him::after { content: ''; position: absolute; left: -23px; bottom: 6px; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); box-shadow: 6px 0 0 var(--ink); }
.say-foot { margin-top: 36px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .say-hero { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .say-buddy { order: -1; width: 48%; margin-left: auto; margin-top: 64px; }
  .say-you { font-size: 17px; }
  .say-cards { grid-template-columns: 1fr; gap: 10px; }
  /* On a phone only the chips stay pinned (the search box scrolls away above them), so the list keeps the screen. */
  .say-bar { flex-direction: column; align-items: stretch; gap: 8px; top: -58px; }
  .say-search { flex: none; }
}
@media (forced-colors: active) {
  .chip, .say-card, .say-him { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* MARK: Meet Mochi (meet.html) */

.meet { display: block; max-width: 1100px; margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--gutter) 0; }
.meet:focus { outline: none; }
.meet-page .nav, .meet-page .footer { max-width: 1100px; }
.meet-jump { display: flex; gap: 4px 18px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; font-family: var(--display); font-weight: 600; font-size: 15px; }
.meet-jump a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) { .meet-jump a:hover { text-decoration: underline; text-decoration-color: var(--blush); text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.meet-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: end; gap: 28px; padding-bottom: 0; border-bottom: 1.5px solid var(--ink); }
.meet-hero-copy { padding-bottom: clamp(24px, 4vw, 48px); }
.meet-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 11vw, 150px); line-height: 0.9; letter-spacing: -0.03em; }
.meet-hero .eyebrow { margin-bottom: 6px; }
.meet-today { margin-top: 18px; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-deep); font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.meet-today:empty { display: none; }
.meet-next { margin-top: 8px; font-family: var(--mono); font-size: 13px; color: var(--leaf); }
.meet-next:empty { display: none; }
.meet-buddy { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
/* His bubble floats over the empty sky by his sprout, so it never pushes him down. */
.meet-buddy .desk-bubble { position: absolute; z-index: 1; top: 0; right: 0; max-width: 62%; margin: 0; }
.meet-buddy-face { display: block; width: 100%; aspect-ratio: 9 / 10; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 48% 48% 0 0; }
.meet-buddy-face canvas { width: 100%; height: 100%; }
.meet-buddy-face:focus-visible { outline-offset: -4px; }
.meet-block { margin-top: clamp(56px, 8vw, 100px); scroll-margin-top: 16px; }
.meet-block > h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.015em; }
.meet-sub { margin-top: 36px; font-family: var(--display); font-weight: 600; font-size: 22px; }

/* His ID card: label in mono, answer in Fredoka, ruled like an index card. */
.id-card { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.id-card div { padding: 14px 18px 16px 0; border-bottom: 1px solid var(--hairline); }
.id-card dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.id-card dd { margin: 4px 0 0; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.3; }
.quirks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.quirks li { position: relative; padding-left: 22px; }
.quirks li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 8px; border-radius: 50% 50% 3px 3px / 80% 80% 3px 3px; background: var(--cream-deep); box-shadow: inset 0 0 0 1px var(--peach); }
.quirks b { font-family: var(--display); font-weight: 600; }

/* His birthday: a cream card with the party Mochi peeking up from its bottom edge. */
.birthday { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: end; gap: clamp(20px, 4vw, 48px); padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) 0; border-radius: var(--radius); background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-deep); overflow: hidden; }
.bday-art canvas { width: 100%; aspect-ratio: 21 / 13; }
.bday-copy { padding-bottom: clamp(22px, 3vw, 36px); }
.bday-copy h2 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.bday-count { margin-top: 10px; font-size: 18px; color: var(--ink-soft); }
.bday-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* His year: a timeline, one row per change of clothes, a month label where the month turns. */
.year-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.year-item { display: flex; }
.year-btn {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%;
  padding: 10px 14px 10px 10px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
  font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.25s var(--spring);
}
.year-btn:active { transform: scale(0.98); }
@media (hover: hover) { .year-btn:hover { transform: translateY(-2px); } }
.year-btn canvas { width: 112px; aspect-ratio: 21 / 13; border-radius: 12px; background: var(--paper-deep); }
.year-item.is-now .year-btn { box-shadow: inset 0 0 0 2px var(--ink); }
.year-when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.is-now .year-when { color: var(--leaf); }
.year-text h3 { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.year-wear { font-size: 15px; color: var(--ink-soft); }
.year-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Stickers: a sheet of die-cut Mochis on faintly gridded sticker paper. */
.sticker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sticker-sheet {
  list-style: none; margin: 22px 0 0; padding: clamp(14px, 2.4vw, 28px); display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: clamp(8px, 1.6vw, 18px);
  border-radius: var(--radius); background-color: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
  background-image: linear-gradient(var(--paper-deep) 1px, transparent 1px), linear-gradient(90deg, var(--paper-deep) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sticker { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sticker canvas { transition: transform 0.3s var(--spring); }
@media (hover: hover) { .sticker:hover canvas { transform: rotate(-3deg) scale(1.03); } }
.sticker.wiggle canvas { animation: sticker-wiggle 0.6s var(--ease); }
@keyframes sticker-wiggle { 20% { transform: rotate(-6deg) scale(1.05); } 45% { transform: rotate(5deg) scale(1.05); } 70% { transform: rotate(-2deg); } }
.sticker canvas { width: 100%; aspect-ratio: 10 / 11; }
.sticker span { min-height: 2.6em; font-family: var(--mono); font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }

/* What's new: short, like a note on the fridge. */
.news { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.news li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.news h3 { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.news p { color: var(--muted); }
.news-tag { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--leaf); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.news-tag.soft { background: var(--paper-sink); color: var(--muted); }
.meet-foot { margin-top: 26px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.meet-foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--blush); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Outfit of the day: the button under "Today", and the card in a sheet. */
.ootd-row { margin-top: 16px; }
.ootd { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(27, 28, 21, 0.5); overflow: auto; overscroll-behavior: contain; }
.ootd::backdrop { background: rgba(27, 28, 21, 0.5); }
.ootd[open] { animation: ootd-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes ootd-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.ootd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ootd-head h2 { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.ootd-head .round-btn, .ootd-actions .round-btn { flex: none; }
.ootd-card { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
.ootd-actions { display: flex; gap: 10px; margin-top: 14px; }
.ootd-actions .pill-btn { flex: 1 1 0; justify-content: center; padding: 0 12px; }
.ootd-actions { align-items: center; }
.ootd-actions .pill-btn:disabled { opacity: 0.45; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .ootd[open] { animation: none; } }
@media (forced-colors: active) { .ootd { border: 1px solid CanvasText; } }

@media (max-width: 760px) {
  /* On a phone the page is long: the section links sit under the brand as one row you can swipe. */
  .meet-page .nav { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  .meet-jump { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .meet-jump::-webkit-scrollbar { display: none; }
  .meet-jump a { flex: none; padding: 0 14px; min-height: 40px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); font-size: 14px; }
  .sticker-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sticker span { font-size: 11px; }
  .meet-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .meet-hero-copy { padding-bottom: 8px; }
  .meet-buddy { width: min(78%, 340px); margin: 0 auto; }
  .id-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quirks { grid-template-columns: minmax(0, 1fr); }
  .birthday { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .bday-art { order: 2; margin: 0 auto; width: min(100%, 360px); }
  .bday-copy { padding: 24px 0 0; }
  .news li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (forced-colors: active) {
  .year-btn, .birthday, .sticker-sheet, .meet-today { border: 1px solid CanvasText; }
  .year-item.is-now .year-btn { outline: 3px solid Highlight; }
  .news-tag { border: 1px solid CanvasText; }
}
/* The things-to-say cheat sheet: just the phrases and his replies, two columns, black on white. */
@media print {
  .say-page .nav, .say-page .footer, .say-page .skip-link, .say-buddy, .say-actions, .say-bar, .say-empty, .say-today { display: none !important; }
  html:has(.say-page), .say-page { background: #fff !important; }
  .say { padding: 0; max-width: none; }
  .say-hero { display: block; }
  .say h1 { font-size: 26pt; }
  .say-group { margin-top: 14pt; break-inside: avoid-page; }
  .say-group h2 { font-size: 15pt; }
  .say-cards { grid-template-columns: 1fr 1fr; gap: 6pt 14pt; margin-top: 6pt; }
  .say-card { padding: 0 0 4pt; box-shadow: none !important; background: none !important; border: 0; border-bottom: 0.5pt solid #ccc; border-radius: 0; break-inside: avoid; }
  .say-you { font-size: 11pt; }
  .say-him { margin-left: 0; padding: 0; background: none; box-shadow: none; font-size: 9.5pt; color: #444; }
  .say-him::before, .say-him::after { display: none; }
  .say-foot { font-size: 9pt; }
}
/* Printing the stickers: only the sheet, four across, no shadows behind. */
@media print {
  .print-stickers body.site > :not(main), .print-stickers .meet > :not(#stickers), .print-stickers #stickers > :not(.sticker-sheet):not(h2) { display: none !important; }
  .print-stickers body.site { background: #fff; }
  .print-stickers .meet-block { margin: 0; }
  .print-stickers .sticker-sheet { grid-template-columns: repeat(4, 1fr); background: none; box-shadow: none; padding: 0; gap: 10mm 6mm; }
  .print-stickers .sticker { break-inside: avoid; }
  .print-stickers .sticker span { min-height: 0; }
}

/* Opened from a Home Screen shortcut, these pages fill Mochi's own app window (no browser bar, no Back button):
   a way back to his face sits next to the brand. Hidden in a normal browser tab. */
.app-back { display: none; }
@media (display-mode: fullscreen), (display-mode: standalone) {
  .app-back {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-left: auto; border-radius: 999px;
    background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  }
  .meet-page .app-back { margin-left: 0; order: 2; }
  .app-back + .nav-help { margin-left: 10px; }
}
@media (max-width: 760px) and (display-mode: fullscreen), (max-width: 760px) and (display-mode: standalone) {
  .meet-page .app-back { margin-left: auto; }
  .meet-page .nav { row-gap: 8px; }
}

/* MARK: Responsive */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  /* Sections line up with the centred hero instead of starting further left. */
  .nav, .section, .footer { max-width: calc(620px + 2 * var(--gutter)); }
  .can { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-copy { max-width: 620px; margin: 0 auto; width: 100%; }
  .desk { max-width: 620px; margin: 0 auto; width: 100%; }
  .story { grid-template-columns: 1fr; gap: 12px; }
  .story li { flex-direction: row; align-items: flex-start; gap: 18px; }
  .story-num { flex: none; width: 1.2ch; font-size: 56px; }
}
@media (max-width: 640px) {
  body.site { font-size: 16px; }
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .phone-wrap { width: 78%; }
  .boop { font-size: 13px; }
  .cta-row .pill-btn { flex: 1 1 100%; }
  .story-num { font-size: 46px; }
  .can { grid-template-columns: 1fr; gap: 10px; }
  .can li { padding: 16px 18px; gap: 14px; }
  .heard { font-size: 14px; }
  .faq details { padding: 0 16px; }
  .faq summary { font-size: 17px; padding: 16px 0; }
  .footer { gap: 12px 18px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 33px; }
}
/* A phone turned sideways: copy and desk side by side, the desk sized so the monitor and phone fit on screen together. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-top: 12px; padding-bottom: 40px; }
  .hero-copy, .desk { max-width: none; margin: 0; }
  .desk { width: min(100%, calc(100vh - 110px)); justify-self: center; align-self: start; }
  .hero h1 { font-size: clamp(26px, 4.2vw, 36px); }
  .lede { margin-top: 12px; font-size: 16px; }
  .cta-row { margin-top: 18px; }
  .cta-row .pill-btn { flex: 0 1 auto; }
  .nav { padding-top: 8px; padding-bottom: 4px; }
}
/* "Increase contrast" on: darker secondary text and hairlines. */
@media (prefers-contrast: more) {
  :root { --muted: #3A3A33; --hairline: #8E8D84; }
}
/* Windows High Contrast drops box-shadows, so give cards and outline buttons real borders there. */
@media (forced-colors: active) {
  .pill-btn, .story li, .can li, .faq details, .talk-line, .mock-card, .monitor-screen, .bubble, .mac-desktop, .mac-window, .desk-bubble, .outfit, .round-btn { border: 1px solid CanvasText; }
  .outfit[aria-pressed="true"] { outline: 3px solid Highlight; }
  .spot-on { outline-color: Highlight; }
  .can-icon svg { stroke: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .cursor-body { animation: none !important; }
  .cursor-eyes { animation: none !important; }
}

/* ==========================================================================================================
   MARK: The public home page (index.html) and the waitlist page (waitlist.html, with waitlist.css)
   Everything below is scoped to body.landing, so the pages above (meet, say, setup, home) look exactly as before.
   One cozy world: warm paper, ink, cream and leaf, a wooden desk, a little lamp, and Mochi himself, big and live.
   Light and dark follow the system. The desk, the lamp, the pretend Mac and the sticky notes are "objects" and keep
   their own colors in both.
   ========================================================================================================== */

body.landing {
  --bg: #F5F3ED;
  --bg-deep: #EDECE6;
  --fg: #1B1C15;
  --muted: #5C5B52;
  --line: #D7D6CE;
  --field: #FFFDF8;
  --panel: #FBF0E2;
  --panel-line: #F1DFCB;
  --mark: #FFD3DC;            /* the highlighter behind "squishy" */
  --ok: #137B44;
  --bad: #B3322E;
  --shadow: rgba(27, 28, 21, 0.45);
  --go: #FF8FA6;              /* the big pink "Join" button, his cheeks' color */
  --go-deep: #E26A85;
  --go-ink: #1B1C15;
  --desk-top: #F1DFCB;
  --desk-front: #DEC0A6;
  --desk-line: #1B1C15;
  --desk-ink: #2E2F27;
  --toy-line: #1B1C15;        /* the outline of the lamp and the mug */
  --light: rgba(255, 206, 102, 0.34);  /* the lamp's light on the wall */
  --bulb: #FFE6A3;
  --desk-h: clamp(52px, 5vw, 68px);
  --wrap: 1200px;
  background: var(--bg);
  color: var(--fg);
}
@media (prefers-color-scheme: dark) {
  body.landing {
    --bg: #1B1C15;
    --bg-deep: #23241C;
    --fg: #F5F3ED;
    --muted: #B4B2A7;
    --line: #3B3C33;
    --field: #24251D;
    --panel: #26231C;
    --panel-line: #3A342A;
    --mark: rgba(255, 143, 166, 0.34);
    --ok: #58BE7C;
    --bad: #F2948E;
    --shadow: rgba(0, 0, 0, 0.6);
    --go-deep: #B9506A;
    --desk-top: #4A3B2E;
    --desk-front: #382C22;
    --desk-line: #0E0F0A;
    --desk-ink: #E9DCCB;
    --toy-line: #8A887D;
    --light: rgba(255, 200, 96, 0.15);
  }
}
@media (prefers-contrast: more) {
  body.landing { --muted: #3A3A33; --line: #8E8D84; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  body.landing { --muted: #D8D6CC; --line: #8E8D84; }
}
.landing :focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 10px; }
.landing .skip-link { background: var(--fg); color: var(--bg); }
.landing a { color: inherit; }
.landing .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.landing kbd {
  display: inline-block; min-width: 1.5em; margin: 0 0.12em; padding: 0.05em 0.4em; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px currentColor, inset 0 -2px 0 currentColor; font: 500 0.82em/1.35 var(--body);
  text-align: center; vertical-align: 0.06em;
}

/* MARK: Shared bits */

.landing .sec-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 66px);
  line-height: 1; letter-spacing: -0.028em;
}
.landing .sec-lede { margin-top: 16px; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); }
.landing .sec-lede a { color: var(--fg); text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Buttons. The big pink one is a candy button: it sits on its own darker edge and presses down into it. */
.landing .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.25s var(--spring), box-shadow 0.2s, opacity 0.2s;
}
.landing .btn-go {
  min-height: 58px; padding: 0 30px; margin-bottom: 5px; background: var(--go); color: var(--go-ink);
  font-size: 18px; box-shadow: 0 5px 0 0 var(--go-deep);
}
.landing .btn-big { min-height: 62px; padding: 0 34px; font-size: 19px; }
.landing .btn-go:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--go-deep); transition-duration: 0.06s; }
.landing .btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) {
  .landing .btn:not(:disabled):hover { transform: translateY(-2px); }
  .landing .btn-go:not(:disabled):hover { box-shadow: 0 7px 0 0 var(--go-deep); }
}
.landing .text-btn {
  display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}

/* His speech bubble, with a little tail that points down at him. */
.landing .speech {
  position: absolute; z-index: 3; margin: 0; padding: 10px 16px; border-radius: 20px;
  background: var(--field); color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg), 0 14px 26px -20px var(--shadow);
  font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.28; text-wrap: balance;
  opacity: 0; transform: translateY(8px) scale(0.94); transform-origin: 70% 100%;
  transition: opacity 0.25s, transform 0.4s var(--spring); pointer-events: none;
}
.landing .speech.show { opacity: 1; transform: none; }
.landing .speech::after {
  content: ''; position: absolute; right: 22%; bottom: -7px; width: 13px; height: 13px;
  background: var(--field); box-shadow: 2px 2px 0 0 var(--fg); transform: rotate(45deg); border-bottom-right-radius: 3px;
}

/* A live Mochi you can boop: the canvas fills the button. */
.landing .mochi-btn {
  display: block; width: 100%; aspect-ratio: 28 / 25; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 46% 46% 6px 6px / 54% 54% 6px 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.landing .mochi-btn canvas { position: relative; width: 100%; height: 100%; }
/* A still picture of him behind the live canvas, shown only when his face (face.js) can't load: waitlist.js puts
   mochi-no-face on <html> until it arrives, so a flaky connection never leaves an empty desk. */
.landing .mochi-still {
  position: absolute; left: 22%; bottom: 0; width: 56%; height: auto; opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.mochi-no-face .landing .mochi-still { opacity: 1; }
.landing .mochi-btn:focus-visible { outline-offset: 2px; }

/* MARK: Top bar */

.landing .top {
  display: flex; align-items: center; gap: 22px; max-width: var(--wrap); margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 10px;
}
.landing .brand { color: var(--fg); }
.landing .top-links { display: flex; gap: 2px 24px; margin-left: auto; }
.landing .top-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
@media (hover: hover) { .landing .top-links a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; text-decoration-thickness: 1.5px; } }
.landing .top-join { flex: none; }
.landing .top-links + .top-join { margin-left: 6px; }

/* MARK: The stage: a desk, a lamp and Mochi (the hero, the night scene and /waitlist all use it)
   The lamp is drawn in the stage's own 10 × 9 box, so it always leans over his head, at any size. The desk is a band
   under the stage that runs off both edges of the screen. */

.landing .stage { position: relative; aspect-ratio: 10 / 9; margin-bottom: var(--desk-h); }
.landing .stage .lamp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.landing .lamp-cone { fill: var(--light); }
.landing .lamp-arm { fill: none; stroke: #1B1C15; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.landing .lamp-joint { fill: #1B1C15; }
.landing .lamp-base { fill: #1B1C15; }
.landing .lamp-shade { fill: #137B44; stroke: #1B1C15; stroke-width: 4; stroke-linejoin: round; }
.landing .lamp-bulb { fill: var(--bulb); stroke: #1B1C15; stroke-width: 3; }
@media (prefers-color-scheme: dark) {
  .landing .lamp-arm { stroke: var(--toy-line); }
  .landing .lamp-joint, .landing .lamp-base { fill: var(--toy-line); }
  .landing .lamp-shade { stroke: #0E0F0A; fill: #2E9A5E; }
  .landing .lamp-bulb { stroke: #0E0F0A; }
}
.landing .stage .mochi-btn { position: absolute; z-index: 1; left: 10%; bottom: 0; width: 74%; }
.landing .stage .desk-band {
  position: absolute; top: 100%; left: -100vw; right: -100vw; height: var(--desk-h);
  border-top: 2.5px solid var(--desk-line);
  /* Two flat bands: the desk's top, then its front edge. */
  background: linear-gradient(var(--desk-top) 0 32%, var(--desk-line) 32% calc(32% + 1.5px), var(--desk-front) calc(32% + 1.5px));
}
.landing .mug { position: absolute; z-index: 2; left: -1%; bottom: -1px; width: 11%; overflow: visible; }
.landing .mug-body { fill: #FFFDF8; stroke: var(--toy-line); stroke-width: 3.5; stroke-linejoin: round; }
.landing .mug-handle { fill: none; stroke: var(--toy-line); stroke-width: 6; stroke-linecap: round; }
.landing .mug-heart { fill: #FF8FA6; }
.landing .mug-steam { fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; opacity: 0.55; }

/* MARK: Hero */

.landing .hello { position: relative; overflow: clip; }
.landing .hello-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3.5vw, 56px);
  grid-template-areas: "text stage" "form stage"; grid-template-rows: auto 1fr;
}
.landing .hello-text { grid-area: text; align-self: end; padding-top: clamp(16px, 3vw, 56px); }
.landing .hello .join { grid-area: form; align-self: start; padding-bottom: calc(var(--desk-h) + 40px); }
.landing .hello-stage { grid-area: stage; align-self: end; }
.landing .hello h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(42px, 5vw, 70px);
  line-height: 0.98; letter-spacing: -0.032em;
}
/* "squishy", on a pink highlighter, squishes when he lands and every time you boop him. */
.landing .squish {
  display: inline-block; padding: 0 0.06em; margin: 0 -0.02em; transform-origin: 50% 88%;
  background: linear-gradient(transparent 60%, var(--mark) 60% 92%, transparent 92%);
}
.landing .squish.is-squishing { animation: squish 0.65s var(--ease); }
@keyframes squish {
  25% { transform: scale(1.14, 0.8); }
  55% { transform: scale(0.94, 1.1); }
  80% { transform: scale(1.03, 0.97); }
}
.landing .hello-lede { margin-top: clamp(16px, 1.6vw, 24px); max-width: 27em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--muted); }

.landing .hello-stage .speech { top: 9%; left: 0; max-width: 52%; }
/* A label on the front of the desk, under him. */
.landing .hello-tag {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--desk-h) * 0.32 + 2px); height: calc(var(--desk-h) * 0.68 - 2px);
  display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 4px;
  font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); line-height: 1.25; color: var(--desk-ink); text-align: center; text-wrap: balance;
}

/* The entrance: the words rise in, he pops up from behind the desk with a squish, then the lamp clicks on. */
@media (prefers-reduced-motion: no-preference) {
  .landing .hello-text > * { animation: rise 0.7s var(--ease) both; }
  .landing .hello-text > :nth-child(2) { animation-delay: 0.08s; }
  .landing .hello .join { animation: rise 0.7s var(--ease) 0.16s both; }
  .landing .hello-stage .mochi-btn { transform-origin: 50% 100%; animation: mochi-in 1s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s both; }
  .landing .hello-stage .mug { animation: rise 0.6s var(--ease) 0.45s both; }
  .landing .hello-stage .lamp-cone { animation: lamp-on 1.7s linear both; }
  .landing .hello-tag { animation: rise 0.6s var(--ease) 1.2s both; }
  .landing .mug-steam { animation: steam 3.4s ease-in-out infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes mochi-in {
  0% { opacity: 0; transform: translateY(30%) scale(0.96, 0.9); }
  45% { opacity: 1; transform: translateY(-5%) scale(0.97, 1.05); }
  68% { transform: translateY(0) scale(1.05, 0.93); }
  85% { transform: scale(0.99, 1.02); }
  100% { transform: none; }
}
@keyframes lamp-on { 0%, 68% { opacity: 0; } 71% { opacity: 0.9; } 74% { opacity: 0.15; } 79%, 100% { opacity: 1; } }
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-4px); opacity: 0.7; } }

/* The waitlist form. */
.landing .join { margin-top: clamp(24px, 2.6vw, 36px); max-width: 540px; }
.landing .join-label { display: block; margin-bottom: 10px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.landing .join-row { display: flex; gap: 10px; align-items: flex-start; }
.landing .join-input {
  flex: 1 1 auto; min-width: 0; height: 58px; margin: 0; padding: 0 22px;
  border: 2px solid var(--fg); border-radius: 999px; background: var(--field); color: var(--fg);
  font-family: var(--body); font-size: 17px; font-weight: 450;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.landing .join-input::placeholder { color: var(--muted); opacity: 1; }
.landing .join-input:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; box-shadow: 0 0 0 3px var(--mark); }
.landing .join-input[aria-invalid="true"] { border-color: var(--bad); }
.landing .join-input:disabled { opacity: 0.55; cursor: not-allowed; }
.landing .join-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.landing .join-error { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--bad); }
.landing .join-soon { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 17px; }
.landing .join-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.landing .join-legal { display: block; margin-top: 2px; font-size: 13px; }
.landing .join-note a, .landing .join-done a { text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.landing .join-done { padding: 20px 22px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--panel-line); }
.landing .join-done:focus { outline: none; }
.landing .join-done:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.landing .join-done-title { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.3; }
.landing .join-done-sub { margin-top: 6px; font-size: 15px; color: var(--muted); }
/* The address it went to, whole, so a typo (gmial.com) is easy to spot; a long one wraps instead of overflowing. */
.landing .join-done-to { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.landing .join-done-fine { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .landing .join-done:not([hidden]) { animation: pop 0.5s var(--spring) both; }
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* MARK: Sections */

.landing .watch, .landing .does, .landing .alive, .landing .how, .landing .plans, .landing .promise, .landing .ask { padding-top: clamp(84px, 10vw, 144px); scroll-margin-top: 8px; }
.landing .kicker { margin-bottom: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
.landing .hello-lede b { color: var(--fg); font-weight: 600; }

/* MARK: Watch him work: four little jobs on a pretend Mac
   The Mac is an object: it keeps its own paper colours in dark mode. Everything inside is sized in cqw (1% of the
   Mac's width), so it all scales together from a phone to a big screen. site.js plays the scenes: it adds .on to the
   .pop things as they appear, .hit to what he's pointing at, and flies his cursor with --cx / --cy. */

.landing .watch-head { max-width: 780px; }
.landing .watch-play {
  margin-top: clamp(28px, 4vw, 52px); display: grid; align-items: start;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(20px, 4vw, 60px);
}
.landing .asks-box { padding-top: 6px; }
.landing .asks-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.landing .asks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.landing .ask-btn {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 58px;
  padding: 15px 18px 16px 14px; border: 0; border-radius: 20px 20px 20px 6px;
  background: var(--field); color: var(--fg); box-shadow: inset 0 0 0 2px var(--line);
  font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.28; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.25s var(--spring), background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.landing .ask-n {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%;
  background: var(--bg-deep); font-family: var(--mono); font-size: 13px; font-weight: 400; line-height: 1;
}
.landing .ask-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.landing .ask-btn[aria-pressed="true"] .ask-n { background: var(--go); color: #1B1C15; }
/* How far along this scene is: a pink line along the bottom of the one playing. */
.landing .ask-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--go);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 0.2s linear; opacity: 0;
}
.landing .ask-btn[aria-pressed="true"] .ask-bar { opacity: 1; }
.landing .ask-btn:active { transform: scale(0.98); }
@media (hover: hover) { .landing .ask-btn[aria-pressed="false"]:hover { transform: translateX(4px); box-shadow: inset 0 0 0 2px var(--fg); } }
.landing .tour-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 10px; padding: 0 14px 0 12px; border: 0;
  border-radius: 999px; background: none; color: var(--muted); font-family: var(--mono); font-size: 13px; cursor: pointer;
}
.landing .tour-btn::before { content: ''; width: 9px; height: 10px; box-shadow: inset 3px 0 0 currentColor, inset -3px 0 0 currentColor; }
.landing .tour-btn[aria-pressed="true"]::before { box-shadow: none; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) { .landing .tour-btn:hover { color: var(--fg); } }

.landing .mac { position: relative; margin: 0; container-type: inline-size; }
.landing .mac-screen {
  position: relative; aspect-ratio: 16 / 10.4; overflow: hidden;
  border: 1.7cqw solid #1B1C15; border-radius: 3cqw 3cqw 0 0; border-bottom: 0;
  background-color: #EFE6D8;
  /* A calm wallpaper: soft dots. */
  background-image: radial-gradient(rgba(27, 28, 21, 0.08) 1.2px, transparent 1.6px);
  background-size: 2.6cqw 2.6cqw;
  color: #1B1C15;
}
.landing .mac-chin { height: 5cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: #D9D5CA; box-shadow: inset 0 0.5cqw 0 #1B1C15; }
.landing .mac-foot { width: 20cqw; height: 5cqw; margin: 0 auto; background: #C9C4B8; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
@media (prefers-color-scheme: dark) {
  .landing .mac-screen { box-shadow: 0 0 0 1px #4A4B42; }
  .landing .mac-chin { background: #BDB8AC; }
  .landing .mac-foot { background: #8F8A7F; }
}
.landing .mac-bar {
  position: relative; z-index: 4; display: flex; align-items: center; gap: 2.4cqw; height: 4.4cqw; min-height: 20px; padding: 0 2.4cqw;
  background: rgba(255, 253, 248, 0.82); box-shadow: 0 1px 0 rgba(27, 28, 21, 0.12);
  font-size: max(9px, 1.75cqw); white-space: nowrap;
}
.landing .mac-bar .mochi-mark { width: max(13.09px, 2.6cqw); height: max(12px, 2.383cqw); }
.landing .mac-bar b { font-weight: 600; }
.landing .mac-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.landing .mac-cap { display: flex; flex-direction: column; gap: 4px; min-height: 6.4em; margin-top: 16px; }
.landing .mac-cap-title { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; }
.landing .mac-cap-text { max-width: 40em; font-size: 16px; line-height: 1.5; color: var(--muted); }

.landing .scn { position: absolute; inset: 0; }
.landing .win {
  position: absolute; z-index: 1; padding: 0 2.6cqw 2.6cqw;
  border-radius: 1.8cqw; background: #FFFDF8; color: #1B1C15;
  box-shadow: 0 2.4cqw 5cqw -2.6cqw rgba(27, 28, 21, 0.45), 0 0 0 1px rgba(27, 28, 21, 0.08);
  font-size: max(10.5px, 2cqw); line-height: 1.35;
}
.landing .win-top { display: flex; align-items: center; gap: 0.9cqw; height: max(22px, 4.6cqw); margin: 0 -1.2cqw 0.6cqw; }
.landing .win-top i { flex: none; width: max(6px, 1.25cqw); aspect-ratio: 1; border-radius: 50%; background: #EF9C8E; }
.landing .win-top i:nth-child(2) { background: #EFCB7E; }
.landing .win-top i:nth-child(3) { background: #9DD0A5; }
.landing .win-name { margin-left: 1.2cqw; font-size: 0.86em; font-weight: 600; color: #5C5B52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing .win-title { font-family: var(--display); font-weight: 600; font-size: max(13px, 2.8cqw); line-height: 1.2; margin-bottom: 0.8cqw; }

/* Things that appear as he works (only once the script is running: without it, every scene is a finished still). */
.landing .mac.is-live .pop { opacity: 0; transform: translateY(1.4cqw) scale(0.97); transition: opacity 0.3s, transform 0.45s var(--spring); }
.landing .mac.is-live .pop.on { opacity: 1; transform: none; }
/* What he's pointing at or picking lights up pink. */
.landing .scn .hit { background-color: #FFE0E7; box-shadow: 0 0 0 0.5cqw #FFE0E7; }
.landing .scn [data-k] { transition: background-color 0.25s, box-shadow 0.25s, opacity 0.3s, transform 0.45s var(--spring), color 0.25s; }

/* 1. The spreadsheet */
.landing .win-notes { left: 4cqw; top: 8cqw; width: 26cqw; }
.landing .note-lines { list-style: none; margin: 0; padding: 0; }
.landing .note-lines li { margin: 0 -0.8cqw; padding: 0.45cqw 0.8cqw; border-radius: 0.8cqw; }
.landing .win-sheet { z-index: 2; left: 23cqw; top: 13.5cqw; width: 36cqw; }
.landing .grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  border-top: 1px solid #E2DED4; border-left: 1px solid #E2DED4; font-size: 0.94em;
}
.landing .grid > span { padding: 0.45cqw 1cqw; border-right: 1px solid #E2DED4; border-bottom: 1px solid #E2DED4; white-space: nowrap; overflow: hidden; }
.landing .g-h { background: #F3F0E8; color: #6E6D64; font-family: var(--mono); font-size: 0.8em; text-align: center; }
.landing .g-head { font-weight: 600; background: #FBF7EF; }
.landing .g-num { text-align: right; font-variant-numeric: tabular-nums; }
.landing .g-total { font-weight: 700; background: #E6F3E9; }
/* Sheet cells keep their lines while empty: only the words appear. */
.landing .mac.is-live .grid .pop { opacity: 1; transform: none; }
.landing .mac.is-live .grid .pop:not(.on) { color: transparent; }
.landing .grid .hit { background-color: #FFE0E7; box-shadow: inset 0 0 0 2px #FF8FA6; }

/* 2. The error */
.landing .win-doc { left: 4cqw; top: 8cqw; width: 52cqw; height: 40cqw; }
.landing .doc-line { display: block; height: 1.1cqw; margin-top: 1.6cqw; border-radius: 1cqw; background: #ECE9E1; }
.landing .doc-line.short { width: 72%; }
.landing .doc-line.shorter { width: 44%; }
.landing .alert {
  position: absolute; z-index: 2; left: 12cqw; top: 13cqw; width: 37cqw; margin: 0; padding: 2.4cqw 2.6cqw 2.2cqw;
  border-radius: 2.2cqw; background: #FFFDF8; color: #1B1C15; text-align: center;
  box-shadow: 0 3cqw 6cqw -2.4cqw rgba(27, 28, 21, 0.55), 0 0 0 1px rgba(27, 28, 21, 0.12);
  font-size: max(10px, 1.8cqw); line-height: 1.35;
}
.landing .alert-icon {
  display: grid; place-items: center; width: max(22px, 4.6cqw); aspect-ratio: 1; margin: 0 auto 1cqw; border-radius: 50%;
  background: #F7C64B; box-shadow: inset 0 0 0 1.5px #1B1C15; font-family: var(--display); font-weight: 700; font-size: max(13px, 2.8cqw); line-height: 1;
}
.landing .alert-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: max(11.5px, 2.1cqw); line-height: 1.25; }
.landing .alert-why { margin: 0.8cqw -0.6cqw 0; padding: 0.3cqw 0.6cqw; border-radius: 0.8cqw; color: #4A4940; }
.landing .alert-btns { margin: 1.6cqw 0 0; }
.landing .alert-btn { display: inline-block; min-width: 9cqw; padding: 0.4cqw 2cqw; border-radius: 99px; background: #1B1C15; color: #F5F3ED; font-weight: 600; }
.landing .alert.gone { opacity: 0; transform: scale(0.94); pointer-events: none; }
.landing .look {
  position: absolute; z-index: 3; left: 0; right: 0; top: 4.4cqw; bottom: 0; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 0.9cqw #FF8FA6; background: rgba(255, 255, 255, 0.25);
}
.landing .look.on { animation: look 1.1s var(--ease) both; }
@keyframes look { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* A notification, top right: "Saved" or "Sent". */
.landing .toast {
  position: absolute; z-index: 3; right: 2cqw; top: 6.2cqw; display: grid; grid-template-columns: auto 1fr; column-gap: 1.2cqw;
  align-items: center; margin: 0; padding: 1.2cqw 2.2cqw 1.2cqw 1.6cqw; border-radius: 1.8cqw;
  background: rgba(255, 253, 248, 0.96); color: #1B1C15; box-shadow: 0 1.6cqw 3.4cqw -1.6cqw rgba(27, 28, 21, 0.5), 0 0 0 1px rgba(27, 28, 21, 0.08);
  font-size: max(10px, 1.75cqw); line-height: 1.3;
}
.landing .toast::before {
  content: ''; grid-row: span 2; width: max(16px, 3.2cqw); aspect-ratio: 1; border-radius: 50%;
  background: #58BE7C; box-shadow: inset 0 0 0 1.5px #1B1C15;
}
.landing .toast b { font-family: var(--display); font-weight: 600; font-size: 1.12em; }

/* 3. Send Mom the photos */
.landing .win-photos { left: 4cqw; top: 8cqw; width: 44cqw; }
.landing .ph-share { margin-left: auto; padding: 0.3cqw 1.8cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px #CFCBC0; font-weight: 600; font-size: 0.92em; }
.landing .ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; }
.landing .ph { position: relative; display: block; border-radius: 1cqw; }
.landing .ph svg { width: 100%; height: auto; }
.landing .ph::after {
  content: ''; position: absolute; right: 0.7cqw; top: 0.7cqw; width: max(12px, 2.6cqw); aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #FFFDF8; background: rgba(27, 28, 21, 0.18);
}
.landing .ph.on { box-shadow: 0 0 0 0.5cqw #FF8FA6; }
.landing .ph.on::after { background: #FF8FA6; box-shadow: inset 0 0 0 1.5px #1B1C15; }
.landing .ph::before {
  content: ''; position: absolute; z-index: 1; right: 1.45cqw; top: 1.25cqw; width: max(4px, 0.8cqw); height: max(7px, 1.35cqw);
  border: solid #1B1C15; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.landing .ph.on::before { opacity: 1; }
.landing .ph-sky { fill: #CFE5F2; }
.landing .ph-sky2 { fill: #FBE3C2; }
.landing .ph-sun { fill: #F7C64B; }
.landing .ph-sea { fill: #5AA7CF; }
.landing .ph-sand { fill: #EBCB94; }
.landing .ph-umb { fill: #FF8FA6; stroke: #1B1C15; stroke-width: 1.5; stroke-linejoin: round; }
.landing .ph-ball { fill: #FF8FA6; }
.landing .ph-park { fill: #DCEFD9; }
.landing .ph-hill { fill: #9DD0A5; }
.landing .ph-tree { fill: #58BE7C; stroke: #1B1C15; stroke-width: 1.5; stroke-linejoin: round; }
.landing .ph-cake { fill: #FBE3EA; }
.landing .ph-cake-b { fill: #FFFDF8; stroke: #1B1C15; stroke-width: 1.5; }
.landing .ph-candle { stroke: #F7C64B; stroke-width: 2.4; stroke-linecap: round; }
.landing .ph-dog { fill: #DEC0A6; stroke: #1B1C15; stroke-width: 1.5; }
.landing .ph-eye { fill: #1B1C15; }
.landing .win-mail { z-index: 2; left: 15cqw; top: 15cqw; width: 40cqw; }
.landing .mail-send {
  margin-left: auto; padding: 0.35cqw 2.2cqw; border-radius: 99px; background: #1B1C15; color: #F5F3ED;
  font-family: var(--display); font-weight: 600; line-height: 1.3;
}
/* "Your call?": Send waits inside a dashed pink ring until you say yes. */
.landing .scn .mail-send.hit { background: #1B1C15; box-shadow: 0 0 0 0.45cqw #FFFDF8, 0 0 0 0.9cqw #E26A85; }
.landing .mail-line { margin: 0; padding: 0.7cqw 0; border-bottom: 1px solid #ECE9E1; }
.landing .mail-line b { font-weight: 600; color: #5C5B52; }
.landing .photos { display: flex; gap: 1.2cqw; margin-top: 1.6cqw; }
.landing .photos svg { width: 33%; height: auto; }
.landing .mac.is-live .win-mail.gone { opacity: 0; transform: translate(10cqw, -8cqw) scale(0.6) rotate(4deg); transition: opacity 0.5s 0.15s, transform 0.65s var(--ease); }

/* 4. Good morning */
.landing .win-day { left: 5cqw; top: 8cqw; width: 42cqw; }
.landing .day-weather { display: flex; align-items: center; gap: 1.2cqw; margin: 0 0 1cqw; font-family: var(--display); font-weight: 600; font-size: max(12px, 2.3cqw); }
.landing .day-weather svg { flex: none; width: max(18px, 3.6cqw); height: auto; fill: #F7C64B; stroke: #C98A00; stroke-width: 2; stroke-linecap: round; }
.landing .agenda { list-style: none; margin: 0; padding: 0; }
.landing .agenda li { display: flex; gap: 2cqw; margin: 0 -1cqw; padding: 0.7cqw 1cqw; border-radius: 1cqw; }
.landing .agenda li + li { margin-top: 0.2cqw; }
.landing .ag-time { flex: none; width: 5em; font-family: var(--mono); font-size: 0.92em; color: #5C5B52; }
.landing .ag-what { font-weight: 500; }
.landing .day-remind { display: flex; align-items: center; gap: 1.2cqw; margin: 1.2cqw 0 0; padding-top: 1.2cqw; border-top: 1px solid #ECE9E1; color: #4A4940; }
.landing .day-dot { flex: none; width: max(8px, 1.4cqw); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #137B44; }

/* His cursor: a little Mochi-shaped arrow that flies to what he's working on. Its tip is the top-left corner. */
.landing .m-cursor {
  position: absolute; z-index: 5; left: 0; top: 0; width: max(22px, 4.4cqw); height: auto; overflow: visible; pointer-events: none;
  transform: translate(var(--cx, 66cqw), var(--cy, 40cqw)); transform-origin: 6% 6%;
  transition: transform 0.8s cubic-bezier(0.3, 0.75, 0.2, 1);
  filter: drop-shadow(0 0.5cqw 0.6cqw rgba(27, 28, 21, 0.3));
}
.landing .m-cursor.press { animation: mc-press 0.32s var(--spring); }
@keyframes mc-press { 40% { scale: 0.8; } }
.landing .mc-skin { fill: #FBF0E2; stroke: #1B1C15; stroke-width: 4; stroke-linejoin: round; }
.landing .mc-eye { fill: #1B1C15; }
.landing .mc-shine { fill: #fff; }
.landing .mc-cheek { fill: #FF8FA6; }
/* A soft pink ring where he clicks. */
.landing .m-click {
  position: absolute; z-index: 4; left: 0; top: 0; width: 6cqw; aspect-ratio: 1; margin: -3cqw 0 0 -3cqw; border-radius: 50%;
  box-shadow: 0 0 0 0.45cqw #FF8FA6; opacity: 0; pointer-events: none; transform: translate(var(--kx, 0), var(--ky, 0));
}
.landing .m-click.go { animation: m-click 0.6s var(--ease); }
@keyframes m-click { from { opacity: 1; scale: 0.2; } to { opacity: 0; scale: 1.4; } }

/* The little Mochi in the corner, what you said to him (dark) and his answer (his bubble). */
.landing .mac-buddy {
  position: absolute; z-index: 6; right: 1.6cqw; bottom: 0; width: 38cqw;
  display: flex; flex-direction: column; align-items: flex-end; pointer-events: none;
}
.landing .you-said, .landing .mac-bubble {
  position: relative; max-width: 100%; margin: 0 0 1.1cqw; padding: 1cqw 1.8cqw; border-radius: 2.2cqw;
  font-family: var(--display); font-weight: 600; font-size: max(11px, 1.95cqw); line-height: 1.28; text-wrap: balance;
  transition: opacity 0.25s, transform 0.4s var(--spring); transform-origin: 80% 100%;
}
.landing .mac.is-live .you-said:not(.show), .landing .mac.is-live .mac-bubble:not(.show) { opacity: 0; transform: translateY(1cqw) scale(0.96); }
.landing .you-said { margin-right: 3cqw; background: #1B1C15; color: #F5F3ED; border-bottom-right-radius: 0.6cqw; }
.landing .you-said::before {
  content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin: 0 0.45em 0 0; vertical-align: -0.02em;
  border-radius: 50%; background: #FF8FA6; box-shadow: 0 0 0 0.18em rgba(255, 143, 166, 0.35);
}
.landing .mac-bubble { margin-right: 4cqw; background: #FFFDF8; color: #1B1C15; box-shadow: inset 0 0 0 1.5px #1B1C15, 0 1.4cqw 2.4cqw -1.6cqw rgba(27, 28, 21, 0.45); }
.landing .mac-bubble::after {
  content: ''; position: absolute; right: 22%; bottom: -0.9cqw; width: 1.8cqw; height: 1.8cqw; min-width: 8px; min-height: 8px;
  background: inherit; box-shadow: 1.5px 1.5px 0 0 #1B1C15; transform: rotate(45deg);
}
/* "Your call?": his bubble turns pink while he waits for your yes. */
.landing .mac-bubble.ask { background: #FFE0E7; }
.landing .mac-mochi { width: 19cqw; aspect-ratio: 28 / 25; margin-right: 1cqw; }

/* MARK: What can he do? Cards with things people actually say to him */

.landing .cards { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.landing .card {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px);
  border-radius: 26px; background: var(--field); box-shadow: inset 0 0 0 2px var(--line);
}
.landing .card-wide { grid-column: span 2; }
/* The two wide cards: words on the left, the things you'd say stacked on the right. */
@media (min-width: 961px) {
  .landing .card-wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: clamp(20px, 3vw, 40px); row-gap: 10px; }
  .landing .card-wide > .card-head, .landing .card-wide > p { grid-column: 1; }
  .landing .card-wide > .says { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; }
}
.landing .card-jobs { background: var(--panel); box-shadow: inset 0 0 0 2px var(--panel-line); }
.landing .card-head { display: flex; align-items: center; gap: 14px; }
.landing .card-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--fg); color: var(--bg); }
.landing .card-jobs .card-icon { background: var(--go); color: #1B1C15; }
.landing .card-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.landing .card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.landing .card-jobs h3 { font-size: clamp(23px, 2.2vw, 30px); }
.landing .card > p { max-width: 36em; color: var(--muted); }
.landing .says { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.landing .says li {
  padding: 6px 13px 7px; border-radius: 15px 15px 15px 5px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line);
  font-family: var(--display); font-weight: 500; font-size: 15.5px; line-height: 1.3;
}
.landing .card-jobs .says li { background: var(--fg); color: var(--bg); box-shadow: none; }
/* The last tile: an ink card with the pink button, in both modes. */
.landing .card-cta { justify-content: center; align-items: flex-start; background: #1B1C15; color: #F5F3ED; box-shadow: none; }
.landing .card-cta h3 { font-size: clamp(23px, 2.2vw, 30px); }
.landing .card-cta > p { color: #C9C7BC; }
.landing .card-cta .btn { margin-top: 8px; }
.landing .card-cta :focus-visible { outline-color: #F5F3ED; }
@media (prefers-color-scheme: dark) { .landing .card-cta { background: #F5F3ED; color: #1B1C15; } .landing .card-cta > p { color: #4A4940; } .landing .card-cta :focus-visible { outline-color: #1B1C15; } }

/* MARK: Three steps */

.landing .steps-how { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3.5vw, 56px); }
.landing .steps-how li { padding-top: 18px; border-top: 2px solid var(--fg); }
.landing .how-n {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 50%;
  background: var(--go); color: #1B1C15; box-shadow: 0 4px 0 var(--go-deep);
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1;
}
.landing .steps-how h3 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.2; }
.landing .steps-how p { margin-top: 8px; color: var(--muted); }

/* MARK: Plans. Two price tags; Mochi sits on top of the popular one. Nothing is on sale yet: both buttons go to the
   waitlist form. Plain HTML and CSS, so it reads the same without the script. */

.landing .plans-head { max-width: 760px; }
.landing .plans-head .sec-lede b { color: var(--fg); font-weight: 600; }
.landing .plan-list {
  list-style: none; margin: clamp(52px, 6vw, 72px) 0 0; padding: 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px); align-items: stretch;
}
.landing .plan {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px);
  border-radius: 30px; background: var(--field); box-shadow: inset 0 0 0 2px var(--line);
}
.landing .plan-pop { background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--fg), 0 7px 0 0 var(--fg); }
.landing .plan-tag {
  position: absolute; top: -15px; left: clamp(22px, 2.6vw, 34px); padding: 5px 14px 6px; border-radius: 999px;
  background: var(--go); color: #1B1C15; box-shadow: inset 0 0 0 2px #1B1C15;
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.2; transform: rotate(-3deg);
}
/* Mochi himself, sitting on the top edge of his card. */
.landing .plan-peek { position: absolute; top: -40px; right: clamp(26px, 3vw, 40px); width: 64px; height: auto; transform-origin: 50% 100%; }
.landing .plan-name { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.landing .plan-for { margin-top: 6px; color: var(--muted); font-size: 17px; }
.landing .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: clamp(18px, 2vw, 26px); }
.landing .plan-amount { font-family: var(--display); font-weight: 700; font-size: clamp(52px, 5.4vw, 68px); line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.landing .plan-per { font-family: var(--display); font-weight: 500; font-size: 19px; color: var(--muted); }
.landing .plan-year { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 32px; margin-top: 10px; font-size: 16px; color: var(--muted); }
.landing .plan-year b { color: var(--fg); font-weight: 600; }
.landing .plan-save {
  padding: 3px 10px 4px; border-radius: 999px; background: #DDF1E3; color: #0E5C33;
  font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.2;
}
.landing .plan-btn { width: 100%; min-height: 58px; margin: clamp(20px, 2.2vw, 26px) 0 5px; font-size: 18px; }
.landing .plan-has {
  list-style: none; margin: clamp(22px, 2.4vw, 28px) 0 0; padding: clamp(20px, 2.2vw, 26px) 0 0;
  border-top: 2px dashed var(--line); display: grid; gap: 11px;
}
.landing .plan-pop .plan-has { border-top-color: #DCC6AE; }
.landing .plan-has li { position: relative; padding-left: 32px; font-size: 16.5px; line-height: 1.4; }
.landing .plan-has li::before {
  content: ''; position: absolute; left: 0; top: 0.1em; width: 21px; height: 21px; border-radius: 50%;
  background: var(--ok);
}
.landing .plan-has li::after {
  content: ''; position: absolute; left: 7.5px; top: calc(0.1em + 4.5px); width: 5px; height: 9px;
  border: solid var(--bg); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.landing .plan-has .plan-all { padding-left: 0; font-family: var(--display); font-weight: 600; font-size: 17px; }
.landing .plan-has .plan-all::before, .landing .plan-has .plan-all::after { content: none; }
.landing .plans-fine { max-width: 1000px; margin-top: clamp(30px, 3.4vw, 42px); display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.landing .plans-fine p { max-width: 62em; }
.landing .plans-soon { display: flex; align-items: center; gap: 10px; color: var(--fg); font-family: var(--display); font-weight: 600; font-size: 18px; }
.landing .plans-dot { flex: none; margin-left: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px var(--mark); }
@media (prefers-color-scheme: dark) {
  .landing .plan-save { background: rgba(88, 190, 124, 0.18); color: #9BE0B3; }
  .landing .plan-pop { box-shadow: inset 0 0 0 2.5px var(--fg), 0 7px 0 0 #0E0F0A; }
  .landing .plan-pop .plan-has { border-top-color: var(--panel-line); }
}
@media (prefers-reduced-motion: no-preference) {
  .landing .plan-peek { animation: plan-bob 3.6s ease-in-out infinite; }
}
@keyframes plan-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.02, 0.98); } }
@media (max-width: 760px) {
  .landing .plan-list { grid-template-columns: minmax(0, 1fr); gap: 52px; }
}
@media (max-width: 380px) {
  .landing .plan { padding: 24px 20px; border-radius: 26px; }
  .landing .plan-has li { font-size: 16px; }
}
@media (forced-colors: active) {
  .landing .plan { border: 2px solid CanvasText; }
  .landing .plan-tag, .landing .plan-save { border: 1px solid CanvasText; }
  .landing .plan-has li::before { background: CanvasText; }
}

/* MARK: A little bit alive (sticky notes, each with a doodle of him) */

.landing .things { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.landing .thing {
  padding: 22px 22px 24px; border-radius: 6px 6px 22px 6px; color: #1B1C15; background: #FBF0E2;
  box-shadow: 0 1px 0 rgba(27, 28, 21, 0.06), 0 16px 28px -22px rgba(27, 28, 21, 0.5);
  transform: rotate(-1.2deg); transition: transform 0.35s var(--spring);
}
.landing .thing:nth-child(2) { background: #FFE3E9; transform: rotate(1deg) translateY(8px); }
.landing .thing:nth-child(3) { background: #E0F1E3; transform: rotate(-0.6deg); }
.landing .thing:nth-child(4) { background: #FFF0C7; transform: rotate(1.4deg) translateY(6px); }
@media (hover: hover) { .landing .thing:hover { transform: rotate(0) translateY(-4px); } }
.landing .doodle { width: 76px; height: auto; margin-bottom: 14px; overflow: visible; }
.landing .thing h3 { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.landing .thing p { margin-top: 6px; font-size: 16px; color: #4A4940; }
@media (prefers-reduced-motion: no-preference) {
  .landing .q-nap .dz { animation: snooze 2.8s ease-in-out infinite; }
  .landing .q-hop .dhop { animation: hop 1.8s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
}
@keyframes snooze { 0%, 100% { transform: translate(0, 0); opacity: 0.5; } 50% { transform: translate(2px, -3px); opacity: 1; } }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } }

/* MARK: Privacy, in plain words */

.landing .promise-panel { padding: clamp(28px, 5vw, 68px); border-radius: 36px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--panel-line); }
.landing .notes { list-style: none; margin: clamp(26px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3.5vw, 56px); }
.landing .notes li { padding-top: 16px; border-top: 2px solid var(--fg); }
.landing .notes h3 { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.2; }
.landing .notes p { margin-top: 8px; max-width: 30em; color: var(--muted); }
.landing .promise-panel { position: relative; }
/* A little "Your call?" moment in the corner: Send, held in a dashed ring, and Mochi asking. */
.landing .boss-art { position: absolute; right: clamp(28px, 5vw, 68px); top: clamp(36px, 5vw, 72px); width: 250px; height: 132px; }
.landing .boss-send {
  position: absolute; left: 0; bottom: 14px; padding: 8px 22px; border-radius: 99px; background: var(--fg); color: var(--bg);
  font-family: var(--display); font-weight: 600; font-size: 17px; box-shadow: 0 0 0 5px var(--panel), 0 0 0 8px #E26A85;
}
.landing .boss-ask {
  position: absolute; right: 30px; top: 0; padding: 8px 14px; border-radius: 16px; background: #FFE0E7; color: #1B1C15;
  box-shadow: inset 0 0 0 2px #1B1C15; font-family: var(--display); font-weight: 600; font-size: 16px; white-space: nowrap;
}
.landing .boss-ask::after { content: ''; position: absolute; right: 26px; bottom: -6px; width: 10px; height: 10px; background: #FFE0E7; box-shadow: 2px 2px 0 0 #1B1C15; transform: rotate(45deg); }
.landing .boss-art .doodle { position: absolute; right: 6px; bottom: 0; width: 84px; margin: 0; }
@media (max-width: 1100px) { .landing .boss-art { display: none; } }
.landing .promise-links { margin-top: clamp(24px, 3.5vw, 40px); display: flex; flex-wrap: wrap; gap: 4px 28px; }
.landing .promise-links a {
  display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; font-size: 17px;
  text-decoration: underline; text-decoration-color: var(--fg); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}

/* MARK: Questions */

.landing .ask .wrap { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.landing .ask-head { position: sticky; top: 24px; }
.landing .ask-list details { border-bottom: 1.5px solid var(--line); }
.landing .ask-list details:first-child { border-top: 1.5px solid var(--line); }
.landing .ask-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0;
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; list-style: none; cursor: pointer; border-radius: 8px;
}
.landing .ask-list summary::-webkit-details-marker { display: none; }
.landing .ask-list summary::after {
  content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background:
    linear-gradient(var(--fg), var(--fg)) center / 12px 2px no-repeat,
    linear-gradient(var(--fg), var(--fg)) center / 2px 12px no-repeat,
    var(--bg-deep);
  transition: transform 0.3s var(--spring), background-color 0.2s;
}
.landing .ask-list details[open] summary::after { transform: rotate(45deg); }
.landing .ask-list details p { padding: 0 44px 22px 0; color: var(--muted); max-width: 62ch; }
.landing .ask-list details a { color: var(--fg); text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@supports (interpolate-size: allow-keywords) {
  .landing .ask-list { interpolate-size: allow-keywords; }
  .landing .ask-list details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .landing .ask-list details[open]::details-content { block-size: auto; }
}

/* MARK: Good night (an ink band in both modes: stars, the lamp on low, and Mochi asleep) */

.landing .night {
  position: relative; overflow: clip; margin-top: clamp(96px, 12vw, 168px); padding-top: clamp(56px, 7vw, 96px);
  background: #14150F; color: #F5F3ED;
  --light: rgba(255, 200, 96, 0.16);
  --desk-top: #4A3B2E; --desk-front: #382C22; --desk-line: #0E0F0A; --toy-line: #8A887D;
}
.landing .night-in {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: end;
}
.landing .night-copy { align-self: center; padding-bottom: calc(var(--desk-h) + 24px); }
.landing .night-copy p { margin-top: 14px; max-width: 26em; font-size: clamp(17px, 1.5vw, 20px); color: #B4B2A7; }
.landing .night-copy .btn { margin-top: 28px; }
.landing .night :focus-visible { outline-color: #F5F3ED; }
.landing .night .lamp-arm { stroke: var(--toy-line); }
.landing .night .lamp-joint, .landing .night .lamp-base { fill: var(--toy-line); }
.landing .night .lamp-shade { stroke: #0E0F0A; fill: #2E9A5E; }
.landing .night .lamp-bulb { stroke: #0E0F0A; }
.landing .night-shh {
  /* High enough to clear his nightcap's tip at every width (it droops left, about a third of the way down). */
  position: absolute; z-index: 2; left: 6%; top: 15%; margin: 0; font-family: var(--mono); font-size: 13px; color: #B4B2A7;
  transform: rotate(-4deg);
}
.landing .night-sky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #F5F3ED; opacity: 0.5; }
.landing .night-sky i:nth-child(1) { left: 8%; top: 16%; }
.landing .night-sky i:nth-child(2) { left: 22%; top: 8%; width: 3px; height: 3px; }
.landing .night-sky i:nth-child(3) { left: 41%; top: 20%; }
.landing .night-sky i:nth-child(4) { left: 56%; top: 10%; width: 3px; height: 3px; }
.landing .night-sky i:nth-child(5) { left: 69%; top: 24%; width: 5px; height: 5px; }
.landing .night-sky i:nth-child(6) { left: 82%; top: 12%; }
.landing .night-sky i:nth-child(7) { left: 93%; top: 30%; width: 3px; height: 3px; }
.landing .night-sky i:nth-child(8) { left: 33%; top: 42%; width: 3px; height: 3px; }
.landing .night-sky i:nth-child(9) { left: 4%; top: 48%; width: 3px; height: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .landing .night-sky i { animation: twinkle 3.6s ease-in-out infinite; }
  .landing .night-sky i:nth-child(odd) { animation-delay: -1.7s; animation-duration: 4.4s; }
  .landing .night-sky i:nth-child(3n) { animation-delay: -0.6s; }
}
@keyframes twinkle { 50% { opacity: 0.15; } }

/* MARK: Footer */

.landing .base { padding: 28px 0 max(40px, calc(20px + env(safe-area-inset-bottom))); }
.landing .base-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.landing .base .brand { font-size: 18px; }
.landing .base-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-left: auto; }
.landing .base-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .landing .base-links a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } }
.landing .base-print { flex-basis: 100%; padding-top: 14px; border-top: 1.5px solid var(--line); font-size: 13px; color: var(--muted); }

/* MARK: Landing, smaller screens */

@media (max-width: 1100px) {
  .landing .things { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing .thing:nth-child(n) { transform: rotate(-0.8deg); }
  .landing .thing:nth-child(even) { transform: rotate(0.8deg); }
}
@media (max-width: 960px) {
  .landing .watch-play { grid-template-columns: minmax(0, 1fr); }
  /* The Mac first, the four asks under it, like a remote. */
  .landing .mac { order: -1; }
  .landing .asks-box { padding-top: 0; }
  .landing .asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .landing .ask-btn { height: 100%; min-height: 52px; padding: 12px 14px 13px 12px; font-size: 16px; }
  .landing .mac-cap { min-height: 0; }
  .landing .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing .steps-how { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .landing .steps-how li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 18px; }
  .landing .how-n { grid-row: span 2; margin: 0; }
  .landing .steps-how p { margin-top: 4px; }
  .landing .ask .wrap { grid-template-columns: minmax(0, 1fr); }
  .landing .ask-head { position: static; }
}
@media (max-width: 860px) {
  .landing .top-links { display: none; }
  .landing .top-links + .top-join { margin-left: auto; }
  .landing .hello-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage" "form"; grid-template-rows: none; }
  .landing .hello-text { padding-top: 12px; max-width: 620px; }
  .landing .hello-stage { width: min(100%, 460px); justify-self: center; margin-top: 4px; }
  .landing .hello .join { width: 100%; max-width: 620px; margin-top: 22px; padding-bottom: 8px; }
  .landing .hello h1 { font-size: clamp(38px, 10.6vw, 68px); }
  .landing .join-row { flex-direction: column; align-items: stretch; }
  .landing .join-row .btn-go { width: 100%; }
  .landing .night-in { grid-template-columns: minmax(0, 1fr); }
  .landing .night-copy { padding-bottom: 8px; }
  .landing .night-stage { width: min(100%, 440px); justify-self: center; margin-top: 12px; }
}
@media (max-width: 560px) {
  .landing .things { grid-template-columns: minmax(0, 1fr); }
  .landing .asks { grid-template-columns: minmax(0, 1fr); }
  .landing .cards { grid-template-columns: minmax(0, 1fr); }
  .landing .card-wide { grid-column: auto; }
  .landing .notes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .landing .thing { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 18px 20px; }
  .landing .thing .doodle { grid-row: span 2; width: 64px; margin: 2px 0 0; }
  .landing .promise-panel { border-radius: 26px; }
  .landing .ask-list summary { font-size: 17px; }
  .landing .ask-list details p { padding-right: 8px; }
  .landing .base-links { margin-left: 0; gap: 0 18px; }
  .landing .top .btn-small { padding: 0 16px; font-size: 15px; }
}
@media (max-width: 360px) {
  .landing .top { gap: 10px; }
  .landing .top .btn-small { padding: 0 12px; font-size: 14px; }
  .landing .brand { font-size: 20px; }
}
/* The pretend Mac on a phone: a taller screen, so the windows sit up top and his bubbles have room underneath. */
@container (max-width: 520px) {
  .landing .mac-screen { aspect-ratio: 1 / 1.08; border-radius: 4cqw 4cqw 0 0; }
  .landing .mac-bar { height: 6.4cqw; padding: 0 3cqw; }
  .landing .win { padding: 0 3cqw 3cqw; border-radius: 2.6cqw; }
  .landing .win-top { margin-bottom: 0.4cqw; }
  .landing .win-notes { left: 3cqw; top: 9.5cqw; width: 46cqw; }
  .landing .win-sheet { left: 33cqw; top: 22cqw; width: 64cqw; }
  .landing .win-doc { left: 3cqw; top: 9.5cqw; width: 94cqw; height: 50cqw; }
  .landing .alert { left: 12cqw; top: 15cqw; width: 76cqw; padding: 3.4cqw; }
  .landing .win-photos { left: 3cqw; top: 9.5cqw; width: 72cqw; }
  .landing .win-mail { left: 13cqw; top: 25cqw; width: 76cqw; }
  .landing .win-day { left: 3cqw; top: 9.5cqw; width: 80cqw; }
  .landing .toast { top: 8.5cqw; padding: 2cqw 3cqw 2cqw 2.4cqw; }
  .landing .look { top: 6.4cqw; }
  .landing .mac-buddy { width: 70cqw; right: 2cqw; }
  .landing .you-said, .landing .mac-bubble { padding: 1.6cqw 2.8cqw; border-radius: 3.6cqw; }
  .landing .mac-mochi { width: 25cqw; }
  .landing .m-cursor { width: max(22px, 6.6cqw); }
}
/* A phone turned sideways: copy and Mochi side by side again, Mochi short enough to fit. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .landing .hello-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "text stage" "form stage"; }
  .landing .hello-stage { width: auto; margin-top: 0; }
  .landing .hello h1 { font-size: clamp(32px, 5vw, 48px); }
  .landing .top-links { display: none; }
}

@media (forced-colors: active) {
  .landing .btn, .landing .join-input, .landing .join-done, .landing .promise-panel, .landing .speech, .landing .ask-btn, .landing .thing, .landing .win, .landing .alert, .landing .toast, .landing .card, .landing .says li, .landing .mac-bubble, .landing .you-said { border: 1px solid CanvasText; }
  .landing .ask-btn[aria-pressed="true"] { outline: 3px solid Highlight; }
  .landing .scn .hit, .landing .ph.on { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .landing .m-cursor, .landing .ask-bar { transition: none; }
}

/* MARK: Mochi mark (improvements/gauntlet/BRAND.md). Colours live in the SVG's own attributes; this sizes it, sits it
   on the wordmark's baseline in a lockup, and swaps two colours on dark surfaces. */
.mochi-mark { display: block; flex: none; width: 1.3091em; height: 1.2em; }
.mochi-mark .mm-outline { stroke: var(--mm-outline, #1B1C15); }
.mochi-mark .mm-leaf { fill: var(--mm-sprout, #16894C); }
.mochi-mark .mm-stem { stroke: var(--mm-sprout, #16894C); }
.mochi-mark > :not(.mm-outline, .mm-stem, .mm-mouth) { stroke: none; }
.mochi-lockup { gap: 0.34em; font-family: var(--display, 'Fredoka', ui-rounded, system-ui, sans-serif); font-weight: 600; }
.mochi-lockup > .mochi-mark { position: relative; top: -0.24em; }
.mm-on-ink { --mm-outline: #FBF0E2; --mm-sprout: #58BE7C; }
.mm-on-paper { --mm-outline: #1B1C15; --mm-sprout: #16894C; }
/* Dark mode only where the page goes dark: the landing and waitlist pages. Home, meet, say and setup stay paper. */
@media (prefers-color-scheme: dark) {
  body.landing { --mm-outline: #FBF0E2; --mm-sprout: #58BE7C; }
}