/* Privacy and Terms. Tokens are the marketing page's own (docs/prototypes/marketing/index.html :root), copied, not
   invented: the dark ground and its dot, the text steps, the glass nav, the island radius and the coral accent.
   The site is dark only, so this is too, and says so. No web fonts: the page's display and body face is the system
   stack (--font), so these pages make no third-party request at all. */
:root {
  color-scheme: dark;
  --bg: #000000; --surface: #111111; --raised: #1c1c1e;
  --text: #eeeeee; --text-2: #b4b4b4; --text-3: #7b7b7b; --dot: #161616;
  --p-peach: #ffb471; --p-peach-on: #50270f;
  --p-coral: #ffafb1; --p-coral-on: #61161b;
  --accent: var(--p-coral); --accent-on: var(--p-coral-on);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --inset: 12px; --r: 40px; --pad: 18px;
  --r-in: calc(var(--r) - var(--pad));   /* 22 */
  --glass: oklch(0.178 0 0 / 0.72);
  --blur: blur(28px) saturate(140%);
  --hover: oklch(1 0 0 / 0.06);
  --line: rgb(255 255 255 / 0.1);
  --gut: clamp(16px, 4vw, 32px);
  --bar: 52px;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--inset) + var(--bar) + 24px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--text); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip;
  background: var(--bg) radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / 24px 24px fixed; }
