/* mochimoment · the Sticker Sheet design system, on the web.
   Tokens mirror Sources/MochiMoment/UI/Theme.swift (spec: docs/design-system.md):
   2px ink outlines, hard offset shadows with no blur, one job per pop color, lowercase
   buttons, mono uppercase labels, and a slight tilt for stickers (never for body text). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-800.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}

:root {
  /* Ink & paper (Theme.ink, .paper, .card, .muted, .faint) */
  --ink: #141418;
  --paper: #F2F2EC;
  --card: #FFFFFF;
  --muted: #5C5C64;
  --faint: #D6D6CE;
  /* Pops, one job each */
  --lime: #C9F25C;       /* go */
  --soda: #7FD8EA;       /* Mochi */
  --mango: #FFC94A;      /* time */
  --grape: #B8A3FF;      /* personality */
  --tangerine: #FF9466;  /* live */
  --soda-tile: #A5E4F0;  /* soda mixed 30% with white */
  --mango-tile: #FFD980; /* mango mixed 30% with white */
  /* Night (the break screen) */
  --night: #1C1E2B;
  --night-muted: #B9BBCB;
  --night-raised: #2B2E40;
  --night-line: #DCDDE6;
  --night-shadow: #50536A;
  --lime-lip: #799137;   /* lime mixed 40% with black */
  --tangerine-lip: #99593D;
  --grape-lip: #6E6299;
  --soda-lip: #4C828C;
  --aqua: #0E8B94;       /* the logo's "mochi" on paper */
  --aqua-night: #9BE3E0; /* and on night */
  /* Chalk, the app's dark look (DarkPalette): the break screen and the page's dark bands. */
  --chalk-page: #141418;
  --chalk-card: #1F1F25;
  --chalk-text: #F2F2EC;
  --chalk-muted: #A9A9B1;
  --chalk-line: #E4E4DB;
  --chalk-shadow: #D6D6CD;
  --chalk-grain: #26262D;
  --chalk-rule: #3A3A42;
  /* Lines, lifts, radii, space */
  --line: 2px;
  --fine-line: 1.5px;
  --hero-line: 3px;
  --cut-line: 1px;
  /* A floating note's 3px white die-cut, its outer 1px the ink cut line (Theme.dieCut, Theme.cutLine). */
  --die-cut: 0 0 0 calc(3px - var(--cut-line)) var(--card), 0 0 0 3px var(--ink);
  --raised: 3px;
  --float: 4px;
  --hover: 5px;          /* Lift.hover: a primary under the pointer */
  --hero: 8px;
  --r-small: 8px;
  --r-control: 12px;
  --r-card: 16px;
  --r-large: 22px;
  --s-xxs: 4px; --s-xs: 8px; --s-s: 12px; --s-m: 16px; --s-l: 24px; --s-xl: 32px; --s-xxl: 40px;
  /* Type */
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 16px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --hover-ease: cubic-bezier(.2, 0, 0, 1);  /* Motion.hover */
  --stage: cubic-bezier(.3, 0, .2, 1);      /* Motion.stage: the break screen's lights */
  --land: cubic-bezier(.3, 1.25, .5, 1);    /* Motion.land, about .45s */
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
}
img, canvas, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0 0 var(--s-s); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
mark { background: none; color: inherit; }
code { font-family: var(--mono); font-size: .9em; word-break: break-all; }
/* Words that read as one phrase stay on one line ("and it grows" in the hero, never "and it" alone). */
.nowrap { white-space: nowrap; }
code.nowrap { word-break: normal; }
q { quotes: "“" "”"; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible { outline-color: var(--lime); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-small); padding: 8px 12px; font-weight: 700; }
.skip-link:focus { top: 8px; }

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

/* ---------- grounds ---------- */
.paper { background-color: var(--paper); background-image: radial-gradient(circle, var(--faint) 1.4px, transparent 1.6px); background-size: 36px 36px; background-position: 18px 18px; }
.soda, .mango, .grape, .tangerine, .lime { background-image: radial-gradient(circle, rgba(20,20,24,.13) 1.4px, transparent 1.6px); background-size: 36px 36px; background-position: 18px 18px; }
.soda { background-color: var(--soda); }
.mango { background-color: var(--mango); }
.grape { background-color: var(--grape); }
.tangerine { background-color: var(--tangerine); }
.lime { background-color: var(--lime); }
.night { background-color: var(--chalk-page); color: var(--chalk-text); background-image: radial-gradient(circle, var(--chalk-grain) 1.3px, transparent 1.5px); background-size: 36px 36px; }

/* ---------- type ---------- */
.display, .h2, .h3, .h4, .numeral { font-family: var(--display); font-weight: 800; }
.display { font-size: clamp(44px, 6.6vw, 94px); line-height: .94; letter-spacing: -0.025em; margin: var(--s-l) 0 var(--s-l); text-wrap: balance; }
.h2 { font-size: clamp(36px, 5.2vw, 70px); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--s-l); text-wrap: balance; max-width: 18ch; }
.h3 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: var(--s-xs); }
.h4 { font-size: 22px; line-height: 1.15; margin: var(--s-s) 0 var(--s-xs); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; }
.body-l { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 36em; }
.body { font-size: 17px; max-width: 40em; }
.fine { font-size: 15px; color: var(--muted); max-width: 46em; }
.fine--ink { color: var(--ink); }
.label { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: var(--s-xs); }
/* A sentence under a picture: sentence case, never a mono label. */
.caption { font-size: 15px; color: var(--muted); margin-top: var(--s-m); }
.on-night { color: var(--chalk-text); }
.on-night-muted { color: var(--chalk-muted); }
.night .fine, .night .caption { color: var(--chalk-muted); }

/* A heading's key word: the hand-drawn ink underline of "up from the screen", in the text's color.
   Not a lime capsule: lime is "go", the download, and a lime box with an ink edge reads as one. */
.hl {
  position: relative;
  display: inline-block;
  background: none;
  color: inherit;
}
.hl::after {
  content: "";
  position: absolute; left: -.02em; right: -.02em; bottom: -.1em; height: .2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 80 13, 120 6 S 180 4, 197 8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 80 13, 120 6 S 180 4, 197 8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Kinetic captions: words light up one by one, once, on entering; the key word's underline then
   draws itself in, left to right. */
.kinetic.split-words .w { display: inline-block; transition: opacity .16s ease-out, transform .26s var(--pop); }
.motion .kinetic.split-words .w:not(.on) { opacity: 0; transform: translateY(.35em) scale(.82); }
.kinetic.split-words .hl.w::after { clip-path: inset(0 0 0 0); transition: clip-path .34s var(--hover-ease) .16s; }
.motion .kinetic.split-words .hl.w:not(.on)::after { clip-path: inset(0 100% 0 0); }

/* Hand-drawn ink marks: they draw once. */
.ink-mark { position: absolute; pointer-events: none; overflow: visible; max-width: none; }
.ink-mark path, .ink-arrow path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.underline-mark { position: relative; white-space: nowrap; }
.underline-mark .ink-mark { left: -2px; right: -2px; bottom: -8px; width: calc(100% + 4px); height: 12px; }
.draw path { stroke-dasharray: 400; stroke-dashoffset: 400; }
.draw.in path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-out .2s; }

/* ---------- stickers, chips, tags ---------- */
.sticker {
  display: inline-block;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.2;
  padding: 7px 14px 8px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-small);
  margin: 0;
}
.sticker--mango { background: var(--mango); }
.sticker--soda { background: var(--soda); }
.sticker--lime { background: var(--lime); }
.sticker--grape { background: var(--grape); }
.sticker--white { background: var(--card); }
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }

.chapter-tag {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-small);
  padding: 5px 12px;
  margin: 0 0 var(--s-l);
  transform: rotate(-2deg);
}
.chapter-tag--white { background: var(--card); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin: var(--s-m) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  border: var(--fine-line) solid var(--ink);
  border-radius: 999px;
  padding: 4px 11px;
  background: transparent;
  margin: 0;
  white-space: nowrap;
}
.chip--white { background: var(--card); }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  height: 28px; padding: 0 12px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-small);
  background: var(--soda);
  color: var(--ink);
  white-space: nowrap;
}
.tag--soda { background: var(--soda); }
.tag--mango { background: var(--mango); }
.tag--grape { background: var(--grape); }
.tag--tangerine { background: var(--tangerine); }
.tag--lip { box-shadow: var(--raised) var(--raised) 0 var(--soda-lip); transform: rotate(-2deg); }
.tag--lip.tag--grape { box-shadow: var(--raised) var(--raised) 0 var(--grape-lip); }

.streak-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--text); font-weight: 800; font-size: 13px;
  background: var(--tangerine);
  border: var(--fine-line) solid var(--ink);
  border-radius: 999px;
  padding: 0 8px; height: 20px;
  vertical-align: middle;
}

/* ---------- buttons (lowercase), like the app's StickerButtonStyle ----------
   The primary rests raised (3) and rises to 5 under the pointer; a press sinks it that far onto
   its shadow at once, and it springs back on release. Secondary buttons rest flat, rise to 3 under
   the pointer and drop flat when pressed. The face never moves on hover: only the shadow grows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--text); font-weight: 700; font-size: 16px; text-transform: lowercase;
  line-height: 1; text-decoration: none;
  min-height: 40px; padding: 0 18px;
  background: var(--card); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: box-shadow .16s var(--hover-ease), transform .29s var(--pop);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { box-shadow: var(--raised) var(--raised) 0 var(--ink); }
.btn:active { box-shadow: none; transition: none; }
.btn--primary { background: var(--lime); box-shadow: var(--raised) var(--raised) 0 var(--ink); }
.btn--primary:hover { box-shadow: var(--hover) var(--hover) 0 var(--ink); }
.btn--primary:active { box-shadow: none; transform: translate(var(--raised), var(--raised)); transition: none; }
/* On Chalk (the end card): the lime keeps its ink outline and wears a chalk keyline outside it, and
   its shadow is chalk, so it keeps its edge on the dark (as under the break screen in the app). */
.night .btn--primary { box-shadow: 0 0 0 1.5px var(--chalk-line), var(--raised) var(--raised) 0 1.5px var(--chalk-shadow); }
.night .btn--primary:hover { box-shadow: 0 0 0 1.5px var(--chalk-line), var(--hover) var(--hover) 0 1.5px var(--chalk-shadow); }
.night .btn--primary:active { box-shadow: 0 0 0 1.5px var(--chalk-line); }
@media (hover: hover) { .btn--primary:active { transform: translate(var(--hover), var(--hover)); } }
.btn--large { min-height: 52px; font-size: 18px; padding: 0 24px; border-radius: var(--r-control); }
.btn--small { min-height: 36px; font-size: 15px; padding: 0 14px; border-radius: var(--r-small); }
.btn--white-raised { background: var(--card); box-shadow: var(--raised) var(--raised) 0 var(--ink); }
.btn--white-raised:active { box-shadow: none; transform: translate(var(--raised), var(--raised)); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s); margin: var(--s-l) 0; }
.btn-row--tight { margin: var(--s-s) 0 0; gap: var(--s-xs); }
/* Buttons that wrap together, like the heads-up's two snoozes: never one left alone on a row. */
.btn-row__group { display: flex; gap: inherit; }
.btn-row--center { justify-content: center; }
.link { font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 2px; }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  min-height: 34px; padding: 0 14px;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: 999px; cursor: pointer;
}
.toggle::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--card); }
.toggle[aria-pressed="true"]::before { background: var(--ink); }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-small); cursor: pointer;
}
.icon-btn .snd-off { display: none; }
.icon-btn[aria-pressed="false"] .snd-on { display: none; }
.icon-btn[aria-pressed="false"] .snd-off { display: inline; }
.icon-btn:hover { box-shadow: var(--raised) var(--raised) 0 var(--ink); }

.card { background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--raised) var(--raised) 0 var(--ink); padding: var(--s-l); }

/* Reveal dots: open ink rings until revealed. */
.dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.dots i { width: 11px; height: 11px; border-radius: 50%; border: var(--line) solid var(--ink); }
.dots i.on { background: var(--ink); }
.dots--night i { border-color: var(--chalk-line); }
.dots--night i.on { background: var(--lime); border-color: var(--lime); }
.dots-line { margin: var(--s-s) 0 0; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: var(--line) solid var(--ink); }
.nav__inner { max-width: 1200px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: var(--s-s); }
/* The wordmark, alone on the site (the page is full of Mochi; docs/design-system.md › Names): "mochi"
   in aqua and "moment" in the text color. The words are the #wordmark symbol (outlines, so no font),
   sized by font-size like the app's WordmarkLockup: 7.5em wide and 0.9em tall. */
.wordmark { --wm-mochi: var(--aqua); font-size: 24px; color: var(--ink); text-decoration: none; line-height: 1; margin: 0; display: inline-flex; align-items: center; gap: .3em; }
.wordmark__art { flex: none; display: block; width: 7.498em; height: .897em; overflow: visible; }
.nav__links { display: flex; gap: var(--s-l); margin-left: auto; font-weight: 700; }
.nav__links a { text-decoration: none; padding: 6px 2px; border-bottom: var(--line) solid transparent; }
.nav__links a:hover { border-bottom-color: var(--ink); }
.nav .icon-btn { margin-left: var(--s-xs); }
@media (max-width: 860px) { .nav__links { display: none; } .nav .icon-btn { margin-left: auto; } }
@media (max-width: 480px) { .nav .wordmark { font-size: 20px; padding-block: 8px; margin-block: -8px; } .nav__cta { padding: 0 10px; font-size: 14px; } }
.nav__cta { white-space: nowrap; }
.nav__cta[hidden] { display: none; }
/* It comes back once the hero's button has scrolled away: a small drop-in. */
.motion .nav__cta.arrive { animation: drop .25s var(--pop); }
.cta-short { display: none; }
@media (max-width: 400px) {
  .nav__cta .cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__cta .cta-short { display: inline; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(24px, 5vw, 64px) 0 clamp(48px, 6vw, 88px); border-bottom: var(--line) solid var(--ink); }
/* The two columns are centered on each other, so neither hangs past the other. (The Mochi side is
   kept short for it: the window fits Ramune, and "try a break" sits on one row with its dots.) */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hook { font-size: clamp(15px, 1.5vw, 19px); }
/* Which Macs, once, quietly, under the download (it downloads on a click). */
.hero__req { margin: var(--s-m) 0 0; font-size: 15px; color: var(--muted); }

.desk {
  position: relative;
  border: var(--hero-line) solid var(--ink);
  border-radius: var(--r-large);
  background: var(--paper) radial-gradient(circle, var(--faint) 1.4px, transparent 1.6px) 9px 9px / 28px 28px;
  box-shadow: var(--hero) var(--hero) 0 var(--ink);
  overflow: visible;
}
.desk__bar {
  display: flex; align-items: center; gap: 14px;
  height: 36px; padding: 0 12px;
  background: var(--card);
  border-bottom: var(--line) solid var(--ink);
  border-radius: calc(var(--r-large) - 3px) calc(var(--r-large) - 3px) 0 0;
  font-size: 14px; font-weight: 600;
}
.desk__dots { display: flex; gap: 14px; }
.desk__dots i { display: block; width: 34px; height: 8px; border-radius: 4px; background: var(--faint); }
.desk__dots i:first-child { width: 22px; background: #bdbdb4; }
.desk__spacer { flex: 1; }
.desk__item {
  display: inline-flex; align-items: center; height: 28px; padding: 0 7px;
  background: transparent; border: var(--line) solid transparent; border-radius: 7px; cursor: pointer;
}
.desk__item:hover, .desk__item[aria-expanded="true"] { background: rgba(20,20,24,.08); }
/* The menu bar is one color, like every menu bar item: just the Mochi, in plain ink. */
.desk__stage { position: relative; display: grid; place-items: center; padding: 8px 16px 0; }
.mochi-btn { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 30px; }
.mochi-btn:active { cursor: grabbing; }

.mochi-canvas { width: 100%; height: auto; aspect-ratio: 1.5 / 1.6; touch-action: manipulation; }
/* A Mochi's frame, like the app's .frame(width:height:): the canvas around it has the drawing
   room MochiStill allows (45% above, 25% each side, 15% below) so hats and hops never clip. */
.mochi-frame { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.mochi-frame > canvas { position: absolute; left: -25%; top: -45%; width: 150%; max-width: none; pointer-events: none; }
.mochi-spot { position: relative; }
.mochi-spot > .mochi-btn { display: block; width: 100%; }
/* The hero Mochi is big and sits on the window's bottom edge, breaking out of it like a sticker. */
.hero__show { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero__show > .desk { width: 100%; }
.desk__stage { align-items: end; }
/* Ramune sits high in the window: its frame's empty top tucks under the bar, leaving room for an accessory. */
.hero-mochi { width: min(380px, 80%); margin: -40px 0 -94px; z-index: 2; }
.hero__under { position: relative; z-index: 3; margin-top: 102px; text-align: center; }
/* "try a break" under Ramune: the app's reveal words, its tag and six dots, then the button. */
/* "try a break" right under Ramune, the reveal words under it. */
.hgrow { display: grid; justify-items: center; text-align: center; gap: 4px; }
.hgrow p { margin: 0; }
.hgrow .hgrow__tag { min-height: 28px; margin-top: 10px; }
.hgrow__headline { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.hgrow__detail { font-size: 16px; color: var(--muted); max-width: 26em; min-height: 1.5em; }
.hgrow__row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hgrow__row .dots-line { margin: 0; }

.caption-pop {
  position: absolute; top: 17%; left: 66%; margin: 0; z-index: 4; pointer-events: none; white-space: nowrap;
  font-family: var(--text); font-weight: 900; font-size: 22px; line-height: 1;
  padding: 8px 14px; border: var(--line) solid var(--ink); border-radius: var(--r-small);
  background: var(--mango);
  transform: rotate(-2deg) scale(0); opacity: 0;
}
.caption-pop.show { animation: pop-in .22s var(--pop) forwards; }
.caption-pop--big { font-size: clamp(24px, 3vw, 34px); top: 14%; left: 64%; }
@keyframes pop-in { 0% { transform: rotate(-2deg) scale(.6); opacity: 0; } 70% { transform: rotate(-2deg) scale(1.06); opacity: 1; } 100% { transform: rotate(-2deg) scale(1); opacity: 1; } }

.panel {
  position: absolute; z-index: 6; top: 42px; right: 30px; width: 380px; max-width: calc(100% - 24px);
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-card);
  box-shadow: var(--die-cut), var(--float) var(--float) 0 3px var(--ink);
  /* You summoned it, so it's there at once, like the app's menu. */
  padding: 18px;
}
@keyframes drop { from { transform: translateY(-10px) scale(.96); opacity: 0; } }
.panel__head { display: flex; gap: 14px; align-items: center; }
.panel__tile { width: 92px; height: 92px; flex: none; border-radius: var(--r-card); border: var(--line) solid var(--ink); box-shadow: var(--raised) var(--raised) 0 var(--ink); background: var(--soda-tile); display: grid; place-items: center; overflow: hidden; }
.panel__tile .mochi-frame { width: 92%; margin-top: -14%; }
.panel__name { font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0; display: flex; align-items: center; gap: 8px; }
.panel__sub { color: var(--muted); font-size: 15px; margin: 0; }
.panel__dots { font-size: 14px; color: var(--muted); margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }
/* White while there's time, with the mango in its bar; all mango in the last minute, its bar ink on a
   white track. Flat, and tilted: the menu's one tilted thing. */
.panel__count { margin-top: 18px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); padding: 12px 14px 14px; transform: rotate(-1deg); }
.panel__count.is-time { background: var(--mango); }
.panel__count .label { margin-bottom: 4px; }
.panel__row { display: flex; align-items: center; gap: 12px; }
.numeral { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.progress { flex: 1; height: 18px; padding: 2px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; }
.progress i { display: block; height: 100%; width: 40%; min-width: 18px; background: var(--mango); border: var(--fine-line) solid var(--ink); border-radius: 999px; transition: width .25s linear; }
.is-time .progress i { background: var(--ink); }
.panel__buttons .btn--small { padding: 0 10px; font-size: 14px; }
.panel__links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: var(--fine-line) dashed var(--faint); font-size: 14px; font-weight: 700; }
.panel__links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.panel__links a:hover { text-decoration: underline; }
.panel__links svg { fill: currentColor; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .desk__bar, .panel { display: none !important; }
  .desk { border: 0; box-shadow: none; background: none; }
  .desk__stage { padding: 0; }
  .hero-mochi { width: 172px; margin: 0 0 -6px; }
  .hero__under { margin-top: 0; }
  .hero__copy .hook { margin-top: 4px; }
  .hero .display { margin-top: var(--s-m); }
}

/* ---------- chapters ---------- */
.chapter { position: relative; padding: clamp(64px, 9vw, 128px) 0; border-bottom: var(--line) solid var(--ink); overflow-x: clip; }
.hero, .endcard, .footer { overflow-x: clip; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Entering a chapter: a quick punch-in like the video cuts. */
.punch { transition: transform .28s ease-out, opacity .28s ease-out; }
.motion .punch:not(.in) { transform: scale(1.06); opacity: 0; }
.pop { transition: transform .22s var(--pop), opacity .2s; }
.motion .pop:not(.in) { transform: scale(.6) rotate(-2deg); opacity: 0; }

/* 01 today */

.flavors { margin-top: clamp(48px, 6vw, 80px); position: relative; }
.flavors__head { display: flex; align-items: center; gap: var(--s-m); margin-bottom: var(--s-l); flex-wrap: wrap; }
.sheet {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 4px;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-large);
  box-shadow: var(--float) var(--float) 0 var(--ink);
  padding: clamp(14px, 2.4vw, 32px) clamp(10px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
  transform: rotate(-.6deg);
}
.flavor { display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; width: 100%; border-radius: var(--r-card); }
.flavor .mochi-frame { width: 92%; max-width: 150px; margin: 2% auto -6%; }
.flavor__name { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.flavor:hover .flavor__name, .flavor[aria-pressed="true"] .flavor__name { background: var(--ink); color: var(--paper); border-radius: 4px; padding: 0 5px; }
/* It hangs off the sheet's corner, into the section's bottom space. */
.mystery { position: absolute; right: -6px; bottom: -96px; width: 150px; display: flex; flex-direction: column; align-items: center; transform: rotate(4deg); z-index: 2; }
.mystery svg { width: 120px; height: auto; animation: wiggle 2.4s ease-in-out infinite; }
.mystery .sticker { font-size: 14px; margin-top: -6px; white-space: nowrap; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (max-width: 760px) {
  .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); transform: none; }
  .mystery { position: relative; right: auto; bottom: auto; margin: 18px auto 0; }
}

/* 02 break: a storyboard. Frame 1 is a Mac desktop at work, the heads-up landing in its corner;
   frame 2 is the break screen, cropped in so its words read (snooze buttons kept). */
.story { list-style: none; padding: 0; margin: clamp(32px, 4vw, 52px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); }
.story__step { position: relative; }
.story__step + .story__step::before { content: "→"; position: absolute; left: calc(clamp(36px, 5vw, 64px) / -2 - 14px); top: 30%; font: 800 34px/1 var(--display); }
.story__frame { position: relative; margin: 0; aspect-ratio: 16 / 10; border: var(--hero-line) solid var(--ink); border-radius: var(--r-large); box-shadow: var(--hero) var(--hero) 0 var(--ink); overflow: hidden; }
.story__frame--desk { background: var(--paper) radial-gradient(circle, var(--faint) 1.4px, transparent 1.6px) 9px 9px / 28px 28px; }
.story__bar { position: relative; z-index: 2; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--card); border-bottom: var(--line) solid var(--ink); }
.story__bar svg { display: block; height: 15px; width: auto; }
.story__dots { display: flex; gap: 8px; }
.story__dots i { width: 26px; height: 7px; border-radius: 4px; background: var(--faint); }
.story__dots i:first-child { width: 18px; background: #bdbdb4; }
.story__win { position: absolute; display: grid; align-content: start; gap: 7px; padding: 0 0 10px; background: var(--card); border: var(--line) solid var(--ink); border-radius: 10px; opacity: .55; }
.story__win b { height: 14px; border-bottom: var(--line) solid var(--ink); background: var(--faint); }
.story__win i { height: 7px; margin: 0 12px; border-radius: 4px; background: var(--faint); }
.story__win--a { left: 7%; top: 26%; width: 52%; height: 60%; }
.story__win--b { left: 44%; top: 46%; width: 42%; height: 42%; }
.story__note { position: absolute; z-index: 3; top: 40px; right: 10px; width: 64%; transform-origin: 100% 0; }
.story__frame--dark { background: #141418; }
.story__frame--dark img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transform-origin: 50% 64%; }
.story__cap { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; font: 800 clamp(19px, 1.8vw, 24px)/1.2 var(--display); }
.story__n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--mango); font: 800 16px/1 var(--display); }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 56px; }
  .story__step + .story__step::before { content: "↓"; left: 50%; top: -46px; transform: translateX(-50%); }
  .story__note { width: 84%; right: 8%; }
}

