/* Privacy policy and terms.
 *
 * These are documents, not marketing. The landing page's job is to make you
 * feel something; this page's job is to be read carefully by somebody who is
 * worried, and found again by somebody who needs one clause. So: a narrow
 * measure, numbered sections that can be linked to and cited, hairlines rather
 * than cards, and no photography at all.
 *
 * site.css is shared and untouched -- same arrangement as partners.css. */

.legal {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl))
    clamp(64px, 9vh, 120px);
}

.legal__head {
  border-bottom: 1px solid var(--nc-color-border);
  padding-bottom: clamp(32px, 5vh, 56px);
}

.legal__kicker {
  margin: 0 0 var(--nc-space-md);
  font-size: var(--nc-type-caption-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nc-color-text-secondary);
}

.legal h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.legal__dates {
  margin: var(--nc-space-lg) 0 0;
  color: var(--nc-color-text-secondary);
  font-size: 15px;
}

/* Until a lawyer has been over these they are not in force, and a document
 * that does not say so is a document somebody will rely on. Delete this block
 * -- and the class -- on the day they are adopted, not before. */
.legal__draft {
  margin: var(--nc-space-xl) 0 0;
  padding: var(--nc-space-lg);
  border: 1px solid var(--nc-color-warning);
  border-radius: var(--nc-radius-md);
  color: var(--nc-color-text-primary);
  font-size: 15px;
  line-height: 1.6;
}

.legal__draft strong {
  color: var(--nc-color-warning);
}

.legal__body {
  display: grid;
  gap: clamp(40px, 6vh, 72px);
  margin-top: clamp(40px, 6vh, 72px);
}

@media (min-width: 1000px) {
  .legal__body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--nc-nav-height) + var(--nc-space-lg));
    max-height: calc(100dvh - var(--nc-nav-height) - var(--nc-space-xxl));
    overflow-y: auto;
  }
}

.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--nc-space-sm);
  counter-reset: toc;
}

.legal__toc a {
  display: block;
  color: var(--nc-color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}

.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc) '. ';
  color: var(--nc-color-text-secondary);
}

.legal__toc a:hover {
  color: var(--nc-color-text-primary);
}

/* The prose column. ~68ch is the measure that stops a paragraph of terms
 * becoming a wall; the sections are numbered so a clause can be cited. */
.legal__prose {
  max-width: 68ch;
  counter-reset: section;
}

.legal__prose section {
  padding-top: clamp(32px, 5vh, 56px);
  scroll-margin-top: calc(var(--nc-nav-height) + var(--nc-space-lg));
}

.legal__prose section + section {
  border-top: 1px solid var(--nc-color-border);
  margin-top: clamp(32px, 5vh, 56px);
}

.legal__prose h2 {
  margin: 0 0 var(--nc-space-lg);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.legal__prose h2::before {
  counter-increment: section;
  content: counter(section) '. ';
  color: var(--nc-color-text-tertiary);
}

.legal__prose h3 {
  margin: clamp(24px, 3vh, 36px) 0 var(--nc-space-sm);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.legal__prose p,
.legal__prose li {
  color: var(--nc-color-text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.legal__prose p {
  margin: 0 0 var(--nc-space-lg);
}

.legal__prose ul {
  margin: 0 0 var(--nc-space-lg);
  padding-left: var(--nc-space-xl);
  display: grid;
  gap: var(--nc-space-sm);
}

.legal__prose li::marker {
  color: var(--nc-color-text-secondary);
}

.legal__prose strong {
  color: var(--nc-color-text-primary);
  font-weight: 600;
}

.legal__prose a {
  color: var(--nc-color-text-primary);
  text-underline-offset: 0.25em;
}

/* A claim we are deliberately NOT making. These appear throughout both
 * documents, because on this platform the things we decline to do are as
 * load-bearing as the things we do -- and a reader who skims should still hit
 * them. */
.legal__not {
  margin: 0 0 var(--nc-space-lg);
  padding: var(--nc-space-lg);
  border-left: 2px solid var(--nc-color-border-strong);
  background: var(--nc-color-surface);
  border-radius: 0 var(--nc-radius-md) var(--nc-radius-md) 0;
}

.legal__not p:last-child {
  margin-bottom: 0;
}

/* Placeholders that must be filled in before adoption. Styled loudly on
 * purpose: a bracketed token that blends into the prose is a bracketed token
 * that ships. */
.tbd {
  color: var(--nc-color-warning);
  font-weight: 600;
  white-space: nowrap;
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--nc-space-lg);
  font-size: 15px;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--nc-space-md) var(--nc-space-md) var(--nc-space-md) 0;
  border-bottom: 1px solid var(--nc-color-border);
  color: var(--nc-color-text-secondary);
}

.legal__table th {
  color: var(--nc-color-text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.legal__scroll {
  overflow-x: auto;
}