Overhaul legal page and global styles for consistency and responsiveness.

public/legal.css

@@ -1,49 +1,21 @@
-body.legal-page {
-    display: block;
-    height: auto;
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0;
+.legal-page {
+    min-height: calc(100dvh - 36px);
+    display: grid;
+    place-items: center;
 }
-
+.legal-container,
 .legal-content {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 2rem 1.5rem;
-    color: var(--text-primary);
-    font-family: inherit;
+    width: min(860px, 100%);
+    padding: clamp(24px, 5vw, 52px);
+    background: var(--surface-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
 }
-
-.legal-content h1,
-.legal-content h2 {
-    color: var(--text-primary);
-}
-
-.legal-content p,
-.legal-content li {
-    line-height: 1.6;
-    color: var(--text-secondary);
-}
-
-.legal-content * {
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
-
-@media (max-width: 600px) {
-    .legal-content {
-        padding: 1.25rem 1rem;
-    }
-
-    .legal-content h1 {
-        font-size: 1.6rem;
-    }
-
-    .legal-content h2 {
-        font-size: 1.2rem;
-    }
+.legal-container h1, .legal-content h1 { margin-bottom: 20px; }
+.legal-container h2, .legal-content h2 { margin: 28px 0 10px; font-size: 1.25rem; }
+.legal-container p, .legal-container li, .legal-content p, .legal-content li { color: var(--text-soft); line-height: 1.75; }
+.legal-container a, .legal-content a { font-weight: 700; }
+@media (max-width: 700px) {
+    .legal-container, .legal-content { min-height: 100dvh; border: 0; border-radius: 0; }
 }