fix(nav): mobile flex layout restored, desktop 3-col grid, gray→rose colors

Layout:
- Mobile: flex layout unchanged — [Logo] ml-auto [About] [Auth]
- Desktop sm+: 3-col grid [1fr Logo | auto nav centered | 1fr Auth]
  achieved by flex→sm:grid responsive switch + sm:ml-0 on nav

Colors:
- Default: text-gray-600 font-normal (matches app theme, not rose)
- Hover: border-rose-300 + bg-rose-50 + text-rose-500 (border reserved
  via border-transparent at rest to prevent layout shift)
- Active: text-rose-600 font-medium (slight weight bump, not semibold)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/marketing/MarketingNav.tsx

@@ -6,10 +6,11 @@ import { NavAuthButton } from "./NavAuthButton";
 
 function navLinkClass(pathname: string, href: string) {
   const isActive = pathname === href || pathname.startsWith(href + "/");
+  // border-transparent always reserves the border space → no layout shift on hover
   const base = "text-sm px-3 py-1.5 rounded-full border transition-all duration-150";
   return isActive
-    ? `${base} font-semibold text-rose-600 border-transparent`
+    ? `${base} font-medium text-rose-600 border-transparent`
-    : `${base} font-medium text-rose-500 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600`;
+    : `${base} font-normal text-gray-600 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-500`;
 }
 
 export function MarketingNav() {
@@ -17,10 +18,14 @@ export function MarketingNav() {
 
   return (
     <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm">
-      {/* 3-col grid: logo left · nav truly centered · auth right */}
+      {/*
-      <div className="max-w-5xl mx-auto px-5 py-3.5 grid grid-cols-[1fr_auto_1fr] items-center">
+        Mobile  → flex: [Logo] ····ml-auto···· [About] [Auth]
-        {/* Left: Logo */}
+        Desktop → 3-col grid: [Logo] [About · Blog] [Auth]
-        <Link href="/" className="flex items-center gap-2 group">
+      */}
+      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr]">
+
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 group shrink-0">
           <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
           <span
             className="text-xl font-bold text-gray-900 tracking-tight"
@@ -30,13 +35,13 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center: nav links */}
+        {/* Nav links
-        <nav className="flex items-center gap-0.5">
+            ml-auto on mobile (flex) pushes links to right, next to auth button
-          {/* About — always visible, including mobile */}
+            sm:ml-0 cancels that in grid mode (centering is handled by the grid) */}
+        <nav className="flex items-center gap-0.5 ml-auto sm:ml-0">
           <Link href="/about" className={navLinkClass(pathname, "/about")}>
             About
           </Link>
-          {/* Blog — desktop only */}
           <Link
             href="/blog"
             className={`hidden sm:inline-flex ${navLinkClass(pathname, "/blog")}`}
@@ -45,10 +50,15 @@ export function MarketingNav() {
           </Link>
         </nav>
 
-        {/* Right: auth button */}
+        {/* Auth button — justify-end so it hugs the right edge in grid col 3 */}
-        <div className="flex justify-end">
+        <div className="hidden sm:flex sm:justify-end">
           <NavAuthButton />
         </div>
+        {/* On mobile the auth button sits outside the grid, after the nav */}
+        <div className="sm:hidden shrink-0">
+          <NavAuthButton />
+        </div>
+
       </div>
     </header>
   );