/* ==========================================================================
   777CX — Legal documents (privacy policy, terms)
   ========================================================================== */

.legal-layout { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-12); } }

.legal-toc {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
}
@media (min-width: 1000px) {
  .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-6)); max-height: calc(100vh - var(--header-h) - var(--space-12)); overflow-y: auto; }
}
.legal-toc h2 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: var(--space-1); }
.legal-toc a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc) ". ";
  color: var(--color-text-muted);
}
.legal-toc a:hover { background: var(--gold-8); color: var(--color-accent); }

.legal-body {
  counter-reset: clause;
  font-size: var(--text-sm);
}
.legal-body section { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.legal-body section + section {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-soft);
}
.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: clamp(1.2rem, 2.6vw, var(--text-2xl));
  margin-bottom: var(--space-5);
}
.legal-body h2::before {
  counter-increment: clause;
  content: counter(clause, decimal-leading-zero);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  flex: none;
}
.legal-body h3 { font-size: var(--text-base); margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-accent-bright); }
.legal-body p { line-height: var(--line-height-loose); }
.legal-body p + p { margin-top: var(--space-4); }
.legal-body ul, .legal-body ol { margin-top: var(--space-4); padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.legal-body li { line-height: var(--line-height-loose); }
.legal-body li::marker { color: var(--color-accent); }
.legal-body strong { color: var(--color-text-primary); }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}