feat: expand nav, fix install-box mobile overflow

- Add Features and Support section links to the top nav and
  matching anchors (#features, #support); footer Project
  column mirrors the nav order.
- Move the nav/mobile-menu breakpoint to md for the wider
  link set.
- Add min-w-0 to the install command code so the long URL
  scrolls inside the box instead of widening the page.

Author: nixrajput

web/app/page.tsx

@@ -148,7 +148,7 @@ export default function Home() {
 
       {/* Feature stream: the signature flow line runs down the left margin,
           connecting capabilities like data moving through a siphon. */}
-      <section className="mx-auto max-w-6xl px-6 py-12">
+      <section id="features" className="mx-auto max-w-6xl scroll-mt-24 px-6 py-12">
         <p className="eyebrow mb-10">what it does</p>
         <div className="flex gap-8">
           <div className="flowline hidden shrink-0 sm:block" aria-hidden />

web/components/InstallCommand.tsx

@@ -43,7 +43,12 @@ export function InstallCommand({ command }: { command: string }) {
       <span aria-hidden className="text-(--amber) select-none">
         $
       </span>
-      <code className="flex-1 overflow-x-auto whitespace-nowrap text-(--paper)">{command}</code>
+      {/* min-w-0 lets this flex item shrink below the command's intrinsic
+          width so the long URL scrolls inside the box instead of widening the
+          page (flex items default to min-width:auto). */}
+      <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-(--paper)">
+        {command}
+      </code>
       <span
         className={`text-xs tracking-widest uppercase select-none ${
           copied ? "text-(--flow)" : "text-(--muted) group-hover:text-(--amber)"

web/components/SiteFooter.tsx

@@ -30,7 +30,24 @@ export function SiteFooter() {
 
         <div>
           <p className="eyebrow mb-3">Project</p>
+          {/* Mirrors the top-nav order: Features · Install · Support · Docs,
+              plus footer-appropriate repo links. */}
           <ul className="space-y-2 text-sm">
+            <li>
+              <Link href="/#features" className="text-(--muted) no-underline hover:text-(--paper)">
+                Features
+              </Link>
+            </li>
+            <li>
+              <Link href="/#install" className="text-(--muted) no-underline hover:text-(--paper)">
+                Install
+              </Link>
+            </li>
+            <li>
+              <Link href="/#support" className="text-(--muted) no-underline hover:text-(--paper)">
+                Support
+              </Link>
+            </li>
             <li>
               <Link href="/docs" className="text-(--muted) no-underline hover:text-(--paper)">
                 Documentation
@@ -49,11 +66,6 @@ export function SiteFooter() {
                 Releases
               </ExtLink>
             </li>
-            <li>
-              <Link href="/#install" className="text-(--muted) no-underline hover:text-(--paper)">
-                Install
-              </Link>
-            </li>
           </ul>
         </div>
 

web/components/SiteHeader.tsx

@@ -8,10 +8,13 @@ import { useRepoStats } from "@/components/useGitHub";
 import { ExtLink } from "@/components/ExtLink";
 
 // Nav items. `match` decides the active state: docs is active for any /docs/*
-// route; the others match their exact path (or hash target on home).
+// route; the in-page section links use root-relative hashes (/#id) so they work
+// from any route (Next navigates home, then scrolls). GitHub is external.
 const NAV: { label: string; href: string; match: (p: string) => boolean; external?: boolean }[] = [
-  { label: "Docs", href: "/docs", match: (p) => p.startsWith("/docs") },
+  { label: "Features", href: "/#features", match: () => false },
   { label: "Install", href: "/#install", match: () => false },
+  { label: "Support", href: "/#support", match: () => false },
+  { label: "Docs", href: "/docs", match: (p) => p.startsWith("/docs") },
   { label: "GitHub", href: REPO_URL, match: () => false, external: true },
 ];
 
@@ -32,7 +35,7 @@ export function SiteHeader() {
         </Link>
 
         {/* Desktop nav */}
-        <nav className="hidden items-center gap-7 text-sm sm:flex">
+        <nav className="hidden items-center gap-6 text-sm md:flex">
           {NAV.map((item) =>
             item.external ? (
               <ExtLink
@@ -59,7 +62,7 @@ export function SiteHeader() {
         {/* Mobile toggle */}
         <button
           type="button"
-          className="sm:hidden"
+          className="md:hidden"
           aria-label={open ? "Close menu" : "Open menu"}
           aria-expanded={open}
           onClick={() => setOpen((v) => !v)}
@@ -80,7 +83,7 @@ export function SiteHeader() {
 
       {/* Mobile menu */}
       {open && (
-        <nav className="border-t border-(--line) px-6 py-4 sm:hidden">
+        <nav className="border-t border-(--line) px-6 py-4 md:hidden">
           <ul className="space-y-3 text-sm">
             {NAV.map((item) => (
               <li key={item.label}>

web/components/SupportSection.tsx

@@ -8,7 +8,7 @@ export function SupportSection() {
   const [primary, ...rest] = FUNDING;
 
   return (
-    <section className="mx-auto max-w-3xl px-6 py-20 text-center">
+    <section id="support" className="mx-auto max-w-3xl scroll-mt-24 px-6 py-20 text-center">
       <p className="eyebrow mb-4">support</p>
       <h2 className="mb-4 text-3xl">Free and open source</h2>
       <p className="mx-auto mb-8 max-w-md leading-relaxed text-(--muted)">