/* =======================================================================
   DATA PROTECTION — page delta only
   =======================================================================
   The document layout lives in css/legal-page.css, shared with the other
   four legal subpages. This page is the only one with data tables and
   sub-sections, so it keeps those and a tighter h3 to sit above them.
   ===================================================================== */

/* 16px/32px rather than the shared 17px/36px: this document nests h3s under
   h2s far more than the others, so the two levels need to read as distinct
   without the h3 competing with the section head above it. */
.policy-prose h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; text-transform: uppercase;
  font-size: 16px; letter-spacing: 0;
  margin: 32px 0 12px; color: var(--text);
}
.policy-prose h3 .num {
  font-family: var(--mono); font-size: 10px;
  /* --accent-ink, not --accent: 10px on cream needs 4.5:1 and brand green is
     3.02:1. Matches the h2 numerals in legal-page.css. */
  letter-spacing: .22em; color: var(--accent-ink);
  margin-right: 12px; padding-right: 12px;
  border-right: 1px solid var(--hair-strong);
}

/* Data tables — transfer mechanisms, retention periods, sub-processors. */
.policy-prose table {
  width: 100%; border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 14px;
}
.policy-prose th, .policy-prose td {
  border: 1px solid var(--hair);
  padding: 10px 14px;
  text-align: left;
  color: var(--dim);
  vertical-align: top;
}
.policy-prose th {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text);
  background: var(--bg-2);
  font-weight: 500;
}
.policy-prose td strong { color: var(--text); }
.policy-prose .table-label {
  display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  /* Same reason as h3 .num above. */
  color: var(--accent-ink);
  margin: 28px 0 10px;
}

@media (max-width: 720px) {
  .policy-prose table { font-size: 12px; }
  .policy-prose th, .policy-prose td { padding: 8px 10px; }
}