/* MetricsPro — legal documents and the 404 page.
 *
 * SCOPE: this file styles ONLY /legal/*.html and /404.html. The homepage moved to home.css when
 * the site was rebuilt, so nothing here can affect it — which is what makes this file safe to
 * change without re-testing nine pages.
 *
 * THE TOKEN BLOCK BELOW IS DUPLICATED FROM home.css ON PURPOSE. Two static stylesheets sharing a
 * third file would cost every legal page an extra request to save one copy of forty lines. The
 * cost of the copy is drift, so check-before-launch.sh compares the two blocks and fails when they
 * disagree — the duplication is enforced, not hoped for.
 *
 * READING SURFACE: the document column comes from PADDING, never margin. `margin: 0 0 10px` on a
 * heading is a shorthand that silently resets margin-left/right:auto, which is how an earlier
 * version put every heading against the page edge while its boxes stayed centred. Padding cannot
 * be reset that way by a shorthand elsewhere.
 */

:root{
  --ground:#f4f8f9; --surface:#ffffff; --surface-2:#eaf1f4;
  --ink:#0d1b26; --ink-2:#48626f; --ink-3:#7a919d;
  --line:#dbe5ea; --line-2:#ecf2f5;
  --amber:#c9770f; --amber-bg:#fdf2df; --amber-line:#f0cf9a;
  --green:#217a5e; --green-bg:#e2f1ea; --green-line:#9dcfba;
  --red:#b03d22; --red-bg:#fbe8e2;
  --lift:0 1px 2px rgba(13,27,38,.05), 0 8px 24px -14px rgba(13,27,38,.22);
}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
  --ground:#0b141a; --surface:#111d25; --surface-2:#16242d;
  --ink:#e7eef1; --ink-2:#9db2bd; --ink-3:#7a919d;
  --line:#22343e; --line-2:#1a2a33;
  --amber:#f0a339; --amber-bg:#2b2011; --amber-line:#5c451f;
  --green:#57bf99; --green-bg:#11291f; --green-line:#255540;
  --red:#e2795a; --red-bg:#2d1710;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --ground:#0b141a; --surface:#111d25; --surface-2:#16242d;
  --ink:#e7eef1; --ink-2:#9db2bd; --ink-3:#7a919d;
  --line:#22343e; --line-2:#1a2a33;
  --amber:#f0a339; --amber-bg:#2b2011; --amber-line:#5c451f;
  --green:#57bf99; --green-bg:#11291f; --green-line:#255540;
  --red:#e2795a; --red-bg:#2d1710;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16.5px/1.7 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mpw-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* ── chrome, matching the homepage ─────────────────────────────────────────── */
.mpw-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mpw-header-in{display:flex;align-items:center;gap:26px;height:66px}
.mpw-logo{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:20.5px;
  text-decoration:none;color:var(--ink);letter-spacing:-.018em;
  display:inline-flex;align-items:center;gap:10px}
/* ── The mark ───────────────────────────────────────────────────────────────
   Inlined in the page rather than loaded as an image file, so it takes its two
   colours from the theme tokens and follows the page into dark mode. A linked
   <img> could not do that. favicon.svg carries its own copy of the colours,
   because a file loaded by the browser chrome has no CSS context to inherit. */
.mark{width:26px;height:26px;flex:none;display:block}
.mpw-logo span{display:inline}
.mk-a{fill:var(--amber)} .mk-b{fill:var(--green)}

.mpw-logo em{font-style:normal;color:var(--amber)}
.mpw-header-nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.mpw-header-nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500}
.mpw-header-nav a:hover{color:var(--ink)}
.mpw-header-nav .mpw-btn{color:var(--ink)}

.mpw-btn{display:inline-block;text-decoration:none;font:600 15px/1 "IBM Plex Sans",sans-serif;
  padding:12px 20px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
.mpw-btn-primary{background:var(--amber);color:#1a1204;border-color:var(--amber)}
.mpw-btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.mpw-btn-sm{padding:9px 15px;font-size:14px}
.mpw-btn:hover{filter:brightness(.96)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}

/* ── the document ──────────────────────────────────────────────────────────── */
.mpw-doc{background:var(--surface);border-bottom:1px solid var(--line);
  padding:56px max(24px, calc((100% - 72ch) / 2)) 80px}
.mpw-doc h1{font-family:Archivo,system-ui,sans-serif;font-size:clamp(29px,4vw,42px);font-weight:800;
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0 0 12px}
.mpw-doc h2{font-family:Archivo,system-ui,sans-serif;font-size:23px;font-weight:700;line-height:1.2;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line-2);text-wrap:balance}
.mpw-doc h3{font-family:Archivo,system-ui,sans-serif;font-size:18.5px;font-weight:700;margin:28px 0 8px}
.mpw-doc p{margin:0 0 15px}
.mpw-doc ul,.mpw-doc ol{margin:0 0 16px;padding-left:24px}
.mpw-doc li{margin-bottom:8px}
.mpw-doc strong{font-weight:600;color:var(--ink)}
.mpw-doc a{color:var(--amber);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
.mpw-doc a:hover{border-bottom-color:var(--amber)}
.mpw-doc-meta{font:500 13px/1.6 "IBM Plex Mono",monospace;color:var(--ink-3);margin:0 0 30px}

/* Callout: the clause the reader must not skim past. */
.mpw-doc-note{background:var(--amber-bg);border:1px solid var(--amber-line);border-left-width:3px;
  border-radius:6px;padding:16px 20px;margin:0 0 30px}
.mpw-doc-note p{margin:0;font-size:15.5px}

/* Contents. */
.mpw-doc-toc{background:var(--ground);border:1px solid var(--line);border-radius:8px;
  padding:20px 24px;margin:0 0 34px}
.mpw-doc-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
@media(max-width:640px){.mpw-doc-toc ol{columns:1}}
.mpw-doc-toc li{margin-bottom:6px;font-size:14.5px}
.mpw-doc-toc a{color:var(--ink-2);border-bottom:0}
.mpw-doc-toc a:hover{color:var(--amber)}

/* Tables — the retention schedules and sub-processor lists. */
.mpw-doc-scroll{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:8px}
.mpw-doc table{border-collapse:collapse;width:100%;background:var(--surface);min-width:520px}
.mpw-doc th{text-align:left;font:600 11.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--ground)}
.mpw-doc td{padding:13px 16px;font-size:15px;vertical-align:top;border-bottom:1px solid var(--line-2)}
.mpw-doc tr:last-child td{border-bottom:0}

/* The all-caps clause law requires be conspicuous. Not the homepage capability grid — that is
   .mpw-caps in home.css, and styling the wrong one flattened a whole section once. */
.mpw-caps-clause{text-transform:uppercase;font-size:14px;letter-spacing:.01em;
  background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:16px 20px;margin:0 0 20px}
.mpw-caps-clause p{margin:0 0 10px}
.mpw-caps-clause p:last-child{margin:0}

/* Footer nav across the documents. */
.mpw-doc-nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line)}
.mpw-doc-nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;border-bottom:0}
.mpw-doc-nav a:hover{color:var(--amber)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}