/* The Arsenal — public legal documents (/legal/, /legal/terms/, …).
   Self-contained for the same reason landing/landing.css is: src/css/variables.css
   still ships the Classic warm/gold theme, and the identity used out here (white
   canvas, indigo primary, Inter) is not merged yet. Keeping our own token copy
   means these pages render correctly today and don't drift when the redesign lands.

   Shared by all five legal pages, including the nested ones (/legal/terms/ etc.),
   which is why every url() below is ABSOLUTE (/src/fonts/…) rather than relative
   like landing.css uses. A relative path here would resolve against this file's
   directory and quietly 404 the moment anyone moved it. No JS on any of these
   pages and no third-party requests — CSP is default-src 'self'. */

/* ── Inter ──────────────────────────────────────────────────────────────────
   Same subset files as landing.css (generated by tools/fetch-fonts.mjs). Only
   latin + latin-ext — these pages are English-only. Regenerate upstream, not here. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Kept byte-identical to landing.css so the two public surfaces can't drift
   apart visually. If you change a value there, change it here. */

:root {
  --bg: #f7f8fb;
  --bg-warm: #f1f3f8;
  --surface: #ffffff;
  --border: #e4e7ee;
  --border-light: #edeff3;
  --text: #171a26;
  --text-muted: #5c6273;
  --text-dim: #8b90a0;
  --primary: #5b4ce0;
  --primary-hover: #4a3cc4;
  --primary-soft: rgba(91, 76, 224, 0.10);
  --amber-soft: rgba(217, 119, 6, 0.09);
  --amber-border: rgba(217, 119, 6, 0.30);

  --radius-card: 14px;
  --radius-control: 10px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);

  --wrap: 1120px;
  --doc: 760px;   /* narrower than --wrap: legal prose needs a reading measure */
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --bg-warm: #141721;
    --surface: #171a22;
    --border: #262a36;
    --border-light: #1f2330;
    --text: #e8eaf0;
    --text-muted: #9aa0b0;
    --text-dim: #6b7183;
    --primary: #7c6cf0;
    --primary-hover: #948aff;
    --primary-soft: rgba(124, 108, 240, 0.14);
    --amber-soft: rgba(251, 191, 36, 0.10);
    --amber-border: rgba(251, 191, 36, 0.28);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Nav / footer ───────────────────────────────────────────────────────────
   Same markup and class names as landing/index.html so the legal pages read as
   the same site. Not sticky here — a long legal document doesn't need a bar
   following it down the page. */

.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 66px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav-brand:hover { color: var(--text); }
.nav-brand img { width: 28px; height: 28px; object-fit: contain; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-actions a { color: var(--text-muted); font-weight: 500; font-size: 15px; }
.nav-actions a:hover { color: var(--text); }

.footer { border-top: 1px solid var(--border); padding: 32px 0; margin-top: 72px; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-dim);
}
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-brand img { width: 20px; height: 20px; object-fit: contain; opacity: 0.75; }
.footer a { color: var(--text-muted); font-weight: 500; }
.footer a:hover { color: var(--text); }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── Document shell ─────────────────────────────────────────────────────── */

.doc {
  max-width: var(--doc);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
}

/* Breadcrumb back to the hub. Every sub-page gets one — someone arriving from a
   deep link (a Google consent screen, a pasted URL) has no other way up. */
.doc-back {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.doc-back:hover { color: var(--text); }

.doc h1 {
  margin: 18px 0 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* "Last updated" line. The date printed here is the document's version, and it
   MUST match the `version` string for this document in src/js/legal-config.js —
   test/legal.cases.mjs asserts the two agree. Bumping one without the other
   either re-prompts every user for a document that didn't change, or silently
   fails to re-prompt for one that did. */
.doc-updated {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--text-dim);
}

.doc-lede {
  margin: 26px 0 0;
  font-size: 17px;
  color: var(--text-muted);
}

.doc-body { margin-top: 40px; }

.doc-body h2 {
  margin: 48px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc-body h3 {
  margin: 30px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.doc-body p { margin: 16px 0 0; color: var(--text-muted); }
.doc-body ul,
.doc-body ol { margin: 16px 0 0; padding-left: 22px; color: var(--text-muted); }
.doc-body li { margin-top: 8px; }
.doc-body li > ul { margin-top: 8px; }

.doc-body strong { font-weight: 600; color: var(--text); }

/* Section anchors are load-bearing — /legal/terms/#underwriting is linked from
   the engine results block inside the app. scroll-margin keeps the heading off
   the top edge when a deep link lands. */
.doc-body h2[id] { scroll-margin-top: 24px; }

/* Definition-ish rows used by the privacy page's data tables and the
   subprocessor list. A real <table> is heavier than these need to be and wraps
   badly on a phone. */
.doc-rows { margin: 18px 0 0; border-top: 1px solid var(--border-light); }
.doc-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 15px;
}
.doc-row dt { font-weight: 600; color: var(--text); }
.doc-row dd { margin: 0; color: var(--text-muted); }

/* Callout. Used sparingly — for the things a reader would be harmed by
   skimming past (the BAA template's "not executed" banner, the beta page's
   real-client-data warning). */
.doc-note {
  margin: 26px 0 0;
  padding: 16px 18px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-control);
  font-size: 15px;
  color: var(--text);
}
.doc-note p { color: var(--text); }
.doc-note p:first-child { margin-top: 0; }

/* Plain-language summary block at the top of a document. */
.doc-summary {
  margin: 26px 0 0;
  padding: 18px 20px;
  background: var(--primary-soft);
  border-radius: var(--radius-control);
  font-size: 15px;
}
.doc-summary p { color: var(--text); margin-top: 12px; }
.doc-summary p:first-child { margin-top: 0; }

/* Closing block: contact details and the counsel-review disclaimer. */
.doc-foot {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-dim);
}
.doc-foot p { margin-top: 10px; }
.doc-foot p:first-child { margin-top: 0; }

/* ── Hub (/legal/) ──────────────────────────────────────────────────────── */

.doc-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.doc-card {
  display: block;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.doc-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.doc-card h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.doc-card p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-muted); }
.doc-card .doc-card-meta { margin-top: 12px; font-size: 13px; color: var(--text-dim); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  .doc { padding-top: 40px; }
  .doc h1 { font-size: 27px; }
  .doc-body h2 { font-size: 19px; }

  .doc-index { grid-template-columns: 1fr; }
  .doc-row { grid-template-columns: 1fr; gap: 4px; }

  .footer-inner { justify-content: center; text-align: center; }
}