/* ── legal document layout ───────────────────────────────────
   A sidebar carrying the document switcher and a table of contents, beside a
   measured column of text. Long agreements are navigated, not read top to
   bottom, so the contents pane tracks the reader's position and stays put. */

.doc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ── sidebar ─────────────────────────────────────────────── */
.doc-side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.doc-side h2 {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  margin: 0 0 10px;
}
.doc-side h2 + h2 { margin-top: 26px; }
.doc-docs { display: grid; gap: 2px; margin: 0 0 4px; }
.doc-docs a {
  display: block; padding: 5px 0; font-size: var(--t-base);
  color: var(--ivory-2); text-decoration: none;
}
.doc-docs a:hover { color: var(--lamp); }
.doc-docs a[aria-current="page"] { color: var(--lamp); font-weight: 600; }

/* The contents list scrolls inside the sidebar rather than pushing the page. */
.doc-toc { overflow-y: auto; padding-right: 10px; margin-right: -10px; min-height: 0; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.doc-toc a {
  display: block; padding: 5px 0 5px 12px;
  border-left: 2px solid var(--hair);
  font-size: var(--t-sm); line-height: 1.4;
  color: var(--dim); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.doc-toc a:hover { color: var(--ivory); }
.doc-toc .sub a { padding-left: 26px; font-size: var(--t-xs); }
.doc-toc a.is-here { color: var(--lamp); border-left-color: var(--lamp); }

/* ── document body ───────────────────────────────────────── */
.doc-body { min-width: 0; max-width: 74ch; }
.doc-body h1 { font-size: clamp(30px, 4.6vw, 42px); margin: 0 0 6px; }
.doc-stamp {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 32px;
}
/* Scroll margin keeps a jumped-to heading clear of the sticky header. */
.doc-body h2, .doc-body h3 { scroll-margin-top: 88px; }
.doc-body h2 { font-size: 21px; margin: 44px 0 10px; }
.doc-body h3 { font-size: 16.5px; margin: 26px 0 8px; color: var(--ivory); }
.doc-body p, .doc-body li { color: var(--ivory-2); line-height: 1.72; }
.doc-body ul, .doc-body ol { padding-left: 20px; margin: 10px 0; }
.doc-body li { margin: 7px 0; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--t-sm); }
.doc-body th, .doc-body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.doc-body th { color: var(--ivory); font-weight: 600; }
.doc-body .callout {
  border-left: 3px solid var(--lamp); background: rgba(160, 87, 2, .05);
  padding: 14px 16px; margin: 20px 0; border-radius: 0 6px 6px 0;
}
.doc-body .callout p:last-child { margin-bottom: 0; }
.doc-back { display: inline-block; margin-bottom: 26px; font-size: var(--t-sm); color: var(--faint); text-decoration: none; }
.doc-back:hover { color: var(--lamp); }

@media (max-width: 900px) {
  /* The contents pane goes above the text and stops sticking: on a phone it
     would otherwise eat most of the screen. */
  .doc { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .doc-side { position: static; max-height: none; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
  .doc-toc { max-height: 220px; }
}