/* Privacy Policy, Terms of Service and Where your data goes: plain reading pages. Light and dark follow the system.
   No scripts. The two legal documents read like the real thing (numbered sections, a contents list, a summary box,
   capital-letter clauses), set in the site's own paper-and-ink type so they still feel like Mochi. */
@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, so nothing jumps when they arrive. */
@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 Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 93%; ascent-override: 104.7%; descent-override: 25.4%; line-gap-override: 0%; }

:root {
  --bg: #F5F3ED; --fg: #1B1C15; --muted: #5C5B52; --line: #D7D6CE; --panel: #FBF0E2; --panel-line: #F1DFCB;
  --node: #FFFDF8; --accent: #DEC0A6; --ok: #137B44;
  --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;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1B1C15; --fg: #F5F3ED; --muted: #B4B2A7; --line: #3B3C33; --panel: #29251E; --panel-line: #3E372D; --node: #24251D; --accent: #8C7562; --ok: #58BE7C; }
}
@media (prefers-contrast: more) {
  :root { --muted: #3A3A33; --line: #8E8D84; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #D8D6CC; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.62 var(--body); -webkit-font-smoothing: antialiased;
  /* viewport-fit=cover: keep text clear of the notch in landscape and the home indicator. */
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
::selection { background: #F1DFCB; color: #1B1C15; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 5; padding: 10px 16px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-family: var(--display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.legal-top { max-width: 760px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none;
  font-family: var(--display); font-size: 21px;
}
.legal-top .back {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 15px; text-decoration: none;
}
@media (hover: hover) { .legal-top .back:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } }

.legal { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }
.legal h1 { margin: 12px 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 7vw, 54px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.legal h2 { margin: 52px 0 8px; font-family: var(--display); font-weight: 700; font-size: clamp(23px, 3.4vw, 28px); line-height: 1.15; text-wrap: balance; scroll-margin-top: 16px; }
.legal h3 { margin: 26px 0 4px; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; scroll-margin-top: 16px; }
.legal p, .legal li { text-wrap: pretty; }
.legal p { margin: 10px 0; }
.legal .meta { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.legal .meta + .meta { margin-top: 0; }
.legal .short {
  margin: 26px 0 0; padding: 18px 22px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-line);
}
.legal .short p { margin: 0; }
.legal .short p + p, .legal .short p + ul, .legal .short ul + p { margin-top: 8px; }
.legal .short .short-title { font-family: var(--display); font-weight: 600; font-size: 19px; }
.legal .short .short-note { color: var(--muted); font-size: 14.5px; }
.legal ul, .legal ol { margin: 10px 0; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal li::marker { color: var(--muted); }
.legal b, .legal strong { font-weight: 600; }
.legal a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.legal code { font-family: var(--mono); font-size: 0.86em; overflow-wrap: anywhere; }
.legal kbd { font-family: var(--body); font-size: 0.95em; font-weight: 600; white-space: nowrap; }
.legal hr { margin: 48px 0 0; border: 0; border-top: 1px solid var(--line); }

/* MARK: Numbered documents (terms.html, privacy.html) */
/* The section number sits in mono before the heading, the way formal documents set it. */
.legal .n { font-family: var(--mono); font-weight: 400; font-size: 0.62em; color: var(--muted); letter-spacing: 0.02em; margin-right: 0.5em; vertical-align: 0.18em; }
.legal h3 .n { font-size: 0.78em; vertical-align: 0.08em; }
/* "1.2 How you accept." A run-in heading at the start of a clause. */
.legal .lead { font-weight: 600; }
.legal .lead .n { font-size: 0.86em; vertical-align: 0; margin-right: 0.35em; }
/* (a), (b), (c) lists inside a clause. */
.legal ol.alpha { list-style: lower-alpha; }
.legal ol.alpha > li::marker { font-family: var(--mono); font-size: 0.9em; }
/* Defined terms: set in bold where they're defined, then capitalised after. */
.legal dfn { font-style: normal; font-weight: 600; }
.legal .defs { margin: 12px 0; padding: 0; }
.legal .defs div { padding: 10px 0; border-top: 1px solid var(--line); }
.legal .defs div:last-child { border-bottom: 1px solid var(--line); }
.legal .defs dt { font-weight: 600; }
.legal .defs dd { margin: 2px 0 0; }

/* Clauses the law wants conspicuous (warranty disclaimer, limits of liability): capitals are the convention, so they
   get room to breathe instead of shouting: a ruled block, slightly smaller, wider tracking, generous leading. */
.legal .caps {
  margin: 16px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--fg);
  font-size: 15px; line-height: 1.75; letter-spacing: 0.015em;
}
.legal .caps p { margin: 10px 0; }

/* Contents: a numbered list in two columns where there's room. */
.legal .toc-wrap { margin: 28px 0 0; padding: 16px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal .toc-title { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal ol.toc { margin: 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: 28px; }
.legal ol.toc li { margin: 0; break-inside: avoid; }
.toc a { display: flex; gap: 0.6em; align-items: baseline; min-height: 40px; padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--fg); text-decoration: none; }
.legal .toc a .n { flex: none; min-width: 1.6em; margin: 0; font-size: 12px; vertical-align: 0; }
@media (hover: hover) { .toc a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } }

/* Tables: service providers, retention, the California notice. On a phone each row becomes a small card whose cells
   carry their column name (data-label), so nothing ever scrolls sideways. */
.legal .ltable { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal .ltable th, .legal .ltable td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal .ltable th:last-child, .legal .ltable td:last-child { padding-right: 0; }
.legal .ltable thead th { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--fg); }
.legal .ltable tbody th { font-weight: 600; }
.legal .ltable td p { margin: 0; }
.legal .ltable td p + p { margin-top: 6px; }
@media (max-width: 640px) {
  .legal .ltable, .legal .ltable tbody, .legal .ltable tr, .legal .ltable th, .legal .ltable td { display: block; width: 100%; }
  .legal .ltable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal .ltable tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal .ltable tr:first-child { border-top: 1.5px solid var(--fg); }
  .legal .ltable th, .legal .ltable td { padding: 3px 0; border: 0; }
  .legal .ltable tbody th { font-size: 16px; }
  .legal .ltable td[data-label]::before {
    content: attr(data-label); display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
  }
}

/* A conspicuous notice: the arbitration notice under the summary, and the automatic-renewal terms in Section 6.
   Ruled on all sides in ink so it reads as "stop and read this", without colour doing the shouting. */
.legal .notice {
  margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--fg);
  font-size: 15px; line-height: 1.7; letter-spacing: 0.01em;
}
.legal .notice p { margin: 0; }
.legal .notice p + p { margin-top: 8px; }
.legal .notice .notice-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* A note set apart from the main text (for example, a part only for invited testers of the app). */
.legal .aside-note { color: var(--muted); font-size: 15px; }

/* MARK: Where your data goes (data.html): two flows, drawn as boxes and arrows. The page is wider so four boxes fit
   side by side; its text keeps a comfortable line length. */
.wide .legal, .wide .legal-top, .wide .legal-foot { max-width: 1040px; }
.wide .legal > p, .wide .legal > ul, .wide .legal > ol:not(.flow), .wide .legal > h1 { max-width: 44rem; }

.flow { margin: 22px 0 0; padding: 0; list-style: none; display: flex; align-items: stretch; }
.legal .flow { padding: 0; }
.flow > li { margin: 0; }
.node {
  flex: 1 1 0; min-width: 0; padding: 16px 16px 14px; border-radius: 18px; background: var(--node);
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
.node.is-ours { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--fg); }
.node-tag { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.node-name { display: block; margin-top: 2px; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.node-what { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.node-keeps { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.4; }
.node-keeps b { font-weight: 600; }
.arrow {
  flex: 0 0 34px; display: grid; place-items: center; align-self: center; color: var(--fg);
}
.arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-caption { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
/* Step-by-step deleting: numbered, with the folder paths in mono. */
.legal ol.steps > li { margin: 8px 0; }
.legal ol.steps > li::marker { font-family: var(--mono); font-size: 0.9em; }

@media (max-width: 720px) {
  /* On a phone the flow runs down the page instead of across. */
  .flow { flex-direction: column; }
  .arrow { flex-basis: 34px; align-self: flex-start; margin-left: 24px; }
  .arrow svg { transform: rotate(90deg); }
}

/* Ways onward, so a page you reached from a link isn't a dead end. */
.legal-foot { max-width: 760px; margin: 0 auto; padding: 0 16px max(32px, env(safe-area-inset-bottom)); }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.legal-foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: none; }
.legal-foot a[aria-current="page"] { color: var(--fg); font-weight: 600; }
@media (hover: hover) { .legal-foot a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } }
.legal-foot p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

@media (forced-colors: active) {
  .legal .short, .legal .notice, .node { border: 1px solid CanvasText; }
}
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .legal-top .back, .legal-foot, .skip-link, .toc-wrap { display: none; }
  .legal a { color: #000; }
  .legal h2, .legal h3 { break-after: avoid; }
  .legal .caps, .legal .notice, .legal .ltable tr { break-inside: avoid; }
}

/* 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; }
@media (prefers-color-scheme: dark) {
  :root { --mm-outline: #FBF0E2; --mm-sprout: #58BE7C; }
}