/* Shared styling for the published legal pages (privacy.html, terms.html).
   Tokens deliberately mirror index.html so the documents read as part of the same site;
   a policy on a page that looks nothing like the app invites the question of whether it is real. */
:root {
  --ember: #c2410c; --ember-dark: #9c340a;
  --ink: #241a13; --muted: #6c5c50; --bg: #fbf5ef; --card: #fffdfb; --border: #e7dccf;
  --note: #fdf3e7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ember: #ff9e6b; --ember-dark: #ffb68a;
    --ink: #f1e6dc; --muted: #b1a094; --bg: #120c07; --card: #1c140d; --border: #2a2019;
    --note: #241a10;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Headings are link targets; without this the sticky-free layout still hides them under the
   viewport edge when you arrive from the contents list. */
h2, h3 { scroll-margin-top: 24px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---- Header ---------------------------------------------------------------------------- */
header { padding: 40px 0 24px; border-bottom: 1px solid var(--border); }
.home { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 600; }
.home:hover { color: var(--ember); }
h1 { font-size: clamp(28px, 5vw, 40px); margin: 18px 0 8px; letter-spacing: -0.5px; font-weight: 800; }
.effective { color: var(--muted); font-size: 15px; margin: 0; }
.lede { color: var(--muted); margin: 16px 0 0; max-width: 70ch; }

/* ---- Layout: contents beside the text on desktop, above it on narrow screens ------------ */
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;
  margin-top: 32px; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; gap: 24px; } }

nav.toc { position: sticky; top: 24px; font-size: 14.5px; }
@media (max-width: 860px) {
  nav.toc { position: static; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px 18px; }
}
nav.toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 10px; font-weight: 700; }
nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0 0 6px; }
nav.toc a { color: var(--muted); text-decoration: none; display: block; padding: 3px 0; }
nav.toc a:hover { color: var(--ember); }

/* ---- Body ------------------------------------------------------------------------------ */
main { max-width: 72ch; }          /* a comfortable measure; legal text is read, not skimmed */
main h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -0.2px; }
main h2:first-child { margin-top: 0; }
main h3 { font-size: 16.5px; margin: 26px 0 8px; color: var(--ink); }
main p, main li { font-size: 16px; }
main ul, main ol { padding-left: 22px; }
main li { margin-bottom: 6px; }
a { color: var(--ember); }

.note { background: var(--note); border: 1px solid var(--border); border-left: 3px solid var(--ember);
  border-radius: 10px; padding: 14px 16px; margin: 20px 0; }
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
/* Tables are the one thing that cannot reflow; let them scroll rather than break the layout. */
.table-scroll { overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
tbody tr:last-child td { border-bottom: none; }

footer { margin-top: 56px; padding: 24px 0 48px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }

@media print {
  nav.toc, .home { display: none; }
  .layout { display: block; }
  main { max-width: none; }
  body { background: #fff; color: #000; }
}