/* Prose styling for /privacy and /terms only. These are the first pages on the site
   with long-form running text, headed lists and an address block; main.css was built
   for the marketing sections and styles none of that. Kept out of main.css so the
   marketing pages do not carry rules only two pages use. */

.legal .section-inner {
  width: min(760px, 100%);
}

/* main.css sizes headings for the marketing pages: h1 tops out at 6.2rem and h2 at
   5rem with a 12ch max-width, which is right for a hero and absurd for a document.
   Legal pages get their own, much quieter scale. */
.legal h1 {
  margin-top: .6rem;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1.1;
}

.legal h2 {
  max-width: none;
  margin-top: 3rem;
  font-size: clamp(1.45rem, 2.6vw, 1.8rem);
  line-height: 1.2;
}

.legal h2:first-of-type {
  margin-top: 2rem;
}

.legal h3 {
  margin-top: 2rem;
  font-size: 1.05rem;
  color: var(--ink-warm);
}

.legal p,
.legal li {
  color: var(--ink-sub);
}

.legal ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
}

.legal li {
  margin-top: .55rem;
}

.legal li::marker {
  color: var(--ember);
}

.legal a {
  color: var(--ink-warm);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.legal address {
  margin-top: 1rem;
  color: var(--ink-sub);
  font-style: normal;
  line-height: 1.9;
}

/* The clause carriers actually look for during toll-free / 10DLC verification.
   Set apart so a reviewer skimming the page cannot miss it. */
.legal .sms-clause {
  margin-top: 1.25rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: 4px;
  background: var(--ground-lift);
  color: var(--ink);
}

.legal .updated {
  margin-top: 1.25rem;
  color: var(--ink-faint);
  font-size: .88rem;
}