feat(legal): public privacy policy, terms, and homepage for OAuth verification

Adds login-free /privacy and /terms pages (rendered outside the authenticated
tree via a pathname switch in main.tsx) carrying the Google API Services Limited
Use disclosure, YouTube ToS / Google Privacy links, and contact + data-deletion
info. The sign-in screen now describes the app and links to both, satisfying
Google's homepage + privacy-policy requirements for the OAuth consent screen.

frontend/src/components/legal/LegalLayout.tsx

@@ -0,0 +1,47 @@
+// Shared shell for the public, login-free legal pages (/privacy, /terms). These must be
+// reachable unauthenticated — Google's OAuth consent screen links to them and reviewers
+// fetch them directly — so they render outside the authenticated App tree (see main.tsx).
+
+export const CONTACT_EMAIL = "b1fr0stmailops@gmail.com";
+export const LAST_UPDATED = "June 14, 2026";
+
+export function LegalLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <a href={href} target="_blank" rel="noreferrer" className="text-accent hover:underline">
+      {children}
+    </a>
+  );
+}
+
+export default function LegalLayout({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-bg text-fg">
+      <div className="mx-auto w-[min(92vw,720px)] py-12">
+        <a href="/" className="inline-block text-2xl font-bold tracking-tight mb-8">
+          Sub<span className="text-accent">feed</span>
+        </a>
+        <div className="glass rounded-2xl p-8">
+          <h1 className="text-2xl font-semibold">{title}</h1>
+          <p className="text-xs text-muted mt-1 mb-6">Last updated: {LAST_UPDATED}</p>
+          <div className="space-y-5 text-sm leading-relaxed text-fg/90">{children}</div>
+        </div>
+        <footer className="mt-6 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
+          <a href="/" className="hover:text-fg transition">Home</a>
+          <a href="/privacy" className="hover:text-fg transition">Privacy Policy</a>
+          <a href="/terms" className="hover:text-fg transition">Terms of Service</a>
+          <a href={`mailto:${CONTACT_EMAIL}`} className="hover:text-fg transition">Contact</a>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+export function H2({ children }: { children: React.ReactNode }) {
+  return <h2 className="text-base font-semibold text-fg pt-2">{children}</h2>;
+}