/* ============================================================================
   legal.css — Privacy Policy and Terms of Service.

   Legal prose has different needs than a blog post: sections numbered by CSS
   counter so clauses can be cited without hand-numbering the markup, and a
   conspicuous style for the clauses that have to be conspicuous to be
   enforceable. It shares the typography scale in styles.css but nothing else,
   so blog.css doesn't have to be loaded on a page with no questions or callouts
   in it.
   ========================================================================== */

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

/* ---------------------------------- header --------------------------------- */
.legal-header { margin-bottom: 40px; }
.legal-header h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: -.025em;
  line-height: 1.12;
}
.legal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.legal-dates span + span::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 18px;
  border-radius: 50%;
  background: var(--gray-300);
  vertical-align: middle;
}

/* ----------------------------------- body ---------------------------------- */
.legal-body {
  margin-top: 44px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--gray-700);
}
.legal-body p { margin: 0 0 18px; }
.legal-body section { margin-bottom: 40px; scroll-margin-top: 90px; }
.legal-body h2 {
  margin: 0 0 16px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
.legal-body h3 {
  margin: 26px 0 10px;
  font-size: 16.5px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 24px; }
.legal-body li { margin: 8px 0; }
.legal-body li::marker { color: var(--gray-400); }
.legal-body strong { color: var(--ink); font-weight: 650; }
.legal-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--brand-hover); }
/* Literal values quoted in prose — email address forms, mostly. Monospace so a reader
   can see exactly where a dot or a +tag sits. */
.legal-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--inset);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--ink);
  word-break: break-word;
}

/* Section numbers, so clauses can be cited without hand-numbering the markup. No color
   of its own: the number is part of the heading and reads as one thing with it. */
.legal-body { counter-reset: legal-section; }
.legal-body section > h2::before {
  counter-increment: legal-section;
  content: counter(legal-section) ". ";
  font-variant-numeric: tabular-nums;
}

/* Clauses that have to be conspicuous to be enforceable (disclaimers, liability
   caps, arbitration). Uppercase is the convention courts look for. */
.legal-caps {
  text-transform: uppercase;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--ink);
}

.legal-note {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--inset);
  border-left: 3px solid var(--gray-300);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14.5px;
}
.legal-note p:last-child { margin-bottom: 0; }

/* Subprocessor / data tables. Scrolls rather than squeezing on a phone. */
.legal-table-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--card);
}
.legal-table th, .legal-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--inset);
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table tbody th { font-weight: 650; color: var(--ink); }

.legal-contact {
  margin-top: 8px;
  padding: 22px 24px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 15px;
}
.legal-contact p { margin: 0 0 8px; }
.legal-contact p:last-child { margin-bottom: 0; }

/* Cross-link between the two documents at the foot of each. */
.legal-crosslink {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}