/* Shared layout for /privacy and /terms.
 *
 * The landing sheet is hero-focused and has nothing for a long document, so this adds only what a
 * readable legal page needs — measure, headings, lists — using the site's OWN tokens rather than
 * new colours. No value here is invented: --paper/--navy/--muted/--line/--teal all come from
 * styles.css, so if the brand moves these pages move with it. */

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.legal h1 {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.15;
  margin: 0 0 0.35rem;
  color: var(--navy);
}

.legal .updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.legal h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.6rem;
  color: var(--navy);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal p,
.legal li {
  line-height: 1.65;
  color: var(--navy);
}

.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }

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

/* The clauses a carrier reviewer is looking for. Called out so they are findable in seconds
   rather than buried in a paragraph — the reviewer is scanning, not reading. */
.legal .callout {
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  border-radius: 6px;
}

.legal .callout p { margin: 0 0 0.5rem; }
.legal .callout p:last-child { margin-bottom: 0; }

.legal .back {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--teal);
  font-weight: 600;
}