/* Confetti bursts from behind Mochi, like the app's: under Mochi, inside its box (isolated, so it
   stays above the box's own background). */
.confetti { position: absolute; inset: -60% -80%; width: 260%; height: 220%; max-width: none; pointer-events: none; z-index: -1; }
[data-hero-mochi] { isolation: isolate; }

/* 04 nudges */
.dimstrip { position: relative; border: var(--hero-line) solid var(--ink); border-radius: var(--r-large); overflow: hidden; box-shadow: var(--hero) var(--hero) 0 var(--ink); margin: var(--s-l) 0;
  background: radial-gradient(circle at 12% 88%, var(--soda-tile) 0 120px, transparent 121px), radial-gradient(circle at 92% 18%, var(--lime) 0 90px, transparent 91px), var(--soda); }
.dimstrip__work { position: absolute; inset: 0; }
.win { position: absolute; display: flex; flex-direction: column; gap: 12px; padding: 40px 22px 18px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--raised) var(--raised) 0 var(--ink); }
.win b { position: absolute; left: 0; right: 0; top: 0; height: 26px; border-bottom: var(--line) solid var(--ink);
  background: radial-gradient(circle at 14px 12px, var(--tangerine) 0 4px, transparent 4.5px), radial-gradient(circle at 28px 12px, var(--mango) 0 4px, transparent 4.5px), radial-gradient(circle at 42px 12px, var(--lime) 0 4px, transparent 4.5px), var(--paper);
  border-radius: calc(var(--r-card) - 2px) calc(var(--r-card) - 2px) 0 0; }
