/* Legal pages (privacy, terms, legal notice). Loaded after styles.css. */

.legal {
  padding: calc(var(--header) + clamp(40px, 8vh, 96px)) var(--gutter) clamp(64px, 10vh, 120px);
  max-width: 1240px;
  margin: 0 auto;
}

.legal__head { max-width: 62ch; }
.legal__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.legal__updated {
  margin: 14px 0 0;
  font: 500 12.5px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal__lead { margin: 22px 0 0; font-size: 1.15rem; color: var(--body); text-wrap: pretty; }

.legal__brief {
  margin: clamp(32px, 5vh, 52px) 0 0;
  max-width: 72ch;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.legal__brief h2, .legal__toc h2 {
  margin: 0 0 14px;
  font: 500 12.5px/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal__brief ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; color: var(--body); }
.legal__brief li::marker { color: var(--accent); }

.legal__layout {
  margin-top: clamp(40px, 7vh, 80px);
  display: grid;
  grid-template-columns: minmax(200px, 270px) minmax(0, 72ch);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.legal__toc { position: sticky; top: calc(var(--header) + 24px); max-height: calc(100svh - var(--header) - 48px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal__toc a {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--muted);
  border-left: 1px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.legal__toc a:hover { color: var(--ink); border-left-color: var(--accent); }
.legal__toc .n { font-variant-numeric: tabular-nums; margin-right: 4px; }

.legal__body { min-width: 0; }
.legal__section { padding-top: clamp(28px, 4vh, 44px); scroll-margin-top: calc(var(--header) + 16px); }
.legal__section:first-child { padding-top: 0; }
.legal__section h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.legal__section h2 .n { color: var(--accent); font-variant-numeric: tabular-nums; }
.legal__section h3 { margin: 26px 0 8px; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.legal__section p { margin: 0 0 14px; color: var(--body); text-wrap: pretty; }
.legal__section ul, .legal__section ol { margin: 0 0 16px; padding-left: 1.25em; color: var(--body); display: grid; gap: 6px; }
.legal__section li::marker { color: var(--muted); }
.legal__section b, .legal__section strong { color: var(--ink); font-weight: 600; }
.legal__section a, .legal__end a, .legal__brief a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(79, 156, 224, 0.6);
  text-underline-offset: 3px;
}
.legal__section a:hover, .legal__end a:hover { text-decoration-color: var(--accent); }
.legal__section table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.legal__section th, .legal__section td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.legal__section th { color: var(--ink); font-weight: 600; }

.legal__end { margin: clamp(32px, 5vh, 56px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 900px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; max-height: none; }
}