.terms-meta {
  margin-top: var(--om-s4);
  font-size: var(--om-fs-sm);
  color: var(--om-ink-faint);
}

.terms-toc {
  border: 1px solid var(--om-line-soft);
  border-radius: var(--om-r-l);
  background: var(--om-surface);
  padding: var(--om-s5);
}
.terms-toc__title {
  display: block;
  font-family: var(--om-font-mono);
  font-size: var(--om-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--om-ink-faint);
  margin-bottom: var(--om-s4);
}
.terms-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-item;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--om-s2) var(--om-s5);
}
.terms-toc__list li {
  counter-increment: toc-item;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--om-fs-sm);
}
.terms-toc__list li::before {
  content: "0" counter(toc-item);
  font-family: var(--om-font-mono);
  font-size: var(--om-fs-xs);
  color: var(--om-accent);
  flex: none;
}
.terms-toc__list a { color: var(--om-ink-mute); }
.terms-toc__list a:hover { color: var(--om-primary-strong); }
@media (max-width: 640px) {
  .terms-toc__list { grid-template-columns: 1fr; }
}

.terms-body { max-width: var(--om-max-narrow); }
.terms-clause {
  padding-block: var(--om-s6);
  border-top: 1px solid var(--om-line-soft);
  scroll-margin-top: 5rem;
}
.terms-clause:first-child { border-top: 0; padding-top: var(--om-s4); }
.terms-clause h2 {
  display: flex;
  align-items: baseline;
  gap: var(--om-s3);
  font-size: var(--om-fs-xl);
  margin-bottom: var(--om-s4);
}
.terms-clause__no {
  font-size: var(--om-fs-sm);
  font-weight: 500;
  color: var(--om-accent);
  letter-spacing: 0.1em;
  flex: none;
}
.terms-clause p {
  color: var(--om-ink-mute);
  font-size: var(--om-fs-sm);
  margin-bottom: var(--om-s4);
}
.terms-clause p:last-child { margin-bottom: 0; }

.terms-clause ul,
.terms-clause ol {
  margin: 0 0 var(--om-s4);
  padding-left: 1.3em;
  color: var(--om-ink-mute);
  font-size: var(--om-fs-sm);
  display: grid;
  gap: var(--om-s2);
}
.terms-clause ul li::marker { color: var(--om-primary-strong); }
.terms-clause ol li::marker {
  color: var(--om-accent);
  font-family: var(--om-font-mono);
  font-size: var(--om-fs-xs);
}
.terms-clause strong { color: var(--om-ink); font-weight: 600; }

.terms-clause .om-note { margin-block: var(--om-s4); }
.terms-clause .om-note p { margin: 0; }
.terms-clause .om-table-wrap { margin-block: var(--om-s4); }

@media (max-width: 640px) {
  .terms-clause h2 {
    flex-direction: column;
    gap: var(--om-s2);
  }
}