.win i { display: block; height: 9px; border-radius: 5px; background: var(--faint); width: 80%; }
.win i:nth-child(3n) { width: 56%; } .win i:nth-child(4n) { width: 92%; background: var(--soda-tile); }
.win--a { left: 6%; top: 12%; width: 46%; height: 78%; }
.win--b { right: 7%; top: 22%; width: 34%; height: 60%; }
.dimstrip__veil { position: absolute; inset: 0; background: rgba(28,30,43,.42); }
.nudges { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 30px; padding: clamp(40px, 5vw, 64px) 16px clamp(28px, 4vw, 48px);
  /* The sit-up card's string ties on above Mochi's middle (from the card's left edge), and the
     card keeps room below it to hang and bounce in (Motion.hangRoom). */
  --knot-x: 50px; --hang-room: 52px; }
/* A card's own move (main.js) turns, squashes and fades the stage; the string's card hangs inside it. */
.nudge-stage { position: relative; z-index: 1; width: 340px; max-width: 100%; }
.nudge-stage--string { z-index: 0; margin-bottom: var(--hang-room); }
.no-motion .nudge-stage--string { margin-bottom: 0; }
.nudge {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 104px;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-large);
  /* --air: the shadow reaches further while the card is up off the page (Motion.air). */
  box-shadow: var(--die-cut), calc(var(--float) + var(--air, 0px)) calc(var(--float) + var(--air, 0px)) 0 3px var(--ink);
  padding: 8px 16px 8px 8px; text-align: left;
}
.nudge .mochi-frame { width: 76px; flex: none; margin: -10px 0 0 2px; z-index: 1; transform-origin: 50% 100%; }
.nudge__text { position: relative; z-index: 1; min-width: 0; }
/* What's drawn on the card stops inside its outline, following its corners: the tide behind the
   words, the eyelids over everything. */
