/* ==========================================================================
   U06 — Legal (templates/legal.html)
   Sticky table of contents (3 cols) + legal sections (8 cols) on a
   12-column grid. Stacks below 760 px via [data-stack].
   ========================================================================== */

/* ---- Page grid -------------------------------------------------------- */
.legal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: start;
  padding-top: clamp(40px, 6vw, 80px);
}

/* ---- Table of contents ------------------------------------------------ */
.legal__toc {
  grid-column: 1 / span 3;
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.legal__toc a {
  color: var(--ink);
  font-size: 15px;
}

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

/* ---- Content ---------------------------------------------------------- */
.legal__content {
  grid-column: 5 / span 8;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.legal__notice {
  padding: 12px 16px;
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  font-size: 15px;
}

.legal__notice b {
  color: var(--warning);
}

.legal-section {
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}

.legal-section__title {
  margin: 0 0 10px;
  font-size: var(--t-h3);
}

.legal-section__text {
  margin: 0;
  max-width: 40em;
  text-wrap: pretty;
}