/* ------------------------------------------------------------------
   Shared by privacy.html, terms.html and refund.html.

   The tokens are index.html's, copied rather than imported: the landing
   page is deliberately one self-contained file with no external requests
   of any kind, and a legal page that pulled a stylesheet out of it would
   make the front page's "nothing is fetched from anywhere else" claim
   depend on a file it does not control. Three pages sharing one sheet is
   worth one duplicated block of custom properties.

   No web fonts, for the same reason the landing page has none: a privacy
   policy that makes your browser talk to Google in order to render is a
   bad joke. Everything here is a system font.
   ------------------------------------------------------------------ */
:root {
  --field:      oklch(0.17 0.018 30);
  --field-deep: oklch(0.12 0.014 30);
  --field-dark: oklch(0.08 0.010 30);
  --red:        oklch(0.55 0.20 28);
  --red-deep:   oklch(0.46 0.17 28);
  --red-dark:   oklch(0.35 0.14 28);
  --plate:      oklch(0.985 0.012 85);
  --plate-edge: oklch(0.915 0.022 78);
  --ink:        oklch(0.29 0.06 30);
  --ink-soft:   oklch(0.46 0.04 40);
  --ink-faint:  oklch(0.63 0.03 50);
  --rule:       oklch(0.86 0.02 70);

  --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --plate-w: 1080px;
  --pad: clamp(1.5rem, 5vw, 4.5rem);
  --radius: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* An anchor from the table of contents would otherwise land the heading
   hard against the top of the viewport. */
section { scroll-margin-top: 1.5rem; }

body {
  margin: 0;
  background: var(--field);
  background-image: linear-gradient(180deg, var(--field) 0%, var(--field-deep) 62%, var(--field-dark) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.08;
  margin: 0; letter-spacing: -0.022em; text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--plate-w); margin: 0 auto; padding: 0 clamp(0.75rem, 3vw, 2rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.7rem;
}

/* ------------------------------------------------------------------- Head */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.6rem 0 2.4rem; color: var(--plate);
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
}
.brand svg { width: 34px; height: 34px; display: block; border-radius: 8px; }
.masthead a { color: oklch(0.93 0.03 45); text-decoration: none; font-size: 0.95rem; }
.masthead a:hover { color: var(--plate); }
.masthead__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; }
.masthead__links .here { color: var(--plate); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ Plate */
.plate {
  position: relative;
  background: linear-gradient(180deg, var(--plate) 0%, var(--plate-edge) 100%);
  border-radius: var(--radius);
  padding: clamp(2.25rem, 5vw, 4rem) var(--pad);
  box-shadow: 0 30px 70px -30px oklch(0 0 0 / 0.9), 0 2px 0 oklch(1 0 0 / 0.5) inset;
  margin-top: 34px;
}
.plate::before {
  content: "";
  position: absolute;
  top: -30px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 58px;
  background: var(--red-dark);
  border-radius: 24px 24px 10px 10px;
  box-shadow: 0 6px 14px -4px oklch(0.15 0.06 28 / 0.6);
}

/* ------------------------------------------------------------------- Lede */
.lede h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.lede h1 em { font-style: normal; color: var(--red); }
.lede > p { margin-top: 1.2rem; font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.updated {
  margin-top: 1.1rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink-faint); letter-spacing: 0.02em;
}

/* The claim in brief, so somebody who reads nothing else still reads
   something true. */
.summary {
  margin-top: 2rem; padding: 1.5rem 1.6rem;
  background: oklch(0.94 0.025 75);
  border: 1px solid var(--rule); border-radius: 16px;
}
.summary .label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.8rem;
}
.summary ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.7rem; }
.summary li { color: var(--ink-soft); }
.summary strong { color: var(--ink); }

.toc {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-top: 1px solid var(--rule); padding-top: 1.6rem;
}
.toc a {
  font: 500 0.86rem/1 var(--font-mono);
  text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.5rem 0.85rem;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.toc a:hover { border-color: var(--ink-soft); color: var(--ink); }

/* --------------------------------------------------------------- Sections */
main section { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
main section h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
main section h3 { font-size: 1.16rem; margin-top: 1.8rem; }
main section p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 74ch; }
main section p strong, main section li strong { color: var(--ink); }
main section a { color: var(--red-deep); text-underline-offset: 3px; }

code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: oklch(0.94 0.02 70); padding: 0.1em 0.35em; border-radius: 4px;
}

ul.notes { margin: 1.1rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.7rem; max-width: 74ch; }
ul.notes li { color: var(--ink-soft); }

.tbl { margin-top: 1.3rem; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
/* The table itself scrolls rather than the page: a two-column table of
   prose on a narrow phone is the one thing here wide enough to push the
   body sideways. */
.tbl { overflow-x: auto; }
.tbl table { border-collapse: collapse; width: 100%; min-width: 30rem; background: var(--plate); }
.tbl th, .tbl td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  background: oklch(0.94 0.025 75);
}
.tbl td { color: var(--ink-soft); font-size: 0.96rem; }
.tbl tr:last-child td { border-bottom: none; }

/* The one paragraph on a page that somebody should not skim past. */
.callout {
  margin-top: 1.4rem; padding: 1.2rem 1.4rem;
  background: oklch(0.94 0.03 60);
  border-left: 4px solid var(--red);
  border-radius: 0 14px 14px 0;
  color: var(--ink-soft); font-size: 0.98rem;
}
.callout b { color: var(--ink); }

/* Capitals are how the warranty and liability language is conventionally
   set, and being conventional is the point of it. Smaller and set back, so
   the shouting is legible rather than dominant. */
.legalese {
  margin-top: 1.2rem; padding: 1.3rem 1.4rem;
  background: oklch(0.93 0.015 70);
  border: 1px solid var(--rule); border-radius: 14px;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7;
  color: var(--ink-soft);
}

.siblings {
  margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-size: 0.95rem;
}
.siblings a { color: var(--red-deep); text-decoration: none; }
.siblings a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- Footer */
footer {
  color: oklch(0.88 0.03 45); padding: 3rem 0 3.5rem; font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
}
footer a { color: var(--plate); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}