.nudge__inside { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; clip-path: inset(0 round calc(var(--r-large) - var(--line))); }
.nudge__tide { z-index: 0; fill: var(--soda-tile); }
.nudge__lids { z-index: 2; fill: var(--ink); }
/* The string runs straight up from the knot to the top of the strip (its "screen"), a 2px ink line
   with a die-cut edge, so it shows over anything; under another card it fades out instead. */
.nudge-stage--string .nudge { transform-origin: var(--knot-x) 0; }
.nudge__string { position: absolute; left: calc(var(--knot-x) - 2.5px); bottom: 100%; width: 5px; height: 2400px; background: var(--ink); border-inline: 1.5px solid #fff; pointer-events: none; }
.nudge-stage--under .nudge__string { -webkit-mask-image: linear-gradient(to top, #000 6px, transparent 48px); mask-image: linear-gradient(to top, #000 6px, transparent 48px); }
.nudge__knot { position: absolute; z-index: 3; left: calc(var(--knot-x) - var(--line) - 6px); top: calc(-1 * var(--line) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px #fff; }
.nudge__title { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nudge__row { display: flex; align-items: center; gap: 8px; }
.mark { width: 24px; height: 24px; flex: none; position: relative; display: grid; place-items: center; border-radius: 50%; }
.mark svg { position: absolute; inset: 0; overflow: visible; }
.mark .ring-dash { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.mark .ring-arc { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; }
.mark.done .ring-dash { fill: var(--lime); stroke-dasharray: none; stroke-width: 2; }
.mark .icon { position: relative; color: var(--muted); }
.mark.done .icon { color: var(--ink); }
.nudge__word { font-weight: 700; font-size: 14px; margin-left: 4px; white-space: nowrap; }

/* 06 streaks */

/* 07 poke */
.poke { position: relative; display: grid; place-items: center; }
.poke__mochi { width: min(320px, 72vw); margin-top: 90px; }
/* Stacked under the words, it sits right below them: the 90px only balances the two columns. */
@media (max-width: 900px) { .poke__mochi { margin-top: 0; } }
.poke__count { color: var(--ink); margin-top: -10px; }
#poke .caption-pop[data-kind="hi"] { background: var(--card); }

/* 08 shelf */
.shelf-wrap { background: var(--paper); border: var(--hero-line) solid var(--ink); border-radius: var(--r-large); padding: clamp(14px, 2.4vw, 28px); margin-bottom: var(--s-xl); overflow-x: auto; }
.shelf { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: clamp(6px, 1vw, 12px); background: var(--mango); border: var(--hero-line) solid var(--ink); border-radius: var(--r-large); padding: clamp(10px, 1.4vw, 16px); box-shadow: var(--hero) var(--hero) 0 var(--ink); min-width: 640px; }
.cubby { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-control); aspect-ratio: .74; overflow: hidden; }
.cubby .mochi-frame { width: 96%; margin-bottom: -16%; }
.cubby__empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 14px; }
.cubby__empty::before { content: ""; width: 64%; height: 14%; border: var(--line) dashed var(--ink); border-radius: 50%; margin-top: 60%; }
.plaques { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: clamp(6px, 1vw, 12px); min-width: 640px; margin-top: var(--s-m); text-align: center; }
@media (max-width: 640px) {
  .shelf-wrap { overflow: visible; }
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
  .plaques { display: none; }
  .cubby__day { display: block !important; }
}
.cubby__day { display: none; position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.plaques span { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: var(--line) solid var(--ink); border-radius: 999px; padding: 2px 10px; background: var(--card); }

.player { position: relative; aspect-ratio: 16 / 9; border: var(--hero-line) solid var(--night-line); border-radius: var(--r-large); overflow: hidden; box-shadow: var(--hero) var(--hero) 0 var(--night-shadow); background: #000; margin-top: var(--s-l); }
.player__poster { position: absolute; inset: 0; padding: 0; border: 0; background: var(--night); cursor: pointer; display: block; width: 100%; }
.player__poster picture { display: block; width: 100%; height: 100%; }
.player__poster img { width: 100%; height: 100%; object-fit: cover; }
/* "See Mochi in action": the poster plays the intro in place. On grape, with ink. */
.see__player { display: block; margin-top: clamp(28px, 3.5vw, 44px); border-color: var(--ink); box-shadow: var(--hero) var(--hero) 0 var(--ink); background: var(--paper); }
.player__poster:focus-visible { outline-offset: -8px; outline-color: var(--ink); }
.player__play { white-space: nowrap; position: absolute; right: 4%; bottom: 7%; transform: rotate(-2deg); display: inline-flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 999px; padding: 14px 24px; font-weight: 800; font-size: 20px; box-shadow: var(--float) var(--float) 0 var(--ink); transition: transform .14s; }
.player__poster:hover .player__play { transform: rotate(-2deg) scale(1.05); }
@media (max-width: 640px) { .player__play { padding: 8px 14px; font-size: 15px; right: 3%; bottom: 5%; } .player__play svg { width: 18px; height: 18px; } }
/* On a phone the pill would cover the intro's own caption, so it sits under the poster, on the left
   edge with the words above it. The poster keeps its round corners without the clip. */
@media (max-width: 640px) {
  .see__player { overflow: visible; margin-bottom: 64px; }
  .see__player .player__poster { background: none; border-radius: inherit; }
  .see__player .player__poster img { border-radius: calc(var(--r-large) - var(--hero-line)); }
  .see__player .player__play { top: calc(100% + 20px); bottom: auto; left: -3px; right: auto; transform: rotate(-2deg); }
}
.player video { width: 100%; height: 100%; background: #000; }

/* How to open it: a white card over the page, right after a download, while the app isn't notarized. */
.install { width: min(640px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(20px, 3vw, 32px); color: var(--ink); background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--float) var(--float) 0 var(--ink); }
.install::backdrop { background: rgba(20, 20, 24, .55); }
.motion .install[open] { animation: drop .3s var(--pop); }
.install__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-m); margin-bottom: var(--s-s); }
.install__head .h3 { margin: 0; }
.install__head .h3:focus { outline: none; }
.install p { padding: 0; }
.install__steps { counter-reset: n; display: grid; gap: var(--s-m); margin: var(--s-l) 0 0; padding: 0; list-style: none; }
.install__steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-m); align-items: start; }
.install__steps p { margin: 6px 0 0; font-size: 17px; }
.install .fine { margin: var(--s-l) 0 0; }
.num { display: grid; place-items: center; width: 40px; height: 40px; font-family: var(--display); font-weight: 800; font-size: 22px; background: var(--mango); border: var(--line) solid var(--ink); border-radius: 50%; }

/* faq */
.faq { max-width: 880px; }
.faq__list { display: grid; gap: 10px; }
details { background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-control); }
details[open] { box-shadow: var(--raised) var(--raised) 0 var(--ink); }
summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px 12px 20px; font-weight: 700; font-size: 19px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 26px; height: 26px; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23141418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s ease-out; }
details[open] summary::after { transform: rotate(180deg); }
details p { padding: 0 20px 18px; margin: 0; font-size: 17px; max-width: 46em; }

/* end card */
.endcard { padding: clamp(72px, 10vw, 140px) 0 clamp(48px, 6vw, 80px); text-align: center; position: relative; }
/* The wordmark on night: light "moment", the night aqua "mochi" (as in the app's dark look). */
.night .wordmark { --wm-mochi: var(--aqua-night); color: var(--chalk-text); }
.endcard__inner { display: flex; flex-direction: column; align-items: center; }
.crew { display: flex; justify-content: center; gap: clamp(0px, 1vw, 12px); width: 100%; max-width: 980px; }
.crew li { flex: 1 1 0; max-width: 130px; }
.crew .mochi-btn { display: block; width: 100%; }
.crew .mochi-frame { width: 100%; }
/* The words alone here: the crew is right above, and the nav already shows the icon. */
.endcard__word { font-size: clamp(40px, 11vw, 120px); margin: var(--s-s) 0 var(--s-m); }
.endcard__tag { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; margin-bottom: var(--s-m); }

/* footer */
/* The footer: one small line of links, on the end card's night, under Chalk's rule (a full line,
   not a hairline). */
.footer { padding: 0 0 28px; }
.footer .wrap { border-top: var(--line) solid var(--chalk-rule); padding-top: 14px; }
.footer a { color: var(--chalk-muted); }
.footer a:hover { color: var(--chalk-text); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-weight: 600; font-size: 14px; }

/* floating bits */
.motion-toggle { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.motion-toggle:hover { box-shadow: var(--raised) var(--raised) 0 var(--ink); }
/* The fixed switch only shows where the side margin has room for it; otherwise it's in the footer. */
.motion-toggle--fixed { position: fixed; left: 16px; bottom: 16px; z-index: 30; }
@media (max-width: 1439px) { .motion-toggle--fixed { display: none; } }
@media (min-width: 1440px) { .motion-toggle--footer { display: none; } }

/* ---------- motion off / reduced ---------- */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; }
.no-motion .eyes::before, .no-motion .eyes::after, .no-motion .mystery svg { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.no-motion { scroll-behavior: auto; }

@media print { .nav, .motion-toggle { display: none; } }



/* ---------- roll a mochi + the week's shelf ---------- */
/* The chosen cubby, like the app's shelf: a 5pt ink ring (heroLine + line) and a raised shadow. */
.cubby--today { box-shadow: 0 0 0 var(--hero-line) var(--ink), var(--raised) var(--raised) 0 var(--hero-line) var(--ink); }
.plaques span.on { transform: rotate(-2deg); display: inline-block; }
.plaques span.on { background: var(--ink); color: var(--paper); }
.shelf-summary { margin: var(--s-m) 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2vw, 22px); }

/* ---------- v2 ---------- */
/* What it is, quietly, above the headline: words, not a sticker, so the headline's color is the one color up top. */
.hero__kicker { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--muted); }

/* The video: words left, poster right; it plays in place. */
.see__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 4.5vw, 56px); align-items: center; }
.see__copy .h2 { margin-bottom: 0; }
.see__copy .body-l { margin: 14px 0 0; max-width: 24ch; }
.see__grid .see__player { margin-top: 0; }
/* A thin edge and no shadow: the poster is already a dark block, and the play pill's own shadow is
   what says "press" (an 8px black shadow under it read as a heavy slab). */