::selection { background: var(--accent); color: var(--accent-on); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a { color: var(--text); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.32); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.15s ease-out; }
a:hover { text-decoration-color: currentColor; }
.skip { position: absolute; left: var(--inset); top: -60px; z-index: 50; padding: 10px 16px; border-radius: 22px; background: #fff; color: #000; text-decoration: none; }
.skip:focus { top: var(--inset); }

/* ===== the bar: the site's nav pill, slim. 52 high, 4 in, so a row inside is 26 − 4 = 22 round ===== */
.bar { position: fixed; z-index: 40; top: var(--inset); left: 50%; translate: -50% 0; width: min(880px, 100% - 2 * var(--inset));
  display: flex; align-items: center; height: var(--bar); padding: 4px 4px 4px 18px; border-radius: calc(var(--bar) / 2);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 18px 36px -14px rgb(0 0 0 / 0.5); }
.brand { display: flex; align-items: center; min-height: 44px; padding-right: 8px; }
.brand img { display: block; height: 22px; width: auto; }
.bar .sp { flex: 1; }
.bar nav { display: flex; }
.tl { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; color: var(--text-2); text-decoration: none;
  font: 500 15px/20px var(--font); white-space: nowrap; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.tl:hover { color: var(--text); background: var(--hover); }
.tl[aria-current="page"] { color: var(--text); background: rgb(255 255 255 / 0.12); }

/* ===== the Privacy | Terms toggle, and the switch between the two pages =====
   The thumb is its own element under the current tab, so a cross-document view transition can slide it from one tab
   to the other. Each page knows which side it is (html[data-page]): Privacy is left, Terms right, so the new page
   slides in from the side of the tab pressed and the old one leaves the other way, with a short crossfade. The bar,
   the thumb and both labels are named, so they never move with the page: no jump in the header. Browsers without view
   transitions ignore all of this and load the page normally. Reduced motion: a plain short fade, nothing slides. */
@view-transition { navigation: auto; }
:root { --spring-ease: linear(0, 0.0207, 0.0747, 0.1512, 0.2414, 0.3381, 0.436, 0.5307, 0.6194, 0.7002, 0.7718, 0.8339, 0.8865, 0.93, 0.9649, 0.9922, 1.0127, 1.0274, 1.0372, 1.0431, 1.0457, 1.0458, 1.0441, 1.0411, 1.0372, 1.0329, 1.0284, 1.0239, 1.0197, 1.0158, 1.0122, 1.0091, 1.0065, 1.0043, 1.0024, 1.001, 0.9999, 0.9991, 0.9985, 0.9981, 0.9979, 0.9979, 0.9979, 0.998, 0.9982, 0.9984, 0.9986, 0.9988, 1); /* the marketing page's spring */
  --switch: 360ms; --switch-from: 48px; } /* 48 is two dots of the ground, so the dots land where they were */
html[data-page="privacy"] { --switch-from: -48px; }
.bar .tabs { display: grid; grid-template-columns: auto auto; } /* .bar nav is flex; this wins */
.tabs .thumb { grid-area: 1 / 1; border-radius: 22px; background: rgb(255 255 255 / 0.12); view-transition-name: legal-thumb; }
html[data-page="terms"] .tabs .thumb { grid-area: 1 / 2; }
.tabs .tl { position: relative; }
.tabs .tl:nth-of-type(1) { grid-area: 1 / 1; view-transition-name: legal-tab-privacy; }
.tabs .tl:nth-of-type(2) { grid-area: 1 / 2; view-transition-name: legal-tab-terms; }
.tabs .tl[aria-current="page"] { background: none; }
.bar { view-transition-name: legal-bar; }
::view-transition-group(*) { animation-duration: var(--switch); animation-timing-function: var(--spring-ease); }
::view-transition-old(root) { animation: 180ms ease-out both switch-fade-out, var(--switch) var(--spring-ease) both switch-out; }
::view-transition-new(root) { animation: 260ms ease-out 60ms both switch-fade-in, var(--switch) var(--spring-ease) both switch-in; }
@keyframes switch-in { from { translate: var(--switch-from) 0; } }
@keyframes switch-out { to { translate: calc(-1 * var(--switch-from)) 0; } }
@keyframes switch-fade-in { from { opacity: 0; } }
@keyframes switch-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  ::view-transition-old(root) { animation: 150ms ease-out both switch-fade-out; }
  ::view-transition-new(root) { animation: 150ms ease-out both switch-fade-in; }
}

/* ===== the column ===== */
main { width: min(30em, 100% - 2 * var(--gut)); /* 30em of this face is 65 to 75 characters a line; 65ch ran to 95 */ margin-inline: auto; padding: calc(var(--inset) + var(--bar) + 72px) 0 120px; }
.eyebrow { margin: 0 0 14px; font: 500 13px/18px var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
h1 { margin: 0; font: 650 clamp(40px, 6vw, 64px)/1 var(--font); letter-spacing: -0.04em; text-wrap: balance; }
.updated { margin: 16px 0 0; font: 400 14px/20px var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
h2 { margin: 72px 0 14px; font: 640 clamp(26px, 3vw, 32px)/1.15 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
h3 { margin: 36px 0 6px; font: 600 19px/1.35 var(--font); letter-spacing: -0.01em; text-wrap: balance; }
p, li { color: var(--text-2); text-wrap: pretty; }
p { margin: 0 0 16px; }
strong { color: var(--text); font-weight: 600; }
ul { margin: 0 0 16px; padding-left: 1.25em; }
li { margin: 6px 0; padding-left: 4px; }
li::marker { color: var(--text-3); }
/* centred on the page: the title block and the section headings sit on the column's middle; paragraphs, lists and the
   table stay left inside it, because centred running text is hard to read. The boxes' own labels stay with their lists */
.eyebrow, h1, .updated, main > section:not(.short) > h2, main > section:not(.short) > h3 { text-align: center; }
.draft { justify-content: center; }
.updated + p:not(.draft) { margin-top: 32px; } /* the intro sits where the draft note would */
.updated { text-wrap: balance; } .updated .nw { white-space: nowrap; } /* a date never breaks at its hyphens */

/* the draft note: in view at the top while any TODO remains */
.draft { display: flex; gap: 12px; align-items: baseline; margin: 32px 0 0; padding: 14px 18px; border-radius: var(--r-in);
  background: rgb(255 180 113 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 180 113 / 0.28); color: var(--text); font: 500 15px/22px var(--font); }
.draft::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--p-peach); translate: 0 -1px; }

/* what only the owner can fill in: loud on purpose, and the build's drafts guard looks for the [TODO: text */
mark.todo { padding: 1px 6px; border-radius: 6px; background: var(--p-peach); color: var(--p-peach-on); font-weight: 560; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the short version: the one block that stands apart, a surface with the island's inner radius */
.short { margin: 40px 0 0; padding: 22px 24px 8px; border-radius: var(--r-in); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.short h2 { margin: 0 0 10px; font: 600 19px/1.35 var(--font); letter-spacing: -0.01em; }
.short li { color: var(--text); }
@media (max-width: 560px) { .short { padding: 18px 18px 4px; } }

/* on this page */
.toc { margin: 48px 0 0; padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.toc h2 { margin: 0 0 8px; font: 500 13px/18px var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 24px; }
.toc li { margin: 0; padding: 0; break-inside: avoid; counter-increment: toc; }
.toc a { display: flex; gap: 12px; align-items: baseline; min-height: 40px; padding: 9px 0; color: var(--text-2); text-decoration: none; font: 500 15px/22px var(--font); transition: color 0.15s ease-out; }
.toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 2ch; color: var(--text-3); font: 400 13px/22px var(--mono); }
.toc a:hover { color: var(--text); }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* the processor table: scrolls inside its own frame on a phone, never the page */
.table { margin: 20px 0 20px; border-radius: var(--r-in); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); overflow-x: auto; overscroll-behavior-x: contain; }
.table:focus-visible { outline-offset: 3px; }
.table { --tw: min(880px, 100vw - 2 * var(--gut)); width: var(--tw); margin-inline: calc(50% - var(--tw) / 2); } /* as wide as the bar, centred on the column, so its columns needn't scroll on a wide screen */
table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 15px/22px var(--font); }
caption { padding: 14px 18px 0; text-align: left; color: var(--text-3); font: 400 13px/18px var(--font); caption-side: top; }
th, td { padding: 14px 18px; text-align: left; vertical-align: top; color: var(--text-2); }
thead th { padding-block: 12px; color: var(--text-3); font: 500 12px/16px var(--font); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
tbody tr + tr > * { border-top: 1px solid var(--line); }
.hint { display: none; margin: 16px 0 -8px; color: var(--text-3); font: 400 13px/18px var(--font); }
@media (max-width: 700px) { .hint { display: block; } }

/* ===== the footer: the site's ft-bar, year · legal · contact ===== */
.foot { width: min(880px, 100% - 2 * var(--gut)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  min-height: 72px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--text-2); font: 400 13px/18px var(--font); }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.foot nav span { color: var(--text-3); }
.foot a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; color: var(--text-2); text-decoration: none; transition: color 0.15s ease-out; }
.foot a::before { content: ''; position: absolute; inset: -6px 0; } /* 44 to press */
.foot a:hover, .foot a[aria-current="page"] { color: var(--text); }
.foot .yr { font-variant-numeric: tabular-nums; }

/* ===== print: white paper, black ink, no chrome ===== */
@media print {
  :root { color-scheme: light; --text: #000; --text-2: #111; --text-3: #444; --line: #bbb; --surface: #fff; }
  html, body { background: #fff !important; }
  body { font-size: 11pt; line-height: 1.5; }
  .bar, .skip, .hint, .toc { display: none; }
  main { width: auto; padding: 0; }
  a { color: #000; text-decoration: underline; }
  section a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
  h2 { margin-top: 28px; break-after: avoid; }
  .short, .table, .draft { box-shadow: none; border: 1px solid #999; background: #fff; }
  .table { overflow: visible; }
  table { min-width: 0; }
  mark.todo { background: none; color: #000; border: 1px solid #000; }
  .foot { border-top: 1px solid #999; }
  .foot a::before { display: none; }
}