/* Shared by terms.html, privacy.html and refunds.html. Plain on purpose: readable text on
   the app's own dark surface, real headings and landmarks, and no script.

   One template across all five legal pages in this repo (these three, plus the landing
   site's own privacy.html/terms.html under landing/site/ -- a separate deployable site, so
   its legal.css is a hand-kept copy of this one in the landing's own colours, not a shared
   file). The convention, so an edit to one doesn't quietly drift from the others:
     - Same skeleton: <header> back-link + <h1> + "Last updated" meta, <main>, <footer>.
     - Terms pages number their sections ("1. Who we are" ...); Privacy and Refunds pages
       don't -- an unheaded intro paragraph or .box, then named <h2> sections.
     - Footer cross-links, in this fixed order, omitting whichever page doesn't exist on that
       site and never linking to itself: Privacy, Terms, Refunds.
     - A still-unfilled fact is a <span class="fill">, visible on purpose, never silently
       guessed at -- and a one-line DRAFT comment in <head> saying what's still owner-only. */
:root {
  --bg: #0c0c0e;
  --surface: #141417;
  --text: #f2f3f5;
  --muted: rgba(242, 243, 245, 0.72);
  --accent: #4d9dff;
  --border: rgba(242, 243, 245, 0.12);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 'Segoe UI Variable Display', -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;
}
header, main, footer { max-width: 720px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 28px; }
.back { display: inline-block; margin-bottom: 20px; }
h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.25; }
h2 { margin: 34px 0 6px; font-size: 19px; line-height: 1.3; }
p, ul { margin: 0 0 12px; }
ul, ol { padding-left: 22px; }
code { font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: 0.9em; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
li { margin: 4px 0; }
.meta { color: var(--muted); font-size: 14px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* A placeholder still to be filled in by the owner. Visible on purpose. */
.fill { background: rgba(255, 210, 60, 0.18); color: #ffd23c; padding: 0 4px; border-radius: 3px; }
.box { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; }
footer { margin-top: 40px; padding-bottom: 40px; color: var(--muted); font-size: 14px; }