Consolidate audit-fixes branch: webhooks, integrations, and deploy hardening

Batch commit of the pending working tree on security/audit-fixes-2026-07.
Major areas:
- Outbound webhooks / Zapier: schema + signed delivery with retries, public
  v1 API (REST-hook subscribe/unsubscribe), settings UI, cron drain.
- Deploy hardening: email via SMTP2GO (Resend fully removed), verified DB TLS
  (DATABASE_SSL=require + DATABASE_CA), storage fails loud in production when
  Spaces is unconfigured instead of silently using ephemeral disk.
- Integrations & features (concurrent work): accounting (QuickBooks/Xero),
  e-signature (DocuSign/Dropbox Sign), PayPal, geocoding/maps, onboarding,
  expanded legal pages.
- DB migrations 0006–0009.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

components/shared/logo.tsx

@@ -1,64 +1,73 @@
 import Link from "next/link"
-import { Building2 } from "lucide-react"
+import Image from "next/image"
 import { cn } from "@/lib/utils"
 
 type Size = "sm" | "md" | "lg"
+type Theme = "light" | "dark"
 
-const SIZES: Record<Size, { box: string; icon: string; title: string; sub: string; gap: string }> = {
-  sm: { box: "h-7 w-7",  icon: "h-4 w-4",       title: "text-xs",     sub: "text-[9px]",  gap: "gap-2" },
-  md: { box: "h-8 w-8",  icon: "h-[18px] w-[18px]", title: "text-[13px]", sub: "text-[10px]", gap: "gap-2.5" },
-  lg: { box: "h-9 w-9",  icon: "h-5 w-5",       title: "text-[15px]", sub: "text-[11px]", gap: "gap-2.5" },
+// Wordmark lockup height per size — width follows the image's aspect ratio.
+const WORDMARK_H: Record<Size, string> = {
+  sm: "h-6", // 24px
+  md: "h-7", // 28px
+  lg: "h-8", // 32px
 }
 
-/** The brand mark — gradient rounded square with the building glyph. */
+// Square brand-mark box per size.
+const MARK_BOX: Record<Size, string> = {
+  sm: "h-7 w-7",
+  md: "h-8 w-8",
+  lg: "h-9 w-9",
+}
+
+/** The square brand mark (framework "monster") — used where space is tight, e.g. the collapsed sidebar. */
 export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
-  const s = SIZES[size]
   return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/25",
-        s.box,
-        className
-      )}
-    >
-      <Building2 className={s.icon} />
-    </div>
+    <Image
+      src="/logo-mark.png"
+      alt="Property Management Network"
+      width={512}
+      height={512}
+      priority
+      className={cn("shrink-0 rounded-lg object-contain", MARK_BOX[size], className)}
+    />
   )
 }
 
 /**
- * Full brand lockup: mark + "Property Management" / "Network" wordmark.
- * Designed for the app's dark surfaces (white title, indigo accent).
+ * Full brand wordmark lockup (mark + "Property Management Network").
+ * `theme="light"` (default) renders the white wordmark for dark surfaces;
+ * `theme="dark"` renders the dark wordmark for light surfaces.
  * Pass `href={null}` to render a non-link version.
  */
 export function Logo({
   size = "md",
+  theme = "light",
   className,
   href = "/",
 }: {
   size?: Size
+  theme?: Theme
   className?: string
   href?: string | null
 }) {
-  const s = SIZES[size]
-
-  const content = (
-    <>
-      <LogoMark size={size} />
-      <span className="flex flex-col leading-none">
-        <span className={cn("font-bold tracking-tight text-white", s.title)}>Property Management</span>
-        <span className={cn("font-semibold uppercase tracking-[0.18em] text-indigo-400", s.sub)}>Network</span>
-      </span>
-    </>
+  const img = (
+    <Image
+      src={theme === "dark" ? "/logo-dark.png" : "/logo-light.png"}
+      alt="Property Management Network"
+      width={375}
+      height={40}
+      priority
+      className={cn("w-auto", WORDMARK_H[size])}
+    />
   )
 
-  const classes = cn("flex items-center", s.gap, className)
+  const classes = cn("flex items-center", className)
 
   return href ? (
-    <Link href={href} className={classes}>
-      {content}
+    <Link href={href} className={classes} aria-label="Property Management Network">
+      {img}
     </Link>
   ) : (
-    <div className={classes}>{content}</div>
+    <div className={classes}>{img}</div>
   )
 }