diff --git a/.changeset/landing-page-seo-and-rotation.md b/.changeset/landing-page-seo-and-rotation.md
new file mode 100644
index 00000000..6e1b9e6a
--- /dev/null
+++ b/.changeset/landing-page-seo-and-rotation.md
@@ -0,0 +1,40 @@
+---
+'frontend': patch
+---
+
+Put the FAQ answers in the page, and stop the feature list rotating at readers
+
+The eight FAQ answers were mounted only once their question was clicked, so the
+most substantial writing on the landing page - which S3 permissions are needed,
+where the credentials are actually stored - reached a crawler as nothing at all.
+They are in the markup now, collapsed by a `0fr` grid row rather than dropped
+from the tree, and the SSR test asserts every answer is really there. The
+accordion also has `aria-expanded` and `aria-controls` it never had, and each
+question is a heading wrapping its button rather than a heading buried inside
+one, so the eight questions form an outline a reader can navigate.
+
+`/` is now a server shell around the client page, which is what lets it emit
+FAQPage structured data built from the same `faqData` the section renders -
+Google requires the markup to describe what a visitor can see, and generating
+both from one array is what keeps that true when a question is edited. The route
+was already server-rendered on demand, so the shell costs nothing new.
+
+`verification` no longer ships `content="your-google-verification-code"` on
+every page: a claim to own the site backed by a token that verifies nothing. It
+reads `GOOGLE_SITE_VERIFICATION` from the server environment and is left off
+when unset.
+
+Both feature sections rotated every six seconds for as long as the tab was open.
+Narrower than `lg` the image column beside the list is `hidden`, so the timer's
+only effect was to swap the paragraph a reader was in the middle of - and the
+pause is bound to hover, which a touch device never fires, so on a phone there
+was no way to stop it. Rotation is now gated on the viewport being wide enough
+to show the image and on the section being on screen at all. The 500ms crossfade
+it promised never ran either: `key` remounts the image, and a brand new element
+has no previous opacity to transition from, so it was a hard cut. It fades in
+now.
+
+Three star counters mount on the landing page in the same tick, and the GitHub
+cache is only written once a response lands - so all three missed it and all
+three fetched, against a limit of sixty requests an hour for an unauthenticated
+IP. Callers now share a request that is already running.
diff --git a/.changeset/navbar-handover-jerk.md b/.changeset/navbar-handover-jerk.md
new file mode 100644
index 00000000..52c6b1fa
--- /dev/null
+++ b/.changeset/navbar-handover-jerk.md
@@ -0,0 +1,104 @@
+---
+'frontend': patch
+---
+
+Hand the landing page's two navbars over without the jerk
+
+Scrolling out of the hero made the page lurch. Three separate things fired on
+that one scroll position, and one of them moved the page: the wrapper holding
+everything below the hero carried
+`style={{ paddingTop: showMobileNav ? '3.5rem' : '0' }}`, so 56px appeared under
+the hero at the exact moment the bar faded in and everything below it dropped.
+An inline style also beats the `lg:pt-0` beside it, so desktop - which has no
+mobile bar to make room for - got the same shove. The room is held open
+permanently now.
+
+Held open, it is not hidden until the bar covers it, which is what this said
+first. The bar only arrives once the hero is entirely past, but the reserved
+room enters the viewport from the bottom edge a whole screen before that - and
+as padding on a transparent wrapper what showed through it was `body`, which is
+`--secondary`, a lighter band than the `--background` on either side of it. On a
+phone it read as a grey seam sliding up the page ahead of the navbar, and in
+light mode as a blue-grey one across white.
+
+So the room is a strip of its own now, painted `--background` like its
+neighbours and carrying the divider artwork - the filaments running into the
+mark - so that the same 56px reads as the deliberate join between hero and page
+that a reader is about to scroll through. It is exactly the height of the bar
+that lands on it, and gone at `lg`, where there is no bar to make room for and
+the hero still meets the next section directly.
+
+The artwork needed treating rather than dropping in. The file is not the
+transparent PNG it appears to be: every pixel is opaque and what should have
+been transparency was flattened to a flat grey at luminance 43, so as an image
+it would have replaced one wrong-coloured band with another. A `contrast()`
+lands that flat field on black and `screen` composites black as no change, so
+the page's own background is what shows between the filaments; on a light page
+the pair inverts to `contrast()` onto white and `multiply`. A genuinely
+transparent export would let both filters come off.
+
+The floating desktop navbar mounted on the way past, too, which built thirty-odd
+nodes, a backdrop-filter layer to rasterise and a star count that lands a tick
+later and re-centres the pill, all on the frame the browser was already busy
+scrolling - and then ran two `setTimeout`s to fade in what it had just built. It
+is now mounted with the rest of the page and revealed with a composited fade,
+the same way the mobile bar always was. It fades out to `invisible` rather than
+just transparent, so a bar nobody can see is not still tabbable.
+
+Both bars now take their cue from one `IntersectionObserver` on the hero's
+sentinel, which the page owns and passes down. That replaces two `scroll`
+listeners that each called `getBoundingClientRect()` on every event, forcing a
+synchronous layout per frame, one of them re-registering itself on every toggle.
+It also means the bars hand off at the same pixel: the floating nav used to
+appear while the hero was still most of the screen, which is what made the page
+look like it had two navbars at once.
+
+The blog navbar ran a third copy of that listener, tracking a sentinel into two
+state values that nothing rendered. It is gone, along with the sentinel it
+watched.
+
+The Discord card in the hero navbar opened off the top of the screen. That
+navbar asks for a card above it, which is right where it starts - near the
+bottom of the viewport - but it scrolls with the page, and a reader who has
+pushed it near the top has no room above it left. `placement` is a preference
+now rather than an outcome: the card is measured against the space on each side
+of its trigger when it opens, and moves to the other side when the requested one
+cannot hold it and the other is roomier.
+
+The connector squiggle beside that card is drawn above the chrome it comes out
+of, so it wins every overlap - and out of a navbar, where the trigger is a 20px
+icon in a packed row, what it won was the theme toggle sitting next to it. It is
+measured against its neighbours now and left out where there is something within
+its reach, which leaves the card to stand on its own in both navbars. Out of the
+sidebar, where the row is full width and the arrow leaves into open page, it is
+unchanged.
+
+Three more things about the mobile bar, all of them visible on a phone.
+
+It could fail to appear at all. An IntersectionObserver only reports when its
+target's intersecting state changes, and against the bare viewport a sentinel
+below the fold and a sentinel above it are both "not intersecting" - so a jump
+straight from one to the other never reported anything and the bar stayed hidden
+on a page scrolled well past the hero. A `#faq` deep link does that, so does the
+scroll position a browser restores on a back navigation, and so does any hero
+taller than the viewport, which is every phone once the address bar has taken
+its cut. The observer's root is extended downward past any page length now, so
+the sentinel intersects from load until it leaves over the top edge and the one
+crossing that matters is a real transition.
+
+Every link in the menu landed its own destination underneath the bar. Both
+navbars are fixed at the top and `scrollIntoView` puts the target's top edge at
+the top of the viewport, which is exactly where they are, so "Curious about
+Opndrive?" arrived cut in half. The sections carry `scroll-mt` matching each
+navbar's height, so the browser stops short by the bar it is scrolling under.
+
+And the open menu could not be scrolled. Six links, three action rows and a
+button come to around 620px with no cap and no overflow, which clears a tall
+phone and does not clear a short one once the browser's chrome has taken its
+cut, leaving the "Get Started" button at the bottom off screen and unreachable.
+It is capped to what is left of the viewport below the bar, in `dvh` so that the
+address bar is counted, and scrolls past that.
+
+The bar's own bottom hairline is a shadow rather than `border-b`, so that it is
+exactly the `h-14 sm:h-16` it says it is - as a border it measured a pixel
+taller, and the strip reserving room for it is sized off the stated height.
diff --git a/frontend/public/hero-divider.png b/frontend/public/hero-divider.png
new file mode 100644
index 00000000..ce324ff6
Binary files /dev/null and b/frontend/public/hero-divider.png differ
diff --git a/frontend/src/app/blog/[slug]/page.tsx b/frontend/src/app/blog/[slug]/page.tsx
index 395a25eb..814b9188 100644
--- a/frontend/src/app/blog/[slug]/page.tsx
+++ b/frontend/src/app/blog/[slug]/page.tsx
@@ -213,7 +213,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
       <BlogNavbar />
 
       {/* Static Header Spacer */}
-      <div id="static-navbar" className="h-1"></div>
+      <div className="h-1"></div>
 
       {/* Article Container */}
       <article className="w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
