/* Legal pages (Terms of Use, Privacy Policy) — plain, readable prose.
   Narrow measure, numbered sections, no animation on the body copy. */

.legal { padding: 0 0 clamp(3.5rem, 7vh, 5.5rem); }
.legal .wrap,
.legal-hero .wrap { width: min(760px, calc(100% - 3rem)); }

/* Hero sits tighter on a legal page — no photo band, straight into the text. */
.legal-hero { padding-bottom: clamp(1.8rem, 3.5vh, 2.6rem); }
.legal-hero h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
.legal-hero .lede { max-width: 60ch; }

.legal-meta {
  font-size: 0.875rem;
  color: #6b6b6b;
  border-bottom: 1px solid #e4e1dc;
  padding-bottom: 1.1rem;
  margin-bottom: 2.1rem;
}
.legal-meta p { margin: 0.2rem 0; }

/* site.css gives every <section> clamp(4.5rem,10vh,7.5rem) of vertical padding —
   right for full-width bands, far too much for numbered clauses. Reset it and
   let margin alone set the rhythm. */
.legal section { padding: 0; margin-bottom: 2.1rem; }
.legal section:last-child { margin-bottom: 0; }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  letter-spacing: -0.01em;
}
.legal h2 .n { color: #9a9a9a; font-variant-numeric: tabular-nums; margin-right: 0.5rem; }
.legal h3 { font-size: 1.02rem; margin: 1.5rem 0 0.5rem; }
.legal p, .legal li { font-size: 1.0rem; line-height: 1.72; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal li { margin-bottom: 0.5rem; }
.legal strong { font-weight: 650; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

/* Callout for the two things that matter most on a law-firm site:
   no attorney-client relationship, and don't send us secrets yet. */
.legal .callout {
  border-left: 3px solid var(--navy, #1b2a4a);
  background: #f6f4f1;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.5rem;
}
.legal .callout p:last-child { margin-bottom: 0; }

.legal .toc { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.legal .toc li { margin-bottom: 0.35rem; font-size: 0.95rem; }

@media (max-width: 600px) {
  .legal .wrap, .legal-hero .wrap { width: calc(100% - 2.5rem); }
  .legal p, .legal li { font-size: 0.97rem; }
}