From 448eaed81419b9032f6f462d016fa8412e8c05dc Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Wed, 9 Sep 2026 22:35:39 -0700
Subject: [PATCH 1/8] docs(nav): add Resources and Support menu tabs, restyle
 tab bar to design pills

Docs 3.0 QA: add the Resources and Support dropdown tabs from the new header
design (their menus absorb the old global sidebar anchors), separate them from
the page tabs with a hairline divider, and restyle the tab bar to the design
language: ink labels, black pill for the active tab (inverted in dark mode),
no underline indicator, search entry as a quiet bordered pill.
---
 cspell.json  |  1 +
 docs.json    | 59 ++++++++++++++++++++++++-------------
 tailwind.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 123 insertions(+), 20 deletions(-)

diff --git a/cspell.json b/cspell.json
index 247d844..61daf8c 100644
--- a/cspell.json
+++ b/cspell.json
@@ -159,6 +159,7 @@
     "testnet",
     "testnets",
     "thirdweb",
+    "topbar",
     "touchpoints",
     "tunnelmole",
     "tute",
diff --git a/docs.json b/docs.json
index 8e3bfc9..05990a4 100644
--- a/docs.json
+++ b/docs.json
@@ -379,27 +379,46 @@
             ]
           }
         ]
+      },
+      {
+        "tab": "Resources",
+        "menu": [
+          {
+            "item": "World Tech Blog",
+            "href": "https://world.org/blog?blog_type=world-tech"
+          },
+          {
+            "item": "Open Source",
+            "href": "https://github.com/worldcoin"
+          },
+          {
+            "item": "Whitepaper",
+            "href": "https://whitepaper.world.org"
+          },
+          {
+            "item": "Ecosystem",
+            "href": "https://world.org/ecosystem"
+          }
+        ]
+      },
+      {
+        "tab": "Support",
+        "menu": [
+          {
+            "item": "Telegram Support Channel",
+            "href": "https://t.me/worlddevelopersupport"
+          },
+          {
+            "item": "Email Support",
+            "href": "mailto:developers@toolsforhumanity.com"
+          },
+          {
+            "item": "Mini Apps FAQ",
+            "href": "/mini-apps/more/faq"
+          }
+        ]
       }
-    ],
-    "global": {
-      "anchors": [
-        {
-          "anchor": "Telegram Support Channel",
-          "href": "https://t.me/worlddevelopersupport",
-          "icon": "telegram"
-        },
-        {
-          "anchor": "Email Support",
-          "href": "mailto:developers@toolsforhumanity.com",
-          "icon": "envelope"
-        },
-        {
-          "anchor": "GitHub",
-          "href": "https://github.com/worldcoin",
-          "icon": "github"
-        }
-      ]
-    }
+    ]
   },
   "logo": {
     "light": "/logo/world-developers.svg",
diff --git a/tailwind.css b/tailwind.css
index d3bd1ae..7563126 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -60,6 +60,89 @@
     color: #e5e7eb; /* gray-200 */
   }
 
+  /* ------------------------------------------------------------------ */
+  /* Tab bar (Docs 3.0 header) — pill tabs in the design language: ink   */
+  /* labels, black pill for the active tab (inverted in dark mode), no   */
+  /* underline indicator, hairline divider before the menu tabs.         */
+  /* ------------------------------------------------------------------ */
+  #navbar .nav-tabs {
+    align-items: center;
+    gap: 4px !important;
+  }
+  #navbar .nav-tabs-item {
+    height: 32px !important;
+    padding: 6px 14px;
+    border-radius: 42px;
+    color: #181818 !important;
+    transition: background-color 0.15s ease;
+  }
+  #navbar .nav-tabs-item:hover {
+    color: #181818 !important;
+    background-color: #F3F2F0;
+  }
+  #navbar .nav-tabs-item[data-active="true"] {
+    background-color: #181818;
+    color: #F9F9F8 !important;
+    text-shadow: none;
+  }
+  #navbar .nav-tabs-item[data-active="true"]:hover {
+    color: #F9F9F8 !important;
+    background-color: #181818;
+  }
+  /* The theme's active-tab underline indicator */
+  #navbar .nav-tabs-item > div.absolute {
+    display: none;
+  }
+  /* Hairline divider between the page tabs and the Resources/Support
+     menus (the menu tabs render as <button>, page tabs as <a>). */
+  #navbar .nav-tabs > button.nav-tabs-item:first-of-type {
+    margin-left: 21px;
+  }
+  #navbar .nav-tabs > button.nav-tabs-item:first-of-type::before {
+    content: "";
+    position: absolute;
+    left: -13px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 24px;
+    background-color: #E1DFDA;
+  }
+  .dark #navbar .nav-tabs > button.nav-tabs-item:first-of-type::before {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  .dark #navbar .nav-tabs-item {
+    color: #F3F2F0 !important;
+  }
+  .dark #navbar .nav-tabs-item:hover {
+    color: #F3F2F0 !important;
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+  .dark #navbar .nav-tabs-item[data-active="true"],
+  .dark #navbar .nav-tabs-item[data-active="true"]:hover {
+    background-color: #F3F2F0;
+    color: #181818 !important;
+  }
+
+  /* Search entry — quiet bordered pill per design */
+  #navbar #search-bar-entry {
+    border-radius: 20px;
+    background-color: #F9F9F8;
+    box-shadow: none;
+    --tw-ring-color: #E1DFDA;
+    color: #181818;
+  }
+  .dark #navbar #search-bar-entry {
+    background-color: rgb(24, 25, 27);
+    --tw-ring-color: rgba(255, 255, 255, 0.15);
+    color: #F3F2F0;
+  }
+
+  /* Developer Portal CTA — pill radius to match the design language */
+  #topbar-cta-button a > span.absolute {
+    border-radius: 20px;
+  }
+
   /* Quickstart: tighten code block spacing within the card */
   .quickstart-code .code-block {
     margin-top: 0.5rem !important;

From 606af5dc63abcb4a96242f75a3643a1d4321d89a Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 11:43:22 -0700
Subject: [PATCH 2/8] docs(nav): single-row floating pill header at desktop
 widths

Collapse the theme's two-row header into the design's floating 84px pill
at >=1440px: logo left, adjacent pill tabs centered (752px row per the
mock), compact search pill and CTA right, 63px side margins at the
1728px frame so the logo shares the 96px page gutter. Tab pills tighten
to the design metrics (zero gap, 10px padding, 14px on the active pill).
Between 1440-1600px the theme toggle steps aside; below 1440px the
two-row layout from the previous commit remains.
---
 tailwind.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 101 insertions(+), 4 deletions(-)

diff --git a/tailwind.css b/tailwind.css
index 7563126..c548710 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -67,11 +67,11 @@
   /* ------------------------------------------------------------------ */
   #navbar .nav-tabs {
     align-items: center;
-    gap: 4px !important;
+    gap: 0 !important;
   }
   #navbar .nav-tabs-item {
     height: 32px !important;