index fb469a58..81ddc75d 100644
--- a/frontend/src/app/blog/page.tsx
+++ b/frontend/src/app/blog/page.tsx
@@ -129,7 +129,7 @@ export default async function BlogPage({ searchParams }: BlogPageProps) {
       <BlogNavbar />
 
       {/* Static Header Spacer */}
-      <div id="static-navbar" className="h-1"></div>
+      <div className="h-1"></div>
 
       {/* Hero Section */}
       <section className="pt-16 bg-background">
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 5f1efad4..7e65d97b 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -359,6 +359,72 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+/**
+ * The artwork in the strip that joins the hero to the page below it.
+ *
+ * That strip is the room the fixed mobile bar drops into, so its height is the
+ * bar's and cannot grow. The source is 3.5:1 in a box nearer 7:1, so `cover`
+ * crops to the middle band - which is where the filaments run and where the
+ * mark sits - rather than letterboxing it.
+ *
+ * The file is not the transparent PNG it looks like: every pixel is opaque, and
+ * what should have been transparency was flattened into a flat grey at
+ * luminance 43, with the drawing itself only reaching about 110. Dropped in as
+ * an image it would have replaced the wrong-coloured band this strip exists to
+ * remove with another one, a shade lighter still.
+ *
+ * So the flat grey is turned back into nothing. `contrast(1.62)` pivots on 128
+ * and lands the whole flat field, which wanders up to 47, at or under 0 - black - and `screen` composites black as no
+ * change at all, so the page's own `--background` is what shows between the
+ * filaments. `brightness` afterwards only lifts what survived; it cannot raise
+ * black off zero, so the background stays put however far it is pushed. Replace
+ * the file with a genuinely transparent export and these two filters come off
+ * together.
+ *
+ * The mask is what stops the rest looking like a pasted-in rectangle. It fades
+ * hard on the vertical, where the strip's own edges would otherwise be a pair
+ * of seams across the page, and only gently on the horizontal, where the
+ * artwork runs full-bleed off both sides of the screen the way it is drawn to.
+ *
+ * `-webkit-mask-image` alongside the standard property for Safari, which only
+ * took the unprefixed one in 15.4 and is still worth carrying on a phone-only
+ * decoration.
+ */
+.hero-divider-art {
+  background-image: url('/hero-divider.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: contrast(1.62) brightness(1.5);
+  mix-blend-mode: screen;
+  opacity: 0.85;
+  -webkit-mask-image: radial-gradient(130% 70% at 50% 50%, #000 10%, transparent 80%);
+  mask-image: radial-gradient(130% 70% at 50% 50%, #000 10%, transparent 80%);
+}
+
+/**
+ * The same drawing against a light page.
+ *
+ * Inverting first puts the flat background at 212 and the artwork below it, so
+ * the pairing flips with it: `contrast` lands 212 on white instead of black,
+ * and `multiply` is the mode that composites white as no change. The filaments
+ * come out dark on white, reading the same way round as they do on the dark
+ * page rather than as a photographic negative of it.
+ */
+:root[data-theme='light'] .hero-divider-art {
+  filter: invert(1) contrast(1.62);
+  mix-blend-mode: multiply;
+  opacity: 0.6;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme='dark']) .hero-divider-art {
+    filter: invert(1) contrast(1.62);
+    mix-blend-mode: multiply;
+    opacity: 0.6;
+  }
+}
+
 .custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--secondary-foreground) transparent;
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index b13a3c34..8b07ea07 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -76,9 +76,18 @@ export const metadata: Metadata = {
       'max-snippet': -1,
     },
   },
