/* Long-form styling for the legal pages (/privacy, /terms, /legal).
   Kept out of site.css: nothing else on the site sets running prose, and these
   pages are the only place a reader works through several screens of text. */
/* Vertical padding lives here: .band-cream has none, and without it the
   "Last updated" pill butts against the hero image. */
.legal{ max-width: 76ch; padding: 56px 0 72px; }
.legal h2{
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 2.4rem 0 .6rem;
  color: var(--maroon);
  scroll-margin-top: 96px;              /* clears the sticky header on anchor jumps */
}
.legal h3{ font-size: 1.02rem; margin: 1.5rem 0 .35rem; color: var(--rust); }
.legal p, .legal li{ color: var(--ink-2); line-height: 1.75; }
.legal p{ margin: 0 0 .85rem; }
.legal ul{ margin: 0 0 1rem 1.1rem; padding: 0; }
.legal li{ margin: .3rem 0; }
.legal strong{ color: var(--ink); font-weight: 600; }
.legal a{ color: var(--maroon); text-underline-offset: 2px; }
.legal table{ width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; font-size: .95rem; }
.legal th, .legal td{
  text-align: left; vertical-align: top; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.legal th{ color: var(--ink); font-weight: 600; background: var(--cream-2); }
/* Wide tables must scroll inside their own box, never the page. */
.legal .table-wrap{ overflow-x: auto; }
.legal .updated{
  display: inline-block; font-size: .85rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem;
  margin-bottom: .4rem;
}
.legal .callout{
  background: var(--cream-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 1.2rem 0;
}
.legal .callout p:last-child{ margin-bottom: 0; }
.legal .toc{ list-style: none; margin-left: 0; }
.legal .toc li{ margin: .25rem 0; }