/* Shared chrome for the standalone prose pages: /security, /privacy, /terms.
 *
 * These pages carry the canonical md-theme block inline (drift-synced by
 * scripts/sync-tokens.js) and then link this sheet, which applies the same dark
 * marketing palette the landing commits to and adds the prose layout.
 *
 * Like landing/index.html this is a bespoke dark marketing surface and is not
 * subject to the raw-value audit — it is deliberately NOT registered as a strict
 * token surface. Colours below intentionally mirror landing/index.html's
 * overrides; keep them in step by hand if that palette ever moves.
 */

:root {
  --md-teal-ink: #6fd0e6;
  --md-teal-wash: rgba(33, 153, 181, 0.14);
  --md-paper: #0a0a0c;
  --md-surface: #151518;
  --md-linen: #101013;
  --md-line: #26262b;
  --md-ink: #f5f5f7;
  --md-muted: #9a9aa2;
  --md-cta-text: #ffffff;
  --md-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.55);
  --md-focus: 0 0 0 3px rgba(94, 195, 215, 0.4);
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal; font-weight: 100 900; font-display: optional;
  src: url(/assets/fonts/InterVariable.woff2) format("woff2");
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--md-font-marketing);
  font-feature-settings: "cv01", "ss03", "zero";
  font-size: var(--md-text-body); line-height: var(--md-lh-body);
  background: var(--md-paper); color: var(--md-ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--md-s4); }
a { color: var(--md-accent-ink); }
:focus-visible { outline: none; box-shadow: var(--md-focus); border-radius: var(--md-r-control); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--md-surface);
  color: var(--md-ink); padding: var(--md-s2) var(--md-s3);
  border-radius: var(--md-r-control); z-index: 99; }
.skip:focus { left: var(--md-s3); top: var(--md-s3); }

/* --- nav / footer: the landing's chrome, trimmed to a back-link --------- */
header.nav { position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--md-paper) 78%, transparent);
  border-bottom: 1px solid var(--md-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: var(--md-s4); }
.brand { display: flex; align-items: center; color: inherit; text-decoration: none; }
.brand .mark { display: inline-flex; width: 300px; max-width: 60vw; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--md-muted); text-decoration: none;
  font-size: var(--md-text-label); font-weight: var(--md-w-medium); }
.nav-links a:hover { color: var(--md-ink); }
@media (max-width: 620px) { .nav-links a { display: none; } }

/* The footer styles itself: they ship inside the synced md-footer block
   (design/footer.html) so markup and styling cannot drift apart. */

/* --- the document ------------------------------------------------------- */
main { padding-top: var(--md-s5); }
.doc { max-width: 720px; margin: 0 auto; padding: 0 var(--md-s4); }
.kicker { display: inline-block; font-size: var(--md-text-caption);
  font-weight: var(--md-w-semi); letter-spacing: var(--md-track-wide);
  text-transform: uppercase; color: var(--md-accent-ink);
  background: var(--md-teal-wash); padding: var(--md-s1) var(--md-s2);
  border-radius: var(--md-r-pill); margin-bottom: var(--md-s3); }
.doc h1 { margin: 0 0 var(--md-s3); font-size: var(--md-text-title);
  font-weight: var(--md-w-semi); letter-spacing: var(--md-track-display);
  line-height: var(--md-lh-tight); }
.doc .lede { font-size: var(--md-text-lede); color: var(--md-muted);
  margin: 0 0 var(--md-s4); }
.doc .stamp { font-size: var(--md-text-label); color: var(--md-muted);
  padding-bottom: var(--md-s4); border-bottom: 1px solid var(--md-line);
  margin-bottom: var(--md-s5); }
.doc h2 { margin: var(--md-s5) 0 var(--md-s3); font-size: var(--md-text-heading);
  font-weight: var(--md-w-semi); letter-spacing: var(--md-track-heading);
  scroll-margin-top: 88px; }
.doc h3 { margin: var(--md-s4) 0 var(--md-s2); font-size: var(--md-text-body);
  font-weight: var(--md-w-semi); }
.doc p { margin: 0 0 var(--md-s3); }
.doc ul, .doc ol { margin: 0 0 var(--md-s3); padding-left: var(--md-s4); }
.doc li { margin-bottom: var(--md-s2); }
.doc strong { font-weight: var(--md-w-semi); color: var(--md-ink); }

/* A statement the reader should not miss (disclaimers, liability caps). */
.doc .callout { border: 1px solid var(--md-line); background: var(--md-surface);
  border-radius: var(--md-r-card); padding: var(--md-s4);
  margin: 0 0 var(--md-s4); box-shadow: var(--md-shadow-card);
  clip-path: var(--md-facet-cut); }
.doc .callout p:last-child { margin-bottom: 0; }
.doc .callout.legal { text-transform: uppercase; font-size: var(--md-text-label);
  letter-spacing: 0.01em; color: var(--md-muted); }
.doc .callout.legal strong { color: var(--md-ink); }

/* The plain-English gloss beside a clause — never a substitute for it. */
.doc .plain { border-left: 2px solid var(--md-accent); padding-left: var(--md-s3);
  color: var(--md-muted); margin: 0 0 var(--md-s4); }

.doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--md-s4);
  font-size: var(--md-text-label); }
.doc thead th { text-align: left; font-weight: var(--md-w-semi);
  border-bottom: 1px solid var(--md-line); padding: var(--md-s2) var(--md-s2) var(--md-s2) 0; }
.doc td { border-bottom: 1px solid var(--md-line); padding: var(--md-s2) var(--md-s2) var(--md-s2) 0;
  vertical-align: top; color: var(--md-muted); }
.doc td:first-child { color: var(--md-ink); }
.table-scroll { overflow-x: auto; }

.toc { border: 1px solid var(--md-line); border-radius: var(--md-r-card);
  padding: var(--md-s4); margin-bottom: var(--md-s5); background: var(--md-linen); }
.toc h2 { margin: 0 0 var(--md-s2); font-size: var(--md-text-label);
  text-transform: uppercase; letter-spacing: var(--md-track-wide); color: var(--md-muted); }
.toc ol { margin: 0; padding-left: var(--md-s4); font-size: var(--md-text-label); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  main { padding-top: var(--md-s4); }
  .doc h2 { margin-top: var(--md-s4); }
}