diff --git a/app/components/asset/Logo/Logo.tsx b/app/components/asset/Logo/Logo.tsx
index 37ddd26..9f0313e 100644
--- a/app/components/asset/Logo/Logo.tsx
+++ b/app/components/asset/Logo/Logo.tsx
@@ -93,7 +93,7 @@ const Logo = memo<LogoProps>(
       ? "text-[var(--color-content-invert-primary)]"
       : "text-[var(--color-content-default-primary)]";
     const wordmarkVisibilityClass =
-      size === "topNavFolderTop" || size === "topNavHeader"
+      size === "topNavHeader"
         ? wordmark
           ? "hidden md:block"
           : "hidden"
diff --git a/app/components/navigation/Top/Top.container.tsx b/app/components/navigation/Top/Top.container.tsx
index b9aa8f3..abf8eb8 100644
--- a/app/components/navigation/Top/Top.container.tsx
+++ b/app/components/navigation/Top/Top.container.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 /**
- * Figma: "Navigation / Top" (22078-808559)
+ * Figma: "Navigation / Top" (22078-808559); Folder-top 430–639 (18582:22056),
+ * 640–1023 (18580:17113).
  */
 
 import { memo, useCallback } from "react";
@@ -39,6 +40,9 @@ const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
 const CREATE_RULE_RESPONSIVE_CLASS =
   "lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
 
+const FOLDER_CREATE_RULE_RESPONSIVE_CLASS =
+  "md:p-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-002)] md:text-x-small-label lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
+
 const TopContainer = memo<TopProps>(
   ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
@@ -120,6 +124,9 @@ const TopContainer = memo<TopProps>(
       const navSelected =
         (loggedIn && pathname === "/profile") ||
         (!loggedIn && pathname === "/login");
+      const loginClassName = folderTop
+        ? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
+        : NAV_ITEM_RESPONSIVE_CLASS;
 
       if (loggedIn) {
         return (
@@ -128,7 +135,7 @@ const TopContainer = memo<TopProps>(
             size="X Small"
             mode="default"
             state={navSelected ? "selected" : "default"}
-            className={NAV_ITEM_RESPONSIVE_CLASS}
+            className={loginClassName}
             ariaLabel={ariaLabel}
           >
             {label}
@@ -149,7 +156,7 @@ const TopContainer = memo<TopProps>(
           size="X Small"
           mode="default"
           state={navSelected ? "selected" : "default"}
-          className={NAV_ITEM_RESPONSIVE_CLASS}
+          className={loginClassName}
           ariaLabel={ariaLabel}
         >
           {label}
@@ -165,11 +172,19 @@ const TopContainer = memo<TopProps>(
           palette="inverse"
           onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
-          className={CREATE_RULE_RESPONSIVE_CLASS}
+          className={
+            folderTop
+              ? FOLDER_CREATE_RULE_RESPONSIVE_CLASS
+              : CREATE_RULE_RESPONSIVE_CLASS
+          }
         >
           <AvatarContainer
             size="small"
-            className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
+            className={
+              folderTop
+                ? "md:-space-x-[9px] lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
+                : "lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
+            }
           >
             {avatarImageSources.map((src, index) => (
               <Avatar
@@ -177,7 +192,11 @@ const TopContainer = memo<TopProps>(
                 src={src}
                 alt={tTopNav(`avatarAlts.${3 - index}`)}
                 size="small"
-                className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
+                className={
+                  folderTop
+                    ? "md:h-[var(--spacing-scale-018)] md:w-[var(--spacing-scale-018)] lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
+                    : "lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
+                }
               />
             ))}
           </AvatarContainer>
diff --git a/app/components/navigation/Top/Top.view.tsx b/app/components/navigation/Top/Top.view.tsx
index ee07e2f..9a6f9f8 100644
--- a/app/components/navigation/Top/Top.view.tsx
+++ b/app/components/navigation/Top/Top.view.tsx
@@ -37,17 +37,17 @@ function TopView({
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
         />
         <header
-          className="w-full overflow-hidden bg-transparent"
+          className="w-full overflow-visible bg-transparent"
           role="banner"
           aria-label={t("ariaLabels.homePageNavigationHeader")}
         >
           <nav
-            className="relative mx-auto flex h-[50px] items-end justify-between gap-[var(--spacing-scale-008)] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
+            className="relative mx-auto flex h-[50px] items-end justify-between pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
             role="navigation"
             aria-label={t("ariaLabels.mainNavigation")}
           >
-            <div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] min-w-0 flex-1 items-center self-end rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
-              <div className="shrink-0">
+            <div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] w-fit min-w-0 items-center self-end overflow-visible rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:w-auto sm:flex-1 sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:mr-[var(--spacing-scale-024)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:mr-[var(--spacing-scale-032)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
+              <div className="relative z-[1] shrink-0">
                 <Logo
                   size={logoSize}
                   wordmark
@@ -55,7 +55,10 @@ function TopView({
                 />
               </div>
 
-              <div className="ml-auto shrink-0" data-top="nav">
+              <div
+                className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--spacing-scale-016))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--spacing-scale-024))] xl:left-[calc(50vw-var(--spacing-scale-048))]"
+                data-top="nav"
+              >
                 <Menu
                   size="X Small"
                   className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
@@ -69,21 +72,21 @@ function TopView({
                 src={getAssetPath(ASSETS.UNION_XSM)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[3px] -right-[52px] -z-10 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
+                className="pointer-events-none absolute -bottom-[3px] -right-[52px] z-0 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
               />
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath(ASSETS.UNION_SM_MD_LG)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[3.7px] -right-[53px] -z-10 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
+                className="pointer-events-none absolute -bottom-[3.7px] -right-[53px] z-0 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
               />
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath(ASSETS.UNION_XLG)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[6px] -right-[94px] -z-10 hidden h-[53px] w-[105px] xl:block"
+                className="pointer-events-none absolute -bottom-[6px] -right-[94px] z-0 hidden h-[53px] w-[105px] xl:block"
               />
             </div>
 
@@ -103,8 +106,10 @@ function TopView({
   /**
    * Standard marketing / app top nav.
    * Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559).
-   * Three columns so the logo cannot paint over the nav cluster (no absolute
-   * overlay, no reserved 200px hit box below `lg`).
+   * Below md: auto | 1fr | auto so the logo cannot paint over the cluster.
+   * From md: 1fr | auto | 1fr so the cluster sits on the same page midline
+   * as Folder-top (Create rule is wider than the logo, so a leftover-column
+   * center sits off-center).
    */
   return (
     <>
@@ -118,11 +123,11 @@ function TopView({
         aria-label={t("ariaLabels.mainNavigationHeader")}
       >
         <nav
-          className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
+          className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
           role="navigation"
           aria-label={t("ariaLabels.mainNavigation")}
         >
-          <div className="min-w-0 shrink-0 lg:w-[200px] lg:max-w-[200px]" data-top="logo">
+          <div className="min-w-0 shrink-0 justify-self-start lg:w-[200px] lg:max-w-[200px]" data-top="logo">
             <Logo
               size={logoSize}
               wordmark
@@ -143,7 +148,7 @@ function TopView({
           </div>
 
           <div
-            className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
+            className="flex shrink-0 items-center justify-self-end gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
             data-top="auth"
           >
             {loginControl}
diff --git a/app/globals.css b/app/globals.css
index dd4ad34..681b93c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -58,26 +58,3 @@ body {
   background-color: black;
   min-height: 100vh;
 }
-
-/* Skip link: parked above the viewport until focused. */
-.skip-to-content {
-  position: absolute;
-  left: var(--spacing-scale-016);
-  top: var(--spacing-scale-016);
-  z-index: 100;
-  padding: var(--spacing-scale-012) var(--spacing-scale-016);
-  border-radius: var(--radius-measures-radius-full);
-  background-color: var(--color-surface-inverse-primary);
-  color: var(--color-content-inverse-primary);
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  box-shadow:
-    0 0 0 2px var(--color-border-default-primary),
-    0 0 0 4px var(--color-border-invert-primary);
-  transform: translateY(-200%);
-}
-.skip-to-content:focus,
-.skip-to-content:focus-visible {
-  transform: translateY(0);
-}
diff --git a/app/tailwind.css b/app/tailwind.css
index 9ba2e02..28bdf91 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -45,6 +45,33 @@
   background: #292d32;
 }
 
+/*
+ * Must live in this file (same sheet as `@import "tailwindcss"`). Rules in
+ * `globals.css` after that import never reach the browser.
+ * Parked above the viewport until focused so it does not add header offset.
+ */
+.skip-to-content {
+  position: absolute;
+  left: var(--spacing-scale-016);
+  top: var(--spacing-scale-016);
+  z-index: 100;
+  padding: var(--spacing-scale-012) var(--spacing-scale-016);
+  border-radius: var(--radius-measures-radius-full);
+  background-color: var(--color-surface-inverse-primary);
+  color: var(--color-content-inverse-primary);
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  box-shadow:
+    0 0 0 2px var(--color-border-default-primary),
+    0 0 0 4px var(--color-border-invert-primary);
+  transform: translateY(-200%);
+}
+.skip-to-content:focus,
+.skip-to-content:focus-visible {
+  transform: translateY(0);
+}
+
 @theme inline {
   /* Custom breakpoints */
   --breakpoint-xsm: 429px;
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index 1b9bedf..c1547e9 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -79,6 +79,12 @@ describe("Logo (behavioral tests)", () => {
     expect(row?.className).toContain("h-[var(--spacing-scale-040)]");
   });
 
+  it("shows the folder-top wordmark without a breakpoint hide", () => {
+    render(<Logo size="topNavFolderTop" wordmark />);
+    const wordmark = screen.getByText("CommunityRule");
+    expect(wordmark.className).not.toMatch(/\bhidden\b/);
+  });
+
   it("renders with different size variants", () => {
     const { rerender } = render(<Logo size="default" />);
     expect(screen.getByRole("link")).toBeInTheDocument();
diff --git a/tests/components/Top.test.tsx b/tests/components/Top.test.tsx
index 1fc0983..a0290d5 100644
--- a/tests/components/Top.test.tsx
+++ b/tests/components/Top.test.tsx
@@ -172,7 +172,40 @@ describe("Top header chrome", () => {
     renderWithProviders(<Top folderTop={false} loggedIn />);
     const logo = document.querySelector("[data-top='logo']");
     const nav = document.querySelector("[data-top='nav']");
+    const headerNav = document.querySelector("header nav");
     expect(logo?.className).not.toMatch(/\bz-20\b/);
     expect(nav?.className).not.toMatch(/\babsolute\b/);
+    expect(headerNav?.className).toContain(
+      "md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]",
+    );
+  });
+
+  it("hugs the home folder tab below md and page-centers nav from md", () => {
+    renderWithProviders(<Top folderTop />);
+    const tab = document.querySelector(".HeaderTab");
+    const nav = document.querySelector("[data-top='nav']");
+    expect(tab?.className).toContain("w-fit");
+    expect(tab?.className).toContain("sm:w-auto");
+    expect(tab?.className).toContain("sm:flex-1");
+    expect(nav?.className).toContain("md:absolute");
+    expect(nav?.className).toContain(
+      "md:left-[calc(50vw-var(--spacing-scale-016))]",
+    );
+    expect(nav?.className).not.toContain("ml-auto");
+  });
+
+  it("keeps a single home nav cluster and shows the folder wordmark", () => {
+    renderWithProviders(<Top folderTop />);
+    expect(
+      screen.getAllByRole("menuitem", {
+        name: /navigate to use cases page/i,
+        hidden: true,
+      }),
+    ).toHaveLength(1);
+    const wordmark = screen.getByText("CommunityRule");
+    expect(wordmark.className).not.toMatch(/\bhidden\b/);
+    expect(
+      screen.getByRole("button", { name: /create a new rule/i }).className,
+    ).toContain("md:text-x-small-label");
   });
 });