Redesign legal pages with readable paragraph layout and updated contact info.

Privacy Policy and Terms now share a document layout with table of contents,
plain-paragraph copy, and beenvoice.soconnor.dev contact details for App Store review.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/legal/legal-page-shell.tsx

@@ -2,38 +2,49 @@ import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
+import { Logo } from "~/components/branding/logo";
 import { LEGAL_LAST_UPDATED } from "~/lib/legal";
 
 type LegalPageShellProps = {
   title: string;
+  description?: string;
   children: React.ReactNode;
 };
 
-export function LegalPageShell({ title, children }: LegalPageShellProps) {
+export function LegalPageShell({
+  title,
+  description,
+  children,
+}: LegalPageShellProps) {
   return (
     <div className="bg-background min-h-screen">
-      <div className="bg-card border-b">
-        <div className="container mx-auto max-w-4xl px-6 py-6">
-          <div className="flex items-center gap-4">
+      <header className="border-border bg-card/80 border-b backdrop-blur-sm">
+        <div className="container mx-auto flex max-w-6xl flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <Logo size="sm" />
             <Link href="/">
               <Button variant="outline" size="sm">
                 <ArrowLeft className="mr-2 h-4 w-4" />
-                Back
+                Back to app
               </Button>
             </Link>
-            <div>
-              <h1 className="text-2xl font-bold">{title}</h1>
-              <p className="text-muted-foreground text-sm">
-                Last updated: {LEGAL_LAST_UPDATED}
-              </p>
-            </div>
+          </div>
+
+          <div className="max-w-3xl space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">{title}</h1>
+            {description ? (
+              <p className="text-muted-foreground text-base leading-relaxed">{description}</p>
+            ) : null}
+            <p className="text-muted-foreground text-sm">
+              Last updated {LEGAL_LAST_UPDATED}
+            </p>
           </div>
         </div>
-      </div>
+      </header>
 
-      <div className="container mx-auto max-w-4xl px-6 py-8">
-        <div className="space-y-6">{children}</div>
-      </div>
+      <main className="container mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
+        {children}
+      </main>
     </div>
   );
 }