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

This reverts commit da5261a. Full-bleed didn't look right — the globe reads
better contained at the page's shell width.

Reverting the layout also drops the `html { overflow-y: auto }` +
`body { overflow-x: clip }` pair, since those existed only to absorb the
scrollbar overshoot that `w-screen` introduced. Nothing left in the tree needs
them, and keeping a rule whose stated reason no longer exists invites someone
to delete it later without knowing what it guarded.

Known consequence: the ~8px horizontal overflow on mobile comes back. It is not
from this change — a rider card in the stake carousel overflows its row, and the
clip was only hiding the symptom.

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

Author: sktbrd

src/app/globals.css

@@ -118,33 +118,8 @@
   * {
     @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,10 +19,8 @@ export function RailsSection() {
   );
 
   return (
-    // 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}>
+    <section id="rails" className="px-4 py-10 sm:px-6 sm:py-18">
+      <div className={`${SHELL} flex flex-col gap-6 px-0`}>
         <SectionHeading
           eyebrow={t("eyebrow")}
           title={t("title", { rails: stats.installations, countries: stats.countries })}
@@ -35,20 +33,7 @@ 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>