feat(home): let the NogglesRail globe span the full viewport on desktop

The globe and its detail panel were capped at 1152px by the layout's centred
`max-w-6xl` main, leaving most of a wide screen empty on the section that is
meant to read as a world map. From lg up the block now breaks out of the shell
and tracks the viewport (1232px at 1280, 2512px at 2560). The section heading
stays in the shell. Below lg nothing changes: the grid is single-column there
and a full-width globe on a phone buys nothing.

Breaking out needs `w-screen`, and `100vw` counts the scrollbar, so the block
overshot the usable width by exactly one scrollbar and let the whole page be
dragged 9px sideways. Fixing that took two rules that only work together:
`overflow-y: auto` on html to stop the root's overflow being propagated from
body to the viewport, and `overflow-x: clip` on body, which does nothing on its
own while that propagation is in effect. Verified the obvious single-rule
attempts first — `clip` and `hidden` on html both still scrolled 9px.

`clip` and not `hidden` so body never becomes a scroll container and the sticky
site header keeps working; `auto` and not `scroll` so platforms that draw a
scrollbar don't get a permanent one on every page.

Side effect worth knowing: this also absorbs a pre-existing ~8px mobile
overflow coming from a rider card in the stake carousel. The card still
overflows its row — the page just no longer scrolls sideways because of it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: sktbrd

src/app/globals.css

@@ -118,8 +118,33 @@
   * {
     @apply border-border outline-ring/50;
   }
+  /* Guard for full-bleed sections that break out of the layout's centred
+     `max-w-6xl` main (currently the NogglesRail globe on the homepage). Those
+     use `w-screen`, and `100vw` counts the scrollbar, so they overshoot the
+     usable width by exactly one scrollbar and let the whole page be dragged
+     sideways — measured at 9px before this rule.
+
+     These two declarations only work together, so don't split them:
+
+     `overflow-x: clip` on `body` alone does nothing. While `html` is `visible`,
+     the root's overflow is propagated from `body` to the viewport and body's own
+     used value becomes `visible` — so the clip lands on the viewport, which
+     WebKit does not honour here (verified: `clip` AND `hidden` on `html` both
+     still scrolled 9px). Giving `html` a non-`visible` overflow-y stops that
+     propagation, which is what finally lets body clip its own overflow.
+
+     `auto`, not `scroll`: `scroll` also stops propagation but forces a permanent
+     scrollbar on every page on platforms that draw one.
+
+     `clip`, never `hidden`: `clip` leaves the other axis `visible`, so body
+     never becomes a scroll container and `position: sticky` on the site header
+     keeps working. `hidden` would break it. */
+  html {
+    overflow-y: auto;
+  }
   body {
     @apply bg-background text-foreground;
+    overflow-x: clip;
   }
   .leaflet-container {
     @apply !bg-card !font-[inherit];

src/components/newhome/RailsSection.tsx

@@ -19,8 +19,10 @@ export function RailsSection() {
   );
 
   return (
-    <section id="rails" className="px-4 py-10 sm:px-6 sm:py-18">
-      <div className={`${SHELL} flex flex-col gap-6 px-0`}>
+    // No horizontal padding here: the heading keeps the page's shell while the
+    // globe breaks out of it, so each one owns its own gutter.
+    <section id="rails" className="py-10 sm:py-18">
+      <div className={SHELL}>
         <SectionHeading
           eyebrow={t("eyebrow")}
           title={t("title", { rails: stats.installations, countries: stats.countries })}
@@ -33,7 +35,20 @@ export function RailsSection() {
             </>
           }
         />
+      </div>
 
+      {/* Full-bleed globe, desktop only.
+          The page renders inside the layout's `max-w-6xl mx-auto` main, so the
+          globe and its detail panel were capped at 1152px with dead space either
+          side on a wide screen. `mx-[calc(50%-50vw)] w-screen` re-centres the
+          block on the viewport instead of on the shell.
+          `100vw` counts the scrollbar on platforms that reserve one, so this
+          overshoots by half a scrollbar per side — `overflow-x: clip` on body
+          (globals.css) absorbs it. Without that guard this is exactly the
+          horizontal scrollbar the homepage comment warns about.
+          Below lg it stays inside the shell: the grid is single-column there and
+          a full-width globe on a phone buys nothing. */}
+      <div className="mx-auto mt-6 w-full max-w-6xl px-4 sm:px-6 lg:mx-[calc(50%-50vw)] lg:w-screen lg:max-w-none lg:px-6">
         <RailGlobeSection />
       </div>
     </section>