Add brand logo + favicon across app surfaces

Ship the Podcast Distribution AI wordmark as real assets and replace the
Mic-tile + text placeholder everywhere it appeared.

- public/logo-dark.png (dark wordmark, for light backgrounds) and
  public/logo-light.png (light wordmark, for dark backgrounds)
- New <Logo> component swaps the two via Tailwind dark: variants, so the
  dark logo shows on all non-themed surfaces (marketing, auth, admin,
  public share) and the light logo only in dark-mode app surfaces
- Wire <Logo> into the marketing header/footer, auth layout, app header
  (default branch only - white-label org logos untouched), admin header
  (+ Admin badge), and the public share page
- Favicon via App Router file convention: app/icon.png + app/apple-icon.png

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

components/marketing/site-footer.tsx

@@ -1,16 +1,13 @@
 import Link from "next/link";
-import { Mic } from "lucide-react";
+import { Logo } from "@/components/ui/logo";
 
 export function SiteFooter() {
   return (
     <footer className="border-t border-border bg-secondary">
       <div className="container flex flex-col gap-10 py-16 md:flex-row md:justify-between">
         <div className="max-w-xs space-y-4">
-          <Link href="/" className="flex items-center gap-2.5 font-display text-lg font-bold tracking-tight">
-            <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-              <Mic className="h-5 w-5" />
-            </span>
-            Podcast Distribution AI
+          <Link href="/" className="flex items-center" aria-label="Podcast Distribution AI">
+            <Logo className="h-7 w-auto" />
           </Link>
           <p className="text-sm leading-relaxed text-muted-foreground">
             From topic idea to a finished, published podcast episode in minutes — script, voice, and

components/marketing/site-header.tsx

@@ -1,16 +1,13 @@
 import Link from "next/link";
-import { Mic } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/ui/logo";
 
 export function SiteHeader() {
   return (
     <header className="sticky top-0 z-40 w-full border-b border-border/70 bg-background/85 backdrop-blur-md">
       <div className="container flex h-[72px] items-center justify-between">
-        <Link href="/" className="flex items-center gap-2.5 font-display text-lg font-bold tracking-tight">
-          <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
-            <Mic className="h-5 w-5" />
-          </span>
-          <span>Podcast Distribution AI</span>
+        <Link href="/" className="flex items-center" aria-label="Podcast Distribution AI">
+          <Logo className="h-7 w-auto" priority />
         </Link>
 
         <nav className="hidden items-center gap-8 text-sm font-medium text-muted-foreground md:flex">

components/ui/logo.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import logoDark from "@/public/logo-dark.png";
+import logoLight from "@/public/logo-light.png";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Podcast Distribution AI wordmark. Two assets ship: a dark logo for light
+ * backgrounds and a light logo for dark backgrounds. They are swapped purely
+ * with Tailwind `dark:` variants, so on surfaces without a `.dark` ancestor
+ * (marketing, auth, admin, public share) the dark logo is always shown — which
+ * is exactly where a dark logo is required.
+ *
+ * `className` controls the height (default `h-7`); width follows automatically.
+ * Set `priority` for above-the-fold placements (e.g. site/app headers).
+ */
+export function Logo({ className, priority = false }: { className?: string; priority?: boolean }) {
+  return (
+    <>
+      <Image
+        src={logoDark}
+        alt="Podcast Distribution AI"
+        priority={priority}
+        className={cn("h-7 w-auto dark:hidden", className)}
+      />
+      <Image
+        src={logoLight}
+        alt="Podcast Distribution AI"
+        priority={priority}
+        className={cn("hidden h-7 w-auto dark:block", className)}
+      />
+    </>
+  );
+}