-    padding: 6px 14px;
+    padding: 6px 10px;
     border-radius: 42px;
     color: #181818 !important;
     transition: background-color 0.15s ease;
@@ -81,6 +81,7 @@
     background-color: #F3F2F0;
   }
   #navbar .nav-tabs-item[data-active="true"] {
+    padding: 6px 14px;
     background-color: #181818;
     color: #F9F9F8 !important;
     text-shadow: none;
@@ -96,12 +97,12 @@
   /* Hairline divider between the page tabs and the Resources/Support
      menus (the menu tabs render as <button>, page tabs as <a>). */
   #navbar .nav-tabs > button.nav-tabs-item:first-of-type {
-    margin-left: 21px;
+    margin-left: 17px;
   }
   #navbar .nav-tabs > button.nav-tabs-item:first-of-type::before {
     content: "";
     position: absolute;
-    left: -13px;
+    left: -9px;
     top: 50%;
     transform: translateY(-50%);
     width: 1px;
@@ -143,6 +144,102 @@
     border-radius: 20px;
   }
 
+  /* ------------------------------------------------------------------ */
+  /* Floating pill header (Docs 3.0, desktop ≥1440px) — collapse the     */
+  /* theme's two-row header into the design's single 84px rounded bar:   */
+  /* logo left, tabs centered, search/CTA right, floating on the page    */
+  /* background. Below 1440px the two-row layout above remains.          */
+  /* ------------------------------------------------------------------ */
+  @media (min-width: 1440px) {
+    /* No full-width backdrop: the pill floats on the page background. */
+    #navbar #navbar-transition {
+      display: none;
+    }
+    #navbar > div.max-w-8xl {
+      width: calc(100% - 48px);
+      max-width: 1602px !important;
+      margin: 24px auto 0;
+      background-color: #FFFFFF;
+      border: 1px solid #E1DFDA;
+      border-radius: 18px;
+      box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.03);
+    }
+    .dark #navbar > div.max-w-8xl {
+      background-color: rgb(24, 25, 27);
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+    /* Top row becomes the single 84px pill row (33px inner gutter puts
+       the logo on the 96px page gutter at the 1728px frame). */
+    #navbar div.lg\:px-12 {
+      height: 84px !important;
+      padding-left: 33px !important;
+      padding-right: 25px !important;
+      margin: 0 !important;
+    }
+    #navbar div.lg\:px-12 > div {
+      border-bottom: none !important;
+    }
+    /* Tab row: lift it into the pill row, centered. */
+    #navbar .max-w-8xl div.px-12 {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: max-content;
+      height: 84px !important;
+      padding: 0 !important;
+      z-index: 10;
+    }
+    #navbar .nav-tabs-item {
+      white-space: nowrap;
+    }
+    /* Search (and the assistant entry beside it) become compact pills on
+       the right instead of a stretched center bar. */
+    #navbar div.z-20.justify-center {
+      flex: 0 0 auto !important;
+    }
+    #navbar div.lg\:px-12 .justify-end {
+      flex: 0 0 auto !important;
+    }
+    #navbar #search-bar-entry {
+      width: auto !important;
+    }
+    #navbar #search-bar-entry span.text-xs {
+      display: none;
+    }
+    /* The design's header carries no Explore Integrations link (Ecosystem
+       lives in the Resources menu and the footer). */
+    #navbar li.navbar-link {
+      display: none !important;
+    }
+  }
+  @media (min-width: 1440px) {
+    /* Logo at the design scale (glyph ~24px) */
+    #navbar div.lg\:px-12 .nav-logo {
+      height: 24px !important;
+    }
+    /* Search pill at the design metrics: 34px tall, 6/14 padding */
+    #navbar #search-bar-entry {
+      height: 34px !important;
+      padding: 6px 14px !important;
+    }
+  }
+  /* Between 1440-1600px the pill is narrower than the design frame, so
+     shed the secondary utilities (theme toggle, contextual toggle) to
+     keep logo/tabs/search/CTA from colliding; they return at 1600px+. */
+  @media (min-width: 1440px) and (max-width: 1599px) {
+    #navbar #theme-preference-menu-trigger {
+      display: none !important;
+    }
+  }
+  @media (min-width: 1600px) {
+    /* At the design frame, side margins widen to 63px so the logo sits
+       on the shared 96px gutter. */
+    #navbar > div.max-w-8xl {
+      width: calc(100% - 126px);
+    }
+  }
+
   /* Quickstart: tighten code block spacing within the card */
   .quickstart-code .code-block {
     margin-top: 0.5rem !important;

From ce0cd31bfbff8d7ac8ada225c740889d274b6b35 Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 11:59:04 -0700
Subject: [PATCH 3/8] docs(nav): logo at the design scale in the pill header
 (166px block)

---
 tailwind.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tailwind.css b/tailwind.css
index c548710..c0d4887 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -214,9 +214,10 @@
     }
   }
   @media (min-width: 1440px) {
-    /* Logo at the design scale (glyph ~24px) */
+    /* Logo at the design scale: the mock's logo block is 166px wide;
+       our combined SVG hits that width at 17px tall. */
     #navbar div.lg\:px-12 .nav-logo {
-      height: 24px !important;
+      height: 17px !important;
     }
     /* Search pill at the design metrics: 34px tall, 6/14 padding */
     #navbar #search-bar-entry {

