/* legal-pages.css
 *
 * The shared look of every generated document page (privacy, terms, pricing,
 * cancellation and refunds, accessibility) and the hand-written companions
 * that use the same chrome (account, report, reconfirm, privacy-choices,
 * not-in-us, safety, community guidelines).
 *
 * WHY THIS FILE EXISTS: the styling used to be a template literal inside
 * scripts/build-legal.js, so restyling a legal page meant editing the script
 * that renders the legal TEXT. That is a bad place to be one typo away from.
 * Now the generator emits a <link> to this file and nothing else, so a
 * restyle is a CSS-only change that cannot touch a word of the policy.
 *
 * Every value below is a token. Change the tokens, not the rules. The palette
 * matches the site tokens in site-v3.css (gold, crimson, cream) so the
 * document pages sit in the same family as the marketing pages.
 */

:root {
  /* Palette, shared with site-v3.css */
  --lp-ink: #221f1d;
  --lp-ink-soft: #4a443c;
  --lp-muted: #6b645c;
  --lp-cream: #f5f0e8;
  --lp-cream-dim: #efe8dc;
  --lp-crimson: #8c0e0e;
  --lp-crimson-hover: #a01010;
  --lp-gold: #b8964a;
  --lp-line: #e0d8c8;

  /* Type */
  --lp-serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --lp-sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lp-size: 16px;
  --lp-leading: 1.65;

  /* Layout. Legal text is read, not scanned, so the measure stays narrow. */
  --lp-measure: 760px;
  --lp-gutter: 24px;
  --lp-top: 48px;
}

@media (prefers-color-scheme: dark) {
  /* The document pages stay light on purpose: these are read carefully and
     often printed. Only the chrome softens. Override here if that changes. */
  :root { --lp-line: #ded5c4; }
}

body {
  font-family: var(--lp-sans);
  font-size: var(--lp-size);
  line-height: var(--lp-leading);
  color: var(--lp-ink);
  background: var(--lp-cream);
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: var(--lp-top) var(--lp-gutter);
}

h1 { font-family: var(--lp-serif); font-size: 2rem; color: var(--lp-crimson); line-height: 1.15; }
h2 { margin-top: 2rem; font-size: 1.15rem; }
h3 { margin-top: 1.4rem; font-size: 1rem; color: var(--lp-ink-soft); }

a { color: var(--lp-crimson); }
a:hover { color: var(--lp-crimson-hover); }
a:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

ul, ol { padding-left: 1.2rem; }
li { margin: .3rem 0; }

/* Tables carry the processor and retention matrices, which are wide. They
   scroll inside themselves rather than making the page scroll sideways. */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .82rem;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
}
th, td { border: 1px solid var(--lp-line); padding: 7px 9px; text-align: left; vertical-align: top; }
th { background: var(--lp-cream-dim); }

footer {
  margin-top: 3rem;
  font-size: .85rem;
  color: var(--lp-muted);
  border-top: 1px solid var(--lp-line);
  padding-top: 16px;
}

.lp-back { margin-bottom: 2rem; font-size: .85rem; }

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

@media print {
  body { max-width: none; background: #fff; padding: 0; }
  a { color: var(--lp-ink); text-decoration: underline; }
  footer { border-top: 1px solid #999; }
}