-  verification: {
-    google: 'your-google-verification-code', // Add your Google Search Console verification code
-  },
+  /**
+   * Only emitted once a real code is configured.
+   *
+   * The placeholder that stood here put
+   * `<meta name="google-site-verification" content="your-google-verification-code">`
+   * on every page: a claim to own the site, backed by a token that verifies
+   * nothing. Read from the server environment, so it never reaches the client
+   * bundle, and left off entirely when unset.
+   */
+  ...(process.env.GOOGLE_SITE_VERIFICATION
+    ? { verification: { google: process.env.GOOGLE_SITE_VERIFICATION } }
+    : {}),
 };
 
 export default async function RootLayout({
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 0a1d42eb..17954a2e 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,214 +1,41 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { FaGithub } from 'react-icons/fa';
-import { Menu, X } from 'lucide-react';
-import HeroSection from '@/features/landing-page/components/hero-section';
-import Navbar from '@/features/landing-page/components/navbar';
-import { DiscordCommunityLink } from '@/shared/components/discord/discord-community-link';
-import FeaturesSection from '@/features/landing-page/components/feature-section';
-import WorkSmarterSection from '@/features/landing-page/components/work-smarter-section';
-import FAQSection from '@/features/landing-page/components/faq-section';
-import CTASection from '@/features/landing-page/components/cta-section';
-import ThemeToggleCustom from '@/shared/components/layout/ThemeToggleCustom';
-import { SiteFooter } from '@/shared/components/layout/site-footer';
-import { useOpndriveStars } from '@/hooks/use-github-stars';
-import { useAuth } from '@/hooks/use-auth';
-import { DOCS_URL } from '@/config/links';
-
-const navItems = [
-  { label: 'Home', href: '#hero' },
-  { label: 'Features', href: '#features' },
-  { label: 'Tools', href: '#tools' },
-  { label: 'FAQ', href: '#faq' },
-  { label: 'Docs', href: DOCS_URL },
-  { label: 'Get Started', href: '#get-started' },
-];
-
-export default function LandingPage() {
-  const router = useRouter();
-  const { userCreds } = useAuth();
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [showMobileNav, setShowMobileNav] = useState(false);
-
-  // Use custom hook for GitHub stars
-  const { stars } = useOpndriveStars();
-
-  // Simple scroll detection to show navbar after hero section
-  useEffect(() => {
-    const handleScroll = () => {
-      const heroSection = document.getElementById('hero');
-      if (heroSection) {
-        const heroRect = heroSection.getBoundingClientRect();
-        const shouldShowNav = heroRect.bottom <= 0; // Show when hero is completely scrolled past
-        setShowMobileNav(shouldShowNav);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    handleScroll(); // Check initial state
-
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  /**
-   * Where the main call to action goes, and what it admits to doing.
-   *
-   * It has always sent a visitor with a connected bucket to their drive rather
-   * than back through the connect flow - it just did so while still reading
-   * "Get Started", so the one button whose label people rely on was the one
-   * that did not describe itself. The label now names the destination.
-   *
-   * The session comes from the auth context rather than a second, hand-copied
-   * read of the `s3_user_session` key, which is the sort of duplicate that
-   * survives a rename of the original.
-   *
-   * There is deliberately no loading state. This page is public now, so the
-   * server renders it before any session has been looked for - and a hero
-   * button reading "Loading..." is what a crawler would have indexed as the
-   * call to action. It says "Get Started" and goes to /connect until a session
-   * turns up, which is the right answer for almost everyone who lands here and
-   * a harmless one for the rest: /connect offers them the way back in.
-   */
-  const hasSession = userCreds !== null;
-  const ctaLabel = hasSession ? 'Go to Dashboard' : 'Get Started';
-
-  const handleGetStarted = () => {
-    router.push(hasSession ? '/dashboard' : '/connect');
-  };
-
-  const handleNavClick = (href: string) => {
-    setIsMobileMenuOpen(false);
-    if (href.startsWith('http')) {
-      window.location.href = href;
-      return;
-    }
-    if (!href.startsWith('#')) {
-      router.push(href);
-      return;
-    }
-    const element = document.querySelector(href);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
+import { headers } from 'next/headers';
+import LandingPage from '@/features/landing-page/components/landing-page';
+import { faqData } from '@/features/landing-page/config/faq-section';
+
+/**
+ * A server shell around the landing page, which is a client component and so
+ * cannot do either of the two things below.
+ *
+ * The FAQ structured data is built from the same `faqData` the section renders,
+ * because Google requires the markup to describe what a visitor can actually
+ * see - generating both from one array is what keeps that true when a question
+ * is edited. And the nonce, which every inline script here carries, can only be
+ * read on the server.
+ *
+ * The route was already server-rendered on demand before this - the root layout
+ * reads `headers()` - so the shell costs nothing it was not already paying.
+ */
+export default async function Page() {
+  const nonce = (await headers()).get('x-nonce') ?? undefined;
 
   return (
-    <main>
-      {/* Simple Mobile Navbar - Hidden in hero, visible after */}
-      <div
-        className={`lg:hidden fixed top-0 left-0 right-0 z-50 bg-card/95 backdrop-blur-md border-b border-border transition-all duration-300 ${
-          showMobileNav
-            ? 'opacity-100 translate-y-0'
-            : 'opacity-0 -translate-y-full pointer-events-none'
-        }`}
-      >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6">
-          <div className="flex items-center justify-between h-14 sm:h-16">
-            {/* Logo */}
-            <div className="flex items-center gap-2">
-              <img src="/logo.png" alt="Opndrive Logo" className="w-6 h-6 sm:w-7 sm:h-7" />
-              <span className="text-base sm:text-lg font-bold text-foreground">Opndrive</span>
-            </div>
-
-            {/* Hamburger Menu Button */}
-            <button
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-              className="p-2 text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Menu"
-            >
-              {isMobileMenuOpen ? (
-                <X className="w-5 h-5 sm:w-6 sm:h-6" />
-              ) : (
-                <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Mobile Menu Dropdown */}
-        {isMobileMenuOpen && showMobileNav && (
-          <div className="border-t border-border bg-card/98 backdrop-blur-md">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4">
-              {/* Navigation Links */}
-              <div className="space-y-3 mb-4">
-                {navItems.map((item, index) => (
-                  <button
-                    key={index}
-                    onClick={() => handleNavClick(item.href)}
-                    className="block w-full text-left px-3 py-2 text-md font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
-                  >
-                    {item.label}
-                  </button>
-                ))}
-              </div>
-
-              {/* Divider */}
-              <div className="border-t border-border my-4" />
-
-              {/* Actions Section */}
-              <div className="space-y-3">
-                {/* GitHub Link */}
-                <a
-                  href="https://github.com/opndrive/opndrive"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
-                >
-                  <FaGithub className="w-4 h-4" />
-                  <span>GitHub</span>
-                  {stars !== null && (
-                    <span className="ml-auto text-xs tabular-nums">{stars.toLocaleString()}</span>
-                  )}
-                </a>
-
-                {/* Discord Community - taps open the Bento sheet */}
-                <DiscordCommunityLink
-                  variant="row"
-                  onOpenSheet={() => setIsMobileMenuOpen(false)}
-                />
-
-                {/* Theme Toggle */}
-                <div className="flex items-center justify-between px-3 py-2">
-                  <span className="text-sm font-medium text-muted-foreground">Theme</span>
-                  <ThemeToggleCustom />
-                </div>
-
-                {/* Get Started Button */}
-                <button
-                  onClick={() => {
-                    setIsMobileMenuOpen(false);
-                    handleGetStarted();
-                  }}
-                  className="w-full bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2.5 text-sm font-medium rounded-md transition-colors"
-                >
-                  {ctaLabel}
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Overlay to close menu when clicking outside */}
-      {isMobileMenuOpen && showMobileNav && (
-        <div
-          className="lg:hidden fixed inset-0 z-40 bg-black/20 backdrop-blur-sm"
-          onClick={() => setIsMobileMenuOpen(false)}
-        />
-      )}
-
-      <HeroSection handleGetStarted={handleGetStarted} ctaLabel={ctaLabel} />
-      {/* Add top padding after hero section for mobile navbar */}
-      <div className="lg:pt-0" style={{ paddingTop: showMobileNav ? '3.5rem' : '0' }}>
-        <Navbar />
-        <FeaturesSection />
-        <WorkSmarterSection />
-        <FAQSection />
-        <CTASection handleGetStarted={handleGetStarted} ctaLabel={ctaLabel} />
-        <SiteFooter />
-      </div>
-    </main>
+    <>
+      <script
+        nonce={nonce}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'FAQPage',
+            mainEntity: faqData.map((item) => ({
+              '@type': 'Question',
+              name: item.question,
+              acceptedAnswer: { '@type': 'Answer', text: item.answer },
+            })),
+          }),
+        }}
+      />
+      <LandingPage />
+    </>
   );
 }
diff --git a/frontend/src/app/privacy/legal-pages-ssr.test.tsx b/frontend/src/app/privacy/legal-pages-ssr.test.tsx
index 04f8f3c0..c6aace92 100644
--- a/frontend/src/app/privacy/legal-pages-ssr.test.tsx
+++ b/frontend/src/app/privacy/legal-pages-ssr.test.tsx
@@ -41,7 +41,26 @@ let mockPathname = '/privacy';
 import { AuthProvider } from '@/context/auth-context';
 import PrivacyPolicyPage from './page';
 import TermsOfServicePage from '../terms/page';
-import LandingPage from '../page';
+// The client half of the landing page. `app/page.tsx` is a server shell around
+// it that only adds the FAQ structured data, and being async it cannot go
+// through renderToStaticMarkup - while everything this file is checking for,
+// and the AuthProvider gate it checks against, lives in here.
+import LandingPage from '@/features/landing-page/components/landing-page';
+import { faqData } from '@/features/landing-page/config/faq-section';
+
+/**
+ * React escapes apostrophes and ampersands on the way into the markup, and the
+ * FAQ answers are full of both, so they have to be compared against text that
+ * has been turned back. `&amp;` last, or it would decode the others twice.
+ */
+function decodeEntities(markup: string): string {
+  return markup
+    .replace(/&#x27;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
 
 function renderThroughProviders(pathname: string, page: React.ReactElement): string {
   mockPathname = pathname;
@@ -119,6 +138,18 @@ describe('the landing page renders for crawlers', () => {
   it('renders a real call to action rather than a loading state', () => {
     expect(html).toContain('Get Started');
   });
+
+  // The answers used to be mounted only once their question was clicked, so
+  // the eight most substantial paragraphs on the page - the permissions, where
+  // the credentials live - reached a crawler as nothing at all. They are in the
+  // markup now, collapsed by CSS rather than dropped from the tree.
+  it('renders every FAQ answer into the markup, not just the questions', () => {
+    const text = decodeEntities(html);
+    for (const { question, answer } of faqData) {
+      expect(text).toContain(question);
+      expect(text).toContain(answer);
+    }
+  });
 });
 
 describe('every other route keeps the gate it had', () => {
diff --git a/frontend/src/components/blog/blog-navbar.tsx b/frontend/src/components/blog/blog-navbar.tsx
index 5b01b9a7..c1e6bf91 100644
--- a/frontend/src/components/blog/blog-navbar.tsx
+++ b/frontend/src/components/blog/blog-navbar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import ThemeToggleCustom from '@/shared/components/layout/ThemeToggleCustom';
@@ -15,34 +14,12 @@ const navItems = [
 ];
 
 export default function BlogNavbar() {
-  const [isSticky, setIsSticky] = useState(false);
-  const [_showSticky, setShowSticky] = useState(false);
-
   // Use custom hook for GitHub stars
   const { stars } = useOpndriveStars();
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const staticNavbar = document.getElementById('static-navbar');
-      if (staticNavbar) {
-        const staticNavbarRect = staticNavbar.getBoundingClientRect();
-        const shouldBeSticky = staticNavbarRect.bottom <= 0;
-
-        if (shouldBeSticky && !isSticky) {
-          setIsSticky(true);
-          setTimeout(() => setShowSticky(true), 50);
-        } else if (!shouldBeSticky && isSticky) {
-          setShowSticky(false);
-          setTimeout(() => setIsSticky(false), 200);
-        }
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    handleScroll();
-
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [isSticky]);
+  // This navbar does not stick, and never did. It used to track a sentinel on
+  // every scroll event - forcing a layout each time, on every blog page - into
+  // two state values that nothing below reads.
 
   return (
     <>
diff --git a/frontend/src/features/landing-page/components/cta-section.tsx b/frontend/src/features/landing-page/components/cta-section.tsx
index 8ae8fedd..fde36e16 100644
--- a/frontend/src/features/landing-page/components/cta-section.tsx
+++ b/frontend/src/features/landing-page/components/cta-section.tsx
@@ -25,7 +25,10 @@ export default function CTASection({
   ctaLabel = 'Get Started',
 }: CTASectionProps) {
   return (
-    <section id="get-started" className="py-12 sm:py-16 md:py-20 lg:py-24 bg-background">
+    <section
+      id="get-started"
+      className="scroll-mt-14 sm:scroll-mt-16 lg:scroll-mt-24 py-12 sm:py-16 md:py-20 lg:py-24 bg-background"
+    >
       <div className="max-w-7xl mx-auto px-4 sm:px-0 lg:px-8">
         <div className="bg-card/30 rounded-lg sm:rounded-xl shadow-md p-6 sm:p-8 md:p-12 lg:p-16 text-center">
           <div className="mx-auto mb-4 sm:mb-6 w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 flex items-center justify-center">
diff --git a/frontend/src/features/landing-page/components/faq-section.tsx b/frontend/src/features/landing-page/components/faq-section.tsx
index a2502194..7c769dff 100644
--- a/frontend/src/features/landing-page/components/faq-section.tsx
+++ b/frontend/src/features/landing-page/components/faq-section.tsx
@@ -6,7 +6,13 @@ import { faqData } from '../config/faq-section';
 
 export default function FAQSection() {
   const [openItems, setOpenItems] = useState<number[]>([]);
-  const [expandAll, setExpandAll] = useState(false);
+
+  /**
+   * Derived rather than stored. As its own state it could disagree with the
+   * list it described: opening all eight by hand left the button still reading
+   * "Expand all", and pressing it then changed nothing but its own label.
+   */
+  const allOpen = openItems.length === faqData.length;
 
   const toggleItem = (index: number) => {
     setOpenItems((prev) =>
@@ -15,16 +21,14 @@ export default function FAQSection() {
   };
 
   const toggleExpandAll = () => {
-    if (expandAll) {
-      setOpenItems([]);
-    } else {
-      setOpenItems(faqData.map((_, index) => index));
-    }
-    setExpandAll(!expandAll);
+    setOpenItems(allOpen ? [] : faqData.map((_, index) => index));
   };
 
   return (
-    <section id="faq" className="bg-background py-12 sm:py-16 md:py-20 lg:py-24">
+    <section
+      id="faq"
+      className="scroll-mt-14 sm:scroll-mt-16 lg:scroll-mt-24 bg-background py-12 sm:py-16 md:py-20 lg:py-24"
+    >
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-8 sm:mb-12 md:mb-16">
@@ -43,41 +47,69 @@ export default function FAQSection() {
             className="flex items-center gap-1.5 sm:gap-2 text-[var(--accent-blue)] hover:text-[var(--accent-blue-hover)] transition-colors px-2 py-1 rounded-md hover:bg-[var(--surface-hover)]"
           >
             <span className="text-xs sm:text-sm font-medium">
-              {expandAll ? 'Collapse all' : 'Expand all'}
+              {allOpen ? 'Collapse all' : 'Expand all'}
             </span>
             <ChevronDown
-              className={`w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform ${expandAll ? 'rotate-180' : ''}`}
+              className={`w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform ${allOpen ? 'rotate-180' : ''}`}
             />
           </button>
         </div>
 
         {/* FAQ Items */}
         <div className="space-y-0">
-          {faqData.map((item, index) => (
-            <div key={index} className="">
-              <button
-                onClick={() => toggleItem(index)}
-                className="w-full py-4 sm:py-5 md:py-6 flex items-center justify-between text-left hover:bg-[var(--surface-hover)] transition-colors px-2 sm:px-3 md:px-4 -mx-2 sm:-mx-3 md:-mx-4 rounded-lg"
-              >
-                <h3 className="text-base sm:text-lg md:text-xl font-medium text-[var(--text-primary)] pr-3 sm:pr-4 leading-tight">
-                  {item.question}
+          {faqData.map((item, index) => {
+            const isOpen = openItems.includes(index);
+            return (
+              <div key={index}>
+                {/* The heading wraps the control rather than sitting inside it.
+                    A heading nested in a button is not a heading anyone can
+                    navigate to, and these eight questions are the page's real
+                    outline for a reader skipping through it. */}
+                <h3>
+                  <button
+                    id={`faq-question-${index}`}
+                    onClick={() => toggleItem(index)}
+                    aria-expanded={isOpen}
+                    aria-controls={`faq-answer-${index}`}
+                    className="w-full py-4 sm:py-5 md:py-6 flex items-center justify-between text-left hover:bg-[var(--surface-hover)] transition-colors px-2 sm:px-3 md:px-4 -mx-2 sm:-mx-3 md:-mx-4 rounded-lg"
+                  >
+                    <span className="text-base sm:text-lg md:text-xl font-medium text-[var(--text-primary)] pr-3 sm:pr-4 leading-tight">
+                      {item.question}
+                    </span>
+                    <ChevronDown
+                      className={`w-4 h-4 sm:w-5 sm:h-5 text-[var(--accent-blue)] transition-transform flex-shrink-0 ${
+                        isOpen ? 'rotate-180' : ''
+                      }`}
+                    />
+                  </button>
                 </h3>
-                <ChevronDown
-                  className={`w-4 h-4 sm:w-5 sm:h-5 text-[var(--accent-blue)] transition-transform flex-shrink-0 ${
-                    openItems.includes(index) ? 'rotate-180' : ''
-                  }`}
-                />
-              </button>
 
-              {openItems.includes(index) && (
-                <div className="pb-4 sm:pb-5 md:pb-6 px-2 sm:px-3 md:px-4 -mx-2 sm:-mx-3 md:-mx-4">
-                  <p className="text-sm sm:text-base text-[var(--text-secondary)] leading-relaxed">
-                    {item.answer}
-                  </p>
+                {/* The answer is always in the markup, collapsed to nothing by
+                    a 0fr grid row rather than dropped from the tree.
+                    Conditionally rendering it meant eight of the page's most
+                    substantial answers - what the permissions are, where the
+                    credentials live - reached a crawler as nothing at all.
+                    `aria-hidden` still keeps a collapsed answer out of the
+                    accessibility tree, which is safe here because the panel
+                    holds only text, nothing focusable. */}
+                <div
+                  id={`faq-answer-${index}`}
+                  role="region"
+                  aria-labelledby={`faq-question-${index}`}
+                  aria-hidden={!isOpen}
+                  className={`grid transition-[grid-template-rows] duration-300 ease-out ${
+                    isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                  }`}
+                >
+                  <div className="overflow-hidden">
+                    <p className="pb-4 sm:pb-5 md:pb-6 px-2 sm:px-3 md:px-4 -mx-2 sm:-mx-3 md:-mx-4 text-sm sm:text-base text-[var(--text-secondary)] leading-relaxed">
+                      {item.answer}
+                    </p>
+                  </div>
                 </div>
-              )}
-            </div>
-          ))}
+              </div>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/frontend/src/features/landing-page/components/feature-section.tsx b/frontend/src/features/landing-page/components/feature-section.tsx
index ce4b9fcd..1488a1a7 100644
--- a/frontend/src/features/landing-page/components/feature-section.tsx
+++ b/frontend/src/features/landing-page/components/feature-section.tsx
@@ -56,11 +56,7 @@ export default function FeaturesSection() {
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const pausedRef = useRef(false);
-
-  const prefersReducedMotion =
-    typeof window !== 'undefined' &&
-    window.matchMedia &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const sectionRef = useRef<HTMLElement>(null);
 
   /**
    * Stable, so the effect below can name them as dependencies honestly.
@@ -68,7 +64,7 @@ export default function FeaturesSection() {
    * As plain functions they were rebuilt on every render, so listing them would
    * have torn the interval down and restarted it each time - which is why the
    * effect omitted them, and why the linter objected. Neither reads anything
-   * that changes but the motion preference.
+   * that changes between renders.
    */
   const stopRotation = useCallback(() => {
     if (intervalRef.current) {
@@ -77,17 +73,45 @@ export default function FeaturesSection() {
     }
   }, []);
 
+  /**
+   * The one place that decides whether rotating is appropriate at all, so a
+   * click or an arrow key cannot start a timer the effect below would not have.
+   *
+   * Narrower than `lg` the image column beside this list is `hidden`, which
+   * left the timer with nothing to change but the paragraph a reader was in the
+   * middle of - and the pause is bound to hover, which a touch device never
+   * fires, so on a phone there was no way to stop it. Read at call time rather
+   * than during render, where it ran on every pass and never noticed the
+   * preference changing.
+   */
   const startRotation = useCallback(() => {
-    if (prefersReducedMotion) return;
     if (intervalRef.current) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    if (!window.matchMedia('(min-width: 1024px)').matches) return;
     intervalRef.current = setInterval(() => {
       if (!pausedRef.current) setActiveFeature((prev) => (prev + 1) % features.length);
     }, ROTATE_INTERVAL_MS);
-  }, [prefersReducedMotion]);
+  }, []);
 
+  /**
+   * Run only while the section is actually on screen. It used to tick for as
+   * long as the tab stayed open, redrawing a section the reader had left
+   * behind every six seconds and remounting both of its images each time.
+   */
   useEffect(() => {
-    startRotation();
-    return () => stopRotation();
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) startRotation();
+      else stopRotation();
+    });
+    observer.observe(section);
+
+    return () => {
+      observer.disconnect();
+      stopRotation();
+    };
   }, [startRotation, stopRotation]);
 
   const handleFeatureClick = (index: number) => {
@@ -133,7 +157,11 @@ export default function FeaturesSection() {
   const active = features[activeFeature];
 
   return (
-    <section id="features" className="py-12 sm:py-16 md:py-20 lg:py-24 bg-background">
+    <section
+      ref={sectionRef}
+      id="features"
+      className="scroll-mt-14 sm:scroll-mt-16 lg:scroll-mt-24 py-12 sm:py-16 md:py-20 lg:py-24 bg-background"
+    >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-8 sm:mb-12 md:mb-16">
@@ -202,7 +230,7 @@ export default function FeaturesSection() {
                   alt={active.imageAlt}
                   fill
                   sizes="(min-width: 1280px) 512px, (min-width: 1024px) 448px, 384px"
-                  className="object-contain transition-opacity duration-500 theme-light-only"
+                  className="object-contain animate-in fade-in duration-500 theme-light-only"
                 />
                 <Image
                   key={`${active.id}-dark`}
@@ -210,7 +238,7 @@ export default function FeaturesSection() {
                   alt={active.imageAlt}
                   fill
                   sizes="(min-width: 1280px) 512px, (min-width: 1024px) 448px, 384px"
-                  className="object-contain transition-opacity duration-500 theme-dark-only"
+                  className="object-contain animate-in fade-in duration-500 theme-dark-only"
                 />
               </div>
             </div>
diff --git a/frontend/src/features/landing-page/components/hero-section.tsx b/frontend/src/features/landing-page/components/hero-section.tsx
index c4d079fd..9ab2d1bd 100644
--- a/frontend/src/features/landing-page/components/hero-section.tsx
+++ b/frontend/src/features/landing-page/components/hero-section.tsx
@@ -116,18 +116,17 @@ export default function HeroSection({ handleGetStarted, ctaLabel }: HeroSectionP
         </div>
       </div>
 
-      {/* sentinel for navbar intersection observer */}
+      {/* The sentinel the page's IntersectionObserver watches to decide when
+          the hero is behind the reader and the fixed navbars take over. */}
       <div id="hero-anchor" className="absolute left-0 right-0 bottom-0 h-2 pointer-events-none" />
 
       {/* Static navbar at bottom of hero section - this one shows initially.
           z-50 keeps it above the Discord card's z-40 page backdrop, so the
           navbar stays sharp while the rest of the page blurs behind it. */}
       <div className="relative z-50 w-full flex justify-center pb-4 sm:pb-6 lg:pb-8 px-4">
-        {/* Static navbar visible only on large screens; kept in DOM for sticky detection */}
-        <div
-          id="static-navbar"
-          className="hidden lg:flex bg-card/80 backdrop-blur-md border border-border rounded-full px-6 lg:px-8 py-3 lg:py-4 shadow-lg max-w-fit"
-        >
+        {/* Large screens only; the fixed navbar takes over below the hero and
+            the mobile bar covers every narrower viewport. */}
+        <div className="hidden lg:flex bg-card/80 backdrop-blur-md border border-border rounded-full px-6 lg:px-8 py-3 lg:py-4 shadow-lg max-w-fit">
           <div className="flex items-center gap-4 lg:gap-6 xl:gap-8">
             {navItems.map((item, index) => (
               <button
diff --git a/frontend/src/features/landing-page/components/landing-page.tsx b/frontend/src/features/landing-page/components/landing-page.tsx
new file mode 100644
index 00000000..5823fc8b
--- /dev/null
+++ b/frontend/src/features/landing-page/components/landing-page.tsx
@@ -0,0 +1,256 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { FaGithub } from 'react-icons/fa';
+import { Menu, X } from 'lucide-react';
+import HeroSection from '@/features/landing-page/components/hero-section';
+import Navbar from '@/features/landing-page/components/navbar';
+import { DiscordCommunityLink } from '@/shared/components/discord/discord-community-link';
+import FeaturesSection from '@/features/landing-page/components/feature-section';
+import WorkSmarterSection from '@/features/landing-page/components/work-smarter-section';
+import FAQSection from '@/features/landing-page/components/faq-section';
+import CTASection from '@/features/landing-page/components/cta-section';
+import ThemeToggleCustom from '@/shared/components/layout/ThemeToggleCustom';
+import { SiteFooter } from '@/shared/components/layout/site-footer';
+import { useOpndriveStars } from '@/hooks/use-github-stars';
+import { useAuth } from '@/hooks/use-auth';
+import { useScrolledPast } from '@/hooks/use-scrolled-past';
+import { DOCS_URL } from '@/config/links';
+
+const navItems = [
+  { label: 'Home', href: '#hero' },
+  { label: 'Features', href: '#features' },
+  { label: 'Tools', href: '#tools' },
+  { label: 'FAQ', href: '#faq' },
+  { label: 'Docs', href: DOCS_URL },
+  { label: 'Get Started', href: '#get-started' },
+];
+
+export default function LandingPage() {
+  const router = useRouter();
+  const { userCreds } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  // Use custom hook for GitHub stars
+  const { stars } = useOpndriveStars();
+
+  /**
+   * One reading of where the hero ends, for both navbars.
+   *
+   * The hero's own sentinel is the thing watched, so the bar that lives inside
+   * the hero and the bars that take over from it hand off at exactly the same
+   * pixel - there is no window where a floating nav overlaps a hero that is
+   * still on screen, which is what made the page look like it had two navbars
+   * at once.
+   */
+  const scrolledPastHero = useScrolledPast('hero-anchor');
+
+  /**
+   * Where the main call to action goes, and what it admits to doing.
+   *
+   * It has always sent a visitor with a connected bucket to their drive rather
+   * than back through the connect flow - it just did so while still reading
+   * "Get Started", so the one button whose label people rely on was the one
+   * that did not describe itself. The label now names the destination.
+   *
+   * The session comes from the auth context rather than a second, hand-copied
+   * read of the `s3_user_session` key, which is the sort of duplicate that
+   * survives a rename of the original.
+   *
+   * There is deliberately no loading state. This page is public now, so the
+   * server renders it before any session has been looked for - and a hero
+   * button reading "Loading..." is what a crawler would have indexed as the
+   * call to action. It says "Get Started" and goes to /connect until a session
+   * turns up, which is the right answer for almost everyone who lands here and
+   * a harmless one for the rest: /connect offers them the way back in.
+   */
+  const hasSession = userCreds !== null;
+  const ctaLabel = hasSession ? 'Go to Dashboard' : 'Get Started';
+
+  const handleGetStarted = () => {
+    router.push(hasSession ? '/dashboard' : '/connect');
+  };
+
+  /**
+   * Jump to a section, or leave the page for the ones that are not on it.
+   *
+   * `scrollIntoView` puts the target's top edge at the top of the viewport,
+   * which is the one place a fixed navbar is guaranteed to be - so every link
+   * in this menu landed its own destination's heading underneath the bar the
+   * reader had just tapped. "Curious about Opndrive?" arrived sliced in half.
+   * The sections carry `scroll-mt` matching each navbar's height for that, so
+   * the browser stops short by exactly the bar it is scrolling under; there is
+   * nothing to do here beyond asking for the scroll.
+   */
+  const handleNavClick = (href: string) => {
+    setIsMobileMenuOpen(false);
+    if (href.startsWith('http')) {
+      window.location.href = href;
+      return;
+    }
+    if (!href.startsWith('#')) {
+      router.push(href);
+      return;
+    }
+    const element = document.querySelector(href);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <main>
+      {/* Simple Mobile Navbar - Hidden in hero, visible after.
+
+          The hairline along the bottom is a shadow rather than `border-b`, so
+          the bar is exactly the `h-14 sm:h-16` it says it is. As a border it
+          measured a pixel taller than that, and the strip below the hero that
+          reserves room for it was sized off the stated height, so the bar sat
+          a pixel over the section it was supposed to stop above. */}
+      <div
+        className={`lg:hidden fixed top-0 left-0 right-0 z-50 bg-card/95 backdrop-blur-md shadow-[0_1px_0_0_var(--border)] transition-all duration-300 ${
+          scrolledPastHero
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 -translate-y-full pointer-events-none'
+        }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="flex items-center justify-between h-14 sm:h-16">
+            {/* Logo */}
+            <div className="flex items-center gap-2">
+              <img src="/logo.png" alt="Opndrive Logo" className="w-6 h-6 sm:w-7 sm:h-7" />
+              <span className="text-base sm:text-lg font-bold text-foreground">Opndrive</span>
+            </div>
+
+            {/* Hamburger Menu Button */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="p-2 text-muted-foreground hover:text-foreground transition-colors"
+              aria-label="Menu"
+            >
+              {isMobileMenuOpen ? (
+                <X className="w-5 h-5 sm:w-6 sm:h-6" />
+              ) : (
+                <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu Dropdown.
+
+            Capped at what is left of the viewport below the bar, and scrollable
+            past that. Six links, three action rows and a button come to roughly
+            620px, which clears a tall phone and does not clear a short one once
+            the browser's own chrome has taken its cut - and with nothing to
+            scroll, the "Get Started" button at the bottom simply could not be
+            reached. `dvh` rather than `vh` because the cut the address bar takes
+            is exactly what this needs to measure. */}
+        {isMobileMenuOpen && scrolledPastHero && (
+          <div className="border-t border-border bg-card/98 backdrop-blur-md max-h-[calc(100dvh-3.5rem)] sm:max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4">
+              {/* Navigation Links */}
+              <div className="space-y-3 mb-4">
+                {navItems.map((item, index) => (
+                  <button
+                    key={index}
+                    onClick={() => handleNavClick(item.href)}
+                    className="block w-full text-left px-3 py-2 text-md font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </div>
+
+              {/* Divider */}
+              <div className="border-t border-border my-4" />
+
+              {/* Actions Section */}
+              <div className="space-y-3">
+                {/* GitHub Link */}
+                <a
+                  href="https://github.com/opndrive/opndrive"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+                >
+                  <FaGithub className="w-4 h-4" />
+                  <span>GitHub</span>
+                  {stars !== null && (
+                    <span className="ml-auto text-xs tabular-nums">{stars.toLocaleString()}</span>
+                  )}
+                </a>
+
+                {/* Discord Community - taps open the Bento sheet */}
+                <DiscordCommunityLink
+                  variant="row"
+                  onOpenSheet={() => setIsMobileMenuOpen(false)}
+                />
+
+                {/* Theme Toggle */}
+                <div className="flex items-center justify-between px-3 py-2">
+                  <span className="text-sm font-medium text-muted-foreground">Theme</span>
+                  <ThemeToggleCustom />
+                </div>
+
+                {/* Get Started Button */}
+                <button
+                  onClick={() => {
+                    setIsMobileMenuOpen(false);
+                    handleGetStarted();
+                  }}
+                  className="w-full bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2.5 text-sm font-medium rounded-md transition-colors"
+                >
+                  {ctaLabel}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Overlay to close menu when clicking outside */}
+      {isMobileMenuOpen && scrolledPastHero && (
+        <div
+          className="lg:hidden fixed inset-0 z-40 bg-black/20 backdrop-blur-sm"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+      )}
+
+      <HeroSection handleGetStarted={handleGetStarted} ctaLabel={ctaLabel} />
+
+      {/* Room for the fixed mobile bar, reserved always rather than at the
+          moment it appears. Toggling it pushed everything below the hero down
+          by 56px on the exact scroll position where the bar faded in - and an
+          inline style beats `lg:pt-0`, so desktop got the shove too.
+
+          Held open permanently it is not, as first written here, hidden until
+          the bar covers it. The bar only arrives once the hero is entirely
+          past, but this strip enters the viewport from the bottom edge a whole
+          screen before that, and it was padding on a transparent wrapper, so
+          what showed through was `body` - `--secondary`, a lighter band than
+          the `--background` on either side of it. It read as a seam in the
+          wrong colour sliding up the page ahead of the navbar.
+
+          So it is a strip of its own now, painted `--background` like its
+          neighbours and carrying the divider artwork, which makes the same
+          56px read as the deliberate join between hero and page that the
+          reader is about to scroll through. Exactly the height of the bar that
+          lands on it, and gone at `lg` where there is no bar to make room for. */}
+      <div
+        aria-hidden="true"
+        className="relative isolate h-14 overflow-hidden bg-background sm:h-16 lg:hidden"
+      >
+        <div className="hero-divider-art absolute inset-0" />
+      </div>
+
+      <Navbar scrolledPastHero={scrolledPastHero} />
+      <FeaturesSection />
+      <WorkSmarterSection />
+      <FAQSection />
+      <CTASection handleGetStarted={handleGetStarted} ctaLabel={ctaLabel} />
+      <SiteFooter />
+    </main>
+  );
+}
diff --git a/frontend/src/features/landing-page/components/navbar.tsx b/frontend/src/features/landing-page/components/navbar.tsx
index cc6d09af..a252ffcd 100644
--- a/frontend/src/features/landing-page/components/navbar.tsx
+++ b/frontend/src/features/landing-page/components/navbar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import ThemeToggleCustom from '@/shared/components/layout/ThemeToggleCustom';
 import { FaGithub } from 'react-icons/fa';
@@ -18,126 +17,120 @@ const navItems = [
   { label: 'Get Started', href: '#get-started' },
 ];
 
-export default function Navbar() {
+interface NavbarProps {
+  /**
+   * Owned by the page, which watches the hero once on behalf of this navbar
+   * and the mobile one, so a single observer drives the whole handover and the
+   * two bars can never disagree about where the hero ended.
+   */
+  scrolledPastHero: boolean;
+}
+
+export default function Navbar({ scrolledPastHero }: NavbarProps) {
   const router = useRouter();
-  const [isSticky, setIsSticky] = useState(false);
-  const [showSticky, setShowSticky] = useState(false);
 
   // Use custom hook for GitHub stars
   const { stars } = useOpndriveStars();
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const staticNavbar = document.getElementById('static-navbar');
-      if (staticNavbar) {
-        const staticNavbarRect = staticNavbar.getBoundingClientRect();
-        const shouldBeSticky = staticNavbarRect.bottom <= 0;
-
-        if (shouldBeSticky && !isSticky) {
-          // Small delay to prevent jerky transition
-          setIsSticky(true);
-          setTimeout(() => setShowSticky(true), 50);
-        } else if (!shouldBeSticky && isSticky) {
-          setShowSticky(false);
-          setTimeout(() => setIsSticky(false), 200);
-        }
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    handleScroll(); // Check initial state
-
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [isSticky]);
+  return (
+    /* Always mounted, revealed by opacity alone.
 
-  // Don't render anything if not sticky
-  if (!isSticky) return null;
+       This used to mount the moment the hero went past, which built the nav -
+       thirty-odd nodes, a backdrop-filter layer to rasterise, and a star count
+       that lands a tick later and re-centres the pill - on the one frame the
+       browser was already busy scrolling, and then ran two setTimeouts to fade
+       what it had just built. That was the jerk. The nav is now built with the
+       rest of the page, and showing it costs a composited fade, which is what
+       the mobile bar in page.tsx has always done.
 
-  return (
-    <>
-      {/* Sticky navbar with smooth fade-in transition */}
-      <div
-        className={`hidden lg:block fixed top-4 left-1/2 transform -translate-x-1/2 transition-all duration-300 z-50 ${
-          showSticky ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'
-        }`}
-      >
-        <nav className="bg-card/90 backdrop-blur-md border border-border rounded-full px-8 py-4 shadow-lg">
-          <div className="flex items-center gap-6">
-            {navItems.map((item, index) => (
-              <button
-                key={index}
-                onClick={() => {
-                  if (item.href.startsWith('http')) {
-                    window.location.href = item.href;
-                    return;
-                  }
-                  if (!item.href.startsWith('#')) {
-                    router.push(item.href);
-                    return;
-                  }
-                  const element = document.querySelector(item.href);
-                  if (element) {
-                    element.scrollIntoView({ behavior: 'smooth' });
-                  }
-                }}
-                className="text-md font-medium text-muted-foreground hover:text-foreground transition-colors duration-200 whitespace-nowrap"
-              >
-                {item.label}
-              </button>
-            ))}
+       `invisible` and not just `opacity-0`, because a nav that now stays in the
+       DOM would otherwise keep its links tabbable and announced while nobody
+       can see them. Visibility is a stepped transition - it flips to visible at
+       the start of the fade in and holds until the end of the fade out - so the
+       links come and go exactly with the pill. */
+    <div
+      className={`hidden lg:block fixed top-4 left-1/2 transform -translate-x-1/2 transition-all duration-300 z-50 ${
+        scrolledPastHero
+          ? 'visible opacity-100 translate-y-0'
+          : 'invisible opacity-0 -translate-y-2'
+      }`}
+    >
+      <nav className="bg-card/90 backdrop-blur-md border border-border rounded-full px-8 py-4 shadow-lg">
+        <div className="flex items-center gap-6">
+          {navItems.map((item, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                if (item.href.startsWith('http')) {
+                  window.location.href = item.href;
+                  return;
+                }
+                if (!item.href.startsWith('#')) {
+                  router.push(item.href);
+                  return;
+                }
+                const element = document.querySelector(item.href);
+                if (element) {
+                  element.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}
+              className="text-md font-medium text-muted-foreground hover:text-foreground transition-colors duration-200 whitespace-nowrap"
+            >
+              {item.label}
+            </button>
+          ))}
 
-            <div className="flex items-center gap-3 ml-2">
-              {/* GitHub Star Button */}
-              <a
-                href="https://github.com/opndrive/opndrive"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 px-2 py-1 transition-colors duration-200 group"
-                style={{
-                  color: 'var(--muted-foreground)',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.color = 'var(--foreground)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.color = 'var(--muted-foreground)';
-                }}
-              >
-                <FaGithub className="w-5 h-5 group-hover:scale-110 transition-transform duration-200" />
-                {stars !== null && (
-                  <span
-                    className="text-sm font-medium tabular-nums"
-                    style={{
-                      color: 'inherit',
-                    }}
-                  >
-                    {stars.toLocaleString()}
-                  </span>
-                )}
-                {stars === null && (
-                  <div
-                    className="w-6 h-4 rounded animate-pulse"
-                    style={{ backgroundColor: 'var(--muted)' }}
-                  />
-                )}
-              </a>
+          <div className="flex items-center gap-3 ml-2">
+            {/* GitHub Star Button */}
+            <a
+              href="https://github.com/opndrive/opndrive"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-2 py-1 transition-colors duration-200 group"
+              style={{
+                color: 'var(--muted-foreground)',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--foreground)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--muted-foreground)';
+              }}
+            >
+              <FaGithub className="w-5 h-5 group-hover:scale-110 transition-transform duration-200" />
+              {stars !== null && (
+                <span
+                  className="text-sm font-medium tabular-nums"
+                  style={{
+                    color: 'inherit',
+                  }}
+                >
+                  {stars.toLocaleString()}
+                </span>
+              )}
+              {stars === null && (
+                <div
+                  className="w-6 h-4 rounded animate-pulse"
+                  style={{ backgroundColor: 'var(--muted)' }}
+                />
+              )}
+            </a>
 
-              {/* Discord Community Link */}
-              <DiscordCommunityLink
-                placement="bottom"
-                className="flex items-center gap-2 px-2 py-1"
-                iconClassName="w-5 h-5"
-              />
+            {/* Discord Community Link */}
+            <DiscordCommunityLink
+              placement="bottom"
+              className="flex items-center gap-2 px-2 py-1"
+              iconClassName="w-5 h-5"
+            />
 
-              <ThemeToggleCustom />
+            <ThemeToggleCustom />
 
-              {/* Only renders for a visitor who already has a bucket
+            {/* Only renders for a visitor who already has a bucket
                   connected. The nav is otherwise the same signed in or out. */}
-              <DashboardLink />
-            </div>
+            <DashboardLink />
           </div>
-        </nav>
-      </div>
-    </>
+        </div>
+      </nav>
+    </div>
   );
 }
diff --git a/frontend/src/features/landing-page/components/work-smarter-section.tsx b/frontend/src/features/landing-page/components/work-smarter-section.tsx
index 88a6db83..a163e099 100644
--- a/frontend/src/features/landing-page/components/work-smarter-section.tsx
+++ b/frontend/src/features/landing-page/components/work-smarter-section.tsx
@@ -65,11 +65,7 @@ export default function WorkSmarterSection() {
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const pausedRef = useRef(false);
-
-  const prefersReducedMotion =
-    typeof window !== 'undefined' &&
-    window.matchMedia &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const sectionRef = useRef<HTMLElement>(null);
 
   /**
    * Stable, so the effect below can name them as dependencies honestly.
@@ -77,7 +73,7 @@ export default function WorkSmarterSection() {
    * As plain functions they were rebuilt on every render, so listing them would
    * have torn the interval down and restarted it each time - which is why the
    * effect omitted them, and why the linter objected. Neither reads anything
-   * that changes but the motion preference.
+   * that changes between renders.
    */
   const stopRotation = useCallback(() => {
     if (intervalRef.current) {
@@ -86,17 +82,45 @@ export default function WorkSmarterSection() {
     }
   }, []);
 
+  /**
+   * The one place that decides whether rotating is appropriate at all, so a
+   * click or an arrow key cannot start a timer the effect below would not have.
+   *
+   * Narrower than `lg` the image column beside this list is `hidden`, which
+   * left the timer with nothing to change but the paragraph a reader was in the
+   * middle of - and the pause is bound to hover, which a touch device never
+   * fires, so on a phone there was no way to stop it. Read at call time rather
+   * than during render, where it ran on every pass and never noticed the
+   * preference changing.
+   */
   const startRotation = useCallback(() => {
-    if (prefersReducedMotion) return;
     if (intervalRef.current) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    if (!window.matchMedia('(min-width: 1024px)').matches) return;
     intervalRef.current = setInterval(() => {
       if (!pausedRef.current) setActiveFeature((prev) => (prev + 1) % features.length);
     }, ROTATE_INTERVAL_MS);
-  }, [prefersReducedMotion]);
+  }, []);
 
+  /**
+   * Run only while the section is actually on screen. It used to tick for as
+   * long as the tab stayed open, redrawing a section the reader had left
+   * behind every six seconds and remounting both of its images each time.
+   */
   useEffect(() => {
-    startRotation();
-    return () => stopRotation();
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) startRotation();
+      else stopRotation();
+    });
+    observer.observe(section);
+
+    return () => {
+      observer.disconnect();
+      stopRotation();
+    };
   }, [startRotation, stopRotation]);
 
   const handleFeatureClick = (index: number) => {
@@ -142,7 +166,11 @@ export default function WorkSmarterSection() {
   const active = features[activeFeature];
 
   return (
-    <section id="tools" className="bg-background py-12 sm:py-16 md:py-20 lg:py-24">
+    <section
+      ref={sectionRef}
+      id="tools"
+      className="scroll-mt-14 sm:scroll-mt-16 lg:scroll-mt-24 bg-background py-12 sm:py-16 md:py-20 lg:py-24"
+    >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-8 sm:mb-12 md:mb-16">
@@ -170,7 +198,7 @@ export default function WorkSmarterSection() {
                   alt={active.imageAlt}
                   fill
                   sizes="(min-width: 1280px) 512px, (min-width: 1024px) 448px, 384px"
-                  className="object-contain transition-opacity duration-500 theme-light-only"
+                  className="object-contain animate-in fade-in duration-500 theme-light-only"
                 />
                 <Image
                   key={`${active.id}-dark`}
@@ -178,7 +206,7 @@ export default function WorkSmarterSection() {
                   alt={active.imageAlt}
                   fill
                   sizes="(min-width: 1280px) 512px, (min-width: 1024px) 448px, 384px"
-                  className="object-contain transition-opacity duration-500 theme-dark-only"
+                  className="object-contain animate-in fade-in duration-500 theme-dark-only"
                 />
               </div>
             </div>
diff --git a/frontend/src/hooks/use-scrolled-past.ts b/frontend/src/hooks/use-scrolled-past.ts
new file mode 100644
index 00000000..45d3f509
--- /dev/null
+++ b/frontend/src/hooks/use-scrolled-past.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Whether the element with `sentinelId` has scrolled up out of the viewport.
+ *
+ * An IntersectionObserver rather than a scroll listener. The browser works the
+ * crossing out itself, off the path it walks to produce each scrolled frame,
+ * so watching for it costs nothing per frame. What this replaced was a `scroll`
+ * handler calling `getBoundingClientRect()`, which forces a synchronous layout
+ * every time the page moves - and the landing page ran two of them at once.
+ */
+export function useScrolledPast(sentinelId: string): boolean {
+  const [scrolledPast, setScrolledPast] = useState(false);
+
+  useEffect(() => {
+    const sentinel = document.getElementById(sentinelId);
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(([entry]) => setScrolledPast(!entry.isIntersecting), {
+      /**
+       * The root is grown downward until the page cannot be longer than it,
+       * so the sentinel counts as intersecting from the moment the page
+       * loads right up until it leaves over the top edge.
+       *
+       * That is what makes the one transition this hook cares about a real
+       * one. An observer only reports when a target's intersecting state
+       * changes, and against the bare viewport a sentinel below the fold and
+       * a sentinel above it are both simply "not intersecting" - so a jump
+       * straight from one to the other, with no frame in between where the
+       * sentinel was on screen, changed nothing to report and the callback
+       * never ran. The bar stayed hidden on a page that had scrolled well
+       * past the hero.
+       *
+       * Reaching that took no trickery: a `#faq` deep link, the scroll
+       * position a browser restores on a back navigation, or any hero taller
+       * than the viewport - which is every phone once the address bar has
+       * taken its cut - starts the sentinel below the fold and lands past it.
+       *
+       * With the root extended there is only ever one crossing, at the top
+       * edge, and `isIntersecting` alone is the answer.
+       */
+      rootMargin: '0px 0px 100000px 0px',
+    });
+
+    // Observing fires the callback once with the current position, so a reload
+    // partway down the page starts with the right answer instead of false.
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinelId]);
+
+  return scrolledPast;
+}
diff --git a/frontend/src/services/github-service.ts b/frontend/src/services/github-service.ts
index 15d4092c..422199de 100644
--- a/frontend/src/services/github-service.ts
+++ b/frontend/src/services/github-service.ts
@@ -15,6 +15,8 @@ interface GitHubApiResponse {
 class GitHubService {
   private static instance: GitHubService;
   private cache: Map<string, { data: GitHubApiResponse; timestamp: number }> = new Map();
+  /** Requests already on their way, so callers can share one instead of racing. */
+  private inFlight: Map<string, Promise<GitHubApiResponse | null>> = new Map();
   private readonly CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
   private readonly API_BASE = 'https://api.github.com';
 
@@ -43,6 +45,28 @@ class GitHubService {
       return cached.data;
     }
 
+    /**
+     * Share a request that is already running.
+     *
+     * The cache is only written once a response lands, so callers that start
+     * together all miss it and all fetch - and the landing page has three star
+     * counters mounting in the same tick, which made three identical requests
+     * against a limit of sixty an hour for an unauthenticated IP.
+     */
+    const existing = this.inFlight.get(cacheKey);
+    if (existing) return existing;
+
+    const request = this.requestRepoData(owner, repo).finally(() => {
+      this.inFlight.delete(cacheKey);
+    });
+    this.inFlight.set(cacheKey, request);
+    return request;
+  }
+
+  /** The actual call, entered once per cache key at a time. */
+  private async requestRepoData(owner: string, repo: string): Promise<GitHubApiResponse | null> {
+    const cacheKey = `${owner}/${repo}`;
+
     try {
       const response = await fetch(`${this.API_BASE}/repos/${owner}/${repo}`, {
         headers: {
@@ -64,7 +88,7 @@ class GitHubService {
       };
 
       // Cache the result
-      this.cache.set(cacheKey, { data: result, timestamp: now });
+      this.cache.set(cacheKey, { data: result, timestamp: Date.now() });
 
       return result;
     } catch (error) {
diff --git a/frontend/src/shared/components/discord/discord-community-link.tsx b/frontend/src/shared/components/discord/discord-community-link.tsx
index 760d7522..a380d0bb 100644
--- a/frontend/src/shared/components/discord/discord-community-link.tsx
+++ b/frontend/src/shared/components/discord/discord-community-link.tsx
@@ -91,6 +91,13 @@ const GAP_PX = 64;
 /** How far the side card is lifted above its trigger, for the same reason. */
 const SIDE_RISE_PX = 72;
 
+/**
+ * How far the vertical connector reaches sideways out of its trigger - the
+ * `w-28` it is drawn in, less the `-translate-x-2` that starts its tail over
+ * the icon rather than beside it.
+ */
+const ARROW_REACH_PX = { left: -8, right: 104 };
+
 interface DiscordCommunityLinkProps {
   /** Which side of the trigger the card opens on. The hero navbar sits at the
    *  bottom of the viewport, so it opens upward; the sticky navbar opens down;
@@ -127,8 +134,38 @@ export function DiscordCommunityLink({
   const [mounted, setMounted] = useState(false);
   const closeTimer = useRef<number | null>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
-  // Viewport coords of the trigger's right edge, for the portalled side card.
-  const [anchor, setAnchor] = useState<{ left: number; bottom: number } | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  /**
+   * Where the trigger is on screen, in viewport coordinates, which is all a
+   * fixed-position card needs to be pinned to any side of it. `viewportHeight`
+   * rides along so the render can pin by `bottom` without reading `window`.
+   */
+  const [anchor, setAnchor] = useState<{
+    centerX: number;
+    rightEdge: number;
+    top: number;
+    bottom: number;
+    viewportHeight: number;
+  } | null>(null);
+  // Whether the card had to open on the side opposite the one asked for.
+  const [flipped, setFlipped] = useState(false);
+  // Whether the connector has room to be drawn without landing on something.
+  const [arrowFits, setArrowFits] = useState(false);
+
+  /**
+   * Which side the card actually opens on.
+   *
+   * `placement` is a preference, not an outcome. The hero navbar asks for
+   * `top` because it sits near the bottom of the viewport - but it scrolls
+   * with the page, and once the reader has pushed it near the top there is no
+   * longer room above it, so the card opened off the top of the screen. It now
+   * flips to whichever side can hold it.
+   */
+  const resolvedPlacement =
+    placement !== 'right' && flipped ? (placement === 'top' ? 'bottom' : 'top') : placement;
+
+  /** True once the trigger has been measured, which is when the card mounts. */
+  const isPositioned = anchor !== null;
 
   // Resolved after mount so SSR and first client render agree.
   useEffect(() => {
@@ -147,25 +184,104 @@ export function DiscordCommunityLink({
   const hoverEnabled = variant !== 'row' && !isTouch;
 
   /**
-   * The sidebar clips its overflow on the x axis, so the side card cannot be an
-   * absolutely positioned child - it is portalled out and pinned to the
-   * trigger's measured position instead. Re-measured on scroll and resize so it
-   * tracks the trigger while open.
+   * Track the trigger while the card is open.
+   *
+   * The card cannot be an absolutely positioned child of the trigger, because
+   * an ancestor that clips its overflow would cut it off - and two of them do.
+   * The dashboard sidebar clips its x axis; the hero section clips both, which
+   * is why a card opening downward out of the hero navbar was invisible while
+   * its connector, drawn nearer the icon, was only half cut off. So the card is
+   * portalled to `body` and pinned to the measured position instead, which
+   * means re-measuring as the trigger scrolls.
    */
   useEffect(() => {
-    if (!isOpen || placement !== 'right') return;
+    if (!isOpen) return;
     const measure = () => {
       const rect = (anchorRef?.current ?? triggerRef.current)?.getBoundingClientRect();
-      if (rect) setAnchor({ left: rect.right, bottom: window.innerHeight - rect.bottom });
+      if (!rect) return;
+      setAnchor({
+        centerX: rect.left + rect.width / 2,
+        rightEdge: rect.right,
+        top: rect.top,
+        bottom: rect.bottom,
+        viewportHeight: window.innerHeight,
+      });
     };
     measure();
+    // Passive: this only ever reads the trigger's position, and a listener the
+    // browser has to wait on before scrolling is what makes scrolling stutter.
+    const scrollOpts = { capture: true, passive: true } as const;
     window.addEventListener('resize', measure);
-    window.addEventListener('scroll', measure, true);
+    window.addEventListener('scroll', measure, scrollOpts);
     return () => {
       window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', measure, true);
+      window.removeEventListener('scroll', measure, scrollOpts);
     };
-  }, [isOpen, placement, anchorRef]);
+  }, [isOpen, anchorRef]);
+
+  /**
+   * Measure the card against the room on each side of the trigger, and flip if
+   * the requested side cannot hold it. The wrapper is what gets measured, so
+   * its height already includes the GAP_PX of padding the connector is drawn
+   * in - the card needs the gap as much as it needs its own body.
+   *
+   * `offsetHeight` and not `getBoundingClientRect()`, because the card enters
+   * at `scale: 0.97` and only the former ignores the transform and reports the
+   * height the card is settling into.
+   *
+   * Gated on `isPositioned` rather than on `anchor` itself. The card only
+   * enters the DOM once the trigger has been measured, so on the render that
+   * opens it there is nothing yet to measure - and depending on the anchor
+   * value instead would re-run this on every scroll event, flipping the card
+   * back and forth underneath a reader. A boolean settles once and stays put.
+   */
+  useEffect(() => {
+    if (!isOpen || !isPositioned || placement === 'right') return;
+
+    const fit = () => {
+      const trigger = triggerRef.current;
+      const card = cardRef.current;
+      if (!trigger || !card) return;
+
+      const rect = trigger.getBoundingClientRect();
+      const needed = card.offsetHeight;
+      const above = rect.top;
+      const below = window.innerHeight - rect.bottom;
+      const [preferred, other] = placement === 'top' ? [above, below] : [below, above];
+
+      // Only when the other side is genuinely roomier: if neither fits there is
+      // nothing to gain by moving, and flipping anyway just looks like a glitch.
+      setFlipped(preferred < needed && other > preferred);
+
+      /**
+       * And whether to draw the connector at all.
+       *
+       * The squiggle reaches a long way sideways out of its trigger, and it is
+       * drawn above the chrome it comes out of, so it wins every overlap. Out
+       * of a full-width sidebar row that costs nothing - it leaves into open
+       * page. Out of a navbar the trigger is a 20px icon in a packed row, and
+       * the squiggle lands across whichever control sits next to it. So look
+       * for anything within its reach, and where there is something, let the
+       * card stand on its own.
+       */
+      const centerX = rect.left + rect.width / 2;
+      const reachLeft = centerX + ARROW_REACH_PX.left;
+      const reachRight = centerX + ARROW_REACH_PX.right;
+      const neighbours = Array.from(trigger.parentElement?.children ?? []);
+
+      setArrowFits(
+        neighbours.every((el) => {
+          if (el === trigger) return true;
+          const r = el.getBoundingClientRect();
+          return r.right <= reachLeft || r.left >= reachRight;
+        })
+      );
+    };
+
+    fit();
+    window.addEventListener('resize', fit);
+    return () => window.removeEventListener('resize', fit);
+  }, [isOpen, isPositioned, placement]);
 
   const open = useCallback(() => {
     cancelClose();
@@ -228,43 +344,97 @@ export function DiscordCommunityLink({
     );
 
   /**
-   * Card and connector for the sidebar placement, portalled past the sidebar's
-   * overflow clip. The GAP_PX of left padding sits inside the hover region, so
-   * the cursor can cross to the card without spending the close grace period.
+   * Card and connector, portalled to `body` past whatever clips the trigger.
+   *
+   * Both arrangements keep the run between trigger and card inside the hover
+   * region - as padding on the card wrapper rather than a margin - so the
+   * cursor can cross the gap without spending the close grace period. The
+   * vertical one is pinned by `top` when it hangs below the trigger and by
+   * `bottom` when it rises above, which is what `top-full` and `bottom-full`
+   * did while it was still an absolutely positioned child.
    */
-  const sidePopover =
+  const popover =
     mounted &&
-    placement === 'right' &&
     createPortal(
       <AnimatePresence>
-        {isOpen && anchor && (
-          <>
-            <ConnectorArrow
-              orientation="horizontal"
-              className="fixed z-40 hidden h-18 w-16 lg:block"
-              style={{ left: anchor.left, bottom: anchor.bottom }}
-            />
-            <motion.div
-              initial={{ opacity: 0, x: -6, scale: 0.97 }}
-              animate={{ opacity: 1, x: 0, scale: 1 }}
-              exit={{ opacity: 0, x: -6, scale: 0.97 }}
-              transition={{ duration: 0.18, ease: [0.4, 0, 0.2, 1] }}
-              className="fixed z-40 hidden lg:block"
-              // The padding lifts and offsets the card while keeping the whole
-              // L-shaped run between row and card inside the hover region.
-              style={{
-                left: anchor.left,
-                bottom: anchor.bottom,
-                paddingLeft: GAP_PX,
-                paddingBottom: SIDE_RISE_PX,
-              }}
-              onMouseEnter={cancelClose}
-              onMouseLeave={scheduleClose}
-            >
-              <DiscordBentoCard className="w-[420px] max-w-[calc(100vw-20rem)]" />
-            </motion.div>
-          </>
-        )}
+        {isOpen && anchor ? (
+          placement === 'right' ? (
+            <>
+              <ConnectorArrow
+                orientation="horizontal"
+                className="fixed z-40 hidden h-18 w-16 lg:block"
+                style={{
+                  left: anchor.rightEdge,
+                  bottom: anchor.viewportHeight - anchor.bottom,
+                }}
+              />
+              <motion.div
+                initial={{ opacity: 0, x: -6, scale: 0.97 }}
+                animate={{ opacity: 1, x: 0, scale: 1 }}
+                exit={{ opacity: 0, x: -6, scale: 0.97 }}
+                transition={{ duration: 0.18, ease: [0.4, 0, 0.2, 1] }}
+                className="fixed z-40 hidden lg:block"
+                // The padding lifts and offsets the card while keeping the whole
+                // L-shaped run between row and card inside the hover region.
+                style={{
+                  left: anchor.rightEdge,
+                  bottom: anchor.viewportHeight - anchor.bottom,
+                  paddingLeft: GAP_PX,
+                  paddingBottom: SIDE_RISE_PX,
+                }}
+                onMouseEnter={cancelClose}
+                onMouseLeave={scheduleClose}
+              >
+                <DiscordBentoCard className="w-[420px] max-w-[calc(100vw-20rem)]" />
+              </motion.div>
+            </>
+          ) : (
+            <>
+              {/* Drawn icon-at-bottom for a card above; only the downward
+                placement needs the vertical mirror. Left out entirely when
+                there is something within its reach to land on. */}
+              {arrowFits && (
+                <ConnectorArrow
+                  className={cn(
+                    'fixed z-60 hidden h-16 w-28 -translate-x-2 lg:block',
+                    resolvedPlacement === 'bottom' && '-scale-y-100'
+                  )}
+                  style={
+                    resolvedPlacement === 'bottom'
+                      ? { left: anchor.centerX, top: anchor.bottom }
+                      : { left: anchor.centerX, bottom: anchor.viewportHeight - anchor.top }
+                  }
+                />
+              )}
+              <motion.div
+                ref={cardRef}
+                initial={{ opacity: 0, y: resolvedPlacement === 'bottom' ? -6 : 6, scale: 0.97 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: resolvedPlacement === 'bottom' ? -6 : 6, scale: 0.97 }}
+                transition={{ duration: 0.18, ease: [0.4, 0, 0.2, 1] }}
+                className={cn(
+                  // Offset to the right of the icon by the same GAP_PX the
+                  // connector spans, and padded by it on the side facing the
+                  // trigger so the gap stays inside the hover region.
+                  'fixed z-60 hidden -translate-x-1/2 lg:block',
+                  resolvedPlacement === 'bottom' ? 'pt-16' : 'pb-16'
+                )}
+                style={
+                  resolvedPlacement === 'bottom'
+                    ? { left: anchor.centerX + GAP_PX, top: anchor.bottom }
+                    : {
+                        left: anchor.centerX + GAP_PX,
+                        bottom: anchor.viewportHeight - anchor.top,
+                      }
+                }
+                onMouseEnter={cancelClose}
+                onMouseLeave={scheduleClose}
+              >
+                <DiscordBentoCard className="w-[420px] max-w-[calc(100vw-2rem)]" />
+              </motion.div>
+            </>
+          )
+        ) : null}
       </AnimatePresence>,
       document.body
     );
@@ -333,7 +503,7 @@ export function DiscordCommunityLink({
             <span className="truncate">Join our Discord</span>
           </a>
         </div>
-        {sidePopover}
+        {popover}
         {backdrop}
         {sheet}
       </>
@@ -365,6 +535,7 @@ export function DiscordCommunityLink({
   return (
     <>
       <div
+        ref={triggerRef}
         className="relative inline-flex"
         onMouseEnter={open}
         onMouseLeave={scheduleClose}
@@ -391,48 +562,9 @@ export function DiscordCommunityLink({
             className={cn('transition-transform duration-200 group-hover:scale-110', iconClassName)}
           />
         </a>
-
-        {/* Desktop hover card. The padding lives on the wrapper, not as a margin,
-            so the gap between icon and card is still inside the hover region. */}
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, y: placement === 'bottom' ? -6 : 6, scale: 0.97 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: placement === 'bottom' ? -6 : 6, scale: 0.97 }}
-              transition={{ duration: 0.18, ease: [0.4, 0, 0.2, 1] }}
-              className={cn(
-                // Offset up and to the right of the icon: the 64px of padding
-                // is the gap the connector arrow spans, and stays inside the
-                // hover region so the cursor can cross it without closing.
-                'absolute left-[calc(50%+64px)] z-60 hidden -translate-x-1/2 lg:block',
-                placement === 'bottom' ? 'top-full pt-16' : 'bottom-full pb-16'
-              )}
-              onMouseEnter={cancelClose}
-              onMouseLeave={scheduleClose}
-            >
-              <DiscordBentoCard className="w-[420px] max-w-[calc(100vw-2rem)]" />
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Connector, drawn in the gap the offset above opens up. Its tail
-            starts by the icon and its tip points into the card's near edge. */}
-        <AnimatePresence>
-          {isOpen && (
-            <ConnectorArrow
-              className={cn(
-                // -translate-x-2 starts the tail over the icon rather than beside it.
-                'absolute left-1/2 z-60 hidden h-16 w-28 -translate-x-2 lg:block',
-                // Drawn icon-at-bottom for a card above; only the downward
-                // placement needs the vertical mirror.
-                placement === 'bottom' ? 'top-full -scale-y-100' : 'bottom-full'
-              )}
-            />
-          )}
-        </AnimatePresence>
       </div>
 
+      {popover}
       {backdrop}
       {sheet}
     </>