/* privacy.css — the /privacy page's stylesheet.
 *
 * R5-04 (#442): these rules lived in an inline <style> block in privacy/index.html while `_headers` applies
 * `style-src 'self'` (no 'unsafe-inline') to `/*` — every path, not just the root. So the browser refused the
 * whole block and shipped the privacy policy UNSTYLED: no wordmark lockup, no type scale, no callouts.
 *
 * How it got there: R4-21 (#368) dropped 'unsafe-inline' after verifying index.html — the one page anyone
 * looked at — and the `_headers` comment then asserted, as settled fact, that "the site never had an inline
 * <style> block". True of index.html; false one directory over. A sample became a document-wide claim.
 * The sweep now exists as a test (tests/csp-coherence.test.mjs) instead of a sentence.
 *
 * Kept separate from styles.css deliberately: this page redefines `.wm-hero` and friends at its own scale,
 * and styles.css holds the LOCKED wordmark geometry (CLAUDE.md) that must not be re-derived here.
 * Cache-busted via ?v=N in privacy/index.html + a no-cache rule in _headers — bump N on every change.
 */
  :root{
    --blue:#2f57d4; --postal:#2f57d4; --terra:#b9663f; --cream:#f4ede0; --paper:#fbf8f1;
    --ink:#211c17; --muted:#6b6357;
    --display:'Space Grotesk',system-ui,sans-serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'Space Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--body)}
  /* airmail slash strip, echoing the app's flight bar */
  .airmail{height:6px;background:repeating-linear-gradient(-45deg,
    var(--terra) 0 8px, var(--cream) 8px 16px, var(--blue) 16px 24px, var(--cream) 24px 32px)}
  header{background:var(--blue);color:var(--cream);padding:40px 22px 34px}
  .wrap{max-width:720px;margin:0 auto;padding:0 22px}
  header .wrap{padding:0}
  /* Spinbound record-as-"o" wordmark — the lockup copied verbatim from the marketing site (styles.css),
     sized down for a page header; --hdr = postal blue so the record's label reads as a header "porthole". */
  .wm{font-family:var(--display);font-weight:600;letter-spacing:-.03em;color:var(--cream);display:inline-flex;align-items:center;line-height:1;white-space:nowrap}
  .wm svg{flex:none;margin:0 -1px;transform:translateY(2px)}
  .wm-hero{--hdr:var(--postal);font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:center;position:relative;color:var(--cream);font-size:34px;margin:0 0 16px}
  .wm-hero>span{position:relative;z-index:2}
  .wm-hero>span.wm-o{position:relative;display:inline-block;height:1px;width:.5321em;z-index:1}
  .wm-hero .wm-hold{position:absolute;left:50%;top:50%;width:1.0705em;height:1.0705em;z-index:1;transform:translate(calc(-50% + .0224em + 1px),calc(-50% + .0865em))}
  .wm-hero .wm-rec{display:block;width:100%;height:100%;overflow:visible}
  .wm-hero .wm-label{fill:var(--hdr)}
  h1{margin:0;font-size:30px;line-height:1.2;font-family:var(--display);font-weight:600;letter-spacing:-.02em}
  header p{margin:8px 0 0;color:rgba(244,237,224,.82);font-size:13px;
    font-family:var(--mono);letter-spacing:.02em}
  main.wrap{padding:40px 22px 60px}   /* element+class beats .wrap's padding:0 22px, so the top gap survives */
  h2{font-size:20px;margin:34px 0 8px;color:var(--blue);font-family:var(--display);font-weight:600;letter-spacing:-.01em}
  p{margin:0 0 14px}
  strong{color:var(--ink)}
  ul{margin:0 0 16px;padding-left:22px}
  li{margin:0 0 8px}
  code{background:#efe9dc;border-radius:4px;padding:1px 5px;font-size:.85em;font-family:var(--mono)}
  .lede{font-size:17px}
  .callout{background:var(--cream);border-left:4px solid var(--terra);
    border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 18px}
  a{color:var(--blue)}
  footer{border-top:1px solid #e6ddcb;padding:22px 0 40px;color:var(--muted);font-size:12px;font-family:var(--mono)}
  footer a{color:var(--blue);text-decoration:none;font-weight:600}