/* A specification sheet, not a poster.
 *
 * The product's distinguishing quality is that it says what it will not do, at
 * length and in specifics. So the page gives that the same weight as the
 * feature list rather than burying it: two columns of equal size, one rule
 * between them. Hairlines and position carry the structure; there is exactly
 * one accent and it is spent on links.
 *
 * Nothing here is fetched from anywhere. A page that links to a privacy policy
 * has no business handing a visitor's address to a font host on the way. */

:root {
  color-scheme: light dark;

  --ink: #ffffff;
  --ink-sunk: #f6f6f7;
  --rule: #e3e3e6;
  --rule-soft: #efeff1;
  --text: #1d1d21;
  --text-quiet: #5b5c65;
  --text-faint: #86878f;
  --accent: #0f7a5a;
  --refuse: #7a5c17;

  --measure: 52ch;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

/* System setting, unstamped by any explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0b0b0d;
    --ink-sunk: #121215;
    --rule: #26262b;
    --rule-soft: #1a1a1e;
    --text: #ececee;
    --text-quiet: #a0a1a8;
    --text-faint: #74757d;
    --accent: #4ad2a0;
    --refuse: #c4a76a;
  }
}

/* And the explicit choice, which has to win in both directions. */
:root[data-theme="dark"] {
  --ink: #0b0b0d;
  --ink-sunk: #121215;
  --rule: #26262b;
  --rule-soft: #1a1a1e;
  --text: #ececee;
  --text-quiet: #a0a1a8;
  --text-faint: #74757d;
  --accent: #4ad2a0;
  --refuse: #c4a76a;
}

*, *::before, *::after { box-sizing: border-box }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 var(--step)/1.6 var(--ui);
  -webkit-text-size-adjust: 100%;
}

.sheet { max-width: 74rem; margin: 0 auto; padding: 0 var(--gap) }
/* The legal pages have one column, so the rule above the text and the text
   itself end at the same place. */
.sheet.narrow { max-width: 58rem }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- the mark and the masthead ------------------------------------------- */

.masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem;
  padding: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  margin: 0;
  font: 600 1.375rem/1 var(--mono);
  letter-spacing: -0.02em;
}
.wordmark a { color: inherit; text-decoration: none }
.wordmark .dot { color: var(--accent) }
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.25rem }
.masthead nav a { color: var(--text-quiet); text-decoration: none; font-size: .9375rem }
.masthead nav a:hover { color: var(--text) }

/* --- the opening claim ---------------------------------------------------- */

.lede { padding: clamp(3rem, 8vw, 6rem) 0 }
.lede h2 {
  max-width: 22ch;
  margin: 0 0 1.25rem;
  font: 400 clamp(2rem, 1.2rem + 3.4vw, 3.5rem)/1.12 var(--ui);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede p { max-width: var(--measure); margin: 0 0 1.5rem; color: var(--text-quiet) }

/* The one thing nobody else says, so it is the one thing set apart. */
.inert {
  display: flex; gap: .875rem;
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--refuse);
  background: var(--ink-sunk);
}
.inert strong { color: var(--text) }
.inert p { margin: 0; color: var(--text-quiet); font-size: .9375rem }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem }
.actions a {
  display: inline-block; padding: .625rem 1.125rem;
  border: 1px solid var(--rule); border-radius: 6px;
  color: var(--text); text-decoration: none;
  font: 500 .9375rem var(--ui);
}
.actions a.primary { border-color: var(--accent); color: var(--accent) }
.actions a:hover { background: var(--ink-sunk) }

/* --- bands ---------------------------------------------------------------- */

section { border-top: 1px solid var(--rule); padding: clamp(2.5rem, 6vw, 4.5rem) 0 }
.label {
  margin: 0 0 2rem;
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* The split that is the whole argument: same width, same type size, one rule
   between them. On a narrow screen they stack, and the refusals keep their
   marker so the distinction survives the loss of the column. */
.ledger { display: grid; gap: var(--gap); grid-template-columns: 1fr }
@media (min-width: 60rem) {
  .ledger { grid-template-columns: 1fr 1px 1fr }
  .ledger .spine { background: var(--rule) }
}
.ledger .spine { display: none }
@media (min-width: 60rem) { .ledger .spine { display: block } }

.column h3 {
  margin: 0 0 1.75rem;
  font: 500 1rem/1.3 var(--mono);
  letter-spacing: .02em;
  color: var(--text);
}
.column > h3 + p { margin-top: -1.25rem; margin-bottom: 1.75rem; color: var(--text-faint); font-size: .875rem }

.entry { margin: 0 0 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule-soft) }
.entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 }
.entry h4 { margin: 0 0 .5rem; font: 600 1rem/1.35 var(--ui) }
.entry p { margin: 0 0 .75rem; color: var(--text-quiet); font-size: .9375rem }
.entry p:last-child { margin-bottom: 0 }
.entry code { font: 400 .875em var(--mono); color: var(--text) }