From 9574eec4ec2977a9a50f8f102511067543b32dba Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 12:02:21 -0700
Subject: [PATCH 4/8] docs(brand): match the logo wordmark gap to the design

The gap between the world mark and 'Developers' in the combined logo
SVGs rendered ~47% wider than the mock (12.6px vs 8.6px at the header
scale). Shift the wordmark 6.1 viewBox units left in both variants
(canvas 233 -> 226.9) so the gap ratio lands on the design's 5.16%,
and keep the pill-header logo block at the mock's 166px width.
---
 logo/world-developers-white.svg | 4 +++-
 logo/world-developers.svg       | 4 +++-
 tailwind.css                    | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/logo/world-developers-white.svg b/logo/world-developers-white.svg
index 059655e..ab6231b 100644
--- a/logo/world-developers-white.svg
+++ b/logo/world-developers-white.svg
@@ -1,4 +1,4 @@
-<svg width="233" height="24" viewBox="0 0 233 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="--fill-0: #FAFAFA">
+<svg width="226.9" height="24" viewBox="0 0 226.9 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="--fill-0: #FAFAFA">
 <g id="World Developers">
 <g id="Vector">
 <path d="M12.0083 24C9.83769 24 7.83075 23.4627 5.99078 22.3849C4.1508 21.3103 2.69151 19.8521 1.61624 18.0133C0.537634 16.1713 0 14.1691 0 12C0 9.83092 0.537634 7.82536 1.61624 5.98665C2.69151 4.14794 4.1508 2.68966 5.99078 1.61513C7.83075 0.537264 9.83769 0 12.0083 0C14.1788 0 16.1858 0.537264 18.0258 1.61513C19.8657 2.69299 21.325 4.14794 22.4003 5.98665C23.4756 7.82536 24.0165 9.83092 24.0165 12C24.0165 14.1691 23.4789 16.1746 22.4003 18.0133C21.325 19.8521 19.8657 21.3103 18.0258 22.3849C16.1858 23.4594 14.1788 24 12.0083 24ZM1.01516 13.2747V10.7753H23.0247V13.2747H1.01516ZM12.0083 21.4472C13.7113 21.4472 15.2775 21.0267 16.7101 20.1858C18.1426 19.3448 19.2713 18.2002 20.0961 16.7486C20.921 15.3003 21.3317 13.7152 21.3317 11.9967C21.3317 10.2781 20.9176 8.69633 20.0961 7.24805C19.2713 5.79978 18.1426 4.65517 16.7101 3.8109C15.2775 2.96997 13.7113 2.5495 12.0083 2.5495C10.3052 2.5495 8.73905 2.96997 7.30648 3.8109C5.8739 4.65184 4.7452 5.79644 3.92038 7.24805C3.09557 8.69633 2.68149 10.2814 2.68149 11.9967C2.68149 13.7119 3.09223 15.297 3.92038 16.7486C4.7452 18.1969 5.8739 19.3415 7.30648 20.1858C8.73905 21.0267 10.3052 21.4472 12.0083 21.4472ZM5.60007 12.1802V11.8665C5.60007 10.6352 5.89393 9.52058 6.485 8.5228C7.07606 7.52503 7.90422 6.74082 8.97281 6.16685C10.0414 5.59288 11.2603 5.30923 12.6327 5.30923H20.6805L21.7224 7.75528H12.6828C11.3638 7.75528 10.2985 8.14238 9.49374 8.91324C8.68562 9.68409 8.28156 10.6685 8.28156 11.8665V12.1802C8.28156 13.3949 8.68562 14.3826 9.49374 15.1468C10.3019 15.911 11.3638 16.2914 12.6828 16.2914H21.7224L20.6805 18.7375H12.6327C11.2603 18.7375 10.0414 18.4505 8.97281 17.8799C7.90422 17.3059 7.07606 16.5217 6.485 15.5239C5.89393 14.5261 5.60007 13.4116 5.60007 12.1802Z" fill="var(--fill-0, #2D2C2C)"/>
@@ -7,6 +7,7 @@
 <path d="M66.6201 5.30951H69.7185V9.1371L69.4828 8.82342C69.6916 7.62542 70.2271 6.71107 71.0859 6.07703C71.9447 5.443 72.9585 5.12598 74.1339 5.12598H74.2383V8.22275H74.1608C72.7429 8.23944 71.6517 8.59984 70.8906 9.30395C70.1294 10.0081 69.7489 11.156 69.7489 12.7511V18.7378H66.6234V5.30951H66.6201Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M77.3088 17.7668C76.5207 17.0627 76.1266 15.9681 76.1266 14.4731V0.157227H79.252V14.0827C79.252 14.7935 79.3969 15.3207 79.6865 15.6578C79.9761 15.9948 80.478 16.175 81.1987 16.1917V18.8213H80.8821C79.2891 18.8213 78.0968 18.4709 77.3088 17.7668Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M84.8649 18.1939C83.8242 17.5866 83.0159 16.7457 82.4468 15.6678C81.8776 14.5933 81.5913 13.3786 81.5913 12.0237C81.5913 10.6689 81.881 9.47758 82.4569 8.39304C83.0362 7.30851 83.8444 6.46423 84.8851 5.85689C85.9258 5.24955 87.1214 4.94588 88.472 4.94588C89.7518 4.94588 90.8564 5.2629 91.7961 5.89694C92.7323 6.53098 93.315 7.35189 93.544 8.35634L92.9412 8.25289V0.157227H96.0666V18.7412H92.9412V15.4108L93.5204 15.6978C93.379 16.3385 93.0725 16.9259 92.601 17.4564C92.1295 17.987 91.5334 18.3942 90.816 18.6811C90.0986 18.9681 89.3173 19.1116 88.4787 19.1116C87.1113 19.1116 85.909 18.808 84.8683 18.2006L84.8649 18.1939ZM91.0248 15.8246C91.6546 15.4442 92.1463 14.917 92.4966 14.2496C92.8469 13.5821 93.022 12.8413 93.022 12.0237C93.022 11.2062 92.8469 10.4653 92.4966 9.79794C92.1463 9.13053 91.6546 8.60662 91.0248 8.22286C90.395 7.84243 89.6676 7.64888 88.8458 7.64888C88.024 7.64888 87.3033 7.8391 86.6903 8.22286C86.0774 8.60328 85.6025 9.13053 85.2724 9.79794C84.939 10.4653 84.774 11.2095 84.774 12.0237C84.774 12.838 84.939 13.5821 85.2724 14.2496C85.6059 14.917 86.0774 15.4442 86.6903 15.8246C87.3033 16.2051 88.0206 16.3986 88.8458 16.3986C89.6709 16.3986 90.395 16.2084 91.0248 15.8246Z" fill="var(--fill-0, #2D2C2C)"/>
