Brand: replace PawPrint mark with the new clawmates claw logo

Swapped the placeholder PawPrint icon for the new claw logo everywhere it
appears: the marketing nav (mobile + desktop), the footer, the login card,
and the app left rail. The supplied PNG was a red claw on a solid near-black
background, so I flood-filled the background to transparent (the dark-red
outline survives the black threshold) and exported a trimmed, optimized
public/images/clawmates-mark.png (321x256, 88KB from 1.7MB). It reads cleanly
on both light (nav/login) and dark (footer/rail) surfaces.

Also regenerated the favicon + PWA icons from the new mark:
- src/app/icon.png (Next uses it as the favicon; removed the old favicon.ico)
- public/icons/icon-192.png and icon-512.png (claw on #0a0a0a, maskable)

Roster-card avatars on the login panel stay as PawPrint (decorative, not the
brand). Regenerated all seven @visual baselines that contain the mark — the
swap is sub-threshold for maxDiffPixelRatio, so I deleted and recaptured them
rather than relying on update-snapshots.

typecheck/lint/build green · all @visual green · deployed and verified live
(mark, /icon.png, and PWA icons all 200).

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/auth/AuthShell.tsx

@@ -34,9 +34,12 @@ export function AuthShell({
         {/* Left — form card */}
         <div className="flex flex-col items-center gap-8 px-8 py-12 sm:px-14">
           <Link href="/" aria-label="clawmates" className="flex items-center gap-2">
-            <span className="flex size-9 items-center justify-center rounded-xl bg-marketing-ink">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
-              <PawPrint aria-hidden size={20} className="text-marketing-coral" />
+            <img
-            </span>
+              src="/images/clawmates-mark.png"
+              alt=""
+              className="h-8 w-auto"
+            />
             <span className="text-lg font-bold tracking-tight text-marketing-ink">
               clawmates
             </span>

frontend/src/components/marketing/Nav.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import Link from "next/link";
-import { PawPrint } from "lucide-react";
 import { useState } from "react";
 
 /** Sticky rounded-pill nav matching WorkClaw's layout: brand mark + wordmark
@@ -24,9 +23,12 @@ export function MarketingNav() {
         <div className="sm:hidden">
           <nav className="flex w-full items-center justify-between rounded-full border border-[rgba(22,29,39,0.06)] bg-white/95 p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] backdrop-blur-[11.5px]">
             <Link href="/" aria-label="clawmates" className="flex items-center gap-2 px-2 py-1">
-              <span className="flex size-8 items-center justify-center rounded-lg bg-marketing-ink">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
-                <PawPrint aria-hidden size={18} className="text-marketing-coral" />
+              <img
-              </span>
+                src="/images/clawmates-mark.png"
+                alt=""
+                className="h-7 w-auto"
+              />
               <span className="text-base font-bold tracking-tight text-marketing-ink">
                 clawmates
               </span>
@@ -100,9 +102,12 @@ export function MarketingNav() {
         {/* Desktop pill */}
         <nav className="hidden w-full items-center justify-between rounded-full border border-solid border-[rgba(22,29,39,0.06)] bg-white/[0.96] p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] sm:flex">
           <Link href="/" aria-label="clawmates" className="flex h-12 items-center gap-2 pl-2">
-            <span className="flex size-10 items-center justify-center rounded-xl bg-marketing-ink">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
-              <PawPrint aria-hidden size={22} className="text-marketing-coral" />
+            <img
-            </span>
+              src="/images/clawmates-mark.png"
+              alt=""
+              className="h-9 w-auto"
+            />
             <span className="text-xl font-bold tracking-tight text-marketing-ink">
               clawmates
             </span>

frontend/src/components/marketing/Sections.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import { PawPrint } from "lucide-react";
 
 /* Marketing landing — WorkClaw's full section layout/styling reproduced 1:1,
    Clawmates-branded with honest claims (no borrowed customer logos, no
@@ -531,9 +530,12 @@ export function Footer() {
         <div className="flex w-full max-w-[1100px] flex-col gap-[48px] sm:gap-[72px]">
           <div className="flex items-center justify-between gap-8">
             <Link href="/" aria-label="clawmates" className="flex items-center gap-3">
-              <span className="flex size-12 items-center justify-center rounded-2xl bg-white/10 sm:size-16">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
-                <PawMark />
+              <img
-              </span>
+                src="/images/clawmates-mark.png"
+                alt=""
+                className="h-10 w-auto sm:h-12"
+              />
               <span className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
                 clawmates
               </span>
@@ -570,10 +572,6 @@ export function Footer() {
   );
 }
 
-function PawMark() {
-  return <PawPrint aria-hidden size={28} className="text-marketing-coral" />;
-}
-
 const SOCIALS = [
   { label: "Instagram", icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="5" /><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none" /></svg>) },
   { label: "X", icon: (<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>) },

frontend/src/components/shell/LeftRail.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useQueryStates } from "nuqs";
-import { Menu, PawPrint, Plus, X } from "lucide-react";
+import { Menu, Plus, X } from "lucide-react";
 import { useState } from "react";
 
 import type { Agent, User } from "@/lib/api/schemas";
@@ -64,9 +64,12 @@ export function LeftRail({ user, roster, creditsBalance }: LeftRailProps) {
             black squircle brand tile with our coral mark. */}
         <header className="flex h-20 items-center pl-4 md:group-data-[collapsed=true]/rail:justify-center md:group-data-[collapsed=true]/rail:pl-0">
           <Link href="/" aria-label="clawmates" className="inline-flex">
-            <span className="flex size-12 items-center justify-center rounded-2xl bg-black">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
-              <PawPrint aria-hidden size={26} className="text-coral" />
+            <img
-            </span>
+              src="/images/clawmates-mark.png"
+              alt=""
+              className="h-11 w-auto"
+            />
             <span className="sr-only">clawmates</span>
           </Link>
           <button