/* Shared stylesheet for AI Site Builder legal pages */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8f9fa; color: #1a1a2e; line-height: 1.65; }

.nav { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .brand-mark { width: 32px; height: 32px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.nav .brand-name { font-weight: 700; font-size: 18px; color: #1a1a2e; }
.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-actions a { text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-actions a.btn-ghost { color: #6366f1; padding: 9px 14px; border-radius: 8px; }
.nav-actions a.btn-ghost:hover { background: #f5f3ff; }
.nav-actions a.btn-primary { background: #6366f1; color: #fff; padding: 10px 18px; border-radius: 8px; }
.nav-actions a.btn-primary:hover { background: #4f46e5; }

main.legal { max-width: 800px; margin: 0 auto; padding: 56px 24px 80px; }
main.legal h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
main.legal .meta { color: #6b7280; font-size: 14px; margin-bottom: 32px; }
main.legal .lede { font-size: 17px; color: #374151; margin-bottom: 32px; line-height: 1.7; }
main.legal h2 { font-size: 22px; font-weight: 700; margin: 40px 0 12px; letter-spacing: -0.01em; }
main.legal h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; color: #374151; }
main.legal p { margin-bottom: 14px; color: #374151; }
main.legal ul, main.legal ol { margin: 0 0 16px 0; padding-left: 24px; }
main.legal li { margin-bottom: 8px; color: #374151; }
main.legal a { color: #6366f1; font-weight: 500; }
main.legal a:hover { text-decoration: underline; }
main.legal strong { color: #1a1a2e; }
main.legal code { background: #f3f4f6; padding: 2px 7px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

.toc { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 28px; margin-bottom: 36px; }
.toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin: 0 0 12px; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; font-size: 14px; }

.callout { background: #eff6ff; border-left: 4px solid #6366f1; padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 20px 0; color: #1e3a8a; }

main.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0 20px; }
main.legal table th { text-align: left; padding: 10px 12px; background: #f3f4f6; font-weight: 700; border-bottom: 1px solid #e5e7eb; }
main.legal table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }

footer { background: #1a1a2e; color: rgba(255,255,255,0.6); padding: 40px 24px; }
footer .foot-brand { display: flex; align-items: center; gap: 10px; max-width: 800px; margin: 0 auto 16px; }
footer .brand-mark { width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
footer .foot-brand span { color: #fff; font-weight: 700; }
footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
footer .foot-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; }
footer .foot-links a:hover { color: #fff; }

@media (max-width: 600px) {
  main.legal h1 { font-size: 30px; }
  .toc ul { columns: 1; }
}