+<g transform="translate(-6.1 0)">
 <path d="M119.066 1.61287C120.956 1.61287 122.557 1.94887 123.87 2.62087C125.183 3.29287 126.175 4.25287 126.848 5.50087C127.52 6.74887 127.856 8.22887 127.856 9.94087C127.856 11.6689 127.52 13.1969 126.848 14.5249C126.175 15.8529 125.191 16.8929 123.894 17.6449C122.597 18.3809 121.02 18.7489 119.162 18.7489H115.392V16.4209H119.21C120.379 16.4209 121.404 16.1809 122.285 15.7009C123.165 15.2049 123.854 14.4689 124.35 13.4929C124.846 12.5169 125.094 11.3329 125.094 9.94087C125.094 8.59687 124.846 7.47687 124.35 6.58087C123.854 5.68487 123.157 5.02087 122.261 4.58887C121.38 4.15687 120.347 3.94087 119.162 3.94087H115.512V1.61287H119.066ZM116.617 18.7489H113.855V1.61287H116.617V18.7489Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M141.029 15.0529C140.789 15.8849 140.404 16.6049 139.876 17.2129C139.348 17.8209 138.691 18.2849 137.907 18.6049C137.138 18.9249 136.274 19.0849 135.313 19.0849C134.096 19.0849 133.015 18.8129 132.071 18.2689C131.142 17.7089 130.414 16.9329 129.885 15.9409C129.373 14.9329 129.117 13.7889 129.117 12.5089C129.117 11.2609 129.381 10.1489 129.909 9.17287C130.454 8.18087 131.19 7.40487 132.119 6.84487C133.063 6.28487 134.128 6.00487 135.313 6.00487C136.658 6.00487 137.771 6.31687 138.651 6.94087C139.532 7.56487 140.172 8.38087 140.573 9.38887C140.989 10.3969 141.205 11.5169 141.221 12.7489C141.221 12.9249 141.213 13.1009 141.197 13.2769H131.35V11.3569H138.627C138.531 10.3649 138.203 9.57287 137.643 8.98087C137.082 8.38887 136.298 8.09287 135.289 8.09287C134.52 8.09287 133.848 8.27687 133.272 8.64487C132.711 9.01287 132.287 9.52487 131.999 10.1809C131.71 10.8369 131.582 11.5889 131.614 12.4369C131.598 13.3489 131.734 14.1489 132.023 14.8369C132.327 15.5089 132.759 16.0289 133.32 16.3969C133.88 16.7649 134.536 16.9489 135.289 16.9489C136.057 16.9489 136.714 16.7889 137.258 16.4689C137.819 16.1489 138.203 15.6769 138.411 15.0529H141.029Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M144.502 6.34087C144.95 7.66887 145.391 8.98087 145.823 10.2769C146.511 12.3729 147.144 14.3169 147.72 16.1089H147.744C148.177 14.7809 148.529 13.7009 148.801 12.8689C149.073 12.0209 149.433 10.9089 149.882 9.53287C150.058 8.98887 150.234 8.45287 150.41 7.92487C150.586 7.39687 150.754 6.86887 150.915 6.34087H153.724C152.203 10.4689 150.682 14.6049 149.161 18.7489H146.255L141.692 6.34087H144.502Z" fill="var(--fill-0, #2D2C2C)"/>
@@ -19,4 +20,5 @@
 <path d="M230.238 10.0609C230.158 9.38887 229.886 8.89287 229.422 8.57287C228.957 8.23687 228.405 8.06887 227.764 8.06887C227.38 8.06887 227.028 8.13287 226.708 8.26087C226.387 8.38887 226.131 8.57287 225.939 8.81287C225.747 9.05287 225.651 9.31687 225.651 9.60487C225.651 10.0209 225.827 10.3729 226.179 10.6609C226.532 10.9329 227.036 11.1489 227.692 11.3089L229.349 11.7409C230.47 12.0129 231.359 12.4289 232.015 12.9889C232.672 13.5329 233 14.2689 233 15.1969C233 15.9969 232.76 16.6929 232.279 17.2849C231.799 17.8609 231.175 18.3089 230.406 18.6289C229.638 18.9329 228.813 19.0849 227.932 19.0849C227.084 19.0849 226.283 18.9489 225.531 18.6769C224.778 18.3889 224.146 17.9409 223.634 17.3329C223.121 16.7089 222.825 15.9169 222.745 14.9569H225.339C225.467 15.6609 225.747 16.1809 226.179 16.5169C226.612 16.8529 227.212 17.0209 227.981 17.0209C228.653 17.0209 229.221 16.8849 229.686 16.6129C230.166 16.3249 230.406 15.9009 230.406 15.3409C230.406 15.0209 230.31 14.7569 230.118 14.5489C229.942 14.3409 229.71 14.1809 229.422 14.0689C229.133 13.9409 228.773 13.8209 228.341 13.7089C228.021 13.6129 227.732 13.5409 227.476 13.4929L226.588 13.2529C225.547 12.9809 224.706 12.5489 224.066 11.9569C223.425 11.3649 223.105 10.6129 223.105 9.70087C223.105 8.96487 223.321 8.31687 223.754 7.75687C224.186 7.19687 224.762 6.76487 225.483 6.46087C226.203 6.15687 226.98 6.00487 227.812 6.00487C228.693 6.00487 229.486 6.15687 230.19 6.46087C230.911 6.76487 231.495 7.22087 231.943 7.82887C232.392 8.43687 232.664 9.18087 232.76 10.0609H230.238Z" fill="var(--fill-0, #2D2C2C)"/>
 </g>
 </g>
