/* legal.css — terms and privacy.
 *
 * Long prose, so the constraints are different from the rest of the site: a
 * measure short enough to read, headings that can be scanned to find one
 * clause, and a summary box at the top for the part most people will read
 * instead of the whole thing.
 */

.legal {
  max-width: 44rem;              /* ~72 characters; longer lines lose the eye */
  margin: 0 auto;
  padding: 28px 20px 72px;
  line-height: 1.62;
}
.legal h1 { margin: 0 0 6px; font-size: 30px; }
.legal h2 {
  margin: 34px 0 10px;
  font-size: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal .summary h2 { border-top: none; padding-top: 0; margin-top: 0; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--link); }

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 22px 0 8px;
}
/* The one box people must not skim past. */
.warn-box {
  border-left: 4px solid var(--critical);
  background: var(--critical-bg, var(--surface));
}

table.fields {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 6px;
  font-size: 14px;
}
table.fields th, table.fields td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
table.fields th { color: var(--muted); font-weight: 600; }
table.fields td:first-child { width: 34%; font-weight: 600; }

.footnote {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--link); }

@media (max-width: 620px) {
  table.fields td:first-child { width: auto; }
  table.fields, table.fields tbody, table.fields tr, table.fields td,
  table.fields th { display: block; }
  table.fields thead { display: none; }
  table.fields tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.fields td { border: none; padding: 2px 0; }
}