.see__player { border-width: var(--line); box-shadow: none; }
@media (max-width: 640px) { .see__player .player__poster img { border-radius: calc(var(--r-large) - var(--line)); } }
.see__player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
@media (max-width: 900px) { .see__grid { grid-template-columns: 1fr; } }

/* Your daily Mochi: four stages, the shelf, and the flavors folded away. */
/* The reveal: three Mochis that come out nothing alike, stepped through a day of breaks. */
.reveal { margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(16px, 3vw, 32px); background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-large); box-shadow: var(--hero) var(--hero) 0 var(--ink); }
.reveal__mochis { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 28px); }
.reveal__mochi { display: grid; justify-items: center; text-align: center; min-width: 0; }
.reveal__tile { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1.25; display: grid; place-items: end center; border: var(--line) solid var(--ink); border-radius: var(--r-card); }
.reveal__tile .mochi-frame { width: min(72%, 220px); margin-bottom: 2%; }
.reveal__name { margin: 12px 0 0; font: 800 clamp(15px, 1.6vw, 20px)/1.15 var(--display); }
.reveal__got { margin: 6px 0 0; min-height: 30px; }
.reveal__tag { max-width: 100%; }
/* A new tag pops on as its Mochi lands the reveal (`scale` composes with the tag's tilt). */
.motion .reveal__tag.fresh { animation: tag-pop .26s var(--pop); }
@keyframes tag-pop { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
.reveal__track { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 30px) 0 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.reveal__track::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 19px; height: 3px; background: var(--faint); border-radius: 2px; }
.reveal__track::after { content: ""; position: absolute; left: calc(100% / 14); top: 19px; height: 3px; width: calc((100% - 100% / 7) * var(--fill, 0)); background: var(--ink); border-radius: 2px; transition: width .35s var(--hover-ease); }
.reveal__track li { display: grid; justify-items: center; position: relative; z-index: 1; }
.reveal__track button { display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.reveal__track b { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--card); font: 800 16px/1 var(--display); transition: background .2s, transform .22s var(--pop), color .2s; }
.reveal__track span { font: 700 11px/1.2 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.reveal__track .done b { background: var(--soda); }
.reveal__track [aria-current="step"] b { background: var(--ink); color: var(--card); transform: scale(1.12); }
.reveal__track [aria-current="step"] span { color: var(--ink); }
.reveal__track button:hover b { transform: translateY(-2px); }
.reveal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(18px, 2.4vw, 28px); padding-top: clamp(14px, 2vw, 22px); border-top: var(--fine-line) dashed var(--faint); }
.reveal__say { margin: 0; font: 800 clamp(17px, 1.8vw, 22px)/1.25 var(--display); }
#today .reveal + .fine { margin-top: var(--s-m); }
@media (max-width: 560px) {
  .reveal__track b { min-width: 32px; height: 32px; font-size: 14px; padding: 0 6px; }
  .reveal__track::before, .reveal__track::after { top: 15px; }
  .reveal__track span { display: none; }
  /* A third of a phone is too narrow for "new · paws · particular" at 11px (nothing goes smaller):
     "new" stacks over what's new, and the personality is left to the name right above it. */
  .reveal__tag { letter-spacing: .5px; padding: 4px 7px 5px; height: auto; white-space: normal; text-align: center; line-height: 1.15; }
  .reveal__new { display: block; }
  .reveal__sep, .reveal__who { display: none; }
}
.shelf-intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 28px; margin: clamp(36px, 4.5vw, 56px) 0 16px; }
.shelf-intro .h3 { margin: 0; }
.shelf-intro .body { margin: 0; }
.flavors-more { margin-top: clamp(24px, 3vw, 36px); background: rgba(255,255,255,.62); border: var(--line) solid var(--ink); border-radius: var(--r-control); }
.flavors-more[open] { background: var(--card); }
.flavors-more > summary { padding: 14px 18px; font-weight: 800; font-size: 17px; justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; }
.flavors-more > summary::after { margin-left: auto; }
.flavors-more__tease { font-weight: 600; font-size: 15px; color: var(--muted); }
.flavors-more .flavors { margin: 0; padding: 0 16px 20px; }
.flavors-more .mystery { display: none; }