+</g>
 </svg>
diff --git a/logo/world-developers.svg b/logo/world-developers.svg
index e8b36be..443a9dd 100644
--- a/logo/world-developers.svg
+++ b/logo/world-developers.svg
@@ -1,4 +1,4 @@
-<svg width="233" height="24" viewBox="0 0 233 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="226.9" height="24" viewBox="0 0 226.9 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="World Developers">
 <g id="Vector">
 <path d="M12.0083 24C9.83769 24 7.83075 23.4627 5.99078 22.3849C4.1508 21.3103 2.69151 19.8521 1.61624 18.0133C0.537634 16.1713 0 14.1691 0 12C0 9.83092 0.537634 7.82536 1.61624 5.98665C2.69151 4.14794 4.1508 2.68966 5.99078 1.61513C7.83075 0.537264 9.83769 0 12.0083 0C14.1788 0 16.1858 0.537264 18.0258 1.61513C19.8657 2.69299 21.325 4.14794 22.4003 5.98665C23.4756 7.82536 24.0165 9.83092 24.0165 12C24.0165 14.1691 23.4789 16.1746 22.4003 18.0133C21.325 19.8521 19.8657 21.3103 18.0258 22.3849C16.1858 23.4594 14.1788 24 12.0083 24ZM1.01516 13.2747V10.7753H23.0247V13.2747H1.01516ZM12.0083 21.4472C13.7113 21.4472 15.2775 21.0267 16.7101 20.1858C18.1426 19.3448 19.2713 18.2002 20.0961 16.7486C20.921 15.3003 21.3317 13.7152 21.3317 11.9967C21.3317 10.2781 20.9176 8.69633 20.0961 7.24805C19.2713 5.79978 18.1426 4.65517 16.7101 3.8109C15.2775 2.96997 13.7113 2.5495 12.0083 2.5495C10.3052 2.5495 8.73905 2.96997 7.30648 3.8109C5.8739 4.65184 4.7452 5.79644 3.92038 7.24805C3.09557 8.69633 2.68149 10.2814 2.68149 11.9967C2.68149 13.7119 3.09223 15.297 3.92038 16.7486C4.7452 18.1969 5.8739 19.3415 7.30648 20.1858C8.73905 21.0267 10.3052 21.4472 12.0083 21.4472ZM5.60007 12.1802V11.8665C5.60007 10.6352 5.89393 9.52058 6.485 8.5228C7.07606 7.52503 7.90422 6.74082 8.97281 6.16685C10.0414 5.59288 11.2603 5.30923 12.6327 5.30923H20.6805L21.7224 7.75528H12.6828C11.3638 7.75528 10.2985 8.14238 9.49374 8.91324C8.68562 9.68409 8.28156 10.6685 8.28156 11.8665V12.1802C8.28156 13.3949 8.68562 14.3826 9.49374 15.1468C10.3019 15.911 11.3638 16.2914 12.6828 16.2914H21.7224L20.6805 18.7375H12.6327C11.2603 18.7375 10.0414 18.4505 8.97281 17.8799C7.90422 17.3059 7.07606 16.5217 6.485 15.5239C5.89393 14.5261 5.60007 13.4116 5.60007 12.1802Z" fill="var(--fill-0, #2D2C2C)"/>
@@ -7,6 +7,7 @@
 <path d="M66.6201 5.30951H69.7185V9.1371L69.4828 8.82342C69.6916 7.62542 70.2271 6.71107 71.0859 6.07703C71.9447 5.443 72.9585 5.12598 74.1339 5.12598H74.2383V8.22275H74.1608C72.7429 8.23944 71.6517 8.59984 70.8906 9.30395C70.1294 10.0081 69.7489 11.156 69.7489 12.7511V18.7378H66.6234V5.30951H66.6201Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M77.3088 17.7668C76.5207 17.0627 76.1266 15.9681 76.1266 14.4731V0.157227H79.252V14.0827C79.252 14.7935 79.3969 15.3207 79.6865 15.6578C79.9761 15.9948 80.478 16.175 81.1987 16.1917V18.8213H80.8821C79.2891 18.8213 78.0968 18.4709 77.3088 17.7668Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M84.8649 18.1939C83.8242 17.5866 83.0159 16.7457 82.4468 15.6678C81.8776 14.5933 81.5913 13.3786 81.5913 12.0237C81.5913 10.6689 81.881 9.47758 82.4569 8.39304C83.0362 7.30851 83.8444 6.46423 84.8851 5.85689C85.9258 5.24955 87.1214 4.94588 88.472 4.94588C89.7518 4.94588 90.8564 5.2629 91.7961 5.89694C92.7323 6.53098 93.315 7.35189 93.544 8.35634L92.9412 8.25289V0.157227H96.0666V18.7412H92.9412V15.4108L93.5204 15.6978C93.379 16.3385 93.0725 16.9259 92.601 17.4564C92.1295 17.987 91.5334 18.3942 90.816 18.6811C90.0986 18.9681 89.3173 19.1116 88.4787 19.1116C87.1113 19.1116 85.909 18.808 84.8683 18.2006L84.8649 18.1939ZM91.0248 15.8246C91.6546 15.4442 92.1463 14.917 92.4966 14.2496C92.8469 13.5821 93.022 12.8413 93.022 12.0237C93.022 11.2062 92.8469 10.4653 92.4966 9.79794C92.1463 9.13053 91.6546 8.60662 91.0248 8.22286C90.395 7.84243 89.6676 7.64888 88.8458 7.64888C88.024 7.64888 87.3033 7.8391 86.6903 8.22286C86.0774 8.60328 85.6025 9.13053 85.2724 9.79794C84.939 10.4653 84.774 11.2095 84.774 12.0237C84.774 12.838 84.939 13.5821 85.2724 14.2496C85.6059 14.917 86.0774 15.4442 86.6903 15.8246C87.3033 16.2051 88.0206 16.3986 88.8458 16.3986C89.6709 16.3986 90.395 16.2084 91.0248 15.8246Z" fill="var(--fill-0, #2D2C2C)"/>
