/* legal.css — Shared styles for legal pages (Disclaimer, Privacy, Terms).
   Shared nav/footer/global styles live in global.css. */

/* ── Legal Hero ── */
.legal-hero { padding: 64px 60px 48px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border-dark); }
.legal-hero-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 16px; }
.legal-hero h1 { font-size: 36px; font-weight: 700; color: var(--color-text-light); margin-bottom: 12px; }
.legal-hero p { font-size: 13px; color: var(--color-text-muted); }

/* ── Legal Content ── */
.legal-content { padding: 64px 60px 80px; max-width: 760px; }
.legal-content h2 { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-top: 48px; margin-bottom: 16px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 14px; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 16px; }
.legal-content ul { margin-left: 20px; margin-bottom: 16px; }
.legal-content ul li { font-size: 14px; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 8px; }
.legal-content strong { color: var(--color-text-primary); }
.legal-content a.legal-link { color: var(--color-accent); transition: color 0.15s; }
.legal-content a.legal-link:hover { color: var(--color-accent-hover); }

/* ── Callout Box (Disclaimer page) ── */
.callout { background: var(--color-bg-muted); border-left: 3px solid var(--color-accent); padding: 20px 24px; margin-bottom: 24px; }
.callout p { margin-bottom: 0; }

/* ── Tables (Privacy page) ── */
.legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.legal-content th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--color-text-primary); font-weight: 600; }
.legal-content td { font-size: 14px; color: var(--color-text-muted); padding: 14px 16px; border-bottom: 1px solid var(--color-border-light); line-height: 1.6; vertical-align: top; }

/* ── Responsive (768px) ── */
@media (max-width: 768px) {
  .legal-hero { padding: 48px 24px 36px; }
  .legal-hero h1 { font-size: 28px; }
  .legal-content { padding: 48px 24px 64px; }
  .legal-content h2 { font-size: 16px; margin-top: 40px; }
  .callout { padding: 16px 20px; }
  .legal-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}