/* Legal pages' contents: a numbered list kept beside the text on wide
   screens, highlighting the section in view, or a card above it on
   narrower ones. */

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 680px);
  gap: 88px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 120px;
  align-items: start;
}
.page { min-width: 0; }
.toc-sticky {
  position: sticky;
  top: calc(var(--header) + 40px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.toc-sticky a, .toc-grid a {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; line-height: 1.4; color: var(--ink-3); text-decoration: none;
}
.toc-sticky a { padding: 7px 0; transition: color 0.15s ease-out; }
.toc-sticky a:hover, .toc-sticky a.active { color: var(--ink); }
.toc-sticky a.active .n { color: var(--forest); }
.n { flex: none; width: 20px; font: 500 13px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Narrow screens: the list moves into a card above the first section. */
.toc-card {
  display: none;
  margin-bottom: 48px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.toc-label { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
/* Columns, so the numbers read down each column rather than across. */
.toc-grid { columns: 2; column-gap: 28px; }
.toc-grid a { padding: 8px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); break-inside: avoid; }
.toc-grid a:hover { color: var(--ink); }

@media (max-width: 1099px) {
  .layout { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
  .hero { max-width: 784px; }
  .toc-sticky { display: none; }
  .toc-card { display: block; }
}
@media (max-width: 767px) {
  .layout { padding: 0 20px 88px; }
  .toc-grid { columns: 1; }
  .toc-card { padding: 20px; }
}