/* Legal pages — privacy policy and terms.
   Deliberately its own stylesheet rather than a section bolted onto styles.css:
   these pages are long-form reading, they will outlive several redesigns of the
   marketing page, and nothing here should move when that page changes.
   Palette and fonts are kept in step with styles.css by hand. */

:root {
  --paper: #F6F1E7;
  --paper-warm: #EFE6D4;
  --paper-deep: #E7DCC5;
  --ink: #1B1611;
  --ink-soft: #57503F;
  --ink-faint: #6B6252;
  --gold: #C9862B;
  --gold-text: #A9711D;
  --terra-text: #A84A24;
  --line: rgba(27, 22, 17, 0.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

.legal {
  max-width: 46rem;           /* ~72 characters — a reading measure, not a page width */
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* Back to the site, and the app's own name, in one row. */
.legal-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  font-size: 15px;
}

.legal-top a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.legal-top a:hover { color: var(--gold-text); }

.legal-top svg { width: 26px; height: 26px; }

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.updated {
  color: var(--ink-faint);
  font-size: 14px;
  margin: 0 0 40px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 28px 0 6px;
}

p, li { color: var(--ink-soft); }

a { color: var(--gold-text); }

ul { padding-left: 1.2em; }

li { margin-bottom: 8px; }

strong { color: var(--ink); font-weight: 600; }

/* The lead paragraph: the plain-English summary that most readers stop after. */
.lead {
  font-size: 1.12rem;
  color: var(--ink);
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 20px 22px;
  margin: 0 0 8px;
}

/* A table of what is collected and why. Scrolls rather than squashing on a
   phone — the "why" column is the useful one and must not become one word
   per line. */
.table-wrap { overflow-x: auto; margin: 20px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 15px;
}

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

th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-text);
  font-weight: 700;
}

td { color: var(--ink-soft); }

.legal-foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-faint);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191512;
    --paper-warm: #221D18;
    --paper-deep: #2A241D;
    --ink: #F6F1E7;
    --ink-soft: #D8CFBE;
    --ink-faint: #A79C88;
    --gold-text: #E5A33D;
    --terra-text: #E08A5C;
    --line: rgba(246, 241, 231, 0.16);
  }
}