Replace blue M icon with app logo in nav bar

site/src/App.tsx

@@ -1,3 +1,4 @@
+import logoImg from "./assets/logo.png";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { motion, AnimatePresence, useMotionValue, useTransform, useReducedMotion } from "motion/react";
 import inboxImg from "./assets/screenshots/01-inbox.jpg";
@@ -389,7 +390,7 @@ export default function App() {
         <div className="hero-bg" />
         <motion.nav className="topbar" {...fade(reduced, 0)}>
           <div className="brand">
-            <div className="brand-mark">M</div>
+            <img src={logoImg} alt="Multi-Casual" className="brand-mark" />
             <span>{t.nav.brand}</span>
           </div>
           <div className="nav-links">

site/src/styles.css

@@ -77,12 +77,9 @@ a { color: inherit; text-decoration: none; }
 .brand-mark {
   width: 34px;
   height: 34px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  color: white;
-  background: var(--blue);
-  box-shadow: 0 8px 18px rgba(22, 71, 255, 0.32);
+  border-radius: 10px;
+  object-fit: cover;
+  display: block;
 }
 
 .nav-links a {