+<g transform="translate(-6.1 0)">
 <path d="M119.066 1.61287C120.956 1.61287 122.557 1.94887 123.87 2.62087C125.183 3.29287 126.175 4.25287 126.848 5.50087C127.52 6.74887 127.856 8.22887 127.856 9.94087C127.856 11.6689 127.52 13.1969 126.848 14.5249C126.175 15.8529 125.191 16.8929 123.894 17.6449C122.597 18.3809 121.02 18.7489 119.162 18.7489H115.392V16.4209H119.21C120.379 16.4209 121.404 16.1809 122.285 15.7009C123.165 15.2049 123.854 14.4689 124.35 13.4929C124.846 12.5169 125.094 11.3329 125.094 9.94087C125.094 8.59687 124.846 7.47687 124.35 6.58087C123.854 5.68487 123.157 5.02087 122.261 4.58887C121.38 4.15687 120.347 3.94087 119.162 3.94087H115.512V1.61287H119.066ZM116.617 18.7489H113.855V1.61287H116.617V18.7489Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M141.029 15.0529C140.789 15.8849 140.404 16.6049 139.876 17.2129C139.348 17.8209 138.691 18.2849 137.907 18.6049C137.138 18.9249 136.274 19.0849 135.313 19.0849C134.096 19.0849 133.015 18.8129 132.071 18.2689C131.142 17.7089 130.414 16.9329 129.885 15.9409C129.373 14.9329 129.117 13.7889 129.117 12.5089C129.117 11.2609 129.381 10.1489 129.909 9.17287C130.454 8.18087 131.19 7.40487 132.119 6.84487C133.063 6.28487 134.128 6.00487 135.313 6.00487C136.658 6.00487 137.771 6.31687 138.651 6.94087C139.532 7.56487 140.172 8.38087 140.573 9.38887C140.989 10.3969 141.205 11.5169 141.221 12.7489C141.221 12.9249 141.213 13.1009 141.197 13.2769H131.35V11.3569H138.627C138.531 10.3649 138.203 9.57287 137.643 8.98087C137.082 8.38887 136.298 8.09287 135.289 8.09287C134.52 8.09287 133.848 8.27687 133.272 8.64487C132.711 9.01287 132.287 9.52487 131.999 10.1809C131.71 10.8369 131.582 11.5889 131.614 12.4369C131.598 13.3489 131.734 14.1489 132.023 14.8369C132.327 15.5089 132.759 16.0289 133.32 16.3969C133.88 16.7649 134.536 16.9489 135.289 16.9489C136.057 16.9489 136.714 16.7889 137.258 16.4689C137.819 16.1489 138.203 15.6769 138.411 15.0529H141.029Z" fill="var(--fill-0, #2D2C2C)"/>
 <path d="M144.502 6.34087C144.95 7.66887 145.391 8.98087 145.823 10.2769C146.511 12.3729 147.144 14.3169 147.72 16.1089H147.744C148.177 14.7809 148.529 13.7009 148.801 12.8689C149.073 12.0209 149.433 10.9089 149.882 9.53287C150.058 8.98887 150.234 8.45287 150.41 7.92487C150.586 7.39687 150.754 6.86887 150.915 6.34087H153.724C152.203 10.4689 150.682 14.6049 149.161 18.7489H146.255L141.692 6.34087H144.502Z" fill="var(--fill-0, #2D2C2C)"/>
@@ -19,4 +20,5 @@
 <path d="M230.238 10.0609C230.158 9.38887 229.886 8.89287 229.422 8.57287C228.957 8.23687 228.405 8.06887 227.764 8.06887C227.38 8.06887 227.028 8.13287 226.708 8.26087C226.387 8.38887 226.131 8.57287 225.939 8.81287C225.747 9.05287 225.651 9.31687 225.651 9.60487C225.651 10.0209 225.827 10.3729 226.179 10.6609C226.532 10.9329 227.036 11.1489 227.692 11.3089L229.349 11.7409C230.47 12.0129 231.359 12.4289 232.015 12.9889C232.672 13.5329 233 14.2689 233 15.1969C233 15.9969 232.76 16.6929 232.279 17.2849C231.799 17.8609 231.175 18.3089 230.406 18.6289C229.638 18.9329 228.813 19.0849 227.932 19.0849C227.084 19.0849 226.283 18.9489 225.531 18.6769C224.778 18.3889 224.146 17.9409 223.634 17.3329C223.121 16.7089 222.825 15.9169 222.745 14.9569H225.339C225.467 15.6609 225.747 16.1809 226.179 16.5169C226.612 16.8529 227.212 17.0209 227.981 17.0209C228.653 17.0209 229.221 16.8849 229.686 16.6129C230.166 16.3249 230.406 15.9009 230.406 15.3409C230.406 15.0209 230.31 14.7569 230.118 14.5489C229.942 14.3409 229.71 14.1809 229.422 14.0689C229.133 13.9409 228.773 13.8209 228.341 13.7089C228.021 13.6129 227.732 13.5409 227.476 13.4929L226.588 13.2529C225.547 12.9809 224.706 12.5489 224.066 11.9569C223.425 11.3649 223.105 10.6129 223.105 9.70087C223.105 8.96487 223.321 8.31687 223.754 7.75687C224.186 7.19687 224.762 6.76487 225.483 6.46087C226.203 6.15687 226.98 6.00487 227.812 6.00487C228.693 6.00487 229.486 6.15687 230.19 6.46087C230.911 6.76487 231.495 7.22087 231.943 7.82887C232.392 8.43687 232.664 9.18087 232.76 10.0609H230.238Z" fill="var(--fill-0, #2D2C2C)"/>
 </g>
 </g>
