/* 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 light
 * marketing palette the landing commits to and adds the prose layout.
 *
 * Like landing/index.html this is a bespoke 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: #1b8fac;
  --md-teal-ink: #0d7089;
  --md-teal-bright: #1b8fac;
  --md-teal-wash: rgba(27, 143, 172, 0.1);
  --md-paper: #f5f5f7;
  --md-surface: #ffffff;
  --md-linen: #ffffff;
  --md-line: #dcdce1;
  --md-ink: #1d1d1f;
  --md-muted: #6e6e73;
  --md-cta-bg: #0e7f9b;
  --md-cta-text: #ffffff;
  --md-shadow-card: 0 1px 2px rgba(29, 29, 31, 0.06), 0 8px 20px -10px rgba(29, 29, 31, 0.1);
  --md-focus: 0 0 0 3px rgba(27, 143, 172, 0.35);
}

/* swap, not optional: "optional" allows roughly a 100ms block period and no swap
   period, so a font that arrives even slightly late is dropped for the whole page
   load. Locally that never happens and everything looks right; over the network it
   happened every time, and production rendered the hero in the system face while
   document.fonts happily reported the font as loaded. Every face here is
   preloaded, so the fallback window is short and worth the certainty. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal; font-weight: 100 900; font-display: swap;
  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); }
}