/* Shared styles for the standalone document pages: /privacy, /terms, /support.
   The :root token blocks are lifted verbatim from index.html so the document
   pages and the marketing page cannot drift apart on colour. Extracted here
   when the second document page landed, rather than copied a third time. */

:root {
  color-scheme: light;
  --plane: #ebecea;
  --shell: #ffffff;
  --content: #f7f8f7;
  --surface-1: #ffffff;
  --surface-2: #f2f4f2;
  --surface-3: #e9ece9;
  --ink: #101511;
  --ink-2: #5c6761;
  --ink-3: #949c97;
  --line: rgba(16, 21, 17, .09);
  --line-2: rgba(16, 21, 17, .16);
  --ghost: rgba(16, 21, 17, .045);
  --shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px rgba(16, 24, 20, .05);
  --shadow-lg: 0 24px 60px rgba(16, 24, 20, .16);
  --g900: #0f2c1c;
  --g800: #153b26;
  --g700: #1c5335;
  --g600: #276b45;
  --g500: #3d875a;
  --g400: #6ba887;
  --g300: #a2cab3;
  --g200: #cde4d6;
  --g100: #eaf4ee;
  --brand: #1c5335;
  --brand-ink: #ffffff;
  --hatch: #d5d9d6;
  --hatch-bg: #ffffff;
  --c1: #008300;
  --c2: #2a78d6;
  --c3: #eb6834;
  --c4: #1baf7a;
  --c5: #4a3aa7;
  --c6: #eda100;
  --c7: #e87ba4;
  --c8: #e34948;
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --good-text: #146c32;
  --warning-text: #8a5a00;
  --critical-text: #b32b2b;
  --good-bg: rgba(20, 108, 50, .10);
  --warning-bg: rgba(250, 178, 25, .18);
  --critical-bg: rgba(208, 59, 59, .10);
  --r-shell: 30px;
  --r-card: 20px;
  --r-sm: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
}
@media (prefers-color-scheme:dark) {
  :root:where(:not([data-theme=light])) {
    color-scheme: dark;
    --plane: #080908;
    --shell: #111412;
    --content: #0e100f;
    --surface-1: #161917;
    --surface-2: #1e221f;
    --surface-3: #262b27;
    --ink: #ffffff;
    --ink-2: #b7c0ba;
    --ink-3: #868e89;
    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .16);
    --ghost: rgba(255, 255, 255, .06);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .32);
    --g900: #0d2718;
    --g800: #12361f;
    --g700: #2b6f49;
    --g600: #357f55;
    --g500: #479267;
    --g400: #6fae89;
    --g300: #9ccbb1;
    --g200: #2a4636;
    --g100: #1b2e23;
    --brand: #2f7a4f;
    --hatch: #333935;
    --hatch-bg: #161917;
    --c1: #008300;
    --c2: #3987e5;
    --c3: #d95926;
    --c4: #199e70;
    --c5: #9085e9;
    --c6: #c98500;
    --c7: #d55181;
    --c8: #e66767;
    --good-text: #4cc46c;
    --warning-text: #fab219;
    --critical-text: #e66767;
    --good-bg: rgba(76, 196, 108, .14)
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --plane: #080908;
  --shell: #111412;
  --content: #0e100f;
  --surface-1: #161917;
  --surface-2: #1e221f;
  --surface-3: #262b27;
  --ink: #ffffff;
  --ink-2: #b7c0ba;
  --ink-3: #868e89;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --ghost: rgba(255, 255, 255, .06);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .32);
  --g900: #0d2718;
  --g800: #12361f;
  --g700: #2b6f49;
  --g600: #357f55;
  --g500: #479267;
  --g400: #6fae89;
  --g300: #9ccbb1;
  --g200: #2a4636;
  --g100: #1b2e23;
  --brand: #2f7a4f;
  --hatch: #333935;
  --hatch-bg: #161917;
  --c1: #008300;
  --c2: #3987e5;
  --c3: #d95926;
  --c4: #199e70;
  --c5: #9085e9;
  --c6: #c98500;
  --c7: #d55181;
  --c8: #e66767;
  --good-text: #4cc46c;
  --warning-text: #fab219;
  --critical-text: #e66767;
  --good-bg: rgba(76, 196, 108, .14)
}

/* ── Document layout ───────────────────────────────────────────────────────
   The tokens above are lifted verbatim from index.html so this page and the
   marketing page cannot drift apart on colour. Everything below is specific
   to a long-form legal document: one column, generous measure, no app shell. */

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  font-family: var(--font);
  background: var(--plane);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 760px; margin: 0 auto; padding: 0 22px 96px }

/* Header ------------------------------------------------------------------ */
.masthead {
  display: flex; align-items: center; gap: 11px;
  padding: 26px 0 0;
}
.masthead img { width: 34px; height: 34px; border-radius: 9px; display: block }
.masthead a {
  font-weight: 650; font-size: 17px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.masthead a:hover { color: var(--brand) }

.doc-head { padding: 40px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 34px }
h1 {
  font-size: clamp(30px, 5vw, 40px); line-height: 1.12;
  letter-spacing: -.025em; font-weight: 680; margin: 0 0 16px;
}
.dates { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--ink-2); margin: 0 }
.dates b { font-weight: 620; color: var(--ink) }

/* Typography -------------------------------------------------------------- */
h2 {
  font-size: 21px; letter-spacing: -.015em; font-weight: 660;
  margin: 46px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0 }
h3 { font-size: 16.5px; font-weight: 640; margin: 30px 0 10px; color: var(--ink) }
p { margin: 0 0 15px; color: var(--ink-2) }
p strong, li strong, td strong { color: var(--ink); font-weight: 620 }
ul { margin: 0 0 15px; padding-left: 22px; color: var(--ink-2) }
li { margin-bottom: 7px }
a { color: var(--brand); text-underline-offset: 2px }

/* The lede, and the boxed summary ----------------------------------------- */
.lede { font-size: 17.5px; line-height: 1.55; color: var(--ink-2) }
.summary {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px 24px 8px; margin: 0 0 8px;
  box-shadow: var(--shadow);
}
.summary h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 15px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 640 }
.summary ul { margin-bottom: 16px }

/* Tables ------------------------------------------------------------------ */
.tbl-scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch }
table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; min-width: 460px;
}
th {
  text-align: left; font-weight: 620; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 12px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top }
tr:last-child td { border-bottom: 0 }

/* Callouts ---------------------------------------------------------------- */
.note {
  background: var(--ghost); border-left: 3px solid var(--g400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 15px 18px; margin: 0 0 20px;
}
.note p:last-child { margin-bottom: 0 }

/* UNRESOLVED — must not survive to production. Styled to be impossible to
   miss in review, and carrying a comment so a grep for TODO finds it too. */
.todo {
  background: var(--critical-bg); border: 1px dashed var(--critical);
  border-radius: var(--r-sm); padding: 14px 17px; margin: 0 0 20px;
  color: var(--critical-text); font-size: 14px; font-weight: 560;
}
.todo b { display: block; text-transform: uppercase; letter-spacing: .07em;
  font-size: 11.5px; margin-bottom: 5px }

/* Contact block ----------------------------------------------------------- */
address {
  font-style: normal; color: var(--ink-2); line-height: 1.75;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 24px; box-shadow: var(--shadow);
}
address b { color: var(--ink); font-weight: 620 }

footer {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
footer a { color: var(--ink-3) }
footer a:hover { color: var(--brand) }

@media (max-width: 560px) {
  body { font-size: 15.5px }
  .page { padding: 0 17px 72px }
  h2 { font-size: 19px }
}