+</g>
 </svg>
diff --git a/tailwind.css b/tailwind.css
index c0d4887..98f2f2f 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -215,9 +215,9 @@
   }
   @media (min-width: 1440px) {
     /* Logo at the design scale: the mock's logo block is 166px wide;
-       our combined SVG hits that width at 17px tall. */
+       our combined SVG hits that width at 17.5px tall. */
     #navbar div.lg\:px-12 .nav-logo {
-      height: 17px !important;
+      height: 17.5px !important;
     }
     /* Search pill at the design metrics: 34px tall, 6/14 padding */
     #navbar #search-bar-entry {

From 2cd23159c5885f6e9d38ae75851c28ff750c386c Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 12:09:45 -0700
Subject: [PATCH 5/8] =?UTF-8?q?docs(nav):=20pill=20header=20right=20side?=
 =?UTF-8?q?=20per=20the=20mock=20=E2=80=94=20Search/Ask=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide the Developer Portal CTA and the theme toggle at pill widths
(>=1440px): the design's header carries only the Search and Ask pills.
Developer Portal joins the Resources menu so it stays one click away;
the theme still follows the system preference, and both elements remain
in the sub-1440 layouts and mobile nav.
---
 docs.json    |  4 ++++
 tailwind.css | 19 ++++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs.json b/docs.json
index 05990a4..6a49357 100644
--- a/docs.json
+++ b/docs.json
@@ -383,6 +383,10 @@
       {
         "tab": "Resources",
         "menu": [
+          {
+            "item": "Developer Portal",
+            "href": "https://developer.worldcoin.org"
+          },
           {
             "item": "World Tech Blog",
             "href": "https://world.org/blog?blog_type=world-tech"
diff --git a/tailwind.css b/tailwind.css
index 98f2f2f..3590379 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -207,9 +207,14 @@
     #navbar #search-bar-entry span.text-xs {
       display: none;
     }
-    /* The design's header carries no Explore Integrations link (Ecosystem
-       lives in the Resources menu and the footer). */
-    #navbar li.navbar-link {
+    /* The design's header right side is just the Search / Ask pills:
+       no Explore Integrations link (Ecosystem lives in the Resources
+       menu and the footer), no Developer Portal CTA (moved into the
+       Resources menu at these widths), no theme toggle (the theme still
+       follows the system preference; both remain below 1440px). */
+    #navbar li.navbar-link,
+    #navbar #topbar-cta-button,
+    #navbar #theme-preference-menu-trigger {
       display: none !important;
     }
   }
@@ -225,14 +230,6 @@
       padding: 6px 14px !important;
     }
   }
-  /* Between 1440-1600px the pill is narrower than the design frame, so
-     shed the secondary utilities (theme toggle, contextual toggle) to
-     keep logo/tabs/search/CTA from colliding; they return at 1600px+. */
-  @media (min-width: 1440px) and (max-width: 1599px) {
-    #navbar #theme-preference-menu-trigger {
-      display: none !important;
-    }
-  }
   @media (min-width: 1600px) {
     /* At the design frame, side margins widen to 63px so the logo sits
        on the shared 96px gutter. */

From f105d3d46da3866c6340c1f9ba38773bc443517a Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 12:12:49 -0700
Subject: [PATCH 6/8] docs(nav): style the hosted Ask Assistant entry as the
 design's Ask AI pill

---
 tailwind.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/tailwind.css b/tailwind.css
index 3590379..5265bcb 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -207,6 +207,25 @@
     #navbar #search-bar-entry span.text-xs {
       display: none;
     }
+    /* Ask Assistant (hosted-only) — the design's "Ask AI" pill. */
+    #navbar #assistant-entry {
+      height: 34px !important;
+      padding: 6px 14px !important;
+      border-radius: 20px !important;
+      background-color: #F9F9F8 !important;
+      border: 1px solid #E1DFDA !important;
+      box-shadow: none !important;
+      color: #181818 !important;
+    }
+    #navbar #assistant-entry kbd,
+    #navbar #assistant-entry .text-xs {
+      display: none !important;
+    }
+    .dark #navbar #assistant-entry {
+      background-color: rgb(24, 25, 27) !important;
+      border-color: rgba(255, 255, 255, 0.15) !important;
+      color: #F3F2F0 !important;
+    }
     /* The design's header right side is just the Search / Ask pills:
        no Explore Integrations link (Ecosystem lives in the Resources
        menu and the footer), no Developer Portal CTA (moved into the

From f0318966f7c1af86e11d90c4fbdb270e7f711df7 Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 12:17:46 -0700
Subject: [PATCH 7/8] =?UTF-8?q?docs(nav):=20rebuild=20the=20pill=20header?=
 =?UTF-8?q?=20as=20one=20flex=20line=20=E2=80=94=20no=20overlap=20possible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hosted header carries a wide Search + Ask Assistant cluster that the
absolutely-centered tab row painted under at sub-1728 widths (tabs were
hidden behind the pills). Flatten the theme's two-row scaffolding with
display:contents so logo, tabs, and the cluster are items on ONE flex
line: auto margins center the tabs in the free space and the layout can
never overlap regardless of cluster width. Also style the hosted Ask
Assistant entry as the design's Ask pill and compact the search entry
by rule (the prod cluster lacks the justify-center class the previous
selector keyed on).
---
 tailwind.css | 85 ++++++++++++++++++++++++++--------------------------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/tailwind.css b/tailwind.css
index 5265bcb..c4ced24 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -146,19 +146,28 @@
 
   /* ------------------------------------------------------------------ */
   /* Floating pill header (Docs 3.0, desktop ≥1440px) — collapse the     */