.refusals .entry h4 { color: var(--refuse); font-weight: 500 }
.refusals .entry h4::before { content: "— "; color: var(--refuse) }

/* --- the facts table ------------------------------------------------------ */

.facts { width: 100%; border-collapse: collapse; font-size: .9375rem }
.facts caption { text-align: left; color: var(--text-faint); font-size: .875rem; padding-bottom: 1rem }
.facts th, .facts td { text-align: left; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top }
.facts th { font: 500 .8125rem var(--mono); color: var(--text-faint); white-space: nowrap; width: 1%; padding-right: 2rem }
.facts td { color: var(--text-quiet) }
.facts td code { font: 400 .875em var(--mono); color: var(--text) }
.scroll { overflow-x: auto }

/* --- closing -------------------------------------------------------------- */

.standing { max-width: var(--measure) }
.standing p { color: var(--text-quiet) }
.standing .plain { color: var(--text) }

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  color: var(--text-faint); font-size: .875rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto }

/* --- the legal pages ------------------------------------------------------ */

/* Wide enough for the retention tables; the prose inside keeps its own measure
   so widening the column does not lengthen the line. */
.document { padding: clamp(2.5rem, 6vw, 4rem) 0; max-width: 52rem }
.document p, .document li { max-width: var(--measure) }
.document h2 { font: 400 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.15 var(--ui); letter-spacing: -0.02em; margin: 0 0 .5rem }
.document .stamp { color: var(--text-faint); font: 400 .875rem var(--mono); margin: 0 0 2.5rem }
.document h3 { margin: 3.25rem 0 1rem; font: 600 1.3125rem/1.3 var(--ui); letter-spacing: -0.01em }
.document h3 .n { font: 500 .75em/1 var(--mono); color: var(--text-faint); margin-right: .5em }
.document p, .document li { color: var(--text-quiet) }
.document li { margin-bottom: .5rem }
.document strong { color: var(--text) }
.document code { font: 400 .875em var(--mono); color: var(--text) }

/* A blank only the owner can fill. Loud on purpose: a policy published with one
   of these still in it is worse than no policy. */
.blank {
  background: var(--refuse); color: #16130a;
  padding: 0 .35rem; border-radius: 3px;
  font: 600 .8125em var(--mono); letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* A document that is not in force yet. Louder than the text around it, because
   a policy published with a blank still in it is worse than no policy. */
.notice {
  margin: 0 0 2.5rem; padding: 1rem 1.25rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--refuse);
  background: var(--ink-sunk);
}
.notice p { margin: 0 0 .5rem; font-size: .9375rem; max-width: none }
.notice p:last-child { margin-bottom: 0 }
.notice strong { color: var(--refuse) }

/* The facts a reader would otherwise find out the hard way, put where they
   cannot be missed rather than at their numbered position. */
.upfront { margin: 0 0 3rem; padding: 1.5rem 1.5rem .5rem; border: 1px solid var(--rule) }
.upfront h3 { margin: 0 0 1rem; font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint) }
.upfront h4 { margin: 0 0 .5rem; font: 600 1rem/1.35 var(--ui) }
.upfront div + div { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft) }
.upfront div { margin-bottom: 1rem }

.toc { margin: 0 0 3rem }
.toc h3 { margin: 0 0 1rem; font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint) }
.toc ol { margin: 0; padding-left: 1.25rem; font-size: .9375rem }
@media (min-width: 44rem) { .toc ol { columns: 2; column-gap: var(--gap) } }
.toc li { margin-bottom: .375rem; break-inside: avoid }

.document h3 + .stamp { margin-top: -.5rem }
.document table { margin-bottom: 1.5rem }
.document h4 { margin: 2.25rem 0 .625rem; font: 600 1.0625rem/1.4 var(--ui); color: var(--text) }
.document ul, .document ol { padding-left: 1.25rem; margin: 0 0 1rem }
.document em { color: var(--text-faint) }