/* Shared styles for the legal documents (/license-agreement, /privacy) and the /terms, /status, /trust stub pages. */

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

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #0f172a;
  background: #fafafa;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px; }

.back {
  color: #0f766e;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.back:hover { color: #0d9488; }

h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 18px 0 8px;
}

.lede { color: #475569; font-size: 17px; margin: 0 0 32px; }

.placeholder {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 28px;
  color: #475569;
  font-size: 15px;
}
.placeholder strong { color: #0f172a; }
.placeholder h3 {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  margin: 18px 0 6px;
}
.placeholder ul { padding-left: 18px; }

/* Status-page pill (neutral grey — not "operational" until wired to a real probe). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f4f4f5;
  color: #475569;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 28px;
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #94a3b8;
}

footer {
  text-align: center;
  padding: 24px;
  color: #64748b;
  font-size: 13px;
  border-top: 1px solid #e4e4e7;
}

a { color: #0f766e; }

/* Status page is centered above the placeholder; everything else is left-aligned. */
.wrap.center { text-align: center; }
.wrap.center .placeholder { text-align: left; }

/* ── Legal documents (/license-agreement, /privacy) ─────────────────────── */
.legal { color: #334155; font-size: 15px; }
.legal .meta { color: #64748b; font-size: 13px; margin: -20px 0 28px; }
.legal .toc {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 36px;
}
.legal .toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 0 0 10px; }
.legal .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; font-size: 14px; }
.legal .toc li { break-inside: avoid; margin: 2px 0; }
/* Padded to a real target: 22 links sit one under another in this list, and
   bare text at ~17px leaves under half of WCAG 2.5.8's 24×24 minimum. The
   negative margin keeps the two-column list the same height it was. */
.legal .toc a { display: inline-block; padding: 5px 4px; margin: -5px -4px; text-decoration: none; }
.legal .toc a:hover { text-decoration: underline; }
.legal h2 {
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 40px 0 10px;
  padding-top: 8px;
  scroll-margin-top: 24px;
}
.legal h3 { color: #0f172a; font-size: 16px; font-weight: 700; margin: 22px 0 6px; scroll-margin-top: 24px; }
.legal h2 > span[id] { display: inline-block; scroll-margin-top: 24px; }
/* The six deep-linkable sub-sections (5.2, 6.1, 6.4, 7.7, 14.2, 17.3) are
   paragraphs, not headings, so they need the offset too — without it a link
   to the liability cap lands with the text flush against the viewport edge. */
.legal p[id] { scroll-margin-top: 24px; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin: 4px 0; }
.legal strong { color: #0f172a; }
/* Conspicuousness for the operative CLAUSE of a disclaimer, never a whole
   paragraph (deep review 2026-09-09 #30): a wall of uppercase is read more
   slowly by everyone, which is the opposite of conspicuous. The tracking
   compensates for the lost word-shape cues in the runs that remain. */
.legal .caps { text-transform: uppercase; letter-spacing: .01em; }
.legal .callout {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-left: 4px solid #0f766e;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 20px;
}
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #e4e4e7; }
.legal th { color: #0f172a; font-weight: 700; background: #f4f4f5; }
.legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal .table-wrap:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
@media (max-width: 560px) { .legal .toc ol { columns: 1; } }
.legal code { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 4px; padding: 1px 5px; }
/* The scroll hint tracks where each table ACTUALLY overflows, measured in the
   browser, not one blanket breakpoint. The 4-column sub-processor table needs
   381px and clips below 560; the 3-column roles table needs 326px and fits
   until the wrapper drops under it, which happens around 390. Announcing
   "scroll sideways" over a table that fits is noise — several screen readers
   read generated content aloud. */
/* The hint is generated INSIDE the scroll container, so it used to scroll away
   with the table it describes — gone from view exactly when the reader is
   scrolling and might still need it (deep review 2026-09-09 #22). Sticky to the
   container's left edge keeps it in place; `width: max-content` stops the
   sticky box from being stretched to the full scroll width. */
.legal .table-wrap::after { position: sticky; left: 0; width: max-content; max-width: 100%; }
@media (max-width: 560px) { .legal .table-wrap.wide::after { content: 'Scroll sideways to see the whole table'; display: block; color: #64748b; font-size: 12px; margin: -8px 0 12px; } }
@media (max-width: 389px) { .legal .table-wrap::after { content: 'Scroll sideways to see the whole table'; display: block; color: #64748b; font-size: 12px; margin: -8px 0 12px; } }
@media print {
  body { background: #fff; color: #000; }
  .back, .toc, footer { display: none; }
  .legal h2 { break-after: avoid; }
  .legal table, .legal .callout { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}