diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 057f22e..661bc88 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@repo/ui"],
+  // Inline the CSS into the HTML so the render-blocking stylesheet request leaves the
+  // critical path. That request was the LCP gate on throttled mobile: the logo (a data
+  // URI, ready instantly) couldn't paint until the separate CSS round-trip finished,
+  // and that round-trip varied run-to-run (TTFB 0, render delay ~2.3s). Inlined CSS
+  // arrives with the HTML, so the logo paints right away.
+  experimental: {
+    inlineCss: true,
+  },
   async redirects() {
     return [
       {
diff --git a/apps/web/src/components/layout/site-logo.tsx b/apps/web/src/components/layout/site-logo.tsx
index 487ac54..fb3c1a2 100644
--- a/apps/web/src/components/layout/site-logo.tsx
+++ b/apps/web/src/components/layout/site-logo.tsx
@@ -7,13 +7,14 @@ export function SiteLogo() {
   return (
     <Link href="/" className="flex items-center gap-3 group">
       <div className="relative w-40 h-11 lg:w-48 lg:h-12">
-        {/* Dark mode logo (white text) */}
+        {/* Dark mode logo (white text). No `priority`: the header wordmark is small,
+            not the LCP, and hidden during the splash; preloading both theme variants
+            just stole slow-4G bandwidth from the real critical path. */}
         <Image
           src="/images/branding/clean_dark_w_text.svg"
           alt="Such Software"
           fill
           className="object-contain hidden dark:block"
-          priority
         />
         {/* Light mode logo (black text) */}
         <Image
@@ -21,7 +22,6 @@ export function SiteLogo() {
           alt="Such Software"
           fill
           className="object-contain block dark:hidden"
-          priority
         />
       </div>
     </Link>