/* ==========================================================================
   Nacodex — legal pages (terms.html, privacy.html, copyright.html)
   Uses only the variables both the current and the previous style.css define, so these pages render the same
   on either. Layout after the GMS legal pages: header meta, contents, numbered sections, plain-language callouts.
   ========================================================================== */
.legal-hero { max-width: 1100px; margin: 0 auto; padding: 36px 24px 8px; }
.legal-eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 3px 12px; }
.legal-hero h1 { font-family: var(--display); font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 16px 0 14px; letter-spacing: .02em; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-meta span { font-size: 13px; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.legal-meta b { color: var(--text); font-weight: 600; }

.legal-layout { max-width: 1100px; margin: 0 auto; padding: 24px 24px 48px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; }
.legal-toc { position: sticky; top: 76px; align-self: start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 14px; }
.legal-toc .t { font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 8px 8px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.legal-toc li { counter-increment: t; }
.legal-toc a { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-dim); padding: 5px 8px; border-radius: var(--radius-sm); text-decoration: none; }
.legal-toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--text-mute); padding-top: 2px; }
.legal-toc a:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }

.legal-body { min-width: 0; max-width: 780px; }
.legal-sec { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; scroll-margin-top: 76px; }
.legal-sec .num { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.legal-sec h2 { font-family: var(--display); font-size: 19px; letter-spacing: .02em; text-transform: none; margin: 6px 0 12px; color: var(--text); }
.legal-sec p, .legal-sec li { color: var(--text-dim); line-height: 1.65; }
.legal-sec p { margin: 0 0 12px; }
.legal-sec ul { margin: 0 0 12px; padding-left: 20px; }
.legal-sec li { margin-bottom: 6px; }
.legal-sec b { color: var(--text); }
.legal-sec a { overflow-wrap: anywhere; }

.legal-note { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 16px; margin: 14px 0; color: var(--text-dim); }
.legal-note > b:first-child { display: block; color: var(--accent); margin-bottom: 2px; }
.legal-note.warn { border-left-color: var(--gold); background: var(--gold-soft); }
.legal-note.warn > b:first-child { color: var(--gold); }

.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.legal-table-wrap { overflow-x: auto; }
.legal-table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
  padding: 8px 10px; border-bottom: 1px solid var(--border-2); }
.legal-table td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.legal-table td b { display: block; color: var(--text); margin-bottom: 2px; }

.legal-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.legal-contact div { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.legal-contact .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.legal-contact .v { font-size: 17px; color: var(--text); margin: 4px 0; overflow-wrap: anywhere; }
.legal-contact small { color: var(--text-dim); font-size: 12.5px; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 40px; }
  .legal-toc { position: static; }
  .legal-hero { padding: 28px 16px 4px; }
  .legal-sec { padding: 18px 16px; }
  .legal-contact { grid-template-columns: 1fr; }
}