Replace header/footer lock badge with the real Osias brand mark

The nav and footer logo were still using the padlock icon in a
bordered badge div — a placeholder from before the brand mark existed.
Swapped in PauseMarkIcon (solid-fill, matches the extension icon and
favicon) and dropped the badge wrapper entirely; the mark sits directly
next to the wordmark now, same as the extension's own toolbar icon.
LockIcon itself is untouched — it still depicts the actual lock
feature in "How it works" and the hero demo card, which is correct.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01HoMzqFw3d93hG6c9xB4thU

src/components/SiteFooter.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { LockIcon } from "./icons";
+import { PauseMarkIcon } from "./icons";
 import { LINKS } from "@/lib/links";
 
 export function SiteFooter() {
@@ -8,9 +8,7 @@ export function SiteFooter() {
       <div className="mx-auto flex max-w-[1180px] flex-col gap-10 px-8 py-14 sm:flex-row sm:items-start sm:justify-between sm:px-16">
         <div className="flex max-w-[340px] flex-col gap-3">
           <Link href="/" className="flex items-center gap-2.5">
-            <span className="flex h-[26px] w-[26px] items-center justify-center rounded-md border border-white/10 bg-white/6">
+            <PauseMarkIcon className="h-[19px] w-[19px] text-accent" />
-              <LockIcon className="h-[13px] w-[13px] text-accent" />
-            </span>
             <span className="font-display text-base font-medium text-cream">Osias</span>
           </Link>
           <p className="text-[13px] leading-relaxed text-muted-2">

src/components/SiteHeader.tsx

@@ -1,14 +1,12 @@
 import Link from "next/link";
-import { LockIcon } from "./icons";
+import { PauseMarkIcon } from "./icons";
 import { LINKS } from "@/lib/links";
 
 export function SiteHeader() {
   return (
     <header className="flex items-center justify-between px-8 py-7 border-b border-white/7 sm:px-16">
       <Link href="/" className="flex items-center gap-2.5">
-        <span className="flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-white/10 bg-white/6">
+        <PauseMarkIcon className="h-[22px] w-[22px] text-accent" />
-          <LockIcon className="h-[15px] w-[15px] text-accent" />
-        </span>
         <span className="font-display text-xl font-medium text-cream">Osias</span>
       </Link>
       <nav className="hidden items-center gap-9 text-sm sm:flex">

src/components/icons.tsx

@@ -12,6 +12,18 @@ const stroke = {
   strokeLinejoin: "round" as const,
 };
 
+// The Osias brand mark — two uneven bars, a paused instrument with a quieter
+// second reading as a frozen price candle. Solid fill (not the stroke system
+// above) since this is the logo, not a UI icon — matches copilot/public/icon.
+export function PauseMarkIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 64 64" className={className} fill="currentColor">
+      <rect x="18" y="15" width="10" height="34" rx="5" />
+      <rect x="36" y="19" width="10" height="26" rx="5" />
+    </svg>
+  );
+}
+
 export function LockIcon({ className }: IconProps) {
   return (
     <svg viewBox="0 0 24 24" className={className} {...stroke} strokeWidth={2}>