/* Legal pages: long prose, so the measure is narrower than the marketing layout and the
   type is a size people actually read a contract at. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--pad-x) 40px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-72);
}

.legal h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 8px;
}

.legal__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  margin-bottom: 34px;
}

.legal h2 {
  font-size: 19px;
  font-weight: 650;
  color: var(--ink);
  margin: 34px 0 10px;
  letter-spacing: -0.01em;
}

.legal h3 {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 22px 0 6px;
}

.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--cyan); }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}

.legal th,
.legal td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-12);
  vertical-align: top;
}

.legal th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  text-transform: uppercase;
}

.legal__foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px var(--pad-x) 44px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-40);
}

.legal__foot a { color: var(--ink-60); }
.legal__foot a:hover { color: var(--cyan); }