/* A highlighted word wrapped with its period (so they wrap together) still draws its underline in. */
.kinetic.split-words .w .hl::after { clip-path: inset(0 0 0 0); transition: clip-path .34s var(--hover-ease) .16s; }
.motion .kinetic.split-words .w:not(.on) .hl::after { clip-path: inset(0 100% 0 0); }

/* The hero's key word: the one block of color on the page (soda, flat, no outline: a mark, not a
   button). Every section heading keeps the ink underline. */
/* The hero's headline is two lines, "Take a break." over "Watch Mochi grow.": sized so the second fits
   its column at every width (about 64px on a laptop, 40px on a phone), never "grow." alone. */
.hero .display { font-size: clamp(36px, 5vw, 64px); }
@media (max-width: 900px) { .hero .display { font-size: clamp(36px, 10.2vw, 64px); } }
.hero .hl::after { content: none; }
.hero .hl { background: var(--soda); padding: .02em .14em .08em; margin: 0 -.04em; border-radius: 3px; line-height: 1; }

/* Research: the trust line and requirements under the hero's button. */
.hero__req + .hero__req { margin-top: 4px; }
/* Research: what Mochi waits for, as flat chips (they're facts, not buttons). */
.waits { margin-top: clamp(28px, 3.5vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.waits__label { margin: 0; font: 800 clamp(17px, 1.8vw, 21px)/1.2 var(--display); }
.waits__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.waits__chips li { padding: 6px 13px 7px; background: var(--card); border: var(--line) solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 15px; }
/* Research: footer links big enough to tap (WCAG 2.2 asks for 24px). */
.footer__links a { display: inline-block; padding: 5px 4px; }

/* Poke, on tangerine: the blue Mochi on its strongest contrast. */
#poke .body-l { margin-bottom: var(--s-m); }

/* FAQ: the heading on the left, the questions on the right. */
.faq--split { max-width: 1200px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.faq--split .h2 { margin: 0; }
@media (max-width: 900px) { .faq--split { grid-template-columns: 1fr; } }