/* ============================================================
   sharedBeat — content page styles
   Shared by legal documents, news, and informative pages.
   Pure CSS, no build step. Matches the landing-page brand.
   ============================================================ */

:root {
  --ink:#0A0A0B; --surface:#141416; --surface-2:#1C1C1F;
  --border:#23232A; --border-2:#2E2E36;
  --tx-1:#F2F2F4; --tx-2:#B4B4BD; --tx-3:#6B6B74;
  --blue:#3B82F6; --blue-soft:#60A5FA;
  --blue-faint:rgba(59,130,246,0.16); --blue-border:rgba(59,130,246,0.34);
  --amber:#D97706; --amber-ring:rgba(217,119,6,0.36);
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { margin:0; }
body {
  background:var(--ink); color:var(--tx-1); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.6;
}
::selection { background:var(--blue); color:#fff; }
a { color:var(--blue-soft); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--blue-soft); outline-offset:3px; border-radius:6px; }

.skip-link {
  position:absolute; left:16px; top:-48px; z-index:200;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:14px; font-weight:600; transition:top .2s ease;
}
.skip-link:focus { top:16px; }

/* ───────── Header ───────── */
.site-header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  background:rgba(10,10,11,0.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.logo { display:inline-flex; align-items:center; gap:11px; }
.logo:hover { text-decoration:none; }
.logo .mark { width:30px; height:30px; flex:none; }
.wordmark {
  font-weight:700; letter-spacing:-0.03em; font-size:19px;
  white-space:nowrap; color:var(--tx-1);
}
.wordmark .b { color:var(--blue); }
.pill {
  display:inline-flex; align-items:center; height:40px; padding:0 18px;
  border-radius:999px; font-size:14px; font-weight:600; letter-spacing:-0.1px;
  background:var(--blue); color:#fff; white-space:nowrap;
  transition:transform .15s ease, filter .15s ease;
}
.pill:hover { transform:translateY(-1px); filter:brightness(1.08); text-decoration:none; }

/* ───────── Document shell ───────── */
.doc { max-width:760px; margin:0 auto; padding:clamp(36px,6vw,72px) clamp(20px,5vw,32px) 24px; }

.crumb {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; letter-spacing:.4px;
  color:var(--tx-3); margin-bottom:30px;
}
.crumb:hover { color:var(--tx-2); text-decoration:none; }
.crumb svg { width:13px; height:13px; }

.doc-head { border-bottom:1px solid var(--border); padding-bottom:28px; margin-bottom:8px; }
.eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--blue); margin:0 0 16px;
}
.doc-head h1 {
  font-size:clamp(30px,5vw,46px); font-weight:700; letter-spacing:-0.035em;
  line-height:1.06; margin:0; color:var(--tx-1); text-wrap:balance;
}
.doc-meta {
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin-top:20px; font-family:var(--mono); font-size:12.5px; color:var(--tx-3);
  letter-spacing:.2px;
}
.doc-meta .dot { color:var(--border-2); }

/* ───────── Prose (rendered markdown) ───────── */
.prose { padding-top:14px; color:var(--tx-2); font-size:16.5px; }
.prose > *:first-child { margin-top:0; }
.prose h2 {
  font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:-0.02em;
  color:var(--tx-1); margin:48px 0 16px; line-height:1.2; scroll-margin-top:90px;
}
.prose h3 {
  font-size:18.5px; font-weight:600; letter-spacing:-0.01em;
  color:var(--tx-1); margin:32px 0 12px; scroll-margin-top:90px;
}
.prose p { margin:0 0 18px; text-wrap:pretty; }
.prose strong { color:var(--tx-1); font-weight:600; }
.prose a { font-weight:500; }
.prose ul, .prose ol { margin:0 0 18px; padding-left:24px; }
.prose li { margin:0 0 9px; padding-left:4px; }
.prose li::marker { color:var(--tx-3); }
.prose ul li::marker { color:var(--blue); }

.prose code {
  font-family:var(--mono); font-size:0.86em; color:var(--blue-soft);
  background:var(--surface-2); border:1px solid var(--border);
  padding:1.5px 6px; border-radius:6px;
}

.prose hr { border:0; border-top:1px solid var(--border); margin:40px 0; }

/* Media / figures */
.prose figure.media { margin:28px 0; }
.prose figure.media img {
  width:100%; border-radius:14px; border:1px solid var(--border);
  background:var(--surface);
}
.prose figure.media figcaption {
  margin-top:11px; font-size:13.5px; color:var(--tx-3);
  text-align:center; text-wrap:pretty;
}

/* Blockquote / callout */
.prose blockquote {
  margin:24px 0; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--amber); border-radius:12px;
  color:var(--tx-2); font-size:15.5px;
}
.prose blockquote p { margin:0 0 10px; }
.prose blockquote p:last-child { margin:0; }
.prose blockquote strong { color:var(--tx-1); }

/* Tables */
.table-wrap {
  margin:0 0 22px; overflow-x:auto; border:1px solid var(--border);
  border-radius:12px; -webkit-overflow-scrolling:touch;
}
.prose table { width:100%; border-collapse:collapse; font-size:14px; min-width:480px; }
.prose thead th {
  text-align:left; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.8px; text-transform:uppercase; color:var(--tx-3);
  background:var(--surface); padding:12px 16px; border-bottom:1px solid var(--border-2);
  white-space:nowrap;
}
.prose tbody td {
  padding:13px 16px; vertical-align:top; color:var(--tx-2);
  border-bottom:1px solid var(--border); line-height:1.5;
}
.prose tbody tr:last-child td { border-bottom:0; }
.prose tbody tr:nth-child(even) td { background:rgba(255,255,255,0.012); }
.prose td strong { color:var(--tx-1); }

/* ───────── Related docs ───────── */
.doc-related { max-width:760px; margin:8px auto 0; padding:36px clamp(20px,5vw,32px) 0; }
.doc-related .rel-label {
  font-family:var(--mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--tx-3); margin:0 0 18px;
}
.doc-related .rel-grid { display:flex; flex-wrap:wrap; gap:10px; }
.doc-related .rel-grid a {
  display:inline-flex; align-items:center; height:38px; padding:0 16px;
  border-radius:999px; background:var(--surface); border:1px solid var(--border-2);
  color:var(--tx-2); font-size:13.5px; font-weight:500; transition:border-color .15s ease, color .15s ease;
}
.doc-related .rel-grid a:hover { border-color:var(--blue-border); color:var(--tx-1); text-decoration:none; }

/* ───────── Footer ───────── */
.site-footer { background:var(--ink); padding:42px 0 52px; border-top:1px solid var(--border); margin-top:48px; }
.foot-row {
  max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.foot-links { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.foot-links a { font-size:14px; color:var(--tx-2); }
.foot-links a:hover { color:var(--tx-1); text-decoration:none; }
.copy { font-family:var(--mono); font-size:12px; color:var(--tx-3); letter-spacing:.2px; }

@media (max-width:560px) {
  .foot-row { flex-direction:column; align-items:flex-start; gap:18px; }
  .prose { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }