/* Shared styling for /privacy and /terms.
   ------------------------------------------------------------------
   These are plain documents, deliberately: no bundle, no framework, no
   JavaScript required to read a word of them. Google's OAuth reviewers fetch
   the privacy policy directly and a page that needs React to render its text
   is a page that can fail review — and a caregiver reading terms on hospital
   wifi should not be waiting on 1.3 MB of app.

   Tokens and type mirror about.html so the three pages feel like one site.
   Sizes are in rem throughout so the "Larger text" control actually moves
   them; px would ignore the root font size entirely. */

:root {
  --sage: #3a5d45;
  --sage2: #5c8d71;
  --cream: #faf6ed;
  --paper: #f4efe4;
  --ink: #1e1e1b;
  --sub: #5a5950;
  --faint: #8a887e;
  --line: #e3dfc2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sage); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--sage2);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

header.doc {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0 1.5rem;
}
header.doc .home {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .875rem; text-decoration: none;
}
header.doc img { height: 2.25rem; width: auto; }

h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
  margin-top: 1.25rem;
}
.updated { font-size: .8125rem; color: var(--faint); margin-top: .5rem; }

main { padding: 2.5rem 0 3.5rem; }
h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.3125rem; font-weight: 600; color: var(--sage);
  margin: 2.25rem 0 .5rem;
}
p, li { color: var(--sub); }
p { margin-bottom: .875rem; }
ul { margin: 0 0 .875rem 1.25rem; }
li { margin-bottom: .4375rem; }
strong, b { color: var(--ink); }

.callout {
  background: #fff; border: 1px solid var(--line);
  border-radius: 1rem; padding: 1rem 1.125rem; margin: 1.25rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* The one control on the page, matching about.html's. */
.font-toggle {
  position: fixed; top: .875rem; right: .875rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 2.875rem; padding: .5rem .875rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--sage);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 700; font-size: .8125rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.font-toggle .big { font-size: 1.15em; }

footer.doc {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 1.75rem 0;
  font-size: .8125rem; color: var(--faint);
}
footer.doc a { color: var(--sub); }