/* Legal pages (/legal/terms/, /legal/privacy/, /legal/refunds/). White, quiet, for reading.
   Each clause keeps its real number; on wide screens the heading sits beside its text. */
.legal-meta {
  margin-top: var(--s4);
  color: var(--ink-soft);
  font-size: var(--t-small);
}
.legal {
  margin-top: var(--s7);
  border-top: 2px solid var(--ink);
}
.clause {
  display: grid;
  gap: var(--s3) var(--gap);
  padding-block: var(--s5) var(--s6);
  border-bottom: 1px solid var(--ink);
}
.clause:last-child {
  border-bottom: 0;
}
.clause > * {
  min-width: 0;
}
.clause h2 {
  max-width: 22ch;
  text-wrap: pretty;
  font-size: 1.375rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.2;
}
/* the reading measure, about 70 characters; a table may use the column's full width */
.clause .prose {
  max-width: none;
}
.clause .prose > :not(table) {
  max-width: 32em;
}
.clause em {
  font-style: normal;
  font-weight: 650;
}
/* a blank still to be filled in by the owner */
.clause mark {
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline dashed 1.5px;
  text-underline-offset: 0.22em;
}
@media (min-width: 860px) {
  .clause {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .clause h2 {
    grid-column: 1 / span 4;
    padding-top: 2px;
  }
  .clause > .prose {
    grid-column: 5 / -1;
  }
}

/* reference table inside a clause */
.legal-table {
  margin-block: var(--s2) var(--s4);
}
.legal-table tbody th {
  width: 34%;
  font-weight: 650;
  font-stretch: 88%;
}
@media (max-width: 700px) {
  .legal-table tbody th {
    width: auto;
  }
}