-  /* theme's two-row header into the design's single 84px rounded bar:   */
-  /* logo left, tabs centered, search/CTA right, floating on the page    */
-  /* background. Below 1440px the two-row layout above remains.          */
+  /* theme's two-row header into the design's single 84px rounded bar.   */
+  /* The theme's row scaffolding is flattened with display:contents so   */
+  /* the logo, the tab row, and the search/assistant cluster lay out on  */
+  /* ONE flex line — no absolute positioning, so the variable-width      */
+  /* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */
+  /* Below 1440px the two-row layout above remains.                      */
   /* ------------------------------------------------------------------ */
   @media (min-width: 1440px) {
     /* No full-width backdrop: the pill floats on the page background. */
     #navbar #navbar-transition {
       display: none;
     }
+    /* The pill is the flex row. */
     #navbar > div.max-w-8xl {
+      display: flex;
+      align-items: center;
+      column-gap: 16px;
       width: calc(100% - 48px);
       max-width: 1602px !important;
+      height: 84px;
       margin: 24px auto 0;
+      padding: 0 25px 0 33px;
       background-color: #FFFFFF;
       border: 1px solid #E1DFDA;
       border-radius: 18px;
@@ -168,41 +177,44 @@
       background-color: rgb(24, 25, 27);
       border-color: rgba(255, 255, 255, 0.12);
     }
-    /* Top row becomes the single 84px pill row (33px inner gutter puts
-       the logo on the 96px page gutter at the 1728px frame). */
-    #navbar div.lg\:px-12 {
-      height: 84px !important;
-      padding-left: 33px !important;
-      padding-right: 25px !important;
-      margin: 0 !important;
-    }
+    /* Flatten the two-row scaffolding into the pill's flex line. */
+    #navbar > div.max-w-8xl > div,
+    #navbar > div.max-w-8xl > div > div.relative,
+    #navbar div.lg\:px-12,
     #navbar div.lg\:px-12 > div {
-      border-bottom: none !important;
-    }
-    /* Tab row: lift it into the pill row, centered. */
-    #navbar .max-w-8xl div.px-12 {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+      display: contents !important;
+    }
+    /* Logo | tabs | search cluster; the two auto margins center the
+       tabs in the free space between logo and cluster. */
+    #navbar div.lg\:px-12 > div > div.flex-1:first-child {
+      order: 1;
+      flex: 0 0 auto !important;
+    }
+    #navbar .max-w-8xl > div > div.px-12 {
+      order: 2;
+      position: static;
       width: max-content;
-      height: 84px !important;
+      height: auto !important;
       padding: 0 !important;
-      z-index: 10;
-    }
-    #navbar .nav-tabs-item {
-      white-space: nowrap;
+      margin-left: auto;
     }
-    /* Search (and the assistant entry beside it) become compact pills on
-       the right instead of a stretched center bar. */
-    #navbar div.z-20.justify-center {
+    #navbar div.lg\:px-12 div.z-20 {
+      order: 3;
       flex: 0 0 auto !important;
+      margin-left: auto;
     }
-    #navbar div.lg\:px-12 .justify-end {
-      flex: 0 0 auto !important;
+    /* Logo at the design scale: the mock's logo block is 166px wide;
+       our combined SVG hits that width at 17.5px tall. */
+    #navbar div.lg\:px-12 .nav-logo {
+      height: 17.5px !important;
     }
+    /* Search pill at the design metrics: 34px tall, 6/14 padding. */
     #navbar #search-bar-entry {
       width: auto !important;
+      height: 34px !important;
+      padding: 6px 14px !important;
+      border-radius: 20px;
+      box-shadow: none;
     }
     #navbar #search-bar-entry span.text-xs {
       display: none;
@@ -233,22 +245,11 @@
        follows the system preference; both remain below 1440px). */
     #navbar li.navbar-link,
     #navbar #topbar-cta-button,
-    #navbar #theme-preference-menu-trigger {
+    #navbar #theme-preference-menu-trigger,
+    #navbar div.lg\:px-12 > div > div.justify-end {
       display: none !important;
     }
   }
-  @media (min-width: 1440px) {
-    /* Logo at the design scale: the mock's logo block is 166px wide;
-       our combined SVG hits that width at 17.5px tall. */
-    #navbar div.lg\:px-12 .nav-logo {
-      height: 17.5px !important;
-    }
-    /* Search pill at the design metrics: 34px tall, 6/14 padding */
-    #navbar #search-bar-entry {
-      height: 34px !important;
-      padding: 6px 14px !important;
-    }
-  }
   @media (min-width: 1600px) {
     /* At the design frame, side margins widen to 63px so the logo sits
        on the shared 96px gutter. */

From f2e90cba8e498453243e3c8142141de260d793a4 Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Thu, 10 Sep 2026 14:04:24 -0700
Subject: [PATCH 8/8] docs(nav): pill margins scale with the viewport instead
 of stepping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pill's side margins jumped from 63px to 24px below 1600px, so the
bar visibly widened as the window shrank. Use the design frame's ratio
(63/1728 per side, 7.3vw total) continuously, capped at the 1602px
design width — same proportions at every desktop size, and the logo
stays on the 96px gutter at the 1728px frame.
---
 tailwind.css | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/tailwind.css b/tailwind.css
index c4ced24..22eb048 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -163,7 +163,10 @@
       display: flex;
       align-items: center;
       column-gap: 16px;
-      width: calc(100% - 48px);
+      /* Side margins scale with the viewport (the design frame's 63/1728
+         ratio) instead of stepping at a breakpoint, so the pill keeps the
+         same proportions as the window shrinks. */
+      width: calc(100% - 7.3vw);
       max-width: 1602px !important;
       height: 84px;
       margin: 24px auto 0;
@@ -250,13 +253,6 @@
       display: none !important;
     }
   }
-  @media (min-width: 1600px) {
-    /* At the design frame, side margins widen to 63px so the logo sits
-       on the shared 96px gutter. */
-    #navbar > div.max-w-8xl {
-      width: calc(100% - 126px);
-    }
-  }
 
   /* Quickstart: tighten code block spacing within the card */
   .quickstart-code .code-block {