/* Shared styling for the public legal pages.
   Self-contained: no fonts, scripts or images are fetched, so the pages load on
   a bad connection and cannot leak a visit to a third party. That constraint is
   why the display face below is Georgia rather than something from a CDN - it
   is on every machine that will read this, and it costs nothing.

   Light only, deliberately. The palette follows the app (sand canvas, navy
   text, coral accent) so someone arriving from the Play listing sees the same
   product. The dark-mode block that used to be here inverted all of that and
   made a legal page look like a terminal. */
:root {
  /* Declared, so a browser with "force dark mode" on does not invert a page
     that has been deliberately designed light. Without this the user's own
     screenshot came back dark. */
  color-scheme: light;

  --bg: #f2ede4;        /* sand, a shade deeper than the sheet sits on */
  --sheet: #fffdfa;     /* the page itself - warm white, not clinical */
  --text: #23253a;
  --muted: #6b6e82;
  --line: #ece5da;
  --accent: #f4581b;
  --accent-soft: #fdf1ea;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 16px 72px;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The three landmarks stack into one continuous sheet.
   Bordered rather than shadowed: a shadow on each of three stacked elements
   shows its seams down both sides, which is worse than no shadow at all. */
body > header,
body > main,
body > footer {
  max-width: 760px;
  margin: 0 auto;
  background: var(--sheet);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
}

body > header {
  margin-top: clamp(24px, 6vw, 56px);
  padding-top: clamp(32px, 6vw, 52px);
  padding-bottom: 28px;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  /* One hairline of colour at the very top. The whole page is quiet, so this is
     the only thing that has to say which product it belongs to. */
  box-shadow: inset 0 4px 0 0 var(--accent);
}

body > footer {
  padding-top: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
  color: var(--muted);
  font-size: 14.5px;
}

body > main { padding-bottom: 8px; }

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.brand {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

h1 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}

.updated {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ── Body copy ────────────────────────────────────────────────────────────── */

h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* The first section sits right under the masthead rule, so it does not need a
   second one immediately above it. */
main > h2:first-child { border-top: 0; padding-top: 0; margin-top: 30px; }

h3 { font-size: 16.5px; font-weight: 700; margin: 26px 0 6px; }

p { margin: 0 0 14px; }
ul, ol { padding-left: 22px; margin: 0 0 14px; }
li { margin: 7px 0; }
li::marker { color: var(--accent); }

strong { font-weight: 700; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: #d1420c; }

/* ── Callouts ─────────────────────────────────────────────────────────────── */

.note {
  background: var(--accent-soft);
  border: 1px solid #f6ded1;
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.note p { margin: 0; }
.note p + p { margin-top: 10px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.wrap { overflow-x: auto; margin: 18px 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #faf6f0;
}
tr:last-child td { border-bottom: 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer a {
  margin-right: 20px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Print ────────────────────────────────────────────────────────────────── */
/* A privacy policy gets printed and filed more often than most pages. Without
   this it prints the sand background across every sheet. */
@media print {
  body { background: #fff; padding: 0; }
  body > header, body > main, body > footer {
    border: 0; border-radius: 0; max-width: none; padding: 0;
    box-shadow: none;
  }
  a { color: var(--text); }
  h2 { break-after: avoid; }
}