/* ==========================================================================
   NAFAS legal / support pages (privacy, terms, support)
   Loaded alongside style.css, which already provides the shared tokens,
   reset, fonts and the site-header/site-footer used on the landing page.
   This file only adds the content-specific styling for these pages.
   ========================================================================== */

/* Flat var(--bg) reads too stark on a text-heavy page with no hero visuals
   to break it up — the same soft cyan/violet glow as the landing page's
   hero orb, just static and low-opacity, so it doesn't compete with the
   text but the page doesn't feel like a plain black screen either. */
body {
  background:
    radial-gradient(1100px 620px at 50% -160px, rgba(23, 192, 212, .10), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(84, 51, 164, .10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.page-title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.effective {
  color: var(--text-dim);
  margin-bottom: 40px;
  font-size: .95rem;
}

.legal-container h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-container h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 12px;
}
.legal-container p { margin: 0 0 16px; color: var(--text-secondary); }
.legal-container ul,
.legal-container ol { margin: 12px 0 16px 24px; color: var(--text-secondary); }
.legal-container li { margin-bottom: 8px; }

.highlight {
  background: rgba(23, 192, 212, .06);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
}
.highlight p { margin-bottom: 0; color: var(--text-primary); }

.warning {
  background: rgba(239, 68, 68, .08);
  border-left: 3px solid #ef4444;
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
}
.warning p { margin-bottom: 0; color: #fca5a5; }

.legal-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: var(--panel);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  overflow: hidden;
}
.legal-container th,
.legal-container td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-faint);
}
.legal-container th {
  background: rgba(255, 255, 255, .02);
  color: var(--text-primary);
  font-weight: 600;
  font-size: .9rem;
}
.legal-container td { color: var(--text-secondary); }
.legal-container tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .legal-container { padding: 40px 16px 60px; }
  .legal-container h2 { font-size: 1.2rem; }
}