/* =========================================================
   Artora Academy OS — Legal pages (terms.html)
   Builds on styles.css tokens; classes are prefixed "legal-" to avoid
   clashing with the landing page's short class names.
   ========================================================= */

body { background: var(--bg); }

/* Keep "← Home" visible on small screens (styles.css hides .btn-ghost there) */
.nav-cta .btn.legal-back { display: inline-flex; }
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
}

.legal-hero {
  padding: 72px 0 48px;
  background: linear-gradient(180deg, var(--accent-100), var(--bg));
  border-bottom: 1px solid var(--border);
}
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; margin: 12px 0 10px; }
.legal-meta { color: var(--muted); font-size: 0.95rem; }
.legal-lead { margin-top: 18px; color: var(--ink-700); font-size: 1.08rem; max-width: 70ch; }

.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  padding: 56px 0 96px;
  align-items: start;
}

/* ---------- Table of contents ---------- */
.legal-toc {
  position: sticky; top: 96px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  padding: 18px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.legal-toc-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 8px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 8px; padding: 6px 10px; border-radius: 8px;
  color: var(--muted); font-size: 0.9rem; line-height: 1.35;
  transition: color 0.2s, background 0.2s;
}
.legal-toc a::before { content: counter(toc) "."; min-width: 1.4em; color: var(--dim); }
.legal-toc a:hover { color: var(--text); background: var(--surface); }
.legal-toc a.active { color: var(--pink); background: var(--accent-100); font-weight: 600; }
.legal-toc a.active::before { color: var(--pink); }

/* ---------- Body ---------- */
.legal-body { max-width: 760px; color: var(--ink-700); font-size: 1.02rem; }
.legal-body section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--border); }
.legal-body section:last-of-type { border-bottom: 0; margin-bottom: 12px; }
.legal-body h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.45rem; font-weight: 750; color: var(--text); margin-bottom: 14px;
}
.legal-num {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-100); color: var(--pink); font-size: 0.95rem; font-weight: 800;
}
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: 12px; }
.legal-body ul { margin: 0; padding-left: 1.2em; }
.legal-body li { margin: 8px 0; padding-left: 4px; }
.legal-body li::marker { color: var(--violet); }
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--violet); }
.legal-note {
  margin-top: 8px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.94rem;
}

.footer-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .legal-toc { position: static; max-height: none; }
  .legal-toc ol { columns: 2; column-gap: 12px; }
}
@media (max-width: 560px) {
  .legal-hero { padding: 48px 0 32px; }
  .legal-toc ol { columns: 1; }
  .legal-body h2 { font-size: 1.25rem; }
}

@media print {
  .nav, .legal-toc, .footer, .to-top, .progress { display: none !important; }
  .legal-hero { background: none; padding: 0 0 16px; }
  .legal-layout { display: block; padding: 0; }
  .legal-body { max-width: none; }
}