/* ==========================================================================
   Legal pages — privacy.html and terms.html

   A reading page, not a form. Both pages borrow the form-page shell (Back
   nav, centered masthead, one white panel) so they sit in the same family as
   sign-in, and this file only adds what long prose needs: a measure, a
   heading rhythm, and lists that indent.

   Body copy is .t-body, capped at 60ch in styles.css. That cap is right for
   a paragraph under a heading and wrong for a page that is nothing but
   paragraphs, so the measure here is set once on .legal and the cap on
   children is released.
   ========================================================================== */

.legal {
  max-width: 68ch;
  margin-inline: auto;
}

.legal .t-body,
.legal p,
.legal li {
  max-width: none;
}

.legal p,
.legal ul {
  margin: 0 0 var(--hem-space-4);
}

.legal ul {
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: var(--hem-space-1);
}

/* Section headings carry the page. The first sits flush under the masthead;
   the rest open with the same room the masthead left. */
.legal h2 {
  margin: var(--hem-space-12) 0 var(--hem-space-4);
  color: var(--hem-text-heading);
}
.legal h2:first-child { margin-top: 0; }

.legal h3 {
  margin: var(--hem-space-4) 0 var(--hem-space-1);
  color: var(--hem-text-heading);
}

/* The dateline under the heading: caption scale, muted, centered with it. */
.legal-dateline {
  font-size: var(--hem-size-caption);
  line-height: var(--hem-lh-caption);
  color: var(--hem-text-muted);
  margin-top: var(--hem-space-1);
}

.legal a { color: var(--hem-teal); }

/* Two pages, each pointing at the other. */
.legal-cross {
  margin-top: var(--hem-space-12);
  padding-top: var(--hem-space-4);
  border-top: 1px solid var(--hem-line);
  font-size: var(--hem-size-caption);
  color: var(--hem-text-muted);
}