/* The policy documents — privacy, terms — on the Ledger design.
 *
 * These four are static files served by nginx, outside the React app, and they carried four
 * BYTE-IDENTICAL copies of a slate/blue stylesheet that predates the redesign. They are linked
 * from the footer of every page in the product, so a reader is one click from a document that
 * looks like a different company's. They are also what a payment-provider reviewer reads.
 *
 * Shared rather than inlined four times, so a future edit cannot restyle three of them. The
 * token values below are copied from src/App.css; a test asserts they still match, because two
 * hand-maintained palettes are exactly how the site ended up with three of them.
 */

:root {
  --font-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-brand: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --background: oklch(0.975 0.009 85);
  --surface: #ffffff;
  --foreground: oklch(0.245 0.014 70);
  --muted: oklch(0.515 0.016 72);
  --muted-surface: oklch(0.955 0.014 85);
  --border: oklch(0.865 0.012 82);
  --tint: oklch(0.44 0.085 155);
  --ochre: oklch(0.50 0.10 65);
  --radius-sm: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.185 0.01 70);
    --surface: oklch(0.225 0.012 70);
    --foreground: oklch(0.945 0.008 85);
    --muted: oklch(0.68 0.014 75);
    --muted-surface: oklch(0.212 0.012 70);
    --border: oklch(0.325 0.014 70);
    --tint: oklch(0.72 0.11 155);
    --ochre: oklch(0.74 0.11 68);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 700px, the same measure the docs page sets for a column of prose. */
.wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px clamp(18px, 4vw, 40px) 80px;
}

/* Prose links take --tint, the same green the app gives a link (App.css `a`). The first
   version of this file gave them --foreground with a hairline border, which computed to the
   EXACT colour of body text — on /contact, where the email address is the action, the only
   thing marking it as a link was a 1px rule most readers would not register. */
a {
  color: var(--tint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.14s ease;
}

a:hover { border-bottom-color: currentColor; }

/* The masthead: the brand, then the other documents, under the heavy rule that opens every
   section of this design. */
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--foreground);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav a { border-bottom: none; color: var(--muted); }
.nav .brand:hover { border-bottom-color: transparent; }
.nav a:hover { color: var(--foreground); }

.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--foreground);
  margin-right: auto;
}

.nav .brand svg { display: block; }

h1 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 34px 0 10px;
}

h2 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
}

.meta {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

/* A ruled register, like every other table in the product — no boxed cells. */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0;
  font-size: 14px;
}

th, td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 11px 14px 11px 0;
  text-align: left;
  vertical-align: top;
}

th {
  background: none;
  border-bottom: 1px solid var(--foreground);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--muted-surface);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* The pulled-out promise. Ochre, because it is the accent this design uses to mark the one
   thing on a page worth reading twice. */
.box {
  border: none;
  border-left: 2px solid var(--ochre);
  background: none;
  padding: 4px 0 4px 20px;
  margin: 20px 0;
  border-radius: 0;
}

.box p { margin: 0; }
.box p + p { margin-top: 10px; }

footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

@media (max-width: 560px) {
  .nav { gap: 14px; }
  table { font-size: 13px; }
  th, td { padding: 9px 10px 9px 0; }
}