From 4cc6636abd63fd23f5540e4c17bb7863d681de1c Mon Sep 17 00:00:00 2001
From: MrSharky01 <168514094+MrSharky01@users.noreply.github.com>
Date: Tue, 11 Aug 2026 10:46:37 -0400
Subject: [PATCH 1/6] Quiet beta console: allow Vercel Live frames and skip
 Clicky off-apex.

---
 app/layout.tsx                  |  9 +++++++--
 components/analytics-script.tsx | 13 ++++++++++---
 components/live-map.tsx         |  1 +
 proxy.ts                        |  9 ++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index 4809195..41d66e9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -66,7 +66,12 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
   // <Script> tag below and into Next's own internal inline scripts. Without
   // this, the static HTML would ship with no nonce attributes and the strict
   // CSP would block React hydration entirely.
-  const nonce = (await headers()).get("x-nonce") ?? undefined;
+  const requestHeaders = await headers();
+  const nonce = requestHeaders.get("x-nonce") ?? undefined;
+  // Apex only — skip Clicky on beta/preview so tracker blockers don't
+  // spam the console with a failed <script> load.
+  const host = (requestHeaders.get("host") ?? "").split(":")[0].toLowerCase();
+  const enableAnalytics = host === "gulfcoastmesh.org" || host === "www.gulfcoastmesh.org";
 
   return (
     <html lang="en" data-scroll-behavior="smooth" suppressHydrationWarning>
@@ -94,7 +99,7 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
           </main>
           <SiteFooter />
         </div>
-        <AnalyticsScript nonce={nonce} />
+        <AnalyticsScript nonce={nonce} enabled={enableAnalytics} />
       </body>
     </html>
   );
diff --git a/components/analytics-script.tsx b/components/analytics-script.tsx
index 014fcce..dda54d1 100644
--- a/components/analytics-script.tsx
+++ b/components/analytics-script.tsx
@@ -11,11 +11,18 @@ import Script from "next/script";
 // works normally for everyone else.
 //
 // nonce is threaded down from the root layout so this script passes the
-// strict CSP set in proxy.ts.
-export function AnalyticsScript({ nonce }: { nonce?: string }) {
+// strict CSP set in proxy.ts. enabled is decided server-side (apex host
+// only) so beta/preview don't request a tracker that often fails loudly.
+export function AnalyticsScript({
+  nonce,
+  enabled = true,
+}: {
+  nonce?: string;
+  enabled?: boolean;
+}) {
   // Skip Clicky in local/dev — no analytics value, and the script often
   // fails to load (tracker blockers), which clutters the console.
-  if (process.env.NODE_ENV !== "production") {
+  if (!enabled || process.env.NODE_ENV !== "production") {
     return null;
   }
 
diff --git a/components/live-map.tsx b/components/live-map.tsx
index c63a299..8512cf7 100644
--- a/components/live-map.tsx
+++ b/components/live-map.tsx
@@ -124,6 +124,7 @@ export function LiveMap({
 
         {!errored && mounted ? (
           <iframe
+            key={resolvedSrc}
             ref={iframeRef}
             src={resolvedSrc}
             title={title}
diff --git a/proxy.ts b/proxy.ts
index 5c8f846..dcc479c 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -42,6 +42,7 @@ function buildCsp(nonce: string): string {
     "https://explorer.gulfcoastmesh.org",
     "https://meeting.gulfcoastmesh.org",
     "https://raw.githubusercontent.com",
+    "https://vercel.live",
     // Turbopack / webpack HMR websocket in dev.
     ...(isDev ? ["ws://localhost:*", "ws://127.0.0.1:*", "wss://localhost:*"] : []),
   ].join(" ");
@@ -65,7 +66,13 @@ function buildCsp(nonce: string): string {
       "https://in.getclicky.com",
     ].join(" "),
     connectSrc,
-    "frame-src 'self' https://analyzer.gulfcoastmesh.org https://meshview.gulfcoastmesh.org https://explorer.gulfcoastmesh.org",
+    [
+      "frame-src 'self'",
+      "https://analyzer.gulfcoastmesh.org",
+      "https://meshview.gulfcoastmesh.org",
+      "https://explorer.gulfcoastmesh.org",
+      "https://vercel.live",
+    ].join(" "),
     "worker-src 'self' blob:",
     "manifest-src 'self'",
     "media-src 'self'",

From 60769856de2e891f9ce5559c113cf19626f83cab Mon Sep 17 00:00:00 2001
From: MrSharky01 <168514094+MrSharky01@users.noreply.github.com>
Date: Sun, 23 Aug 2026 20:30:20 -0400
Subject: [PATCH 2/6] Add privacy policy page and link it in the footer

---
 app/privacy/page.tsx       | 137 +++++++++++++++++++++++++++++++++++++
 components/site-footer.tsx |   3 +
 2 files changed, 140 insertions(+)
 create mode 100644 app/privacy/page.tsx

diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
new file mode 100644
index 0000000..658e1aa
--- /dev/null
+++ b/app/privacy/page.tsx
@@ -0,0 +1,137 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { ShieldCheck } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+  description:
+    "What the Gulf Mesh app accesses, stores, and transmits — and what it never does.",
+};
+
+export default function PrivacyPage() {
+  return (
+    <div className="container pb-24">
+      <article className="mx-auto max-w-3xl">
+        <header className="mb-10">
+          <span className="eyebrow">
+            <ShieldCheck className="h-3.5 w-3.5" aria-hidden />
+            Privacy Policy
+          </span>
+          <h1 className="mt-5 font-display text-display-lg font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+            Privacy Policy — Gulf Mesh
+          </h1>
+          <p className="mt-4 text-sm text-ink-500 dark:text-ink-400">
+            Last updated: August 23, 2026
+          </p>
+        </header>
+
+        <div className="prose-mesh">
+          <p>
+            Gulf Mesh (&ldquo;the app&rdquo;) is a client for MeshCore LoRa mesh radio
+            networks. This policy explains what data the app accesses, stores, and
+            transmits.
+          </p>
+
+          <h2>Data the app stores on your device</h2>
+          <ul>
+            <li>
+              <strong>Contacts, messages, and channels</strong> you send or receive
+              over the mesh radio are stored locally on your device so you can view
+              your conversation history.
+            </li>
+            <li>
+              <strong>Repeater login passwords</strong> and{" "}
+              <strong>channel/community secret keys (PSKs)</strong> are stored using
+              your device&rsquo;s secure hardware-backed storage (Android Keystore),
+              not in plain text.
+            </li>
+            <li>
+              None of the above ever leaves your device unless you take one of the
+              actions below.
+            </li>
+          </ul>
+
+          <h2>Data the app sends over the mesh radio (not the internet)</h2>
+          <p>
+            Messages, location shares, and node advertisements you choose to send
+            are transmitted over LoRa radio to other mesh devices — this is the
+            app&rsquo;s core function. This is peer-to-peer radio communication, not
+            a connection to any company&rsquo;s servers.
+          </p>
+          <p>
+            If you turn on <strong>ATAK location broadcasting</strong> (off by
+            default), your GPS location is periodically sent to other users on your
+            selected mesh channel, and optionally attached to your node&rsquo;s own
+            beacon. This is entirely within the mesh network you&rsquo;re part of —
+            it is not sent to us or any internet service.
+          </p>
+
+          <h2>Data sent to internet services (only when you opt in)</h2>
+          <ul>
+            <li>
+              <strong>MeshMapper wardriving</strong> (off by default, requires you
+              to accept a disclosure and manually start a session): if enabled, your
+              device&rsquo;s public key/identity, display name, app version, radio
+              settings, and GPS location are sent to meshmapper.net to build
+              community coverage maps. You can use an offline mode instead, which
+              keeps this data on your device.
+            </li>
+            <li>
+              <strong>MeshBuddy node-name reservation</strong> (only if you use this
+              optional feature): the email address, display name, and location you
+              type into the reservation form are sent to our MeshBuddy service to
+              reserve a unique mesh node identity for you.
+            </li>
+            <li>
+              <strong>GIF search</strong> (only if enabled and only when you open
+              the GIF picker): your search text is sent to GIPHY to return matching
+              GIFs.
+            </li>
+            <li>
+              <strong>Link previews</strong>: if a chat message contains a link, the
+              app fetches that link directly to build a preview card. You can turn
+              this off in Settings.
+            </li>
+            <li>
+              <strong>Firmware updates</strong>: the app checks GitHub for the
+              latest MeshCore firmware releases when you use the firmware/OTA
+              update screens.
+            </li>
+            <li>
+              <strong>Line-of-sight terrain tool</strong>: coordinates you select on
+              the map are sent to a public elevation-data API (Open-Meteo) to
+              compute terrain profiles.
+            </li>
+          </ul>
+
+          <h2>What we don&rsquo;t do</h2>
+          <p>
+            The app contains no advertising SDKs, no analytics SDKs, and no
+            crash-reporting SDKs. We do not sell your data, and we do not build
+            advertising profiles.
+          </p>
+
+          <h2>Your choices</h2>
+          <p>
+            Wardriving, ATAK location broadcasting, and link previews are all
+            optional and can be turned off in Settings. You can delete your local
+            message history, contacts, and stored passwords/keys from within the
+            app.
+          </p>
+
+          <h2>Contact</h2>
+          <p>
+            Questions about this policy can be sent to:{" "}
+            <a href="mailto:support@gulfcoastmesh.org">support@gulfcoastmesh.org</a>
+          </p>
+        </div>
+
+        <p className="mt-12 text-sm text-ink-500 dark:text-ink-400">
+          <Link href="/" className="font-medium text-gulf-700 hover:underline dark:text-gulf-300">
+            ← Back to home
+          </Link>
+        </p>
+      </article>
+    </div>
+  );
+}
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index cb55aac..b5ee07c 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -140,6 +140,9 @@ export function SiteFooter() {
             <Link href="/docs/transparency" className="hover:text-ink-900 dark:hover:text-white">
               Transparency
             </Link>
+            <Link href="/privacy" className="hover:text-ink-900 dark:hover:text-white">
+              Privacy Policy
+            </Link>
           </div>
         </div>
       </div>

From f9887283e7fe593c3d0bf9b74581828882b39bf1 Mon Sep 17 00:00:00 2001
From: MrSharky01 <168514094+MrSharky01@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:34:28 -0400
Subject: [PATCH 3/6] Redesign: quieter layout, logo-derived palette, technical
 texture

The most common feedback on the site was that it felt too busy. Every
surface competed: three stacked background layers, glass cards with blur
and glow, gradient headline text, gradient buttons, bordered pill labels
on every section, and decorative blur orbs on most pages.

This rebuilds the design language so structure, type and data carry the
page, and the technical character lands where it means something -- the
live network panel, mono data labels, and the coverage table.

Palette, sampled from public/logo.svg
- gulf runs from the logo's bright cyan-teal (#49c7cc) and mint (#6ed7c8)
  down to its deep teal (#0d6070) and hull navies.
- ink is a navy-tinted neutral built on the same logo navies, so the
  greys read as brand rather than as grey.
- sand is demoted to status only (advisories, "planned"), never
  decoration.

Three accent tokens, because one value cannot do all three jobs at brand
brightness without losing contrast somewhere:
- --accent for small text: the brightest point on the logo's hue that
  still clears AA 4.5:1 on white.
- --accent-bright for display type, which needs only 3:1, so headline
  highlights go brighter than body copy is allowed to.
- --accent-solid for button fills, always paired with ink-950 text
  (6.3:1); white on a fill this bright would fail. Hover goes brighter.

Surfaces and chrome
- Flat cards: one treatment, 1px borders, solid backgrounds, no glass or
  backdrop blur. Tile hover moves the border, not the card.
- Solid buttons. Glow shadows, shimmer/drift/pulse-ring animations, the
  radial page wash, the fixed grid overlay and the SVG noise layer are
  gone; display type tops out near 3.5rem instead of 100px.
- Header is a solid sticky bar with six destinations and one primary CTA
  instead of a floating glass pill with two gradient CTAs.

Texture
- One band declared once in app/layout.tsx under the header, so every
  page gets it identically: a 44px brand-tinted engineering grid plus a
  single soft radial wash, both radially masked. The homepage's closing
  CTA re-uses the grid so the page opens and shuts on the same motif.

Homepage
- Hero keeps its original headline and the map beside the copy, with the
  stats it produces in a band underneath.
- Get-started cards offer one next step each instead of up to three
  competing links; coverage is a readable table; one closing CTA band.
- Footer regrouped into explore / community / support columns.
- Added a skip-to-content link.

Fixes found along the way
- Partner logos were inverted in dark mode, which flattened an opaque
  JPEG to a solid white block; they now sit on a light chip.
- LiveMap gained a `bare` mode so a caller supplying its own panel header
  does not stack two headers on one map.
- `hover:bg-white` inverted cards in dark mode once backgrounds became
  theme tokens.
- Footer contact address corrected to support@gulfcoastmesh.org, matching
  the privacy page.

Docs updated to describe the new system.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 NOTES.md                                    |  53 +-
 README.md                                   |  32 +-
 app/docs/[slug]/page.tsx                    |  10 +-
 app/emailsignup/page.tsx                    |  10 +-
 app/globals.css                             | 323 +++++------
 app/layout.tsx                              |  25 +-
 app/meetings/page.tsx                       |  14 +-
 app/mesh-monitor/page.tsx                   |   6 +-
 app/meshmap/page.tsx                        |  16 +-
 app/page.tsx                                | 597 ++++++++------------
 app/setup/page.tsx                          | 100 ++--
 components/docs-sidenav.tsx                 |  14 +-
 components/live-map.tsx                     | 173 +++---
 components/meetings-calendar.tsx            |  18 +-
 components/mesh-monitor-lookup-section.tsx  |  11 +-
 components/mesh-monitor-reports-section.tsx |   4 +-
 components/mesh-monitor-reserve-form.tsx    |  25 +-
 components/mesh-monitor-section-nav.tsx     |   8 +-
 components/network-report-table.tsx         |   4 +-
 components/network-update-modal.tsx         |  10 +-
 components/next-meeting-card.tsx            |   3 +-
 components/settings-change-banner.tsx       |   2 +-
 components/setup-firmware-version.tsx       |   8 +-
 components/site-footer.tsx                  | 199 ++++---
 components/site-header.tsx                  | 158 ++----
 components/theme-toggle.tsx                 |   4 +-
 tailwind.config.ts                          | 120 ++--
 27 files changed, 900 insertions(+), 1047 deletions(-)

diff --git a/NOTES.md b/NOTES.md
index e1d7147..e3a9bd3 100644
--- a/NOTES.md
+++ b/NOTES.md
@@ -41,18 +41,47 @@ normal terminal.
 
 Defined in `tailwind.config.ts` + `app/globals.css`.
 
-- **Palettes**: `ink` (neutrals), `gulf` (primary blue), `sand` (accent warm),
-  `coral` (alert/accent).
-- **Theme variables**: `--bg`, `--bg-elevated`, `--fg`, `--muted`, `--line`,
-  `--accent`. Light + dark modes are real, not just a class swap — every
-  surface reads from these vars.
-- **Background layers**: `bg-canvas` (radial wash) + `bg-grid` (subtle grid)
-  + `bg-noise` (svg grain) stacked behind everything.
-- **Components**: `surface`, `shell` (glass panel), `btn-primary` /
-  `btn-ghost`, `pill`, `hairline`. Custom animations: `fade-up`, `pulse-ring`,
-  `drift`, `shimmer`.
-- **Typography**: `font-display` for headings (Space Grotesk), `font-sans`
-  body, `font-mono` for kickers/labels.
+The site is a non-profit public-information site first. Structure, type and
+data carry the page; ornament is deliberate and scoped. The 2026 redesign
+removed the glass/gradient/glow layer the site had accumulated, then added a
+single technical texture back in two places on purpose.
+
+- **Palettes are sampled from `public/logo.svg`.** `gulf` runs from the logo's
+  bright cyan-teal (`#49c7cc`) and mint (`#6ed7c8`) down to its deep teal
+  (`#0d6070`) and hull navies. `ink` is a navy-tinted neutral built on the same
+  logo navies, so the greys read as brand rather than as grey. `sand` is
+  **status only** (advisories, "planned"); `coral` is errors.
+- **Three accent tokens, because one value cannot do all three jobs at brand
+  brightness:**
+  - `--accent` — small text (links, 11px labels). The brightest point on the
+    logo's hue that still clears AA 4.5:1 on white.
+  - `--accent-bright` — display type only, which needs just 3:1, so headline
+    highlights go brighter than body copy is allowed to.
+  - `--accent-solid` — button fills. Always pairs with `ink-950` text (6.3:1);
+    white on a fill this bright would fail. Hover goes brighter, not darker.
+- **Other theme variables**: `--bg`, `--bg-elevated`, `--bg-sunken`, `--fg`,
+  `--fg-muted`, `--line`, `--line-strong`, `--grid-line`, `--wash`. Light and
+  dark are real themes — one token flips both.
+- **Background**: the page is flat. Texture is a single band declared once in
+  `app/layout.tsx` under the header, so every page gets it identically:
+  `.grid-tech` (a 44px brand-tinted engineering grid) and `.wash-brand` (one
+  soft radial, one corner). Both are radially masked, so the band's fixed
+  height only bounds the fade. The homepage's closing CTA re-uses `.grid-tech`
+  so the page opens and shuts on the same motif. Section rhythm otherwise
+  comes from `--bg-sunken` bands and hairline borders.
+- **Surfaces**: `surface` / `surface-strong` / `tile` are one flat card — 1px
+  border, solid background, no glass or backdrop blur. `tile` hover moves the
+  border colour only. `tile-accent` marks the primary card in a group with a
+  single inset accent rule.
+- **Buttons**: `btn-primary` (brand fill, dark ink) and `btn-ghost` (bordered).
+  `btn-facebook` is an alias of `btn-ghost` — one primary action per view.
+- **Labels**: `eyebrow` is a quiet mono label, not a bordered pill.
+  `gradient-text` is kept as a name but is a solid `--accent-bright`.
+- **Type**: `font-display` (Space Grotesk) headings, `font-sans` body,
+  `font-mono` for data and labels only. Display sizes top out around 3.5rem;
+  add `.tabular` to any figure sitting in a column of figures.
+- **Motion**: `fade-up`, plus `animate-ping` on genuine live indicators. The
+  `pulse-ring` / `drift` / `shimmer` animations were removed.
 
 ## Pages
 
diff --git a/README.md b/README.md
index 2016911..c48d11c 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Other scripts:
 ```
 app/
   layout.tsx            Root layout: fonts, theme bootstrap, header, footer
-  page.tsx              Homepage (hero with embedded Analyzer, live stats, network bento, Meshcore stack snapshot, how-it-works, regions)
+  page.tsx              Homepage (mission, live network panel with map + stats, what we do, get started, coverage, get involved)
   meshmap/page.tsx      Live maps (Meshcore Analyzer + Meshtastic Meshview) and MQTT instructions
   links/page.tsx        Curated guides, community, and upstream resources
   emailsignup/page.tsx  Newsletter signup (Listmonk-backed)
@@ -37,8 +37,8 @@ app/
   globals.css           Design tokens, surface/utility classes
   icon.svg              Browser tab icon
 components/
-  site-header.tsx       Floating glass nav with GitHub + theme toggle
-  site-footer.tsx       Multi-column footer with supporters/partners
+  site-header.tsx       Sticky solid nav with GitHub + theme toggle
+  site-footer.tsx       Four-column footer with supporters/partners
   theme-toggle.tsx      Light/dark switcher button
   theme-script.tsx      Inline pre-paint script (no FOUC)
   live-map.tsx          iframe wrapper for embedded maps (skeleton + error fallback)
@@ -53,17 +53,17 @@ eslint.config.mjs       Flat ESLint config wrapping next/core-web-vitals + next/
 
 ## Design language
 
-- **Type**: Inter (UI), Space Grotesk (display), JetBrains Mono (eyebrows / monospace details).
-- **Color**: deep ink navy, vibrant gulf teal/cyan, warm sand amber, coral accents.
-- **Surfaces**: subtle glass cards (`.surface`, `.surface-strong`, `.tile`, `.tile-accent`).
-- **Motion**: pre-paint theme bootstrap (no flash), gentle hover lifts, animated skeleton on map embeds.
-- **Accessibility**: focus rings, `prefers-reduced-motion` honored, semantic landmarks.
+- **Type**: Inter (UI), Space Grotesk (display), JetBrains Mono (data + labels).
+- **Color**: sampled from `public/logo.svg` — bright gulf teal on navy-tinted
+  neutrals. Warm sand is reserved for status, never decoration.
+- **Contrast**: three accent tokens split the small-text / display / button-fill
+  jobs so brand brightness never costs legibility. All pairs clear WCAG AA.
+- **Surfaces**: flat 1px-bordered cards (`.surface`, `.tile`) — no glass,
+  no glow.
+- **Texture**: one masked grid + wash band, declared once in the root layout.
+- **Motion**: pre-paint theme bootstrap (no flash), `fade-up`, and a live dot
+  on genuinely live data. `prefers-reduced-motion` honored.
+- **Accessibility**: skip link, focus rings, semantic landmarks, tabular
+  numerals on data.
 
-## Replacing content
-
-- **Newsletter** — list IDs and Listmonk endpoint live at the top of `app/emailsignup/page.tsx` (`ALERTS_LIST_ID`, `NEWS_LIST_ID`, and the `fetch()` URL).
-- **Supporters / partners** — individual supporters in `components/site-footer.tsx`; partner logos in `lib/partners.ts` with host logos in `public/supporters/`.
-- **Hero copy, stats, regions, how-it-works** — `app/page.tsx`. Regions support a `forceLive: true` flag to show as live even when the upstream API count is zero (currently used for Mississippi).
-- **GitHub org link** — `components/site-header.tsx` and `components/site-footer.tsx` both point at [`github.com/GulfCoastMesh`](https://github.com/GulfCoastMesh).
-- **Mesh Monitor API** — [`API.md`](./API.md) and [`openapi.yaml`](./openapi.yaml) document the API. `/mesh-monitor` hosts reserve, duplicates, and network reports (proxied via `app/api/mesh-monitor/*` and `lib/mesh-monitor.ts`).
-- **Setup wizard** — repeater flow in `app/setup/page.tsx` reserves MeshBuddy prefixes via `/api/meshbuddy/*` (proxies to `MESHBUDDY_API_BASE_URL`, default `https://meshbuddy.gulfcoastmesh.org`). Email is required for reservation; firmware versions come from MeshCore GitHub releases.
+See [`NOTES.md`](./NOTES.md) for the full token list and the reasoning.
diff --git a/app/docs/[slug]/page.tsx b/app/docs/[slug]/page.tsx
index 27bb1e9..db5a09b 100644
--- a/app/docs/[slug]/page.tsx
+++ b/app/docs/[slug]/page.tsx
@@ -63,13 +63,13 @@ export default async function DocsSlugPage({
       <nav
         aria-label="Docs pagination"
         className="mt-16 grid gap-4 border-t pt-8 sm:grid-cols-2"
-        style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+        style={{ borderColor: "rgb(var(--line))" }}
       >
         {prev ? (
           <Link
             href={prev.slug === "index" ? "/docs" : `/docs/${prev.slug}`}
-            className="group flex flex-col rounded-2xl border bg-white/60 px-5 py-4 transition hover:-translate-y-0.5 hover:bg-white dark:border-white/10 dark:bg-ink-900/60 dark:hover:bg-ink-900/80"
-            style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+            className="group flex flex-col rounded-lg border bg-[rgb(var(--bg-elevated))] px-5 py-4 transition hover:bg-[rgb(var(--bg-sunken))]"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             <span className="inline-flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
               <ArrowLeft className="h-3 w-3" aria-hidden />
@@ -85,8 +85,8 @@ export default async function DocsSlugPage({
         {next ? (
           <Link
             href={`/docs/${next.slug}`}
-            className="group flex flex-col rounded-2xl border bg-white/60 px-5 py-4 text-right transition hover:-translate-y-0.5 hover:bg-white sm:items-end dark:border-white/10 dark:bg-ink-900/60 dark:hover:bg-ink-900/80"
-            style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+            className="group flex flex-col rounded-lg border bg-[rgb(var(--bg-elevated))] px-5 py-4 text-right transition hover:bg-[rgb(var(--bg-sunken))] sm:items-end"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             <span className="inline-flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
               Next
diff --git a/app/emailsignup/page.tsx b/app/emailsignup/page.tsx
index 1440d84..65a13f6 100644
--- a/app/emailsignup/page.tsx
+++ b/app/emailsignup/page.tsx
@@ -87,7 +87,7 @@ export default function EmailSignupPage() {
                   Summaries from community meetings and other news. Up to one email a week.
                 </p>
               </div>
-              <span className="ml-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-700 dark:border-white/10 dark:text-ink-100" style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+              <span className="ml-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-700 dark:text-ink-100" style={{ borderColor: "rgb(var(--line))" }}>
                 Optional
               </span>
             </li>
@@ -95,14 +95,12 @@ export default function EmailSignupPage() {
         </div>
 
         <form onSubmit={handleSubmit} className="surface-strong relative overflow-hidden p-8 sm:p-10">
-          <div className="pointer-events-none absolute -right-12 -top-12 h-44 w-44 rounded-full bg-gulf-400/20 blur-3xl" />
-          <div className="pointer-events-none absolute -bottom-12 -left-12 h-44 w-44 rounded-full bg-sand-400/15 blur-3xl" />
 
           <div className="relative">
             <label htmlFor="email" className="block font-display text-sm font-semibold text-ink-900 dark:text-white">
               Email address
             </label>
-            <div className="mt-2 flex items-center gap-2 rounded-2xl border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:border-white/10 dark:bg-ink-900" style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className="mt-2 flex items-center gap-2 rounded-lg border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:bg-ink-900" style={{ borderColor: "rgb(var(--line))" }}>
               <Mail className="h-4 w-4 text-ink-400" />
               <input
                 type="email"
@@ -115,7 +113,7 @@ export default function EmailSignupPage() {
               />
             </div>
 
-            <label className="mt-5 flex cursor-pointer items-start gap-3 rounded-2xl border p-4 transition hover:border-gulf-400/50 dark:border-white/10" style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <label className="mt-5 flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition hover:border-gulf-400/50 " style={{ borderColor: "rgb(var(--line))" }}>
               <input
                 type="checkbox"
                 name="weekly"
@@ -142,7 +140,7 @@ export default function EmailSignupPage() {
               <div
                 role="status"
                 className={
-                  "mt-5 rounded-2xl border p-4 text-sm font-medium " +
+ "mt-5 rounded-lg border p-4 text-sm font-medium " +
                   (status.type === "success"
                     ? "border-gulf-500/30 bg-gulf-500/10 text-gulf-800 dark:text-gulf-100"
                     : "border-coral-500/30 bg-coral-500/10 text-coral-500")
diff --git a/app/globals.css b/app/globals.css
index 8abcc1a..5120c82 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,22 +4,38 @@
 
 @layer base {
   :root {
-    --bg: 246 249 253;
+    --bg: 245 250 251;
     --bg-elevated: 255 255 255;
-    --fg: 6 18 31;
-    --fg-muted: 71 100 133;
-    --line: 200 214 230;
-    --ring: 17 182 164;
+    --bg-sunken: 232 242 245;
+    --fg: 12 36 54;
+    --fg-muted: 59 90 110;
+    --line: 206 226 233;
+    --line-strong: 170 200 211;
+    /* Brightest teal on the logo's hue that still clears AA 4.5:1 on white,
+       so links and 11px labels stay legible at full brand brightness. */
+    --accent: 33 130 142;
+    /* Display type only — the 3:1 large-text threshold buys more brightness. */
+    --accent-bright: 19 154 167;
+    /* Bright brand fill; always pairs with ink-950 text, never white. */
+    --accent-solid: 34 170 180;
+    --grid-line: rgba(13, 96, 112, 0.14);
+    --wash: rgba(34, 170, 180, 0.18);
     color-scheme: light;
   }
 
   html.dark {
-    --bg: 3 8 15;
-    --bg-elevated: 14 31 51;
-    --fg: 232 240 248;
-    --fg-muted: 158 181 206;
-    --line: 25 47 73;
-    --ring: 45 209 189;
+    --bg: 6 26 40;
+    --bg-elevated: 12 36 54;
+    --bg-sunken: 4 19 29;
+    --fg: 228 238 244;
+    --fg-muted: 157 187 205;
+    --line: 29 52 70;
+    --line-strong: 45 71 87;
+    --accent: 110 215 200;
+    --accent-bright: 110 215 200;
+    --accent-solid: 34 170 180;
+    --grid-line: rgba(110, 215, 200, 0.10);
+    --wash: rgba(73, 199, 204, 0.13);
     color-scheme: dark;
   }
 
@@ -36,189 +52,157 @@
   }
 
   ::selection {
-    background: rgba(17, 182, 164, 0.25);
+    background: rgb(var(--accent) / 0.2);
     color: inherit;
   }
 
   :focus-visible {
-    @apply outline-none ring-2 ring-gulf-400 ring-offset-2 ring-offset-[rgb(var(--bg))];
+    @apply outline-none ring-2 ring-offset-2;
+    --tw-ring-color: rgb(var(--accent));
+    --tw-ring-offset-color: rgb(var(--bg));
+  }
+
+  /* Numeric data (stats, tables, counters) lines up column-to-column. */
+  .tabular {
+    font-variant-numeric: tabular-nums;
   }
 }
 
 @layer components {
-  /* ---- Backdrop layers ---- */
+  /* ---- Page background --------------------------------------------------
+     The page itself stays flat. Texture is applied deliberately, to the hero
+     and the closing band, instead of the old fixed grid + noise + triple
+     radial wash sitting behind every page. */
   .bg-canvas {
-    background:
-      radial-gradient(1200px 600px at 12% -10%, rgba(45, 209, 189, 0.18), transparent 55%),
-      radial-gradient(900px 500px at 90% 0%, rgba(249, 162, 40, 0.14), transparent 55%),
-      radial-gradient(700px 500px at 100% 100%, rgba(17, 182, 164, 0.12), transparent 55%),
-      rgb(var(--bg));
-  }
-
-  .dark .bg-canvas {
-    background:
-      radial-gradient(1100px 580px at 15% -5%, rgba(45, 209, 189, 0.18), transparent 55%),
-      radial-gradient(900px 520px at 95% 8%, rgba(249, 162, 40, 0.08), transparent 55%),
-      radial-gradient(720px 540px at 90% 100%, rgba(17, 182, 164, 0.16), transparent 55%),
-      linear-gradient(180deg, #03080f 0%, #061320 40%, #03080f 100%);
+    background: rgb(var(--bg));
   }
 
-  .bg-grid {
+  /* Fine engineering grid, brand-tinted, faded out at the edges so it reads
+     as texture rather than wallpaper. */
+  .grid-tech {
     background-image:
-      linear-gradient(to right, rgba(100, 124, 156, 0.08) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(100, 124, 156, 0.08) 1px, transparent 1px);
-    background-size: 56px 56px;
-    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
-    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
+      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+    background-size: 44px 44px;
+    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, #000 10%, transparent 75%);
+    mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, #000 10%, transparent 75%);
   }
 
-  .bg-noise {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
-    opacity: 0.04;
+  /* A single soft brand wash. One gradient, one corner. */
+  .wash-brand {
+    background: radial-gradient(760px 420px at 88% -15%, var(--wash), transparent 62%);
   }
 
-  .dark .bg-noise {
-    opacity: 0.07;
+  /* ---- Surfaces ---------------------------------------------------------
+     One card treatment, one border, no glass or backdrop blur. `surface` is
+     the default; `surface-strong` is the same card on the sunken page tone,
+     used when a card sits inside another region. */
+  .surface {
+    @apply rounded-xl border;
+    border-color: rgb(var(--line));
+    background: rgb(var(--bg-elevated));
   }
 
-  /* ---- Surfaces ---- */
-  .surface {
-    @apply rounded-2xl border bg-white/80 backdrop-blur-xl dark:bg-ink-900/60;
-    border-color: rgb(var(--line) / 0.6);
-    box-shadow:
-      0 1px 0 0 rgba(255, 255, 255, 0.5) inset,
-      0 30px 80px -40px rgba(6, 18, 31, 0.25);
+  .surface-strong {
+    @apply rounded-xl border;
+    border-color: rgb(var(--line-strong));
+    background: rgb(var(--bg-elevated));
   }
 
-  .dark .surface {
-    box-shadow:
-      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
-      0 36px 90px -36px rgba(0, 0, 0, 0.7);
+  /* ---- Tiles ------------------------------------------------------------
+     Cards in a grid. Hover moves the border, not the card — no lift, no glow,
+     no gradient ring. */
+  .tile {
+    @apply relative rounded-xl border p-6 transition-colors;
+    border-color: rgb(var(--line));
+    background: rgb(var(--bg-elevated));
   }
 
-  .surface-strong {
-    @apply surface;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
+  .tile:hover {
+    border-color: rgb(var(--accent) / 0.5);
   }
 
-  .dark .surface-strong {
-    background: linear-gradient(180deg, rgba(14, 31, 51, 0.85), rgba(6, 18, 31, 0.7));
+  /* Marks the primary tile in a group with a single accent rule up the side. */
+  .tile-accent {
+    box-shadow: inset 2px 0 0 0 rgb(var(--accent));
   }
 
-  /* ---- Buttons ---- */
+  /* ---- Buttons ----------------------------------------------------------
+     Solid fills. No gradients, no glow shadows, no translate on hover. */
   .btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gulf-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent;
+    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: rgb(var(--accent));
+    --tw-ring-offset-color: rgb(var(--bg));
   }
 
+  /* One button in both themes: the logo's bright teal carrying dark navy
+     text (6.3:1). White text on a fill this bright would fail contrast, so
+     the ink is dark and the hover goes brighter rather than darker. */
   .btn-primary {
-    @apply btn text-ink-950;
-    background: linear-gradient(120deg, #2dd1bd 0%, #11b6a4 45%, #f9a228 110%);
-    background-size: 200% 100%;
-    box-shadow:
-      0 10px 30px -10px rgba(17, 182, 164, 0.55),
-      0 0 0 1px rgba(255, 255, 255, 0.25) inset;
-    transition: background-position 0.6s ease, transform 0.2s ease, box-shadow 0.3s ease;
+    @apply btn;
+    background: rgb(var(--accent-solid));
+    color: theme("colors.ink.950");
   }
 
   .btn-primary:hover {
-    background-position: 100% 0;
-    transform: translateY(-1px);
-    box-shadow:
-      0 14px 40px -8px rgba(17, 182, 164, 0.7),
-      0 0 0 1px rgba(255, 255, 255, 0.35) inset;
+    background: theme("colors.gulf.400");
   }
 
   .btn-ghost {
-    @apply btn border bg-white/70 text-ink-800 hover:bg-white dark:bg-white/5 dark:text-ink-50 dark:hover:bg-white/10;
-    border-color: rgb(var(--line) / 0.7);
+    @apply btn border;
+    border-color: rgb(var(--line-strong));
+    background: rgb(var(--bg-elevated));
+    color: rgb(var(--fg));
   }
 
-  .btn-facebook {
-    @apply btn text-ink-950;
-    background: linear-gradient(120deg, #fdd98c 0%, #f9a228 45%, #f3820f 110%);
-    background-size: 200% 100%;
-    box-shadow:
-      0 10px 30px -10px rgba(249, 162, 40, 0.45),
-      0 0 0 1px rgba(255, 255, 255, 0.25) inset;
-    transition: background-position 0.6s ease, transform 0.2s ease, box-shadow 0.3s ease;
+  .btn-ghost:hover {
+    border-color: rgb(var(--accent) / 0.6);
+    background: rgb(var(--bg-sunken));
   }
 
-  .btn-facebook:hover {
-    background-position: 100% 0;
-    transform: translateY(-1px);
-    box-shadow:
-      0 14px 40px -8px rgba(249, 162, 40, 0.55),
-      0 0 0 1px rgba(255, 255, 255, 0.35) inset;
+  /* Kept as a named variant so social CTAs stay distinguishable, but it is now
+     a plain secondary button rather than a second glowing gradient. */
+  .btn-facebook {
+    @apply btn-ghost;
   }
 
-  /* ---- Text helpers ---- */
+  /* ---- Section labels ---------------------------------------------------
+     Was a bordered, tinted, glowing pill. Now a quiet mono label — the same
+     signal, a fraction of the ink. */
   .eyebrow {
-    @apply inline-flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 rounded-full border px-3 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-gulf-700 sm:tracking-[0.18em] dark:text-gulf-300;
-    border-color: rgb(var(--line) / 0.6);
-    background: rgba(17, 182, 164, 0.06);
+    @apply inline-flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 font-mono text-[11px] font-semibold uppercase tracking-[0.14em];
+    color: rgb(var(--accent));
   }
 
+  /* Headline highlights. Solid brand accent, no animated gradient fill.
+     Display-sized only — see --accent-bright above. */
   .gradient-text {
-    background: linear-gradient(110deg, #11b6a4 10%, #2dd1bd 35%, #f9a228 90%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    background-size: 200% 100%;
-    animation: shimmer 8s linear infinite;
+    color: rgb(var(--accent-bright));
   }
 
   .hairline {
     @apply h-px w-full;
-    background: linear-gradient(90deg, transparent, rgb(var(--line)), transparent);
-  }
-
-  /* ---- Tile / Card patterns ---- */
-  .tile {
-    @apply relative overflow-hidden rounded-3xl border p-6 transition;
-    border-color: rgb(var(--line) / 0.6);
-    background: rgba(255, 255, 255, 0.7);
+    background: rgb(var(--line));
   }
 
-  .dark .tile {
-    background: rgba(14, 31, 51, 0.6);
-  }
-
-  .tile:hover {
-    transform: translateY(-2px);
-    border-color: rgba(45, 209, 189, 0.45);
-    box-shadow: 0 30px 80px -40px rgba(17, 182, 164, 0.4);
-  }
-
-  .tile-accent::before {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    border-radius: inherit;
-    padding: 1px;
-    background: linear-gradient(140deg, rgba(45, 209, 189, 0.6), transparent 40%, rgba(249, 162, 40, 0.5));
-    -webkit-mask:
-      linear-gradient(#000 0 0) content-box,
-      linear-gradient(#000 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    pointer-events: none;
+  /* A short accent rule used to open a section. */
+  .rule-accent {
+    @apply h-0.5 w-10 rounded-full;
+    background: rgb(var(--accent));
   }
 
   .kbd {
-    @apply rounded-md border px-1.5 py-0.5 font-mono text-[11px] text-ink-700 dark:text-ink-100;
+    @apply rounded border px-1.5 py-0.5 font-mono text-[11px];
     border-color: rgb(var(--line));
-    background: rgba(255, 255, 255, 0.6);
-  }
-
-  .dark .kbd {
-    background: rgba(255, 255, 255, 0.06);
+    background: rgb(var(--bg-sunken));
+    color: rgb(var(--fg));
   }
 
   /* ---- Docs prose ---- */
   /* Wraps rendered Markdown on /docs. Built on @tailwindcss/typography so the
      default `prose` styles cover lists, tables, code, etc., but every visible
      color/font is re-bound to the site's design tokens so it matches the
-     surrounding marketing pages in both light and dark mode. */
+     surrounding pages in both light and dark mode. */
   .prose-mesh {
     @apply prose max-w-none;
     color: rgb(var(--fg));
@@ -227,36 +211,21 @@
     --tw-prose-lead: rgb(var(--fg-muted));
     --tw-prose-bold: rgb(var(--fg));
     --tw-prose-counters: rgb(var(--fg-muted));
-    --tw-prose-bullets: rgb(var(--fg-muted));
+    --tw-prose-bullets: rgb(var(--line-strong));
     --tw-prose-hr: rgb(var(--line));
     --tw-prose-quotes: rgb(var(--fg));
-    --tw-prose-quote-borders: theme("colors.gulf.400");
+    --tw-prose-quote-borders: rgb(var(--accent));
     --tw-prose-captions: rgb(var(--fg-muted));
     --tw-prose-code: rgb(var(--fg));
-    --tw-prose-pre-code: theme("colors.ink.50");
+    --tw-prose-pre-code: theme("colors.ink.100");
     --tw-prose-pre-bg: theme("colors.ink.900");
     --tw-prose-th-borders: rgb(var(--line));
     --tw-prose-td-borders: rgb(var(--line));
-    --tw-prose-links: theme("colors.gulf.700");
+    --tw-prose-links: rgb(var(--accent));
   }
 
   .dark .prose-mesh {
-    --tw-prose-body: rgb(var(--fg));
-    --tw-prose-headings: rgb(var(--fg));
-    --tw-prose-lead: rgb(var(--fg-muted));
-    --tw-prose-bold: rgb(var(--fg));
-    --tw-prose-counters: rgb(var(--fg-muted));
-    --tw-prose-bullets: rgb(var(--fg-muted));
-    --tw-prose-hr: rgb(var(--line));
-    --tw-prose-quotes: rgb(var(--fg));
-    --tw-prose-quote-borders: theme("colors.gulf.400");
-    --tw-prose-captions: rgb(var(--fg-muted));
-    --tw-prose-code: rgb(var(--fg));
-    --tw-prose-pre-code: theme("colors.ink.50");
     --tw-prose-pre-bg: theme("colors.ink.950");
-    --tw-prose-th-borders: rgb(var(--line));
-    --tw-prose-td-borders: rgb(var(--line));
-    --tw-prose-links: theme("colors.gulf.300");
   }
 
   .prose-mesh h1,
@@ -268,15 +237,11 @@
 
   .prose-mesh h2 {
     @apply mt-12 border-b pb-2;
-    border-color: rgb(var(--line) / 0.6);
+    border-color: rgb(var(--line));
   }
 
   .prose-mesh a {
-    @apply font-medium underline-offset-2 transition;
-  }
-
-  .prose-mesh a:hover {
-    @apply underline;
+    @apply font-medium underline underline-offset-2;
   }
 
   /* The autolink wrapper rehype-autolink-headings adds around headings: keep
@@ -288,22 +253,18 @@
   }
 
   .prose-mesh img {
-    @apply mx-auto rounded-2xl border shadow-soft;
-    border-color: rgb(var(--line) / 0.6);
-    background: rgba(255, 255, 255, 0.6);
-  }
-
-  .dark .prose-mesh img {
-    background: rgba(14, 31, 51, 0.4);
+    @apply mx-auto rounded-lg border;
+    border-color: rgb(var(--line));
+    background: rgb(var(--bg-elevated));
   }
 
-  /* MkDocs-style blockquote → sand/amber callout, matching the
-     SettingsChangeBanner / Chromium notice look. */
+  /* MkDocs-style blockquote → advisory callout, matching SettingsChangeBanner. */
   .prose-mesh blockquote {
-    @apply not-italic rounded-2xl border px-5 py-4;
-    border-color: theme("colors.sand.400" / 40%);
+    @apply not-italic rounded-lg border px-5 py-4;
+    border-color: theme("colors.sand.400" / 45%);
     background: theme("colors.sand.400" / 8%);
-    border-left-width: 1px;
+    border-left-width: 3px;
+    border-left-color: theme("colors.sand.500");
   }
 
   .prose-mesh blockquote > :first-child {
@@ -315,7 +276,7 @@
   }
 
   .prose-mesh blockquote p {
-    @apply text-ink-700 dark:text-ink-200;
+    color: rgb(var(--fg));
   }
 
   .prose-mesh blockquote strong {
@@ -323,9 +284,9 @@
   }
 
   .prose-mesh :not(pre) > code {
-    @apply rounded-md border px-1.5 py-0.5 font-mono text-[0.85em];
-    border-color: rgb(var(--line) / 0.6);
-    background: rgba(17, 182, 164, 0.08);
+    @apply rounded border px-1.5 py-0.5 font-mono text-[0.85em];
+    border-color: rgb(var(--line));
+    background: rgb(var(--bg-sunken));
   }
 
   .prose-mesh :not(pre) > code::before,
@@ -334,26 +295,22 @@
   }
 
   .prose-mesh pre {
-    @apply rounded-2xl border;
-    border-color: rgb(var(--line) / 0.6);
+    @apply rounded-lg border;
+    border-color: rgb(var(--line));
   }
 
   .prose-mesh table {
-    @apply rounded-xl border;
-    border-color: rgb(var(--line) / 0.6);
+    @apply rounded-lg border;
+    border-color: rgb(var(--line));
     overflow: hidden;
   }
 
   .prose-mesh thead th {
-    background: rgba(17, 182, 164, 0.06);
-  }
-
-  .dark .prose-mesh thead th {
-    background: rgba(45, 209, 189, 0.08);
+    background: rgb(var(--bg-sunken));
   }
 
   .prose-mesh hr {
-    border-color: rgb(var(--line) / 0.6);
+    border-color: rgb(var(--line));
   }
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 41d66e9..5aed75f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -55,8 +55,8 @@ export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#f6f9fd" },
-    { media: "(prefers-color-scheme: dark)", color: "#03080f" },
+    { media: "(prefers-color-scheme: light)", color: "#f4f8fa" },
+    { media: "(prefers-color-scheme: dark)", color: "#061a28" },
   ],
 };
 
@@ -88,14 +88,23 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
         <Script src="/theme-init.js" strategy="beforeInteractive" nonce={nonce} />
       </head>
       <body
-        className={`${sans.variable} ${display.variable} ${mono.variable} bg-canvas relative min-h-screen font-sans text-ink-900 antialiased dark:text-ink-50`}
+        className={`${sans.variable} ${display.variable} ${mono.variable} bg-canvas min-h-screen font-sans antialiased`}
       >
-        <div className="pointer-events-none fixed inset-0 z-0 bg-grid opacity-60 dark:opacity-30" aria-hidden />
-        <div className="pointer-events-none fixed inset-0 z-0 bg-noise" aria-hidden />
-        <div className="relative z-10 flex min-h-screen flex-col">
+        <a
+          href="#main"
+          className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-ink-900 focus:shadow-lift dark:focus:bg-ink-800 dark:focus:text-white"
+        >
+          Skip to content
+        </a>
+        <div className="flex min-h-screen flex-col">
           <SiteHeader />
-          <main className="flex-1 pt-28 sm:pt-32">
-            {children}
+          {/* One texture band sits under the header for every page, rather
+              than each page re-declaring its own. Both layers are radially
+              masked, so the fixed height just bounds the fade. */}
+          <main id="main" className="relative flex-1 pt-10 sm:pt-14">
+            <div className="pointer-events-none absolute inset-x-0 top-0 h-[36rem] grid-tech" aria-hidden />
+            <div className="pointer-events-none absolute inset-x-0 top-0 h-[36rem] wash-brand" aria-hidden />
+            <div className="relative">{children}</div>
           </main>
           <SiteFooter />
         </div>
diff --git a/app/meetings/page.tsx b/app/meetings/page.tsx
index d10b0bf..df6a1c0 100644
--- a/app/meetings/page.tsx
+++ b/app/meetings/page.tsx
@@ -140,7 +140,7 @@ function PastMeetingCard({ meeting }: { meeting: PublicMeetingWithRecap }) {
   return (
     <li className="tile group flex h-full flex-col">
       <div className="flex items-center justify-between gap-3">
-        <span className="grid h-11 w-11 place-items-center rounded-2xl bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
+        <span className="grid h-11 w-11 place-items-center rounded-lg bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
           <CalendarDays className="h-5 w-5" aria-hidden />
         </span>
         {meeting.youtubeUrl ? (
@@ -165,8 +165,8 @@ function PastMeetingCard({ meeting }: { meeting: PublicMeetingWithRecap }) {
             href={meeting.youtubeUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="group/link inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold text-gulf-700 transition hover:border-gulf-400/60 hover:bg-gulf-500/5 dark:border-white/10 dark:text-gulf-300"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            className="group/link inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold text-gulf-700 transition hover:border-gulf-400/60 hover:bg-gulf-500/5 dark:text-gulf-300"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             <Youtube className="h-3.5 w-3.5" aria-hidden />
             Watch on YouTube
@@ -179,7 +179,7 @@ function PastMeetingCard({ meeting }: { meeting: PublicMeetingWithRecap }) {
       </div>
 
       {meeting.recapHtml ? (
-        <details className="group/recap mt-4 border-t border-ink-200/60 pt-4 dark:border-white/10">
+        <details className="group/recap mt-4 border-t border-[rgb(var(--line))] pt-4 ">
           <summary className="flex cursor-pointer list-none items-center justify-between gap-2 rounded-lg text-left font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-600 transition hover:text-ink-900 dark:text-ink-300 dark:hover:text-white">
             <span>Meeting summary</span>
             <ChevronDown
@@ -195,7 +195,7 @@ function PastMeetingCard({ meeting }: { meeting: PublicMeetingWithRecap }) {
       ) : null}
 
       {meeting.agendas.length > 0 ? (
-        <div className="mt-4 border-t border-ink-200/60 pt-4 dark:border-white/10">
+        <div className="mt-4 border-t border-[rgb(var(--line))] pt-4 ">
           <p className="mb-2 font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
             Agenda
           </p>
@@ -206,8 +206,8 @@ function PastMeetingCard({ meeting }: { meeting: PublicMeetingWithRecap }) {
                   href={absoluteAgendaUrl(a.downloadUrl)}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1.5 rounded-full border bg-white/70 px-2.5 py-1 text-xs font-medium text-ink-700 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-100 dark:hover:bg-white/10"
-                  style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+                  className="inline-flex items-center gap-1.5 rounded-full border bg-[rgb(var(--bg-elevated))] px-2.5 py-1 text-xs font-medium text-ink-700 transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-100"
+                  style={{ borderColor: "rgb(var(--line))" }}
                   title={a.originalName}
                 >
                   <FileText className="h-3 w-3" aria-hidden />
diff --git a/app/mesh-monitor/page.tsx b/app/mesh-monitor/page.tsx
index 6ba982a..a75ab6f 100644
--- a/app/mesh-monitor/page.tsx
+++ b/app/mesh-monitor/page.tsx
@@ -54,7 +54,7 @@ export default async function MeshMonitorPage() {
           </div>
         </section>
 
-        <section id="lookup" className="scroll-mt-32 mt-20 border-t pt-16 dark:border-white/10">
+        <section id="lookup" className="scroll-mt-32 mt-20 border-t pt-16 ">
           <h2 className="flex items-center gap-2 font-display text-2xl font-semibold tracking-tight text-ink-900 dark:text-white">
             <Search className="h-6 w-6 text-gulf-600 dark:text-gulf-300" aria-hidden />
             My prefixes
@@ -67,7 +67,7 @@ export default async function MeshMonitorPage() {
           </div>
         </section>
 
-        <section id="duplicates" className="scroll-mt-32 mt-20 border-t pt-16 dark:border-white/10">
+        <section id="duplicates" className="scroll-mt-32 mt-20 border-t pt-16 ">
           <h2 className="flex items-center gap-2 font-display text-2xl font-semibold tracking-tight text-ink-900 dark:text-white">
             <Copy className="h-6 w-6 text-gulf-600 dark:text-gulf-300" aria-hidden />
             Duplicate prefixes
@@ -77,7 +77,7 @@ export default async function MeshMonitorPage() {
           </div>
         </section>
 
-        <section id="reports" className="scroll-mt-32 mt-20 border-t pt-16 dark:border-white/10">
+        <section id="reports" className="scroll-mt-32 mt-20 border-t pt-16 ">
           <h2 className="flex items-center gap-2 font-display text-2xl font-semibold tracking-tight text-ink-900 dark:text-white">
             <Activity className="h-6 w-6 text-gulf-600 dark:text-gulf-300" aria-hidden />
             Network reports
diff --git a/app/meshmap/page.tsx b/app/meshmap/page.tsx
index 84e45bb..3ed6e90 100644
--- a/app/meshmap/page.tsx
+++ b/app/meshmap/page.tsx
@@ -41,7 +41,7 @@ export default function MeshmapPage() {
       <section className="mt-12">
         <div className="mb-4 flex items-end justify-between gap-4">
           <div>
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.22em] text-gulf-700 dark:text-gulf-300">
+            <p className="eyebrow">
               Primary network
             </p>
             <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
@@ -66,7 +66,7 @@ export default function MeshmapPage() {
       <section className="mt-12">
         <div className="mb-4 flex items-end justify-between gap-4">
           <div>
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.22em] text-sand-700 dark:text-sand-300">
+            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-500 dark:text-ink-400">
               Meshtastic footprint
             </p>
             <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
@@ -114,8 +114,8 @@ export default function MeshmapPage() {
             </Step>
           </ol>
 
-          <div className="surface-strong overflow-hidden rounded-2xl p-1">
-            <div className="rounded-xl border border-ink-200/60 bg-white/80 p-2 dark:border-white/10 dark:bg-ink-900/70">
+          <div className="surface-strong overflow-hidden rounded-lg p-1">
+            <div className="rounded-xl border border-[rgb(var(--line))] bg-[rgb(var(--bg-elevated))] p-2 ">
               <div className="flex items-center justify-between px-3 pb-2 pt-1">
                 <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
                   MQTT module settings
@@ -126,8 +126,8 @@ export default function MeshmapPage() {
                 {mqttRows.map(([k, v]) => (
                   <div
                     key={k}
-                    className="flex items-center justify-between gap-3 rounded-lg border bg-white/70 px-3 py-2 dark:border-white/10 dark:bg-white/5"
-                    style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+                    className="flex items-center justify-between gap-3 rounded-lg border bg-[rgb(var(--bg-elevated))] px-3 py-2"
+                    style={{ borderColor: "rgb(var(--line))" }}
                   >
                     <dt className="text-xs text-ink-600 dark:text-ink-300">{k}</dt>
                     <dd>
@@ -183,8 +183,8 @@ function Step({
 }) {
   return (
     <li
-      className="flex gap-4 rounded-2xl border bg-white/60 p-4 dark:border-white/10 dark:bg-white/5"
-      style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+      className="flex gap-4 rounded-lg border bg-[rgb(var(--bg-elevated))] p-4"
+      style={{ borderColor: "rgb(var(--line))" }}
     >
       <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-gulf-500/15 font-mono text-xs font-bold text-gulf-700 dark:text-gulf-300">
         {n}
diff --git a/app/page.tsx b/app/page.tsx
index 717ca5e..a0f4813 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,20 +1,12 @@
 import Link from "next/link";
 import {
   ArrowRight,
-  ArrowUpRight,
-  Boxes,
-  BookOpen,
-  CalendarCheck,
   CircuitBoard,
-  Compass,
-  Cpu,
-  Map as MapIcon,
+  Radio,
   Router,
-  ShieldCheck,
   Smartphone,
-  Sparkles,
   Wind,
-  Zap,
+  Wrench,
 } from "lucide-react";
 import { LiveMap } from "@/components/live-map";
 import { getMeshStats, fmt, type StateCode } from "@/lib/mesh-stats";
@@ -34,37 +26,55 @@ const regions: Region[] = [
   { code: "FL", name: "Northwest Florida", cities: "Pensacola · Destin · Panama City" },
 ];
 
+const work = [
+  {
+    icon: Wind,
+    title: "Communications that survive the storm",
+    body:
+      "When the cell network drops and the internet goes with it, the mesh keeps moving on solar, battery, or a USB pack, backed by volunteer repeaters on tall sites across the coast.",
+  },
+  {
+    icon: Radio,
+    title: "A public, live view of the network",
+    body:
+      "Anyone can watch Meshcore and Meshtastic activity in real time — who heard whom, which repeaters are carrying traffic, and where the next install would matter most.",
+  },
+  {
+    icon: Wrench,
+    title: "Open hardware, open docs, open help",
+    body:
+      "Every guide, tool, and firmware recommendation we publish is free and open source. Bring a question to the weekly net and someone will walk you through it.",
+  },
+];
+
+// One next step per stage. The old build offered up to three competing links
+// per card, which made the fastest path through the page hard to find.
 const steps = [
   {
     n: "01",
     icon: CircuitBoard,
     title: "Pick your hardware",
     body: "New to LoRa? Start with our recommended devices so your first radio just works.",
-    links: [
-      { label: "Recommended devices", href: "/docs/devicerecs", internal: true },
-    ],
+    href: "/docs/devicerecs",
+    cta: "Recommended devices",
   },
   {
     n: "02",
     icon: Smartphone,
-    title: "Set up a daily-carry companion",
-    body: "Get a MeshCore companion on your belt or in your bag, paired with your phone, ready to message neighbors.",
-    links: [
-      { label: "Setup wizard", href: "/setup", internal: true },
-      { label: "Companion setup guide", href: "/docs/setting-up-meshcore-companion", internal: true },
-      { label: "Frequency settings", href: "/docs/freq-settings", internal: true },
-    ],
+    title: "Set up a daily carry",
+    body:
+      "Get a MeshCore companion in your bag, paired with your phone, ready to message neighbors on the network.",
+    href: "/setup",
+    cta: "Open the setup wizard",
   },
   {
     n: "03",
     icon: Router,
     title: "Stand up a repeater",
-    body: "Have a place with sky? Run a repeater and extend the network. We’ll help you plan, build, and tune it.",
-    links: [
-      { label: "Setup wizard", href: "/setup", internal: true },
-      { label: "Repeater setup", href: "/docs/meshcore-repeater-setup", internal: true },
-      { label: "Estimate coverage", href: "/docs/estimate-coverage-with-meshmapper", internal: true },
-    ],
+    body:
+      "Have a place with sky? Run a repeater and extend the network. We will help you plan, build, and tune it.",
+    href: "/docs/meshcore-repeater-setup",
+    cta: "Repeater setup guide",
   },
 ];
 
@@ -73,377 +83,272 @@ export default async function HomePage() {
 
   const stats = mesh.ok
     ? [
-        {
-          value: fmt(mesh.totalMapped),
-          label: "mapped nodes",
-          caption: `${fmt(mesh.totalSeen)} ever seen`,
-        },
-        {
-          value: fmt(mesh.repeaters),
-          label: "repeaters",
-          caption: `${fmt(mesh.rooms)} room servers on the backbone`,
-        },
-        {
-          value: fmt(mesh.activeLast24h),
-          label: "active in 24h",
-          caption: `${fmt(mesh.onlineNow)} online right now`,
-        },
-        {
-          value: fmt(mesh.historyEdges),
-          label: "links observed",
-          caption: "across the rolling window",
-        },
+        { value: fmt(mesh.totalMapped), label: "Mapped nodes", caption: `${fmt(mesh.totalSeen)} ever seen` },
+        { value: fmt(mesh.repeaters), label: "Repeaters", caption: `${fmt(mesh.rooms)} room servers` },
+        { value: fmt(mesh.activeLast24h), label: "Active in 24h", caption: `${fmt(mesh.onlineNow)} online now` },
+        { value: fmt(mesh.historyEdges), label: "Links observed", caption: "Rolling window" },
       ]
     : [
         { value: "5", label: "Gulf states", caption: "TX · LA · MS · AL · FL" },
-        { value: "1,600 mi", label: "of coastline", caption: "Brownsville → Apalachicola" },
-        { value: "32", label: "max mesh hops", caption: "via Meshcore pathing" },
-        { value: "100%", label: "open source", caption: "Hardware + firmware + docs" },
+        { value: "1,600 mi", label: "Of coastline", caption: "Brownsville → Apalachicola" },
+        { value: "32", label: "Max mesh hops", caption: "Via Meshcore pathing" },
+        { value: "100%", label: "Open source", caption: "Hardware, firmware, docs" },
       ];
 
   return (
     <>
-      {/* HERO */}
-      <section className="container relative pb-24 pt-6 sm:pt-10 lg:pb-28">
-        <div className="grid items-start gap-10 lg:grid-cols-12 lg:gap-12">
-          {/* LEFT copy */}
-          <div className="lg:col-span-5 lg:pt-6">
-            <span className="eyebrow">
-              <span className="relative flex h-2 w-2">
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-400 opacity-50" />
-                <span className="relative inline-flex h-2 w-2 rounded-full bg-gulf-500" />
+      {/* HERO ------------------------------------------------------------
+          Copy on the left, the live map on the right, as on the original
+          site. The stats it produces sit in a band directly underneath. */}
+      <section className="container pb-16">
+        <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
+          <div className="lg:col-span-5">
+            <p className="eyebrow">
+              <span className="relative flex h-1.5 w-1.5" aria-hidden>
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-500 opacity-50" />
+                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-600 dark:bg-gulf-400" />
               </span>
               {mesh.ok ? `${fmt(mesh.totalMapped)} nodes live` : "Live on the bayou"}
-              <span className="mx-1.5 text-ink-400">·</span>
-              expanding the Gulf
-            </span>
+              <span aria-hidden>·</span>
+              Expanding the Gulf
+            </p>
 
-            <h1 className="mt-6 font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+            <h1 className="mt-5 font-display text-display-xl font-semibold text-balance text-ink-900 dark:text-white">
               Comms that hold
               <br />
               when the <span className="gradient-text">coast does not</span>.
             </h1>
 
             <p className="mt-6 max-w-xl text-pretty text-lg leading-relaxed text-ink-600 dark:text-ink-300">
-              Gulf Coast Mesh is a volunteer-built communications fabric anchored in Louisiana, growing across the
-              US Gulf Coast. Open hardware. Decentralized routing. Real neighbors on the other end.
+              Gulf Coast Mesh is a volunteer-built, non-profit communications fabric anchored in Louisiana, growing
+              across the US Gulf Coast. Open hardware. Decentralized routing. Real neighbors on the other end.
             </p>
 
-            <div className="mt-9 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
-              <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
-                <a
-                  href="https://discord.gulfcoastmesh.org"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="btn-primary w-full sm:w-auto"
-                >
-                  Join the Discord
-                  <ArrowRight className="h-4 w-4" aria-hidden />
-                </a>
-                <a
-                  href="https://www.facebook.com/groups/gulfcoastmesh"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="btn-facebook w-full sm:w-auto"
-                >
-                  Join the Facebook
-                  <ArrowRight className="h-4 w-4" aria-hidden />
-                </a>
-              </div>
-              <Link href="/meshmap" className="btn-ghost w-full sm:w-auto">
-                See the live map
-                <MapIcon className="h-4 w-4 opacity-80" aria-hidden />
-              </Link>
+            <div className="mt-8 flex flex-wrap items-center gap-3">
+              <a
+                href="https://discord.gulfcoastmesh.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary"
+              >
+                Join the Discord
+                <ArrowRight className="h-4 w-4" aria-hidden />
+              </a>
+              <a
+                href="https://www.facebook.com/groups/gulfcoastmesh"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-ghost"
+              >
+                Join the Facebook
+              </a>
               <Link
-                href="/docs"
-                className="group ml-1 inline-flex items-center gap-1.5 text-sm font-medium text-ink-700 hover:text-ink-950 dark:text-ink-200 dark:hover:text-white"
+                href="/meshmap"
+                className="group inline-flex items-center gap-1.5 text-sm font-semibold text-gulf-700 dark:text-gulf-300"
               >
-                Read the docs
-                <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
+                See the live map
+                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
               </Link>
             </div>
 
-            <p className="mt-5 inline-flex items-center gap-2 text-xs text-ink-600 dark:text-ink-300">
-              <CalendarCheck className="h-3.5 w-3.5 text-gulf-600 dark:text-gulf-300" />
-              <span>
-                <span className="font-semibold text-ink-900 dark:text-white">Weekly Monday voice net</span> on Discord.
-                Everyone welcome.
-              </span>
+            <p className="mt-6 text-sm text-ink-500 dark:text-ink-400">
+              <span className="font-semibold text-ink-800 dark:text-ink-100">Weekly Monday voice net</span> on Discord.
+              Everyone welcome, including people who have never touched a radio.{" "}
+              <Link href="/meetings" className="font-medium text-gulf-700 underline underline-offset-2 dark:text-gulf-300">
+                See the schedule
+              </Link>
+              .
             </p>
-
-
           </div>
 
-          {/* RIGHT live map (now wider + taller) */}
           <div className="lg:col-span-7">
-            <div className="relative">
-              <LiveMap
-                src="https://explorer.gulfcoastmesh.org/embed-light"
-                srcDark="https://explorer.gulfcoastmesh.org/embed-dark"
-                title="Gulf Coast Mesh Explorer (live)"
-                label="Gulf Coast Explorer"
-                sub={
-                  mesh.ok
-                    ? `MeshCore · ${fmt(mesh.totalMapped)} nodes · ${fmt(mesh.activeLast24h)} active 24h`
-                    : "MeshCore · live packets & nodes"
-                }
-                aspect="aspect-[5/4] sm:aspect-[4/3] lg:aspect-[5/4] xl:aspect-[6/5]"
-                className="lg:min-h-[560px]"
-              />
-              <div className="pointer-events-none absolute -bottom-6 -right-6 h-32 w-32 rounded-full bg-gulf-400/20 blur-3xl" />
-              <div className="pointer-events-none absolute -top-8 -left-6 h-24 w-24 rounded-full bg-sand-400/20 blur-3xl" />
-            </div>
+            <LiveMap
+              src="https://explorer.gulfcoastmesh.org/embed-light"
+              srcDark="https://explorer.gulfcoastmesh.org/embed-dark"
+              title="Gulf Coast Mesh Explorer (live)"
+              label="Gulf Coast Explorer"
+              sub={
+                mesh.ok
+                  ? `MeshCore · ${fmt(mesh.totalMapped)} nodes · ${fmt(mesh.activeLast24h)} active in 24h`
+                  : "MeshCore · live packets & nodes"
+              }
+              aspect="aspect-[4/3] lg:aspect-[5/4] xl:aspect-[6/5]"
+            />
           </div>
         </div>
       </section>
 
-      {/* STATS STRIP */}
-      <section className="container">
-        <div className="surface-strong relative overflow-hidden">
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-gulf-400/15 via-transparent to-transparent" aria-hidden />
-          <div className="relative grid grid-cols-2 divide-x divide-ink-200/60 sm:grid-cols-4 dark:divide-white/10">
-            {stats.map((s) => (
-              <div key={s.label} className="px-5 py-7 sm:px-7 sm:py-8">
-                <p className="font-display text-3xl font-semibold tracking-tight text-ink-900 sm:text-4xl dark:text-white">
-                  {s.value}
-                </p>
-                <p className="mt-1 text-sm font-medium text-ink-700 dark:text-ink-100">{s.label}</p>
-                <p className="mt-1 font-mono text-[10px] uppercase tracking-[0.12em] text-ink-500 sm:tracking-[0.18em] dark:text-ink-400">
-                  {s.caption}
-                </p>
-              </div>
-            ))}
-          </div>
-          {mesh.ok ? (
-            <p className="border-t border-ink-200/60 px-5 py-2 text-center font-mono text-[10px] uppercase tracking-[0.14em] text-ink-500 sm:tracking-[0.22em] dark:border-white/10 dark:text-ink-400">
-              live snapshot · auto-refreshes every 5 min ·{" "}
-              <Link
-                href="/meshmap"
-                className="text-gulf-700 hover:underline dark:text-gulf-300"
-              >
-                open live maps
-              </Link>
-            </p>
-          ) : null}
-        </div>
+      {/* NETWORK STATS ----------------------------------------------------- */}
+      <section id="network" className="container">
+        <dl className="surface grid grid-cols-2 overflow-hidden sm:grid-cols-4">
+          {stats.map((s, i) => (
+            <div
+              key={s.label}
+              className={
+                "px-5 py-6 sm:px-6 " +
+                // Odd cells start the second mobile column; cells 2-3 start
+                // the second mobile row. At sm every cell is in one row.
+                (i % 2 === 1 ? "border-l " : "sm:border-l ") +
+                (i >= 2 ? "border-t sm:border-t-0 " : "") +
+                (i === 0 ? "sm:border-l-0 " : "")
+              }
+              style={{ borderColor: "rgb(var(--line))" }}
+            >
+              <dd className="tabular font-display text-3xl font-semibold text-ink-900 sm:text-4xl dark:text-white">
+                {s.value}
+              </dd>
+              <dt className="mt-1 text-sm font-medium text-ink-700 dark:text-ink-200">{s.label}</dt>
+              <p className="mt-0.5 text-xs text-ink-500 dark:text-ink-400">{s.caption}</p>
+            </div>
+          ))}
+        </dl>
+
+        <p className="mt-3 text-sm text-ink-500 dark:text-ink-400">
+          Live snapshot, refreshed every 5 minutes.{" "}
+          <Link href="/meshmap" className="font-medium text-gulf-700 underline underline-offset-2 dark:text-gulf-300">
+            Open the full maps
+          </Link>{" "}
+          for the packet analyzer and the Meshtastic view.
+        </p>
       </section>
 
-      {/* NETWORK / FEATURES BENTO */}
-      <section id="network" className="container py-20 sm:py-28">
+      {/* WHAT WE DO ------------------------------------------------------- */}
+      <section className="container py-20">
         <div className="max-w-2xl">
-          <span className="eyebrow">
-            <Sparkles className="h-3.5 w-3.5" aria-hidden />
-            The network
-          </span>
-          <h2 className="mt-4 font-display text-display-lg font-semibold tracking-tight text-ink-900 dark:text-white">
+          <p className="eyebrow">What we do</p>
+          <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
             Rooftops, towers, and front porches, all on the same mesh.
           </h2>
         </div>
 
-        <div className="mt-12 grid gap-4 md:grid-cols-12 md:grid-rows-[auto_auto]">
-          {/* Big feature: maps */}
-          <div className="tile tile-accent md:col-span-7 md:row-span-2 md:p-9">
-            <span className="grid h-11 w-11 place-items-center rounded-2xl bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
-              <MapIcon className="h-5 w-5" aria-hidden />
-            </span>
-            <h3 className="mt-5 font-display text-2xl font-semibold text-ink-900 dark:text-white">
-              Live maps you can actually read
-            </h3>
-            <p className="mt-3 max-w-xl text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-              Watch Meshcore and Meshtastic activity ripple across the coast in real time. See who heard whom, which
-              repeaters are hot, and where the next install would matter most.
-            </p>
-            <div className="mt-8 grid gap-3 sm:grid-cols-2">
-              <Link
-                href="/meshmap"
-                className="surface group flex items-center justify-between rounded-2xl px-4 py-3 transition hover:-translate-y-0.5"
-              >
-                <span className="text-sm font-semibold text-ink-900 dark:text-white">Open Analyzer</span>
-                <ArrowUpRight className="h-4 w-4 text-gulf-700 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 dark:text-gulf-300" aria-hidden />
-              </Link>
-              <Link
-                href="/meshmap"
-                className="surface group flex items-center justify-between rounded-2xl px-4 py-3 transition hover:-translate-y-0.5"
-              >
-                <span className="text-sm font-semibold text-ink-900 dark:text-white">Open Meshview</span>
-                <ArrowUpRight className="h-4 w-4 text-gulf-700 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 dark:text-gulf-300" aria-hidden />
-              </Link>
+        <div className="mt-10 grid gap-6 md:grid-cols-3">
+          {work.map((w) => (
+            <div key={w.title}>
+              <w.icon className="h-5 w-5 text-gulf-700 dark:text-gulf-300" aria-hidden />
+              <h3 className="mt-4 font-display text-lg font-semibold text-ink-900 dark:text-white">{w.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-ink-600 dark:text-ink-300">{w.body}</p>
             </div>
-          </div>
+          ))}
+        </div>
+      </section>
 
-          {/* Resilience */}
-          <div className="tile md:col-span-5">
-            <span className="grid h-11 w-11 place-items-center rounded-2xl bg-sand-400/15 text-sand-700 dark:text-sand-300">
-              <Wind className="h-5 w-5" aria-hidden />
-            </span>
-            <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">
-              Built for hurricane season
-            </h3>
-            <p className="mt-2 text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-              When the cell network drops and the internet goes with it, the mesh keeps moving on solar, battery, or
-              a USB pack, backed by our repeaters on tall sites.
-            </p>
+      {/* GET STARTED ------------------------------------------------------ */}
+      <section
+        className="border-y py-20"
+        style={{ borderColor: "rgb(var(--line))", background: "rgb(var(--bg-sunken))" }}
+      >
+        <div className="container">
+          <div className="max-w-2xl">
+            <p className="eyebrow">Get started</p>
+            <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+              From a box-fresh radio to the coast-wide net in three steps.
+            </h2>
           </div>
 
-          {/* Open */}
-          <div className="tile md:col-span-5">
-            <span className="grid h-11 w-11 place-items-center rounded-2xl bg-ink-700/10 text-ink-700 dark:text-ink-200">
-              <Zap className="h-5 w-5" aria-hidden />
-            </span>
-            <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">
-              Open and tinkerable
-            </h3>
-            <p className="mt-2 text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-              Open firmware, open docs, open neighbors. Hack the stack, file a PR, or just show up and ask questions.
-            </p>
-          </div>
+          <ol className="mt-10 grid gap-5 lg:grid-cols-3">
+            {steps.map((s) => (
+              <li key={s.n} className="tile flex h-full flex-col">
+                <div className="flex items-center gap-3">
+                  <s.icon className="h-5 w-5 text-gulf-700 dark:text-gulf-300" aria-hidden />
+                  <span className="font-mono text-xs font-semibold text-ink-400 dark:text-ink-500">{s.n}</span>
+                </div>
+                <h3 className="mt-4 font-display text-lg font-semibold text-ink-900 dark:text-white">{s.title}</h3>
+                <p className="mt-2 flex-1 text-sm leading-relaxed text-ink-600 dark:text-ink-300">{s.body}</p>
+                <Link
+                  href={s.href}
+                  className="group mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-gulf-700 dark:text-gulf-300"
+                >
+                  {s.cta}
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
+                </Link>
+              </li>
+            ))}
+          </ol>
         </div>
       </section>
 
-      {/* HOW IT WORKS */}
-      <section className="container py-20 sm:py-28">
-        <div className="max-w-2xl">
-          <span className="eyebrow">
-            <BookOpen className="h-3.5 w-3.5" aria-hidden />
-            How it works
-          </span>
-          <h2 className="mt-4 font-display text-display-lg font-semibold tracking-tight text-ink-900 dark:text-white">
-            From box-fresh radio to the coast-wide net in three steps.
-          </h2>
-        </div>
+      {/* COVERAGE --------------------------------------------------------- */}
+      <section className="container py-20">
+        <div className="grid gap-10 lg:grid-cols-[1fr_1.3fr] lg:gap-16">
+          <div>
+            <p className="eyebrow">Coverage</p>
+            <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+              Anchored in Louisiana, growing the whole Gulf.
+            </h2>
+            <p className="mt-4 max-w-md text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+              Today the live network is concentrated across Louisiana. The mission is bigger: neighbors helping
+              neighbors from Corpus Christi to Panama City. If you are elsewhere on the Gulf, come build with us.
+            </p>
+          </div>
 
-        <ol className="mt-12 grid gap-4 lg:grid-cols-3">
-          {steps.map((s) => (
-            <li key={s.n} className="tile group flex h-full flex-col">
-              <div className="flex items-center justify-between">
-                <span className="grid h-11 w-11 place-items-center rounded-2xl bg-gulf-500/10 text-gulf-700 dark:text-gulf-300">
-                  <s.icon className="h-5 w-5" aria-hidden />
-                </span>
-                <span className="font-mono text-xs font-semibold text-ink-400 dark:text-ink-500">{s.n}</span>
-              </div>
-              <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">{s.title}</h3>
-              <p className="mt-2 text-sm leading-relaxed text-ink-600 dark:text-ink-300">{s.body}</p>
-              {s.links?.length ? (
-                <ul className="mt-5 flex flex-wrap gap-2 border-t border-ink-200/60 pt-4 dark:border-white/10">
-                  {s.links.map((l) => {
-                    const linkClass =
-                      "group/link inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium text-gulf-700 transition hover:border-gulf-400/60 hover:bg-gulf-500/5 dark:border-white/10 dark:text-gulf-300";
-                    const linkStyle = { borderColor: "rgb(var(--line) / 0.7)" };
-                    const arrow = (
-                      <ArrowUpRight
-                        className="h-3 w-3 transition group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5"
-                        aria-hidden
-                      />
-                    );
-                    return (
-                      <li key={l.href}>
-                        {l.internal ? (
-                          <Link href={l.href} className={linkClass} style={linkStyle}>
-                            {l.label}
-                            {arrow}
-                          </Link>
-                        ) : (
-                          <a
-                            href={l.href}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className={linkClass}
-                            style={linkStyle}
-                          >
-                            {l.label}
-                            {arrow}
-                          </a>
-                        )}
-                      </li>
-                    );
-                  })}
-                </ul>
-              ) : null}
-            </li>
-          ))}
-        </ol>
+          <ul className="surface divide-y" style={{ borderColor: "rgb(var(--line))" }}>
+            {regions.map((r) => {
+              const count = mesh.byState[r.code] ?? 0;
+              const live = count > 0 || r.forceLive === true;
+              return (
+                <li
+                  key={r.code}
+                  className="flex items-center gap-4 px-5 py-4"
+                  style={{ borderColor: "rgb(var(--line))" }}
+                >
+                  <span className="w-7 shrink-0 font-mono text-xs font-bold text-ink-500 dark:text-ink-400">
+                    {r.code}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-semibold text-ink-900 dark:text-white">{r.name}</p>
+                    <p className="truncate text-xs text-ink-500 dark:text-ink-400">{r.cities}</p>
+                  </div>
+                  {live ? (
+                    <span className="tabular shrink-0 font-mono text-xs font-semibold text-gulf-700 dark:text-gulf-300">
+                      {count > 0 ? `${fmt(count)} live` : "Live"}
+                    </span>
+                  ) : (
+                    <span className="shrink-0 font-mono text-xs text-ink-400 dark:text-ink-500">Planned</span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
       </section>
 
-      {/* REGIONS */}
-      <section className="container">
-        <div className="surface relative overflow-hidden p-8 sm:p-12">
-          <div className="grid gap-10 lg:grid-cols-[1fr_1.4fr] lg:items-center">
-            <div>
-              <span className="eyebrow">
-                <Compass className="h-3.5 w-3.5" aria-hidden />
-                Regions
-              </span>
-              <h2 className="mt-4 font-display text-display-lg font-semibold tracking-tight text-ink-900 dark:text-white">
-                Anchored in Louisiana,
-                <br />
-                growing the whole Gulf.
-              </h2>
-              <p className="mt-4 max-w-md text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-                Today the live network is concentrated across Louisiana. The mission is bigger: neighbors helping
-                neighbors from Corpus Christi to Panama City. If you’re elsewhere on the Gulf, come build with us.
-              </p>
-            </div>
-            <ul className="grid gap-3 sm:grid-cols-2">
-              {regions.map((r) => {
-                const count = mesh.byState[r.code] ?? 0;
-                const live = count > 0 || r.forceLive === true;
-                return (
-                  <li
-                    key={r.code}
-                    className={
-                      "group relative flex items-center gap-4 rounded-2xl border px-4 py-3.5 transition hover:-translate-y-0.5 " +
-                      (live
-                        ? "border-gulf-400/50 bg-gulf-500/5 dark:border-gulf-400/30 dark:bg-gulf-500/10"
-                        : "hover:border-gulf-400/30 dark:border-white/10")
-                    }
-                    style={!live ? { borderColor: "rgb(var(--line) / 0.7)" } : undefined}
-                  >
-                    <span
-                      className={
-                        "grid h-10 w-10 shrink-0 place-items-center rounded-xl font-mono text-xs font-bold " +
-                        (live
-                          ? "bg-gulf-500/20 text-gulf-700 dark:text-gulf-200"
-                          : "bg-ink-700/5 text-ink-500 dark:bg-white/5 dark:text-ink-400")
-                      }
-                    >
-                      {r.code}
-                    </span>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2">
-                        <p className="font-display text-sm font-semibold text-ink-900 dark:text-white">{r.name}</p>
-                        {live ? (
-                          <span className="inline-flex items-center gap-1 rounded-full bg-gulf-500/15 px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.16em] text-gulf-700 dark:text-gulf-200">
-                            <span className="h-1 w-1 rounded-full bg-gulf-500" />
-                            {count > 0 ? `${fmt(count)} live` : "Live"}
-                          </span>
-                        ) : (
-                          <span className="inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.16em] text-sand-700 dark:border-white/10 dark:text-sand-300" style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
-                            <span className="h-1 w-1 rounded-full bg-sand-400" />
-                            Coming soon™
-                          </span>
-                        )}
-                      </div>
-                      <p className="text-xs text-ink-500 dark:text-ink-400">{r.cities}</p>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
+      {/* GET INVOLVED ----------------------------------------------------- */}
+      <section
+        className="relative overflow-hidden border-t py-20"
+        style={{ borderColor: "rgb(var(--line))", background: "rgb(var(--bg-sunken))" }}
+      >
+        <div className="pointer-events-none absolute inset-0 grid-tech" aria-hidden />
+        <div className="container relative max-w-3xl text-center">
+          <h2 className="font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+            No radio required to get involved.
+          </h2>
+          <p className="mt-4 text-pretty leading-relaxed text-ink-600 dark:text-ink-300">
+            Come to the Monday net, ask questions, lend a rooftop, or help us write the docs. The network grows one
+            neighbor at a time.
+          </p>
+          <div className="mt-8 flex flex-wrap justify-center gap-3">
+            <a
+              href="https://discord.gulfcoastmesh.org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-primary"
+            >
+              Join the Discord
+            </a>
+            <a
+              href="https://www.facebook.com/groups/gulfcoastmesh"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-ghost"
+            >
+              Join the Facebook group
+            </a>
+            <Link href="/emailsignup" className="btn-ghost">
+              Get the newsletter
+            </Link>
           </div>
         </div>
       </section>
     </>
   );
 }
-
-function Pill({ icon: Icon, children }: { icon: React.ComponentType<{ className?: string }>; children: React.ReactNode }) {
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium text-ink-700 dark:text-ink-100"
-      style={{ borderColor: "rgb(var(--line) / 0.7)" }}
-    >
-      <Icon className="h-3.5 w-3.5 text-gulf-600 dark:text-gulf-300" />
-      {children}
-    </span>
-  );
-}
diff --git a/app/setup/page.tsx b/app/setup/page.tsx
index 54d859a..903f853 100644
--- a/app/setup/page.tsx
+++ b/app/setup/page.tsx
@@ -1049,7 +1049,7 @@ function SetupWizard() {
 
     return (
       <div className="mx-auto max-w-md space-y-4 text-left">
-        <div className="rounded-2xl border bg-white/60 p-4 dark:bg-white/5" style={{ borderColor: 'rgb(var(--line) / 0.7)' }}>
+        <div className="rounded-lg border bg-[rgb(var(--bg-elevated))] p-4" style={{ borderColor: 'rgb(var(--line))' }}>
           <p className="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
             DFU notes
           </p>
@@ -1061,7 +1061,7 @@ function SetupWizard() {
           </p>
         </div>
         {selectedSetupDevice.eraseAsset ? (
-          <label className="flex items-start gap-3 rounded-2xl border bg-white/60 p-4 dark:bg-white/5" style={{ borderColor: 'rgb(var(--line) / 0.7)' }}>
+          <label className="flex items-start gap-3 rounded-lg border bg-[rgb(var(--bg-elevated))] p-4" style={{ borderColor: 'rgb(var(--line))' }}>
             <input
               type="checkbox"
               className="mt-1"
@@ -1489,7 +1489,7 @@ function SetupWizard() {
 
     if (serialSupport === 'insecure') {
       return (
-        <div className="mb-6 flex items-start gap-3 rounded-2xl border border-sand-400/40 bg-sand-400/10 p-4 text-left">
+        <div className="mb-6 flex items-start gap-3 rounded-lg border border-sand-400/40 bg-sand-400/10 p-4 text-left">
           <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sand-700 dark:text-sand-300" aria-hidden />
           <div>
             <h3 className="font-display text-sm font-semibold text-ink-900 dark:text-white">Secure connection required</h3>
@@ -1562,7 +1562,7 @@ function SetupWizard() {
     const { title, body, suggestion } = messages[browserKind];
 
     return (
-      <div className="mb-6 rounded-2xl border border-coral-500/40 bg-coral-500/10 p-5 text-left">
+      <div className="mb-6 rounded-lg border border-coral-500/40 bg-coral-500/10 p-5 text-left">
         <div className="flex items-start gap-3">
           <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-coral-500" aria-hidden />
           <div className="min-w-0 flex-1 space-y-3">
@@ -1620,14 +1620,14 @@ function SetupWizard() {
 
   const renderTerminal = () => (
     <div
-      className={`fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-950/60 backdrop-blur-sm transition-opacity ${
+      className={`fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-950/60 transition-opacity ${
         showTerminal ? 'opacity-100' : 'pointer-events-none opacity-0'
       }`}
       role="dialog"
       aria-modal="true"
       aria-label="Flash terminal"
     >
-      <div className="flex h-[65vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-ink-950 shadow-glow">
+      <div className="flex h-[65vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl border border-white/10 bg-ink-950 shadow-lift">
         <div className="flex items-center justify-between border-b border-white/10 px-6 py-4">
           <div className="flex items-center gap-2 text-ink-200">
             <TerminalIcon className="h-4 w-4" aria-hidden />
@@ -1697,7 +1697,7 @@ function SetupWizard() {
       {(browserKind === 'firefox' || browserKind === 'safari' || browserKind === 'ios') && (
         <div
           role="note"
-          className="mx-auto flex max-w-xl items-start gap-3 rounded-2xl border border-sand-400/40 bg-sand-400/10 p-4 text-left"
+          className="mx-auto flex max-w-xl items-start gap-3 rounded-lg border border-sand-400/40 bg-sand-400/10 p-4 text-left"
         >
           <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sand-700 dark:text-sand-300" aria-hidden />
           <div>
@@ -1718,7 +1718,7 @@ function SetupWizard() {
           onClick={() => goTo('client_explain')}
           className="tile tile-accent group flex h-full flex-col items-start text-left"
         >
-          <span className="grid h-11 w-11 place-items-center rounded-2xl bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
+          <span className="grid h-11 w-11 place-items-center rounded-lg bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
             <Smartphone className="h-5 w-5" aria-hidden />
           </span>
           <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">Set up a client</h3>
@@ -1731,7 +1731,7 @@ function SetupWizard() {
           onClick={() => goTo('repeater_explain')}
           className="tile tile-accent group flex h-full flex-col items-start text-left"
         >
-          <span className="grid h-11 w-11 place-items-center rounded-2xl bg-sand-400/20 text-sand-700 dark:text-sand-300">
+          <span className="grid h-11 w-11 place-items-center rounded-lg bg-sand-400/20 text-sand-700 dark:text-sand-300">
             <Wifi className="h-5 w-5" aria-hidden />
           </span>
           <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">Stand up a repeater</h3>
@@ -1747,7 +1747,6 @@ function SetupWizard() {
     <div className="space-y-6">
       <BackButton to="intro" />
       <div className="surface-strong relative overflow-hidden p-6 sm:p-8">
-        <div className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full bg-gulf-400/15 blur-3xl" />
         <span className="eyebrow">
           <Smartphone className="h-3.5 w-3.5" aria-hidden />
           MeshCore client
@@ -1782,21 +1781,21 @@ function SetupWizard() {
               onClick={() => selectDevice(d.id)}
               aria-pressed={isSelected}
               className={
-                'group relative flex flex-col items-center gap-2 rounded-2xl border p-5 text-center transition disabled:cursor-not-allowed disabled:opacity-45 ' +
+                'group relative flex flex-col items-center gap-2 rounded-lg border p-5 text-center transition disabled:cursor-not-allowed disabled:opacity-45 ' +
                 (isSelected
                   ? 'border-gulf-500/60 bg-gulf-500/10 shadow-[0_0_0_1px_rgba(45,209,189,0.3)_inset]'
-                  : 'bg-white/60 hover:-translate-y-0.5 hover:border-gulf-400/50 dark:bg-white/5 ')
+                  : 'bg-[rgb(var(--bg-elevated))] hover:border-gulf-400/50 ')
               }
-              style={!isSelected ? { borderColor: 'rgb(var(--line) / 0.7)' } : undefined}
+              style={!isSelected ? { borderColor: 'rgb(var(--line))' } : undefined}
             >
               {!d.supported && (
-                <span className="absolute right-2 top-2 rounded-full border bg-white/70 px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:border-white/10 dark:bg-white/5 dark:text-ink-400" style={{ borderColor: 'rgb(var(--line) / 0.6)' }}>
+                <span className="absolute right-2 top-2 rounded-full border bg-[rgb(var(--bg-elevated))] px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400" style={{ borderColor: 'rgb(var(--line))' }}>
                   Soon™
                 </span>
               )}
               <span className={
                 'grid h-10 w-10 place-items-center rounded-xl ' +
-                (isSelected ? 'bg-gulf-500/20 text-gulf-700 dark:text-gulf-200' : 'bg-ink-700/5 text-ink-600 dark:bg-white/5 dark:text-ink-300')
+                (isSelected ? 'bg-gulf-500/20 text-gulf-700 dark:text-gulf-200' : 'bg-ink-700/5 text-ink-600 dark:bg-[rgb(var(--bg-elevated))] dark:text-ink-300')
               }>
                 <Cpu className="h-5 w-5" strokeWidth={1.7} aria-hidden />
               </span>
@@ -1823,7 +1822,7 @@ function SetupWizard() {
     <div className="space-y-6">
       <BackButton to="client_select_device" />
       <div className="text-center">
-        <span className="grid h-12 w-12 place-items-center rounded-2xl bg-gulf-500/15 text-gulf-700 mx-auto dark:text-gulf-300">
+        <span className="grid h-12 w-12 place-items-center rounded-lg bg-gulf-500/15 text-gulf-700 mx-auto dark:text-gulf-300">
           <Usb className="h-6 w-6" aria-hidden />
         </span>
         <h2 className="mt-5 font-display text-2xl font-semibold tracking-tight text-ink-900 dark:text-white">
@@ -1857,8 +1856,8 @@ function SetupWizard() {
                 type="button"
                 disabled={isProcessing}
                 onClick={handleSendTestPacket}
-                className="grid h-11 w-11 place-items-center rounded-2xl border bg-sand-400/10 text-sand-700 transition hover:bg-sand-400/20 disabled:opacity-50 dark:text-sand-300"
-                style={{ borderColor: 'rgb(var(--line) / 0.7)' }}
+                className="grid h-11 w-11 place-items-center rounded-lg border bg-sand-400/10 text-sand-700 transition hover:bg-sand-400/20 disabled:opacity-50 dark:text-sand-300"
+                style={{ borderColor: 'rgb(var(--line))' }}
                 aria-label="Send test packet"
               >
                 <Zap className="h-5 w-5" aria-hidden />
@@ -2008,7 +2007,6 @@ function SetupWizard() {
     <div className="space-y-6">
       <BackButton to="intro" />
       <div className="surface-strong relative overflow-hidden p-6 sm:p-8">
-        <div className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full bg-sand-400/20 blur-3xl" />
         <span className="eyebrow">
           <Wifi className="h-3.5 w-3.5" aria-hidden />
           MeshCore repeater
@@ -2043,21 +2041,21 @@ function SetupWizard() {
               onClick={() => selectDevice(d.id)}
               aria-pressed={isSelected}
               className={
-                'group relative flex flex-col items-center gap-2 rounded-2xl border p-5 text-center transition disabled:cursor-not-allowed disabled:opacity-45 ' +
+                'group relative flex flex-col items-center gap-2 rounded-lg border p-5 text-center transition disabled:cursor-not-allowed disabled:opacity-45 ' +
                 (isSelected
                   ? 'border-sand-400/60 bg-sand-400/10 shadow-[0_0_0_1px_rgba(249,162,40,0.3)_inset]'
-                  : 'bg-white/60 hover:-translate-y-0.5 hover:border-sand-400/50 dark:bg-white/5 ')
+                  : 'bg-[rgb(var(--bg-elevated))] hover:border-sand-400/50 ')
               }
-              style={!isSelected ? { borderColor: 'rgb(var(--line) / 0.7)' } : undefined}
+              style={!isSelected ? { borderColor: 'rgb(var(--line))' } : undefined}
             >
               {!d.supported && (
-                <span className="absolute right-2 top-2 rounded-full border bg-white/70 px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:border-white/10 dark:bg-white/5 dark:text-ink-400" style={{ borderColor: 'rgb(var(--line) / 0.6)' }}>
+                <span className="absolute right-2 top-2 rounded-full border bg-[rgb(var(--bg-elevated))] px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400" style={{ borderColor: 'rgb(var(--line))' }}>
                   Soon™
                 </span>
               )}
               <span className={
                 'grid h-10 w-10 place-items-center rounded-xl ' +
-                (isSelected ? 'bg-sand-400/25 text-sand-700 dark:text-sand-200' : 'bg-ink-700/5 text-ink-600 dark:bg-white/5 dark:text-ink-300')
+                (isSelected ? 'bg-sand-400/25 text-sand-700 dark:text-sand-200' : 'bg-ink-700/5 text-ink-600 dark:bg-[rgb(var(--bg-elevated))] dark:text-ink-300')
               }>
                 <Cpu className="h-5 w-5" strokeWidth={1.7} aria-hidden />
               </span>
@@ -2084,7 +2082,7 @@ function SetupWizard() {
     <div className="space-y-6">
       <BackButton to="repeater_select_device" />
       <div className="text-center">
-        <span className="grid h-12 w-12 place-items-center rounded-2xl bg-sand-400/20 text-sand-700 mx-auto dark:text-sand-300">
+        <span className="grid h-12 w-12 place-items-center rounded-lg bg-sand-400/20 text-sand-700 mx-auto dark:text-sand-300">
           <Usb className="h-6 w-6" aria-hidden />
         </span>
         <h2 className="mt-5 font-display text-2xl font-semibold tracking-tight text-ink-900 dark:text-white">
@@ -2120,8 +2118,8 @@ function SetupWizard() {
                 type="button"
                 disabled={isProcessing}
                 onClick={handleSendTestPacket}
-                className="grid h-11 w-11 place-items-center rounded-2xl border bg-sand-400/10 text-sand-700 transition hover:bg-sand-400/20 disabled:opacity-50 dark:text-sand-300"
-                style={{ borderColor: 'rgb(var(--line) / 0.7)' }}
+                className="grid h-11 w-11 place-items-center rounded-lg border bg-sand-400/10 text-sand-700 transition hover:bg-sand-400/20 disabled:opacity-50 dark:text-sand-300"
+                style={{ borderColor: 'rgb(var(--line))' }}
                 aria-label="Send test packet"
               >
                 <Zap className="h-5 w-5" aria-hidden />
@@ -2406,8 +2404,8 @@ function SetupWizard() {
         role="button"
         tabIndex={0}
         aria-label="Select repeater location on real map"
-        className={`${expanded ? 'h-[70vh]' : 'h-64'} relative w-full overflow-hidden rounded-2xl border bg-ink-200 ${isMapDragging ? 'cursor-grabbing' : 'cursor-grab'} touch-none select-none overscroll-contain focus:outline-none focus:ring-2 focus:ring-gulf-400 dark:bg-ink-900`}
-        style={{ borderColor: 'rgb(var(--line) / 0.7)', userSelect: 'none', WebkitUserSelect: 'none' }}
+        className={`${expanded ? 'h-[70vh]' : 'h-64'} relative w-full overflow-hidden rounded-lg border bg-ink-200 ${isMapDragging ? 'cursor-grabbing' : 'cursor-grab'} touch-none select-none overscroll-contain focus:outline-none focus:ring-2 focus:ring-gulf-400 dark:bg-ink-900`}
+        style={{ borderColor: 'rgb(var(--line))', userSelect: 'none', WebkitUserSelect: 'none' }}
       >
         {getMapTiles(expanded).map((tile) => (
           // eslint-disable-next-line @next/next/no-img-element
@@ -2420,8 +2418,7 @@ function SetupWizard() {
             style={{ left: `calc(50% + ${tile.left}px)`, top: `calc(50% + ${tile.top}px)` }}
           />
         ))}
-        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-ink-950/10" />
-        <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-white/95 px-2 py-1 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-700 shadow-sm dark:bg-ink-900/90 dark:text-ink-100">
+        <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-[rgb(var(--bg-elevated))] px-2 py-1 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-700 shadow-sm dark:text-ink-100">
           OpenStreetMap
         </span>
         {!expanded && (
@@ -2432,18 +2429,18 @@ function SetupWizard() {
               if (repeaterConfig.locationSet) setMapCenter({ lat: repeaterConfig.lat, lon: repeaterConfig.lon });
               setShowMapModal(true);
             }}
-            className="absolute right-3 top-3 grid h-8 w-8 place-items-center rounded-full bg-white/95 text-gulf-700 shadow-sm transition hover:bg-white dark:bg-ink-900/90 dark:text-gulf-300"
+            className="absolute right-3 top-3 grid h-8 w-8 place-items-center rounded-full bg-[rgb(var(--bg-elevated))] text-gulf-700 shadow-sm transition hover:bg-[rgb(var(--bg-sunken))] dark:text-gulf-300"
             aria-label="Maximize map"
           >
             <Maximize2 className="h-4 w-4" aria-hidden />
           </button>
         )}
-        <div className="absolute right-3 top-14 flex flex-col overflow-hidden rounded-xl bg-white/95 shadow-sm dark:bg-ink-900/90">
+        <div className="absolute right-3 top-14 flex flex-col overflow-hidden rounded-xl bg-[rgb(var(--bg-elevated))] shadow-sm">
           <button
             type="button"
             onPointerDown={(e) => e.stopPropagation()}
             onClick={() => setMapZoom((zoom) => clampMapZoom(zoom + 1))}
-            className="px-3 py-2 font-mono text-sm font-semibold text-ink-800 transition hover:bg-ink-100 dark:text-ink-100 dark:hover:bg-white/5"
+            className="px-3 py-2 font-mono text-sm font-semibold text-ink-800 transition hover:bg-ink-100 dark:text-ink-100"
             aria-label="Zoom in"
           >
             +
@@ -2452,13 +2449,13 @@ function SetupWizard() {
             type="button"
             onPointerDown={(e) => e.stopPropagation()}
             onClick={() => setMapZoom((zoom) => clampMapZoom(zoom - 1))}
-            className="border-t border-ink-200/60 px-3 py-2 font-mono text-sm font-semibold text-ink-800 transition hover:bg-ink-100 dark:border-white/10 dark:text-ink-100 dark:hover:bg-white/5"
+            className="border-t border-[rgb(var(--line))] px-3 py-2 font-mono text-sm font-semibold text-ink-800 transition hover:bg-ink-100 dark:text-ink-100"
             aria-label="Zoom out"
           >
             −
           </button>
         </div>
-        <span className="pointer-events-none absolute bottom-3 right-3 rounded-full bg-white/95 px-2 py-1 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-600 shadow-sm dark:bg-ink-900/90 dark:text-ink-300">
+        <span className="pointer-events-none absolute bottom-3 right-3 rounded-full bg-[rgb(var(--bg-elevated))] px-2 py-1 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-600 shadow-sm dark:text-ink-300">
           Drag to pan · scroll or +/− to zoom · click to place
         </span>
         {repeaterConfig.locationSet && (
@@ -2491,7 +2488,7 @@ function SetupWizard() {
         </div>
         <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-ink-200/60 dark:bg-white/10">
           <div
-            className="h-full rounded-full bg-gradient-to-r from-gulf-400 to-gulf-600 transition-all duration-300"
+            className="h-full rounded-full bg-gulf-600 transition-all duration-300 dark:bg-gulf-400"
             style={{ width: `${(settingsProgress.current / settingsProgress.total) * 100}%` }}
           />
         </div>
@@ -2526,8 +2523,8 @@ function SetupWizard() {
 
   const renderRepeaterConfig = () => {
     const inputClass =
-      'w-full rounded-xl border bg-white/80 px-3 py-3 text-sm text-ink-900 placeholder:text-ink-400 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:bg-ink-900/60 dark:text-white dark:placeholder:text-ink-500';
-    const inputBorder = { borderColor: 'rgb(var(--line) / 0.7)' };
+      'w-full rounded-xl border bg-[rgb(var(--bg-elevated))] px-3 py-3 text-sm text-ink-900 placeholder:text-ink-400 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:text-white dark:placeholder:text-ink-500';
+    const inputBorder = { borderColor: 'rgb(var(--line))' };
     return (
       <div className="space-y-5">
         <div className="text-center">
@@ -2607,8 +2604,8 @@ function SetupWizard() {
         />
 
         <div
-          className="rounded-xl border bg-white/60 px-3 py-2.5 dark:bg-white/5"
-          style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+          className="rounded-xl border bg-[rgb(var(--bg-elevated))] px-3 py-2.5"
+          style={{ borderColor: "rgb(var(--line))" }}
         >
           <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
             <p className="text-[11px] leading-relaxed text-ink-600 dark:text-ink-300">
@@ -2620,7 +2617,7 @@ function SetupWizard() {
               <select
                 value={repeaterConfig.codingRate}
                 onChange={(e) => setRepeaterConfig({ ...repeaterConfig, codingRate: e.target.value })}
-                className="rounded-lg border bg-white/80 px-2 py-1 text-xs font-medium text-ink-900 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:bg-ink-900/60 dark:text-white"
+                className="rounded-lg border bg-[rgb(var(--bg-elevated))] px-2 py-1 text-xs font-medium text-ink-900 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:text-white"
                 style={inputBorder}
               >
                 {[5, 6, 7, 8].map((rate) => (
@@ -2664,7 +2661,7 @@ function SetupWizard() {
 
   const renderRepeaterReady = () => (
     <div className="space-y-6 py-6 text-center">
-      <div className="mx-auto grid h-24 w-24 place-items-center rounded-full bg-gradient-to-br from-gulf-400 via-gulf-500 to-sand-400 text-ink-950 shadow-glow">
+      <div className="mx-auto grid h-24 w-24 place-items-center rounded-full bg-gulf-700 text-white dark:bg-gulf-500 dark:text-ink-950">
         <Wifi className="h-12 w-12" aria-hidden />
       </div>
       <h2 className="font-display text-3xl font-semibold tracking-tight text-ink-900 dark:text-white">
@@ -2750,19 +2747,18 @@ function SetupWizard() {
   };
 
   const inputClass =
-    'w-full rounded-xl border bg-white/80 px-3 py-3 text-sm text-ink-900 placeholder:text-ink-400 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:bg-ink-900/60 dark:text-white dark:placeholder:text-ink-500';
+    'w-full rounded-xl border bg-[rgb(var(--bg-elevated))] px-3 py-3 text-sm text-ink-900 placeholder:text-ink-400 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:text-white dark:placeholder:text-ink-500';
 
   return (
     <div className="container pb-24">
       <div className="mx-auto w-full max-w-2xl">
         <div className="surface-strong relative overflow-hidden">
-          <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gulf-400/60 to-transparent" />
           <div className="h-1.5 w-full bg-ink-100/70 dark:bg-white/5">
             <div
               className={`h-full transition-all duration-700 ease-in-out ${
                 step.startsWith('repeater')
-                  ? 'bg-gradient-to-r from-sand-400 to-sand-600'
-                  : 'bg-gradient-to-r from-gulf-400 to-gulf-600'
+                  ? 'bg-sand-500'
+                  : 'bg-gulf-600 dark:bg-gulf-400'
               }`}
               style={{ width: `${getProgress()}%` }}
             />
@@ -2782,7 +2778,7 @@ function SetupWizard() {
       {renderTerminal()}
 
       {showMapModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink-950/60 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label="Set repeater coordinates">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink-950/60 p-4" role="dialog" aria-modal="true" aria-label="Set repeater coordinates">
           <div className="surface-strong flex h-full max-h-[92vh] w-full max-w-6xl flex-col p-5">
             <div className="mb-4 flex items-center justify-between gap-4">
               <div>
@@ -2800,8 +2796,8 @@ function SetupWizard() {
               <button
                 type="button"
                 onClick={() => setShowMapModal(false)}
-                className="grid h-9 w-9 place-items-center rounded-full border bg-white/70 text-ink-600 transition hover:bg-white hover:text-ink-900 dark:border-white/10 dark:bg-white/5 dark:text-ink-300 dark:hover:bg-white/10"
-                style={{ borderColor: 'rgb(var(--line) / 0.7)' }}
+                className="grid h-9 w-9 place-items-center rounded-full border bg-[rgb(var(--bg-elevated))] text-ink-600 transition hover:bg-[rgb(var(--bg-sunken))] hover:text-ink-900 dark:text-ink-300"
+                style={{ borderColor: 'rgb(var(--line))' }}
                 aria-label="Close map"
               >
                 <X className="h-5 w-5" />
@@ -2817,7 +2813,7 @@ function SetupWizard() {
                   value={repeaterConfig.lat.toFixed(6)}
                   onChange={(e) => handleCoordinateChange('lat', e.target.value)}
                   className={`mt-1 ${inputClass}`}
-                  style={{ borderColor: 'rgb(var(--line) / 0.7)' }}
+                  style={{ borderColor: 'rgb(var(--line))' }}
                 />
               </label>
               <label className="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
@@ -2828,7 +2824,7 @@ function SetupWizard() {
                   value={repeaterConfig.lon.toFixed(6)}
                   onChange={(e) => handleCoordinateChange('lon', e.target.value)}
                   className={`mt-1 ${inputClass}`}
-                  style={{ borderColor: 'rgb(var(--line) / 0.7)' }}
+                  style={{ borderColor: 'rgb(var(--line))' }}
                 />
               </label>
               <button
diff --git a/components/docs-sidenav.tsx b/components/docs-sidenav.tsx
index 514c9fb..f401c8b 100644
--- a/components/docs-sidenav.tsx
+++ b/components/docs-sidenav.tsx
@@ -30,8 +30,8 @@ export function DocsSideNav({
           type="button"
           aria-expanded={open}
           onClick={() => setOpen((v) => !v)}
-          className="flex w-full items-center justify-between rounded-2xl border bg-white/70 px-4 py-3 text-left text-sm font-semibold text-ink-800 shadow-soft backdrop-blur-xl transition hover:bg-white dark:border-white/10 dark:bg-ink-900/60 dark:text-ink-100 dark:hover:bg-ink-900/80"
-          style={{ borderColor: "rgb(var(--line) / 0.6)" }}
+          className="flex w-full items-center justify-between rounded-lg border bg-[rgb(var(--bg-elevated))] px-4 py-3 text-left text-sm font-semibold text-ink-800 shadow-soft transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-100"
+          style={{ borderColor: "rgb(var(--line))" }}
         >
           <span className="inline-flex items-center gap-2">
             <BookOpen className="h-4 w-4 text-gulf-600 dark:text-gulf-300" aria-hidden />
@@ -43,8 +43,8 @@ export function DocsSideNav({
           />
         </button>
         {open ? (
-          <div className="mt-3 rounded-2xl border bg-white/80 p-4 shadow-soft backdrop-blur-xl dark:border-white/10 dark:bg-ink-900/60"
-               style={{ borderColor: "rgb(var(--line) / 0.6)" }}>
+          <div className="mt-3 rounded-lg border bg-[rgb(var(--bg-elevated))] p-4 shadow-soft"
+               style={{ borderColor: "rgb(var(--line))" }}>
             <NavList pathname={pathname} home={home} sections={sections} onNavigate={closeMobile} />
           </div>
         ) : null}
@@ -53,8 +53,8 @@ export function DocsSideNav({
       {/* Desktop sticky sidebar */}
       <aside className="hidden lg:block">
         <div className="sticky top-28">
-          <div className="rounded-2xl border bg-white/70 p-5 shadow-soft backdrop-blur-xl dark:border-white/10 dark:bg-ink-900/60"
-               style={{ borderColor: "rgb(var(--line) / 0.6)" }}>
+          <div className="rounded-lg border bg-[rgb(var(--bg-elevated))] p-5 shadow-soft"
+               style={{ borderColor: "rgb(var(--line))" }}>
             <p className="mb-3 inline-flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.22em] text-gulf-700 dark:text-gulf-300">
               <BookOpen className="h-3.5 w-3.5" aria-hidden />
               Documentation
@@ -137,7 +137,7 @@ function NavLink({
         "group flex items-center gap-2 rounded-xl px-3 py-2 text-sm transition " +
         (active
           ? "bg-gulf-500/10 font-semibold text-gulf-700 ring-1 ring-gulf-500/30 dark:bg-gulf-400/10 dark:text-gulf-200 dark:ring-gulf-400/30"
-          : "text-ink-700 hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:bg-white/5 dark:hover:text-white")
+          : "text-ink-700 hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:text-white")
       }
     >
       {icon ? <span className="text-gulf-600 dark:text-gulf-300">{icon}</span> : null}
diff --git a/components/live-map.tsx b/components/live-map.tsx
index 8512cf7..a1b08c1 100644
--- a/components/live-map.tsx
+++ b/components/live-map.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { ArrowUpRight, Compass, Loader2 } from "lucide-react";
+import { ArrowUpRight, Loader2 } from "lucide-react";
 import { useTheme } from "@/lib/theme";
 import { useHasMounted } from "@/lib/use-has-mounted";
 
@@ -23,6 +23,10 @@ type LiveMapProps = {
   aspect?: string;
   /** Whether to render a "Open ↗" link to the source URL. Defaults to true. */
   showOpenLink?: boolean;
+  /** Drop the card chrome (border, padding, header) and render only the
+   *  frame. Used when the caller already supplies a panel header, so the
+   *  page doesn't stack two headers on one map. */
+  bare?: boolean;
   /** Extra classes on the outer wrapper. */
   className?: string;
 };
@@ -35,6 +39,7 @@ export function LiveMap({
   sub,
   aspect = "aspect-[4/3] lg:aspect-[16/11]",
   showOpenLink = true,
+  bare = false,
   className = "",
 }: LiveMapProps) {
   const { theme } = useTheme();
@@ -59,101 +64,95 @@ export function LiveMap({
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  return (
-    <div className={"surface relative overflow-hidden p-3 sm:p-4 " + className}>
-      {/* Header */}
-      <div className="relative flex items-center justify-between gap-3 px-1 pb-3 pt-1">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
-            <Compass className="h-4 w-4" aria-hidden />
-          </span>
-          <div className="min-w-0">
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-ink-700 sm:tracking-[0.18em] dark:text-ink-100">
-              {label}
-            </p>
-            {sub ? (
-              <p className="text-[11px] leading-snug text-ink-500 dark:text-ink-400">{sub}</p>
-            ) : null}
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="inline-flex items-center gap-2 rounded-full border border-gulf-500/30 bg-gulf-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-gulf-700 dark:text-gulf-200">
-            <span className="relative flex h-1.5 w-1.5">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-500 opacity-60" />
-              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-500" />
-            </span>
-            LIVE
-          </span>
-          {showOpenLink ? (
-            <a
-              href={resolvedSrc}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-semibold text-ink-700 transition hover:border-gulf-400/50 hover:text-ink-900 dark:border-white/10 dark:text-ink-100 dark:hover:text-white"
-              style={{ borderColor: "rgb(var(--line) / 0.7)" }}
-              aria-label={`Open ${label} in a new tab`}
-            >
-              Open
-              <ArrowUpRight className="h-3 w-3 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden />
-            </a>
-          ) : null}
+  const frame = (
+    <div
+      className={"relative w-full overflow-hidden " + (bare ? "" : "rounded-lg border ") + aspect}
+      style={{
+        borderColor: bare ? undefined : "rgb(var(--line))",
+        background: "rgb(var(--bg-sunken))",
+      }}
+    >
+      {/* Skeleton / loading overlay */}
+      <div
+        aria-hidden
+        className={
+          "pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-500 " +
+          (loaded ? "opacity-0" : "opacity-100")
+        }
+      >
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Loader2 className="h-5 w-5 animate-spin text-ink-400" />
+          <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-500 dark:text-ink-400">
+            Connecting to the mesh…
+          </p>
         </div>
       </div>
 
-      {/* Frame */}
-      <div className={"relative w-full overflow-hidden rounded-xl border bg-ink-950/40 " + aspect}
-        style={{ borderColor: "rgb(var(--line) / 0.5)" }}
-      >
-        {/* Skeleton / loading overlay */}
-        <div
-          aria-hidden
+      {!errored && mounted ? (
+        <iframe
+          key={resolvedSrc}
+          ref={iframeRef}
+          src={resolvedSrc}
+          title={title}
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+          allow="geolocation; fullscreen"
+          onLoad={() => setLoaded(true)}
+          onError={() => setErrored(true)}
           className={
-            "pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-500 " +
-            (loaded ? "opacity-0" : "opacity-100")
+            "absolute inset-0 h-full w-full transition-opacity duration-500 " +
+            (loaded ? "opacity-100" : "opacity-0")
           }
-        >
-          <div className="absolute inset-0 bg-[radial-gradient(800px_400px_at_30%_20%,rgba(45,209,189,0.18),transparent_55%),radial-gradient(700px_360px_at_85%_80%,rgba(249,162,40,0.12),transparent_55%)]" />
-          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gulf-400/60 to-transparent" />
-          <div className="relative flex flex-col items-center gap-3 text-center">
-            <Loader2 className="h-5 w-5 animate-spin text-gulf-400" />
-            <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-ink-300">
-              Connecting to the mesh…
-            </p>
-          </div>
+        />
+      ) : errored ? (
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center">
+          <p className="font-display text-sm font-semibold text-ink-900 dark:text-white">
+            Couldn’t load the live map
+          </p>
+          <a href={resolvedSrc} target="_blank" rel="noopener noreferrer" className="btn-primary">
+            Open {label}
+            <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+          </a>
         </div>
+      ) : null}
+    </div>
+  );
 
-        {!errored && mounted ? (
-          <iframe
-            key={resolvedSrc}
-            ref={iframeRef}
-            src={resolvedSrc}
-            title={title}
-            loading="lazy"
-            referrerPolicy="no-referrer-when-downgrade"
-            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-            allow="geolocation; fullscreen"
-            onLoad={() => setLoaded(true)}
-            onError={() => setErrored(true)}
-            className={
-              "absolute inset-0 h-full w-full transition-opacity duration-700 " +
-              (loaded ? "opacity-100" : "opacity-0")
-            }
-          />
-        ) : errored ? (
-          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center">
-            <p className="font-display text-sm font-semibold text-ink-100">Couldn’t load the live map</p>
-            <a
-              href={resolvedSrc}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="btn-primary"
-            >
-              Open {label}
-              <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
-            </a>
-          </div>
+  if (bare) return <div className={className}>{frame}</div>;
+
+  return (
+    <div className={"surface overflow-hidden " + className}>
+      {/* Header */}
+      <div
+        className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b px-4 py-3"
+        style={{ borderColor: "rgb(var(--line))" }}
+      >
+        <div className="min-w-0">
+          <p className="flex items-center gap-2 text-sm font-semibold text-ink-900 dark:text-white">
+            <span className="relative flex h-1.5 w-1.5 shrink-0" aria-hidden>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-500 opacity-40" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-600 dark:bg-gulf-400" />
+            </span>
+            {label}
+          </p>
+          {sub ? <p className="mt-0.5 text-xs text-ink-500 dark:text-ink-400">{sub}</p> : null}
+        </div>
+        {showOpenLink ? (
+          <a
+            href={resolvedSrc}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group inline-flex shrink-0 items-center gap-1 text-xs font-semibold text-gulf-700 dark:text-gulf-300"
+            aria-label={`Open ${label} in a new tab`}
+          >
+            Open
+            <ArrowUpRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" aria-hidden />
+          </a>
         ) : null}
       </div>
+
+      <div className="p-3 sm:p-4">{frame}</div>
     </div>
   );
 }
diff --git a/components/meetings-calendar.tsx b/components/meetings-calendar.tsx
index c049eaf..ccd2444 100644
--- a/components/meetings-calendar.tsx
+++ b/components/meetings-calendar.tsx
@@ -102,7 +102,7 @@ export function MeetingsCalendar({ publishedByDateKey }: Props) {
         className="surface mt-10 p-6 sm:p-8"
         aria-label="Meetings calendar (loading)"
       >
-        <div className="h-[420px] animate-pulse rounded-2xl bg-ink-100/40 dark:bg-white/5" />
+        <div className="h-[420px] animate-pulse rounded-lg bg-ink-100/40 dark:bg-white/5" />
       </section>
     );
   }
@@ -154,16 +154,16 @@ function MountedCalendar({ publishedByDateKey }: Props) {
             type="button"
             onClick={goPrev}
             aria-label="Previous month"
-            className="inline-flex h-9 w-9 items-center justify-center rounded-xl border bg-white/70 text-ink-700 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-100 dark:hover:bg-white/10"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-xl border bg-[rgb(var(--bg-elevated))] text-ink-700 transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-100"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             <ChevronLeft className="h-4 w-4" aria-hidden />
           </button>
           <button
             type="button"
             onClick={goToday}
-            className="inline-flex h-9 items-center rounded-xl border bg-white/70 px-3 text-xs font-semibold text-ink-700 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-100 dark:hover:bg-white/10"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            className="inline-flex h-9 items-center rounded-xl border bg-[rgb(var(--bg-elevated))] px-3 text-xs font-semibold text-ink-700 transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-100"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             Today
           </button>
@@ -171,8 +171,8 @@ function MountedCalendar({ publishedByDateKey }: Props) {
             type="button"
             onClick={goNext}
             aria-label="Next month"
-            className="inline-flex h-9 w-9 items-center justify-center rounded-xl border bg-white/70 text-ink-700 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-100 dark:hover:bg-white/10"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-xl border bg-[rgb(var(--bg-elevated))] text-ink-700 transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-100"
+            style={{ borderColor: "rgb(var(--line))" }}
           >
             <ChevronRight className="h-4 w-4" aria-hidden />
           </button>
@@ -224,7 +224,7 @@ function CalendarCell({
     ? "border-gulf-400/40 bg-gulf-500/5 dark:border-gulf-400/30 dark:bg-gulf-500/10"
     : "";
   const inactiveBorder = !isMonday
-    ? "border-ink-200/60 bg-white/40 dark:border-white/10 dark:bg-white/[0.02]"
+    ? "border-[rgb(var(--line))] bg-[rgb(var(--bg-elevated))] dark:bg-white/[0.02]"
     : "";
 
   const inner = (
@@ -267,7 +267,7 @@ function CalendarCell({
         target="_blank"
         rel="noopener noreferrer"
         title={`Recap — ${published.dateLabel}`}
-        className={`${baseClass} ${mondayAccent} ${todayRing} ${mutedText} group cursor-pointer hover:-translate-y-0.5 hover:border-gulf-400/70 hover:bg-gulf-500/10`}
+        className={`${baseClass} ${mondayAccent} ${todayRing} ${mutedText} group cursor-pointer hover:border-gulf-400/70 hover:bg-gulf-500/10`}
       >
         {inner}
         <ArrowUpRight
diff --git a/components/mesh-monitor-lookup-section.tsx b/components/mesh-monitor-lookup-section.tsx
index 82820d3..6aff4b9 100644
--- a/components/mesh-monitor-lookup-section.tsx
+++ b/components/mesh-monitor-lookup-section.tsx
@@ -30,7 +30,7 @@ type LookupResponse = {
 type FormStatus = { type: "success" | "error"; text: string } | null;
 
 const inputWrap =
-  "mt-2 flex items-center gap-2 rounded-2xl border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:border-white/10 dark:bg-ink-900";
+ "mt-2 flex items-center gap-2 rounded-lg border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:bg-ink-900";
 const inputClass =
   "w-full bg-transparent py-3 text-sm text-ink-900 outline-none placeholder:text-ink-400 dark:text-white";
 const labelClass = "block font-display text-sm font-semibold text-ink-900 dark:text-white";
@@ -103,7 +103,6 @@ export function MeshMonitorLookupSection() {
 
   return (
     <div className="surface-strong relative overflow-hidden p-6 sm:p-8">
-      <div className="pointer-events-none absolute -left-12 -bottom-12 h-44 w-44 rounded-full bg-gulf-400/15 blur-3xl" />
       <h3 className="relative font-display text-lg font-semibold text-ink-900 dark:text-white">
         My prefixes
       </h3>
@@ -116,7 +115,7 @@ export function MeshMonitorLookupSection() {
           <label htmlFor="lookup_email" className={labelClass}>
             Email
           </label>
-          <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+          <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
             <input
               id="lookup_email"
               name="lookup_email"
@@ -133,7 +132,7 @@ export function MeshMonitorLookupSection() {
           <div
             role="status"
             className={
-              "rounded-2xl border p-4 text-sm font-medium " +
+ "rounded-lg border p-4 text-sm font-medium " +
               (status.type === "success"
                 ? "border-gulf-500/30 bg-gulf-500/10 text-gulf-800 dark:text-gulf-100"
                 : "border-coral-500/30 bg-coral-500/10 text-coral-700 dark:text-coral-200")
@@ -168,8 +167,8 @@ export function MeshMonitorLookupSection() {
             {results.reservations.map((r) => (
               <li
                 key={`${r.prefix}-${r.status}`}
-                className="rounded-2xl border p-4 dark:border-white/10"
-                style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+                className="rounded-lg border p-4"
+                style={{ borderColor: "rgb(var(--line))" }}
               >
                 <div className="flex flex-wrap items-center justify-between gap-2">
                   <div className="flex items-center gap-3">
diff --git a/components/mesh-monitor-reports-section.tsx b/components/mesh-monitor-reports-section.tsx
index 9a31b3a..4ee9a0d 100644
--- a/components/mesh-monitor-reports-section.tsx
+++ b/components/mesh-monitor-reports-section.tsx
@@ -128,8 +128,8 @@ export function MeshMonitorReportsSection({ ok, report }: Props) {
             ].map((b) => (
               <div
                 key={b.label}
-                className="rounded-xl border px-4 py-3 text-center dark:border-white/10"
-                style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+                className="rounded-xl border px-4 py-3 text-center"
+                style={{ borderColor: "rgb(var(--line))" }}
               >
                 <span className="font-display text-xl font-semibold text-ink-900 dark:text-white">
                   {fmtCount(b.value)}
diff --git a/components/mesh-monitor-reserve-form.tsx b/components/mesh-monitor-reserve-form.tsx
index fda1f25..b9e2768 100644
--- a/components/mesh-monitor-reserve-form.tsx
+++ b/components/mesh-monitor-reserve-form.tsx
@@ -13,7 +13,7 @@ type PrefixStatus = {
 type FormStatus = { type: "success" | "error"; text: string } | null;
 
 const inputWrap =
-  "mt-2 flex items-center gap-2 rounded-2xl border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:border-white/10 dark:bg-ink-900";
+ "mt-2 flex items-center gap-2 rounded-lg border bg-white px-3 py-1 focus-within:ring-2 focus-within:ring-gulf-400 dark:bg-ink-900";
 const inputClass =
   "w-full bg-transparent py-3 text-sm text-ink-900 outline-none placeholder:text-ink-400 dark:text-white";
 const labelClass = "block font-display text-sm font-semibold text-ink-900 dark:text-white";
@@ -131,7 +131,6 @@ export function MeshMonitorReserveForm() {
   return (
     <div className="grid gap-10 lg:grid-cols-[1fr_1fr] lg:items-start">
       <form onSubmit={handleReserve} className="surface-strong relative overflow-hidden p-6 sm:p-8">
-        <div className="pointer-events-none absolute -right-12 -top-12 h-44 w-44 rounded-full bg-gulf-400/20 blur-3xl" />
         <h3 className="relative font-display text-lg font-semibold text-ink-900 dark:text-white">
           New reservation
         </h3>
@@ -144,7 +143,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="prefix" className={labelClass}>
               Hex prefix <span className="font-normal text-ink-500">(4 characters)</span>
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input
                 id="prefix"
                 name="prefix"
@@ -180,7 +179,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="name" className={labelClass}>
               Repeater name
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input id="name" name="name" required className={inputClass} placeholder="My Repeater" />
             </div>
           </div>
@@ -189,7 +188,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="email" className={labelClass}>
               Email <span className="font-normal text-ink-500">(shared with coordinators only)</span>
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input
                 id="email"
                 name="email"
@@ -207,7 +206,7 @@ export function MeshMonitorReserveForm() {
               <label htmlFor="lat" className={labelClass}>
                 Latitude
               </label>
-              <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+              <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
                 <input
                   id="lat"
                   name="lat"
@@ -225,7 +224,7 @@ export function MeshMonitorReserveForm() {
               <label htmlFor="lon" className={labelClass}>
                 Longitude
               </label>
-              <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+              <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
                 <input
                   id="lon"
                   name="lon"
@@ -243,7 +242,7 @@ export function MeshMonitorReserveForm() {
               <label htmlFor="altitude" className={labelClass}>
                 Altitude (ft)
               </label>
-              <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+              <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
                 <input
                   id="altitude"
                   name="altitude"
@@ -261,7 +260,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="username" className={labelClass}>
               Your name <span className="font-normal text-ink-500">(optional)</span>
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input id="username" name="username" className={inputClass} placeholder="Operator name" />
             </div>
           </div>
@@ -270,7 +269,7 @@ export function MeshMonitorReserveForm() {
             <div
               role="status"
               className={
-                "rounded-2xl border p-4 text-sm font-medium " +
+ "rounded-lg border p-4 text-sm font-medium " +
                 (reserveStatus.type === "success"
                   ? "border-gulf-500/30 bg-gulf-500/10 text-gulf-800 dark:text-gulf-100"
                   : "border-coral-500/30 bg-coral-500/10 text-coral-700 dark:text-coral-200")
@@ -309,7 +308,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="release_prefix" className={labelClass}>
               Prefix
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input
                 id="release_prefix"
                 name="release_prefix"
@@ -326,7 +325,7 @@ export function MeshMonitorReserveForm() {
             <label htmlFor="release_email" className={labelClass}>
               Email
             </label>
-            <div className={inputWrap} style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
+            <div className={inputWrap} style={{ borderColor: "rgb(var(--line))" }}>
               <input
                 id="release_email"
                 name="release_email"
@@ -342,7 +341,7 @@ export function MeshMonitorReserveForm() {
             <div
               role="status"
               className={
-                "rounded-2xl border p-4 text-sm font-medium " +
+ "rounded-lg border p-4 text-sm font-medium " +
                 (releaseStatus.type === "success"
                   ? "border-gulf-500/30 bg-gulf-500/10 text-gulf-800 dark:text-gulf-100"
                   : "border-coral-500/30 bg-coral-500/10 text-coral-700 dark:text-coral-200")
diff --git a/components/mesh-monitor-section-nav.tsx b/components/mesh-monitor-section-nav.tsx
index 6ebe476..9aba48e 100644
--- a/components/mesh-monitor-section-nav.tsx
+++ b/components/mesh-monitor-section-nav.tsx
@@ -42,8 +42,8 @@ export function MeshMonitorSectionNav() {
   return (
     <nav
       aria-label="Mesh monitor sections"
-      className="sticky top-[5.5rem] z-40 -mx-4 mb-10 border-b bg-[rgb(var(--bg)/0.92)] px-4 py-3 backdrop-blur-xl sm:-mx-6 sm:px-6 dark:border-white/10"
-      style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+      className="sticky top-[5.5rem] z-40 -mx-4 mb-10 border-b bg-[rgb(var(--bg)/0.92)] px-4 py-3 sm:-mx-6 sm:px-6"
+      style={{ borderColor: "rgb(var(--line))" }}
     >
       <ul className="mx-auto flex max-w-3xl flex-wrap justify-center gap-2">
         {SECTIONS.map((s) => (
@@ -54,8 +54,8 @@ export function MeshMonitorSectionNav() {
               className={
                 "inline-flex rounded-full px-4 py-2 text-sm font-semibold transition " +
                 (active === s.id
-                  ? "bg-gradient-to-r from-gulf-400 via-gulf-500 to-gulf-600 text-ink-950 shadow-glow"
-                  : "text-ink-700 hover:bg-ink-100 dark:text-ink-200 dark:hover:bg-white/5")
+                  ? "bg-gulf-700 text-white dark:bg-gulf-500 dark:text-ink-950"
+                  : "text-ink-700 hover:bg-ink-100 dark:text-ink-200")
               }
             >
               {s.label}
diff --git a/components/network-report-table.tsx b/components/network-report-table.tsx
index 9669e4a..d8ce7c7 100644
--- a/components/network-report-table.tsx
+++ b/components/network-report-table.tsx
@@ -16,7 +16,7 @@ type Props = {
 export function NetworkReportTable({ rows, showClock = false, emptyMessage }: Props) {
   if (rows.length === 0) {
     return (
-      <p className="rounded-xl border border-dashed px-4 py-8 text-center text-sm text-ink-600 dark:border-white/10 dark:text-ink-300">
+      <p className="rounded-xl border border-dashed px-4 py-8 text-center text-sm text-ink-600 dark:text-ink-300">
         {emptyMessage}
       </p>
     );
@@ -26,7 +26,7 @@ export function NetworkReportTable({ rows, showClock = false, emptyMessage }: Pr
     <div className="table-wrap -mx-1 overflow-x-auto">
       <table className="w-full min-w-[640px] border-collapse text-left text-sm">
         <thead>
-          <tr className="border-b font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:border-white/10 dark:text-ink-400">
+          <tr className="border-b font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
             <th className="px-3 py-3">Name</th>
             <th className="px-3 py-3">Prefix</th>
             <th className="px-3 py-3">Last seen</th>
diff --git a/components/network-update-modal.tsx b/components/network-update-modal.tsx
index c1c6277..ad646b1 100644
--- a/components/network-update-modal.tsx
+++ b/components/network-update-modal.tsx
@@ -87,18 +87,18 @@ export function NetworkUpdateModal() {
         aria-label="Dismiss network update notice"
         onClick={dismiss}
         tabIndex={-1}
-        className="absolute inset-0 cursor-default bg-ink-950/70 backdrop-blur-sm"
+        className="absolute inset-0 cursor-default bg-ink-950/70"
       />
 
       <div
-        className="relative w-full max-w-lg overflow-hidden rounded-3xl border bg-white p-6 shadow-glow sm:p-7 dark:border-white/15 dark:bg-ink-800"
-        style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+        className="relative w-full max-w-lg overflow-hidden rounded-xl border bg-white p-6 shadow-lift sm:p-7 dark:bg-ink-800"
+        style={{ borderColor: "rgb(var(--line))" }}
       >
         <button
           type="button"
           onClick={dismiss}
           aria-label="Close"
-          className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-xl text-ink-500 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:bg-white/10 dark:hover:text-white"
+          className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-xl text-ink-500 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:text-white"
         >
           <X className="h-5 w-5" aria-hidden />
         </button>
@@ -171,7 +171,7 @@ export function NetworkUpdateModal() {
           <button
             type="button"
             onClick={dismiss}
-            className="ml-auto rounded-full px-3 py-2 text-sm font-medium text-ink-600 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:bg-white/10 dark:hover:text-white"
+            className="ml-auto rounded-full px-3 py-2 text-sm font-medium text-ink-600 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:text-white"
           >
             Dismiss
           </button>
diff --git a/components/next-meeting-card.tsx b/components/next-meeting-card.tsx
index 7d46c44..32cb99f 100644
--- a/components/next-meeting-card.tsx
+++ b/components/next-meeting-card.tsx
@@ -165,10 +165,9 @@ function Shell({
 }) {
   return (
     <section className="surface relative mt-12 overflow-hidden p-6 sm:p-8">
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-gulf-400/15 via-transparent to-sand-400/10" />
       <div className="relative flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-start gap-4">
-          <span className="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
+          <span className="grid h-12 w-12 shrink-0 place-items-center rounded-lg bg-gulf-500/15 text-gulf-700 dark:text-gulf-300">
             <CalendarClock className="h-6 w-6" aria-hidden />
           </span>
           <div className="min-w-0">
diff --git a/components/settings-change-banner.tsx b/components/settings-change-banner.tsx
index 9e34fd6..00a94a8 100644
--- a/components/settings-change-banner.tsx
+++ b/components/settings-change-banner.tsx
@@ -9,7 +9,7 @@ export function SettingsChangeBanner() {
       <div
         role="note"
         className="mx-auto flex max-w-6xl items-start gap-2.5 rounded-xl border border-sand-400/40 bg-sand-400/10 px-4 py-2.5 text-sm text-ink-700 sm:items-center sm:justify-center sm:text-center dark:text-ink-200"
-        style={{ borderColor: "rgb(var(--line) / 0.5)" }}
+        style={{ borderColor: "rgb(var(--line))" }}
       >
         <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-sand-700 sm:mt-0 dark:text-sand-300" aria-hidden />
         <p>
diff --git a/components/setup-firmware-version.tsx b/components/setup-firmware-version.tsx
index 3f7958d..42f7a35 100644
--- a/components/setup-firmware-version.tsx
+++ b/components/setup-firmware-version.tsx
@@ -24,7 +24,7 @@ export function FirmwareVersionPicker({
   onSelectedVersionChange,
 }: FirmwareVersionPickerProps) {
   const inputClass =
-    "w-full rounded-xl border bg-white/80 px-3 py-2.5 text-sm text-ink-900 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:bg-ink-900/60 dark:text-white";
+ "w-full rounded-xl border bg-[rgb(var(--bg-elevated))] px-3 py-2.5 text-sm text-ink-900 outline-none transition focus:border-gulf-400 focus:ring-2 focus:ring-gulf-400/40 dark:text-white";
 
   return (
     <div className="surface p-4 sm:p-5">
@@ -47,7 +47,7 @@ export function FirmwareVersionPicker({
 
       {!loading && versions.length > 0 ? (
         <div className="mt-4 space-y-3">
-          <label className="flex cursor-pointer items-start gap-3 rounded-xl border px-3 py-2.5 transition hover:border-gulf-400/40 dark:border-white/10">
+          <label className="flex cursor-pointer items-start gap-3 rounded-xl border px-3 py-2.5 transition hover:border-gulf-400/40 ">
             <input
               type="radio"
               name="firmware-version-mode"
@@ -63,7 +63,7 @@ export function FirmwareVersionPicker({
             </span>
           </label>
 
-          <label className="flex cursor-pointer items-start gap-3 rounded-xl border px-3 py-2.5 transition hover:border-gulf-400/40 dark:border-white/10">
+          <label className="flex cursor-pointer items-start gap-3 rounded-xl border px-3 py-2.5 transition hover:border-gulf-400/40 ">
             <input
               type="radio"
               name="firmware-version-mode"
@@ -81,7 +81,7 @@ export function FirmwareVersionPicker({
                   onSelectedVersionChange(e.target.value);
                 }}
                 className={`mt-2 ${inputClass}`}
-                style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+                style={{ borderColor: "rgb(var(--line))" }}
               >
                 {versions.map((version) => (
                   <option key={version} value={version}>
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index ba659c8..b6468a3 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -1,105 +1,133 @@
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowUpRight, Coffee, Heart, Mail } from "lucide-react";
+import { Coffee, Mail } from "lucide-react";
 import { partners } from "@/lib/partners";
 
 const supporters = ["ma7", "n5msy", "talwah", "simon", "kyra", "terry", "mike", "rg3120", "Mike Baldwin"];
 
+const explore: Array<{ label: string; href: string; external?: boolean }> = [
+  { label: "Live maps", href: "/meshmap" },
+  { label: "Setup wizard", href: "/setup" },
+  { label: "Documentation", href: "/docs" },
+  { label: "Mesh monitoring", href: "/mesh-monitor" },
+  { label: "Meetings", href: "/meetings" },
+  { label: "Newsletter", href: "/emailsignup" },
+];
+
+const community: Array<{ label: string; href: string; external?: boolean }> = [
+  { label: "Discord", href: "https://discord.gulfcoastmesh.org", external: true },
+  { label: "Facebook group", href: "https://www.facebook.com/groups/gulfcoastmesh", external: true },
+  { label: "GitHub", href: "https://github.com/GulfCoastMesh", external: true },
+  { label: "MkDocs site", href: "https://docs.gulfcoastmesh.org", external: true },
+  { label: "Transparency", href: "/docs/transparency" },
+  { label: "Privacy policy", href: "/privacy" },
+];
+
+const linkClass =
+  "text-sm text-ink-600 transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-white";
+
+function FooterLink({ label, href, external }: { label: string; href: string; external?: boolean }) {
+  return external ? (
+    <a href={href} target="_blank" rel="noopener noreferrer" className={linkClass}>
+      {label}
+    </a>
+  ) : (
+    <Link href={href} className={linkClass}>
+      {label}
+    </Link>
+  );
+}
+
 export function SiteFooter() {
   return (
-    <footer className="relative mt-24 border-t border-ink-200/60 dark:border-white/10">
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gulf-400/60 to-transparent" />
-      <div className="container py-16 sm:py-20">
-        <div className="grid gap-12 lg:grid-cols-[1.3fr_1fr_1fr]">
-          <div>
-            <Link href="/" className="inline-flex items-center gap-3">
-              <img src="/logo.svg" alt="" className="h-10 w-10 rounded-xl shadow-glow" />
-              <span className="font-display text-lg font-semibold tracking-tight text-ink-900 dark:text-white">
+    <footer className="border-t" style={{ borderColor: "rgb(var(--line))" }}>
+      <div className="container py-14">
+        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-4">
+          <div className="lg:pr-6">
+            <Link href="/" className="inline-flex items-center gap-2.5">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src="/logo.svg" alt="" className="h-8 w-8" />
+              <span className="font-display text-base font-semibold tracking-tight text-ink-900 dark:text-white">
                 Gulf Coast Mesh
               </span>
             </Link>
-            <p className="mt-5 max-w-sm text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-              A volunteer mesh-network community spanning the entire US Gulf Coast — from South Texas to the Florida
-              Panhandle. Open hardware, open docs, real neighbors.
+            <p className="mt-4 max-w-sm text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+              A volunteer, non-profit mesh-network community spanning the US Gulf Coast, from South Texas to the
+              Florida Panhandle.
             </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <a
-                href="mailto:contact@louisianamesh.org"
-                className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium text-gulf-700 transition hover:bg-gulf-50 dark:border-white/10 dark:text-gulf-300 dark:hover:bg-white/5"
-                style={{ borderColor: "rgb(var(--line) / 0.7)" }}
-              >
-                <Mail className="h-3.5 w-3.5" aria-hidden />
-                contact@louisianamesh.org
-              </a>
-              <a
-                href="https://github.com/GulfCoastMesh/Website"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium text-ink-700 transition hover:bg-ink-50 dark:border-white/10 dark:text-ink-200 dark:hover:bg-white/5"
-                style={{ borderColor: "rgb(var(--line) / 0.7)" }}
-              >
-                Source on GitHub
-                <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
-              </a>
-            </div>
+            <a
+              href="mailto:support@gulfcoastmesh.org"
+              className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gulf-700 dark:text-gulf-300"
+            >
+              <Mail className="h-4 w-4" aria-hidden />
+              support@gulfcoastmesh.org
+            </a>
           </div>
 
+          <nav aria-label="Explore">
+            <h2 className="text-xs font-semibold uppercase tracking-[0.1em] text-ink-500 dark:text-ink-400">
+              Explore
+            </h2>
+            <ul className="mt-4 space-y-2.5">
+              {explore.map((l) => (
+                <li key={l.label}>
+                  <FooterLink {...l} />
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <nav aria-label="Community">
+            <h2 className="text-xs font-semibold uppercase tracking-[0.1em] text-ink-500 dark:text-ink-400">
+              Community
+            </h2>
+            <ul className="mt-4 space-y-2.5">
+              {community.map((l) => (
+                <li key={l.label}>
+                  <FooterLink {...l} />
+                </li>
+              ))}
+            </ul>
+          </nav>
+
           <div>
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-500 dark:text-ink-400">
-              Supporters
-            </p>
-            <p className="mt-3 inline-flex items-center gap-2 text-sm text-ink-600 dark:text-ink-300">
-              <Heart className="h-4 w-4 text-coral-500" aria-hidden />
-              Keeping the network alive.
+            <h2 className="text-xs font-semibold uppercase tracking-[0.1em] text-ink-500 dark:text-ink-400">
+              Support
+            </h2>
+            <p className="mt-4 text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+              The network runs on donated time, hardware, and rooftops.
             </p>
-            <div className="mt-5 flex flex-wrap gap-1.5">
-              {supporters.map((name) => (
-                <span
-                  key={name}
-                  className="rounded-full border px-2.5 py-1 text-xs font-medium text-ink-700 dark:border-white/10 dark:text-ink-100"
-                  style={{ borderColor: "rgb(var(--line) / 0.7)" }}
-                >
-                  {name}
-                </span>
-              ))}
-            </div>
             <a
               href="https://ko-fi.com/gulfcoastmesh"
               target="_blank"
               rel="noopener noreferrer"
-              className="group mt-5 inline-flex items-center gap-2 rounded-full border border-coral-500/30 bg-coral-500/5 px-3 py-1.5 text-xs font-medium text-coral-500 transition hover:border-coral-500/50 hover:bg-coral-500/10"
+              className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gulf-700 dark:text-gulf-300"
             >
-              <Coffee className="h-3.5 w-3.5" aria-hidden />
+              <Coffee className="h-4 w-4" aria-hidden />
               Buy us a coffee
-              <ArrowUpRight className="h-3 w-3 opacity-60 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:opacity-100" aria-hidden />
             </a>
-            <p className="mt-2 text-[11px] text-ink-500 dark:text-ink-400">
-              Every coffee helps.
-            </p>
-          </div>
 
-          <div className="lg:text-right">
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-500 dark:text-ink-400">
+            <h3 className="mt-8 text-xs font-semibold uppercase tracking-[0.1em] text-ink-500 dark:text-ink-400">
               Partners
-            </p>
-            <p className="mt-3 text-sm text-ink-600 dark:text-ink-300">
-              Thanks to these businesses for helping us with the mesh.
-            </p>
-            <div className="mt-5 flex flex-wrap gap-3 lg:justify-end">
+            </h3>
+            <div className="mt-4 flex flex-wrap items-center gap-4">
               {partners.map((partner) => (
+                // Partner artwork is supplied as-is (one is an opaque JPEG),
+                // so it sits on a light chip in both themes rather than being
+                // inverted — inverting flattened the JPEG to a white block.
                 <a
                   key={partner.name}
                   href={partner.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="surface inline-flex items-center px-4 py-3 transition hover:-translate-y-0.5"
+                  className="inline-flex items-center rounded-md bg-white px-3 py-2 ring-1 ring-ink-200 transition-opacity hover:opacity-80"
                 >
                   <Image
                     src={partner.logo}
                     alt={partner.name}
                     width={partner.logoWidth}
                     height={partner.logoHeight}
-                    className="h-8 w-auto dark:brightness-0 dark:invert"
+                    className="h-6 w-auto"
                   />
                 </a>
               ))}
@@ -107,35 +135,20 @@ export function SiteFooter() {
           </div>
         </div>
 
-        <div className="hairline mt-14" />
-        <div className="mt-8 flex flex-col items-center justify-between gap-4 text-center text-xs text-ink-500 dark:text-ink-400 sm:flex-row sm:text-left">
-          <p className="font-mono">© {new Date().getFullYear()} Gulf Coast Mesh Community</p>
-          <div className="flex flex-wrap items-center justify-center gap-5 font-medium text-ink-600 dark:text-ink-300">
-            <Link href="/meshmap" className="hover:text-ink-900 dark:hover:text-white">
-              Live maps
-            </Link>
-            <Link href="/emailsignup" className="hover:text-ink-900 dark:hover:text-white">
-              Newsletter
-            </Link>
-            <Link href="/docs" className="hover:text-ink-900 dark:hover:text-white">
-              Docs
-            </Link>
-            <a
-              href="https://docs.gulfcoastmesh.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-ink-900 dark:hover:text-white"
-            >
-              MkDocs site
-            </a>
-            <Link href="/docs/transparency" className="hover:text-ink-900 dark:hover:text-white">
-              Transparency
-            </Link>
-            <Link href="/privacy" className="hover:text-ink-900 dark:hover:text-white">
-              Privacy Policy
-            </Link>
-          </div>
+        <div className="hairline mt-12" />
+
+        <div className="mt-6">
+          <h2 className="text-xs font-semibold uppercase tracking-[0.1em] text-ink-500 dark:text-ink-400">
+            Supporters
+          </h2>
+          <p className="mt-3 text-sm text-ink-600 dark:text-ink-300">
+            {supporters.join(" · ")}
+          </p>
         </div>
+
+        <p className="mt-8 text-xs text-ink-500 dark:text-ink-400">
+          © {new Date().getFullYear()} Gulf Coast Mesh Community
+        </p>
       </div>
     </footer>
   );
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 4e130fb..130dd24 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -7,109 +7,86 @@ import { ThemeToggle } from "@/components/theme-toggle";
 
 type NavItem = { label: string; href: string; external?: boolean };
 
+// Six destinations, ordered by how most visitors arrive: see the network,
+// then build a node, then read up, then get involved.
 const nav: readonly NavItem[] = [
-  { label: "Network", href: "/#network" },
   { label: "Maps", href: "/meshmap" },
-  { label: "Meetings", href: "/meetings" },
   { label: "Setup", href: "/setup" },
-  { label: "Mesh monitoring", href: "/mesh-monitor" },
-  { label: "Newsletter", href: "/emailsignup" },
   { label: "Docs", href: "/docs" },
+  { label: "Monitoring", href: "/mesh-monitor" },
+  { label: "Meetings", href: "/meetings" },
+  { label: "Newsletter", href: "/emailsignup" },
 ];
 
+const linkClass =
+  "rounded-md px-3 py-2 text-sm font-medium text-ink-600 transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-white";
+
 export function SiteHeader() {
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 24);
+    const onScroll = () => setScrolled(window.scrollY > 8);
     onScroll();
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
   return (
-    <header className="pointer-events-none fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6 sm:pt-5">
-      <div
-        className={
-          "pointer-events-auto mx-auto flex max-w-6xl items-center justify-between gap-3 rounded-2xl border px-3 py-2.5 backdrop-blur-2xl transition-all duration-300 sm:px-4 " +
-          (scrolled
-            ? "border-ink-200/70 bg-white/80 shadow-soft dark:border-white/10 dark:bg-ink-950/70"
-            : "border-transparent bg-white/40 dark:bg-ink-950/30")
-        }
-      >
+    <header
+      className={
+        "sticky top-0 z-50 border-b bg-[rgb(var(--bg))] transition-shadow " +
+        (scrolled ? "shadow-soft" : "")
+      }
+      style={{ borderColor: "rgb(var(--line))" }}
+    >
+      <div className="container flex h-16 items-center justify-between gap-4">
         <Link
           href="/"
-          className="group flex min-w-0 items-center gap-3 rounded-xl px-1.5 py-1 font-display text-[15px] font-semibold tracking-tight"
+          className="flex min-w-0 items-center gap-2.5 font-display text-[15px] font-semibold tracking-tight text-ink-900 dark:text-white"
           aria-label="Gulf Coast Mesh — home"
         >
-          <img src="/logo.svg" alt="" className="h-9 w-9 rounded-lg" />
-          <span className="hidden text-ink-900 dark:text-white min-[420px]:inline">
-            Gulf Coast <span className="font-normal text-ink-500 dark:text-ink-300/80">Mesh</span>
-          </span>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src="/logo.svg" alt="" className="h-8 w-8" />
+          <span className="hidden min-[420px]:inline">Gulf Coast Mesh</span>
         </Link>
 
-        <nav className="hidden items-center gap-0.5 lg:flex" aria-label="Primary">
-          {nav.map((item) =>
-            item.external ? (
-              <a
-                key={item.label}
-                href={item.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="rounded-full px-3 py-2 text-sm font-medium text-ink-700 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:bg-white/5 dark:hover:text-white"
-              >
-                {item.label}
-              </a>
-            ) : (
-              <Link
-                key={item.label}
-                href={item.href}
-                className="rounded-full px-3 py-2 text-sm font-medium text-ink-700 transition hover:bg-ink-100 hover:text-ink-900 dark:text-ink-200 dark:hover:bg-white/5 dark:hover:text-white"
-              >
-                {item.label}
-              </Link>
-            ),
-          )}
+        <nav className="hidden items-center lg:flex" aria-label="Primary">
+          {nav.map((item) => (
+            <Link key={item.label} href={item.href} className={linkClass}>
+              {item.label}
+            </Link>
+          ))}
         </nav>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
           <a
             href="https://github.com/GulfCoastMesh"
             target="_blank"
             rel="noopener noreferrer"
-            className="hidden h-10 w-10 items-center justify-center rounded-xl border bg-white/70 text-ink-800 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-50 dark:hover:bg-white/10 lg:inline-flex"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            className="hidden h-9 w-9 items-center justify-center rounded-md text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-white lg:inline-flex"
             aria-label="GitHub"
           >
             <Github className="h-[18px] w-[18px]" aria-hidden />
           </a>
           <ThemeToggle />
-          <div className="hidden items-center gap-2 sm:flex">
-            <a
-              href="https://discord.gulfcoastmesh.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-xl bg-gradient-to-r from-gulf-400 via-gulf-500 to-gulf-600 px-4 py-2 text-sm font-semibold text-ink-950 shadow-glow transition hover:brightness-110"
-            >
-              Join Discord
-            </a>
-            <a
-              href="https://www.facebook.com/groups/gulfcoastmesh"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-xl bg-gradient-to-r from-sand-300 via-sand-400 to-sand-500 px-4 py-2 text-sm font-semibold text-ink-950 shadow-glow-sand transition hover:brightness-110"
-            >
-              Join the Facebook
-            </a>
-          </div>
+          {/* One primary action in the bar. Facebook and the rest of the
+              community links live in the hero and the footer. */}
+          <a
+            href="https://discord.gulfcoastmesh.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-primary hidden px-4 py-2 sm:inline-flex"
+          >
+            Join Discord
+          </a>
           <button
             type="button"
             onClick={() => setOpen((v) => !v)}
             aria-expanded={open}
-            aria-label="Open menu"
-            className="inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-white/70 text-ink-800 dark:border-white/10 dark:bg-white/5 dark:text-ink-50 lg:hidden"
-            style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+            aria-label={open ? "Close menu" : "Open menu"}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-md border text-ink-700 dark:text-ink-100 lg:hidden"
+            style={{ borderColor: "rgb(var(--line-strong))" }}
           >
             {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
           </button>
@@ -117,57 +94,34 @@ export function SiteHeader() {
       </div>
 
       {open ? (
-        <div className="pointer-events-auto mx-auto mt-3 max-w-6xl rounded-2xl border bg-white/95 p-3 shadow-soft backdrop-blur-2xl dark:border-white/10 dark:bg-ink-950/95 lg:hidden"
-             style={{ borderColor: "rgb(var(--line) / 0.7)" }}>
-          <nav className="flex flex-col gap-1" aria-label="Mobile">
+        <div className="border-t lg:hidden" style={{ borderColor: "rgb(var(--line))" }}>
+          <nav className="container flex flex-col py-2" aria-label="Mobile">
             <Link
               href="/"
-              className="rounded-xl px-3 py-3 text-base font-medium text-ink-800 hover:bg-ink-100 dark:text-ink-100 dark:hover:bg-white/5"
+              className="rounded-md px-1 py-3 text-base font-medium text-ink-700 dark:text-ink-100"
               onClick={() => setOpen(false)}
             >
               Home
             </Link>
-            {nav.map((item) =>
-              item.external ? (
-                <a
-                  key={item.label}
-                  href={item.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-xl px-3 py-3 text-base font-medium text-ink-800 hover:bg-ink-100 dark:text-ink-100 dark:hover:bg-white/5"
-                  onClick={() => setOpen(false)}
-                >
-                  {item.label}
-                </a>
-              ) : (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  className="rounded-xl px-3 py-3 text-base font-medium text-ink-800 hover:bg-ink-100 dark:text-ink-100 dark:hover:bg-white/5"
-                  onClick={() => setOpen(false)}
-                >
-                  {item.label}
-                </Link>
-              ),
-            )}
+            {nav.map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className="rounded-md px-1 py-3 text-base font-medium text-ink-700 dark:text-ink-100"
+                onClick={() => setOpen(false)}
+              >
+                {item.label}
+              </Link>
+            ))}
             <a
               href="https://discord.gulfcoastmesh.org"
               target="_blank"
               rel="noopener noreferrer"
-              className="mt-1 rounded-xl bg-gradient-to-r from-gulf-400 to-gulf-600 px-3 py-3 text-center text-base font-semibold text-ink-950"
+              className="btn-primary my-3 sm:hidden"
               onClick={() => setOpen(false)}
             >
               Join Discord
             </a>
-            <a
-              href="https://www.facebook.com/groups/gulfcoastmesh"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-xl bg-gradient-to-r from-sand-300 to-sand-500 px-3 py-3 text-center text-base font-semibold text-ink-950"
-              onClick={() => setOpen(false)}
-            >
-              Join the Facebook
-            </a>
           </nav>
         </div>
       ) : null}
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 3c90203..8ba60b0 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -13,10 +13,10 @@ export function ThemeToggle({ className = "" }: { className?: string }) {
       aria-label="Toggle color theme"
       aria-pressed={theme === "dark"}
       className={
-        "inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-white/70 text-ink-800 transition hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-ink-50 dark:hover:bg-white/10 " +
+ "inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-[rgb(var(--bg-elevated))] text-ink-800 transition hover:bg-[rgb(var(--bg-sunken))] dark:text-ink-50 " +
         className
       }
-      style={{ borderColor: "rgb(var(--line) / 0.7)" }}
+      style={{ borderColor: "rgb(var(--line))" }}
     >
       {/* Both icons render identically on server + client; CSS toggles them
           based on the `.dark` class already set pre-paint by the theme script.
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 916b241..633c9be 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,12 +12,12 @@ const config: Config = {
     container: {
       center: true,
       padding: {
-        DEFAULT: "1rem",
-        sm: "1.5rem",
-        lg: "2rem",
+        DEFAULT: "1.25rem",
+        sm: "2rem",
+        lg: "2.5rem",
       },
       screens: {
-        "2xl": "1280px",
+        "2xl": "1200px",
       },
     },
     extend: {
@@ -27,83 +27,79 @@ const config: Config = {
         mono: ["var(--font-mono)", "ui-monospace", "monospace"],
       },
       colors: {
+        // Neutral slate. Carries almost the whole page; the accent is a guest.
+        // Navy-tinted neutral, drawn from the logo's deep hull navies
+        // (#061c2c / #082638 / #123c54) so the greys read as brand, not grey.
         ink: {
-          50: "#f4f7fb",
-          100: "#e6eef7",
-          200: "#c8d6e6",
-          300: "#9eb5ce",
-          400: "#6a87a8",
-          500: "#476485",
-          600: "#324c69",
-          700: "#1f3450",
-          800: "#0e1f33",
-          900: "#06121f",
-          950: "#03080f",
+          50: "#f4f8fa",
+          100: "#e4eef4",
+          200: "#c7dae5",
+          300: "#9dbbcd",
+          400: "#6d92aa",
+          500: "#4e7288",
+          600: "#3b5a6e",
+          700: "#2d4757",
+          800: "#1d3446",
+          900: "#0c2436",
+          950: "#061a28",
         },
+        // The brand accent, taken straight off the logo: bright cyan-teal
+        // (#49c7cc) and mint (#6ed7c8) at the light end, the logo's deep teal
+        // (#0d6070) and hull navies at the dark end. 700 passes AA on white,
+        // 300 passes AA on the dark page, so links stay legible in both.
         gulf: {
-          50: "#ecfdfa",
-          100: "#cffaf2",
-          200: "#9ef3e5",
-          300: "#65e6d3",
-          400: "#2dd1bd",
-          500: "#11b6a4",
-          600: "#089285",
-          700: "#0a746b",
-          800: "#0c5c56",
-          900: "#0c4c48",
-          950: "#022b2a",
+          50: "#eafffb",
+          100: "#c8f4ec",
+          200: "#9aeade",
+          300: "#6ed7c8",
+          400: "#49c7cc",
+          500: "#22aab4",
+          600: "#128a97",
+          700: "#0d6070",
+          800: "#123c54",
+          900: "#082638",
+          950: "#061c2c",
         },
+        // Status only (advisory notices, "coming soon"), never decoration.
         sand: {
-          50: "#fff8ec",
-          100: "#feedc8",
-          200: "#fdd98c",
-          300: "#fbbd50",
-          400: "#f9a228",
-          500: "#f3820f",
-          600: "#d76208",
-          700: "#b34509",
-          800: "#92370e",
-          900: "#782e0f",
+          50: "#fdf8ef",
+          100: "#faedd4",
+          200: "#f4d9a6",
+          300: "#ebbe6f",
+          400: "#e0a244",
+          500: "#cc8424",
+          600: "#a9651b",
+          700: "#864d1a",
+          800: "#6e3f1c",
+          900: "#5c351a",
         },
         coral: {
-          400: "#ff6f6f",
-          500: "#ef4f4f",
+          400: "#e07070",
+          500: "#c94f4f",
+          600: "#a63c3c",
         },
       },
+      // Restrained scale. The old display-2xl topped out at 100px; a public
+      // information site reads better when the headline is confident, not loud.
       fontSize: {
-        "display-2xl": ["clamp(3rem, 7vw + 1rem, 6.25rem)", { lineHeight: "0.95", letterSpacing: "-0.04em" }],
-        "display-xl": ["clamp(2.5rem, 5vw + 1rem, 4.5rem)", { lineHeight: "1", letterSpacing: "-0.035em" }],
-        "display-lg": ["clamp(2rem, 3vw + 1rem, 3rem)", { lineHeight: "1.05", letterSpacing: "-0.03em" }],
+        "display-xl": ["clamp(2.25rem, 3.5vw + 1rem, 3.5rem)", { lineHeight: "1.08", letterSpacing: "-0.025em" }],
+        "display-lg": ["clamp(1.75rem, 2vw + 1rem, 2.5rem)", { lineHeight: "1.15", letterSpacing: "-0.02em" }],
+        "display-md": ["clamp(1.375rem, 1vw + 1rem, 1.75rem)", { lineHeight: "1.25", letterSpacing: "-0.015em" }],
       },
       boxShadow: {
-        glow: "0 30px 80px -30px rgba(17, 182, 164, 0.55)",
-        "glow-sand": "0 30px 80px -30px rgba(249, 162, 40, 0.45)",
-        soft: "0 1px 2px rgba(15,32,51,0.05), 0 8px 24px -8px rgba(15,32,51,0.08)",
+        // One shadow, used rarely — for things that genuinely float (menus,
+        // modals, the sticky header once it detaches from the top).
+        soft: "0 1px 2px rgba(13, 19, 24, 0.04), 0 8px 24px -12px rgba(13, 19, 24, 0.12)",
+        lift: "0 2px 4px rgba(13, 19, 24, 0.05), 0 16px 40px -16px rgba(13, 19, 24, 0.2)",
       },
       keyframes: {
         "fade-up": {
-          "0%": { opacity: "0", transform: "translateY(12px)" },
+          "0%": { opacity: "0", transform: "translateY(6px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-        "pulse-ring": {
-          "0%": { transform: "scale(0.6)", opacity: "0.8" },
-          "80%": { transform: "scale(2.2)", opacity: "0" },
-          "100%": { transform: "scale(2.2)", opacity: "0" },
-        },
-        "drift": {
-          "0%, 100%": { transform: "translate3d(0,0,0)" },
-          "50%": { transform: "translate3d(0,-14px,0)" },
-        },
-        "shimmer": {
-          "0%": { backgroundPosition: "200% 0" },
-          "100%": { backgroundPosition: "-200% 0" },
-        },
       },
       animation: {
-        "fade-up": "fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both",
-        "pulse-ring": "pulse-ring 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite",
-        "drift": "drift 14s ease-in-out infinite",
-        "shimmer": "shimmer 6s linear infinite",
+        "fade-up": "fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both",
       },
     },
   },

From 76e3b344d244e3b92891527dbd386f0f81bce8f9 Mon Sep 17 00:00:00 2001
From: Cloud Hayes <Cloud@gproconnect.com>
Date: Sat, 5 Sep 2026 13:01:35 -0500
Subject: [PATCH 4/6] cleans up ui

---
 NOTES.md                 |  39 ++--
 app/docs/[slug]/page.tsx |   3 -
 app/docs/page.tsx        |   2 -
 app/emailsignup/page.tsx |  10 +-
 app/globals.css          |  73 ++++----
 app/layout.tsx           |  11 +-
 app/meetings/page.tsx    |  11 +-
 app/meshmap/page.tsx     |  23 +--
 app/page.tsx             | 378 +++++++++++++++++++--------------------
 app/setup/page.tsx       |  34 +---
 components/live-map.tsx  |  13 +-
 package-lock.json        |   8 +
 package.json             |   1 +
 13 files changed, 271 insertions(+), 335 deletions(-)

diff --git a/NOTES.md b/NOTES.md
index e3a9bd3..1a99661 100644
--- a/NOTES.md
+++ b/NOTES.md
@@ -60,28 +60,25 @@ single technical texture back in two places on purpose.
   - `--accent-solid` — button fills. Always pairs with `ink-950` text (6.3:1);
     white on a fill this bright would fail. Hover goes brighter, not darker.
 - **Other theme variables**: `--bg`, `--bg-elevated`, `--bg-sunken`, `--fg`,
-  `--fg-muted`, `--line`, `--line-strong`, `--grid-line`, `--wash`. Light and
-  dark are real themes — one token flips both.
-- **Background**: the page is flat. Texture is a single band declared once in
-  `app/layout.tsx` under the header, so every page gets it identically:
-  `.grid-tech` (a 44px brand-tinted engineering grid) and `.wash-brand` (one
-  soft radial, one corner). Both are radially masked, so the band's fixed
-  height only bounds the fade. The homepage's closing CTA re-uses `.grid-tech`
-  so the page opens and shuts on the same motif. Section rhythm otherwise
-  comes from `--bg-sunken` bands and hairline borders.
-- **Surfaces**: `surface` / `surface-strong` / `tile` are one flat card — 1px
-  border, solid background, no glass or backdrop blur. `tile` hover moves the
-  border colour only. `tile-accent` marks the primary card in a group with a
-  single inset accent rule.
-- **Buttons**: `btn-primary` (brand fill, dark ink) and `btn-ghost` (bordered).
-  `btn-facebook` is an alias of `btn-ghost` — one primary action per view.
-- **Labels**: `eyebrow` is a quiet mono label, not a bordered pill.
-  `gradient-text` is kept as a name but is a solid `--accent-bright`.
+  `--fg-muted`, `--line`, `--line-strong`. Light mode uses a pure `#ffffff` canvas
+  with `#f8fafc` sunken tones and `#e2e8f0` crisp slate borders; dark mode uses
+  deep obsidian slate `#0b0f19` canvas, `#111827` elevated surfaces, and `#1f2937` borders.
+- **Background & Surfaces**: The site uses clean, natural contrast without artificial
+  mathematical grid lines (`.grid-tech`) or radial glow blobs (`.wash-brand`).
+  Surfaces (`surface`, `tile`) feature crisp 1px borders, solid fills, and no synthetic glass/backdrop blur.
+- **Buttons & Badges**:
+  - `btn-primary` (brand fill, dark ink) and `btn-ghost` (bordered).
+  - `.badge` and `.badge-accent` for technical hardware and frequency specifications (`915 MHz`, `MeshCore`, `Open Source`).
+  - Steady status indicators instead of distracting pulsating radar dots.
+- **Homepage Structure**:
+  - Authoritative hero copy focused on community and storm resilience.
+  - Live network telemetry and framed live explorer embed.
+  - "How It Actually Works" explaining 915 MHz ISM radio, multi-hop mesh routing, and hurricane resilience.
+  - Real hardware pathways (Companion Radio, Solar Rooftop Repeater, Room Server & Base Station).
+  - Community spotlight on the weekly Monday Voice Net (8:00 PM CST on Discord).
+  - Regional coverage directory with node counts and repeater hosting invitations.
 - **Type**: `font-display` (Space Grotesk) headings, `font-sans` body,
-  `font-mono` for data and labels only. Display sizes top out around 3.5rem;
-  add `.tabular` to any figure sitting in a column of figures.
-- **Motion**: `fade-up`, plus `animate-ping` on genuine live indicators. The
-  `pulse-ring` / `drift` / `shimmer` animations were removed.
+  `font-mono` for data, badges, and technical specs. Figures use `.tabular`.
 
 ## Pages
 
diff --git a/app/docs/[slug]/page.tsx b/app/docs/[slug]/page.tsx
index db5a09b..04ebda8 100644
--- a/app/docs/[slug]/page.tsx
+++ b/app/docs/[slug]/page.tsx
@@ -9,9 +9,6 @@ export const revalidate = 3600;
 // deploy still renders on first visit (and gets cached per `revalidate`
 // above), so new docs pages don't need a redeploy to go live.
 
-const DOCS_REPO_RAW_HTML =
-  "https://github.com/GulfCoastMesh/louisianameshcommunity.github.io/blob/main/docs";
-
 export async function generateStaticParams() {
   return (await getAllSlugs()).map((slug) => ({ slug }));
 }
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 1fc2962..944dcaa 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -10,8 +10,6 @@ export const metadata = {
     "Field guides, hardware recommendations, and setup walkthroughs for the Gulf Coast Mesh.",
 };
 
-const DOCS_REPO_HTML =
-  "https://github.com/GulfCoastMesh/louisianameshcommunity.github.io";
 const LEGACY_DOCS_URL = "https://docs.gulfcoastmesh.org";
 
 export default async function DocsIndexPage() {
diff --git a/app/emailsignup/page.tsx b/app/emailsignup/page.tsx
index 65a13f6..78c0cba 100644
--- a/app/emailsignup/page.tsx
+++ b/app/emailsignup/page.tsx
@@ -49,14 +49,8 @@ export default function EmailSignupPage() {
     <div className="container pb-24">
       <div className="mx-auto grid max-w-5xl gap-10 lg:grid-cols-[1fr_1.1fr] lg:items-center">
         <div>
-          <span className="eyebrow">
-            <Mail className="h-3.5 w-3.5" aria-hidden />
-            Newsletter
-          </span>
-          <h1 className="mt-5 font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
-            Network signal,
-            <br />
-            <span className="gradient-text">delivered to your inbox.</span>
+          <h1 className="font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+            Network signal, delivered to your inbox.
           </h1>
           <p className="mt-5 text-pretty text-lg text-ink-600 dark:text-ink-300">
             Two clean lists — pick what you want. No spam, no auto-enrollment, no surprises.
diff --git a/app/globals.css b/app/globals.css
index 5120c82..308b1b7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,38 +4,30 @@
 
 @layer base {
   :root {
-    --bg: 245 250 251;
+    --bg: 255 255 255;
     --bg-elevated: 255 255 255;
-    --bg-sunken: 232 242 245;
-    --fg: 12 36 54;
-    --fg-muted: 59 90 110;
-    --line: 206 226 233;
-    --line-strong: 170 200 211;
-    /* Brightest teal on the logo's hue that still clears AA 4.5:1 on white,
-       so links and 11px labels stay legible at full brand brightness. */
-    --accent: 33 130 142;
-    /* Display type only — the 3:1 large-text threshold buys more brightness. */
-    --accent-bright: 19 154 167;
-    /* Bright brand fill; always pairs with ink-950 text, never white. */
-    --accent-solid: 34 170 180;
-    --grid-line: rgba(13, 96, 112, 0.14);
-    --wash: rgba(34, 170, 180, 0.18);
+    --bg-sunken: 248 250 252;
+    --fg: 15 23 42;
+    --fg-muted: 71 85 105;
+    --line: 226 232 240;
+    --line-strong: 203 213 225;
+    --accent: 14 116 144;
+    --accent-bright: 2 132 199;
+    --accent-solid: 14 165 233;
     color-scheme: light;
   }
 
   html.dark {
-    --bg: 6 26 40;
-    --bg-elevated: 12 36 54;
-    --bg-sunken: 4 19 29;
-    --fg: 228 238 244;
-    --fg-muted: 157 187 205;
-    --line: 29 52 70;
-    --line-strong: 45 71 87;
-    --accent: 110 215 200;
-    --accent-bright: 110 215 200;
-    --accent-solid: 34 170 180;
-    --grid-line: rgba(110, 215, 200, 0.10);
-    --wash: rgba(73, 199, 204, 0.13);
+    --bg: 11 15 25;
+    --bg-elevated: 17 24 39;
+    --bg-sunken: 6 9 17;
+    --fg: 248 250 252;
+    --fg-muted: 148 163 184;
+    --line: 30 41 59;
+    --line-strong: 51 65 85;
+    --accent: 45 212 191;
+    --accent-bright: 56 189 248;
+    --accent-solid: 14 165 233;
     color-scheme: dark;
   }
 
@@ -69,28 +61,23 @@
 }
 
 @layer components {
-  /* ---- Page background --------------------------------------------------
-     The page itself stays flat. Texture is applied deliberately, to the hero
-     and the closing band, instead of the old fixed grid + noise + triple
-     radial wash sitting behind every page. */
   .bg-canvas {
     background: rgb(var(--bg));
   }
 
-  /* Fine engineering grid, brand-tinted, faded out at the edges so it reads
-     as texture rather than wallpaper. */
-  .grid-tech {
-    background-image:
-      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
-      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
-    background-size: 44px 44px;
-    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, #000 10%, transparent 75%);
-    mask-image: radial-gradient(ellipse 85% 90% at 50% 0%, #000 10%, transparent 75%);
+  /* ---- Badges & Pills ---------------------------------------------------- */
+  .badge {
+    @apply inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium tracking-wide transition-colors;
+    border-color: rgb(var(--line));
+    background: rgb(var(--bg-sunken));
+    color: rgb(var(--fg-muted));
   }
 
-  /* A single soft brand wash. One gradient, one corner. */
-  .wash-brand {
-    background: radial-gradient(760px 420px at 88% -15%, var(--wash), transparent 62%);
+  .badge-accent {
+    @apply badge;
+    border-color: rgb(var(--accent) / 0.3);
+    background: rgb(var(--accent) / 0.08);
+    color: rgb(var(--accent));
   }
 
   /* ---- Surfaces ---------------------------------------------------------
diff --git a/app/layout.tsx b/app/layout.tsx
index 5aed75f..45d38a2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -55,8 +55,8 @@ export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#f4f8fa" },
-    { media: "(prefers-color-scheme: dark)", color: "#061a28" },
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#0b0f19" },
   ],
 };
 
@@ -98,12 +98,7 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
         </a>
         <div className="flex min-h-screen flex-col">
           <SiteHeader />
-          {/* One texture band sits under the header for every page, rather
-              than each page re-declaring its own. Both layers are radially
-              masked, so the fixed height just bounds the fade. */}
-          <main id="main" className="relative flex-1 pt-10 sm:pt-14">
-            <div className="pointer-events-none absolute inset-x-0 top-0 h-[36rem] grid-tech" aria-hidden />
-            <div className="pointer-events-none absolute inset-x-0 top-0 h-[36rem] wash-brand" aria-hidden />
+          <main id="main" className="relative flex-1 pt-8 sm:pt-12">
             <div className="relative">{children}</div>
           </main>
           <SiteFooter />
diff --git a/app/meetings/page.tsx b/app/meetings/page.tsx
index df6a1c0..92e48cf 100644
--- a/app/meetings/page.tsx
+++ b/app/meetings/page.tsx
@@ -51,11 +51,7 @@ export default async function MeetingsPage() {
   return (
     <div className="container pb-24">
       <header className="mx-auto max-w-3xl text-center">
-        <span className="eyebrow mx-auto">
-          <CalendarDays className="h-3.5 w-3.5" aria-hidden />
-          Meetings
-        </span>
-        <h1 className="mt-5 font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+        <h1 className="font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
           Every Monday on the mesh.
         </h1>
         <p className="mt-5 text-pretty text-lg text-ink-600 dark:text-ink-300">
@@ -86,10 +82,7 @@ export default async function MeetingsPage() {
       <section id="archive" className="mt-20">
         <div className="mb-6 flex items-end justify-between gap-4">
           <div>
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.22em] text-gulf-700 dark:text-gulf-300">
-              Archive
-            </p>
-            <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
+            <h2 className="font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
               Past meetings
             </h2>
           </div>
diff --git a/app/meshmap/page.tsx b/app/meshmap/page.tsx
index 3ed6e90..f7bc1f8 100644
--- a/app/meshmap/page.tsx
+++ b/app/meshmap/page.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { Globe2, Radio } from "lucide-react";
 import { LiveMap } from "@/components/live-map";
 
 export const metadata = {
@@ -24,11 +23,7 @@ export default function MeshmapPage() {
   return (
     <div className="container pb-24">
       <header className="mx-auto max-w-3xl text-center">
-        <span className="eyebrow mx-auto">
-          <Globe2 className="h-3.5 w-3.5" aria-hidden />
-          Live maps
-        </span>
-        <h1 className="mt-5 font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+        <h1 className="font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
           See the mesh lighting up the coast.
         </h1>
         <p className="mt-5 text-pretty text-lg text-ink-600 dark:text-ink-300">
@@ -41,10 +36,7 @@ export default function MeshmapPage() {
       <section className="mt-12">
         <div className="mb-4 flex items-end justify-between gap-4">
           <div>
-            <p className="eyebrow">
-              Primary network
-            </p>
-            <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
+            <h2 className="font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
               MeshCore — Live analyzer
             </h2>
           </div>
@@ -66,10 +58,7 @@ export default function MeshmapPage() {
       <section className="mt-12">
         <div className="mb-4 flex items-end justify-between gap-4">
           <div>
-            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-500 dark:text-ink-400">
-              Meshtastic footprint
-            </p>
-            <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
+            <h2 className="font-display text-2xl font-semibold tracking-tight text-ink-900 sm:text-3xl dark:text-white">
               Meshtastic — Meshview
             </h2>
           </div>
@@ -91,11 +80,7 @@ export default function MeshmapPage() {
       <section className="surface relative mt-16 overflow-hidden p-8 sm:p-12">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
           <div className="max-w-xl">
-            <span className="eyebrow">
-              <Radio className="h-3.5 w-3.5" aria-hidden />
-              Add your node
-            </span>
-            <h2 className="mt-4 font-display text-display-lg font-semibold tracking-tight text-ink-900 dark:text-white">
+            <h2 className="font-display text-display-lg font-semibold tracking-tight text-ink-900 dark:text-white">
               Put your Meshtastic device on the map via MQTT
             </h2>
           </div>
diff --git a/app/page.tsx b/app/page.tsx
index a0f4813..aac0aab 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,12 +1,12 @@
 import Link from "next/link";
 import {
   ArrowRight,
-  CircuitBoard,
   Radio,
   Router,
+  ShieldCheck,
   Smartphone,
-  Wind,
-  Wrench,
+  Sun,
+  Zap,
 } from "lucide-react";
 import { LiveMap } from "@/components/live-map";
 import { getMeshStats, fmt, type StateCode } from "@/lib/mesh-stats";
@@ -26,55 +26,51 @@ const regions: Region[] = [
   { code: "FL", name: "Northwest Florida", cities: "Pensacola · Destin · Panama City" },
 ];
 
-const work = [
+const pillars = [
   {
-    icon: Wind,
-    title: "Communications that survive the storm",
-    body:
-      "When the cell network drops and the internet goes with it, the mesh keeps moving on solar, battery, or a USB pack, backed by volunteer repeaters on tall sites across the coast.",
+    icon: Radio,
+    title: "No Cell Towers Needed",
+    description:
+      "Radios communicate directly device-to-device on public, license-free radio frequencies. No internet connection, cellular contract, or subscription required.",
   },
   {
-    icon: Radio,
-    title: "A public, live view of the network",
-    body:
-      "Anyone can watch Meshcore and Meshtastic activity in real time — who heard whom, which repeaters are carrying traffic, and where the next install would matter most.",
+    icon: Zap,
+    title: "Community Relays",
+    description:
+      "Every node helps relay messages across the network. Packets hop from pocket radios to rooftops to span entire neighborhoods and coastal towns.",
   },
   {
-    icon: Wrench,
-    title: "Open hardware, open docs, open help",
-    body:
-      "Every guide, tool, and firmware recommendation we publish is free and open source. Bring a question to the weekly net and someone will walk you through it.",
+    icon: Sun,
+    title: "Built for Storm Resilience",
+    description:
+      "Designed specifically for hurricane season and severe weather. Radios sip tiny amounts of power and keep running on small solar panels or portable USB power banks.",
   },
 ];
 
-// One next step per stage. The old build offered up to three competing links
-// per card, which made the fastest path through the page hard to find.
-const steps = [
-  {
-    n: "01",
-    icon: CircuitBoard,
-    title: "Pick your hardware",
-    body: "New to LoRa? Start with our recommended devices so your first radio just works.",
-    href: "/docs/devicerecs",
-    cta: "Recommended devices",
-  },
+const hardwareTiers = [
   {
-    n: "02",
-    icon: Smartphone,
-    title: "Set up a daily carry",
-    body:
-      "Get a MeshCore companion in your bag, paired with your phone, ready to message neighbors on the network.",
+    title: "Pocket Radio",
+    description:
+      "A handheld radio that connects to your smartphone via Bluetooth. Text off-grid and check in with family when cellular service is down.",
     href: "/setup",
-    cta: "Open the setup wizard",
+    cta: "Setup a radio",
+    icon: Smartphone,
   },
   {
-    n: "03",
-    icon: Router,
-    title: "Stand up a repeater",
-    body:
-      "Have a place with sky? Run a repeater and extend the network. We will help you plan, build, and tune it.",
+    title: "Rooftop Repeater",
+    description:
+      "A weather-resistant solar node installed on a roof, mast, or chimney to extend coverage and bridge your neighborhood to the wider net.",
     href: "/docs/meshcore-repeater-setup",
-    cta: "Repeater setup guide",
+    cta: "Repeater build guide",
+    icon: Router,
+  },
+  {
+    title: "Base Station",
+    description:
+      "A permanent station or server for your home or workshop, providing continuous monitoring and regional emergency bulletin broadcasts.",
+    href: "/docs/devicerecs",
+    cta: "Device recommendations",
+    icon: ShieldCheck,
   },
 ];
 
@@ -83,56 +79,49 @@ export default async function HomePage() {
 
   const stats = mesh.ok
     ? [
-        { value: fmt(mesh.totalMapped), label: "Mapped nodes", caption: `${fmt(mesh.totalSeen)} ever seen` },
-        { value: fmt(mesh.repeaters), label: "Repeaters", caption: `${fmt(mesh.rooms)} room servers` },
-        { value: fmt(mesh.activeLast24h), label: "Active in 24h", caption: `${fmt(mesh.onlineNow)} online now` },
-        { value: fmt(mesh.historyEdges), label: "Links observed", caption: "Rolling window" },
+        { value: fmt(mesh.totalMapped), label: "Mapped Nodes" },
+        { value: fmt(mesh.repeaters), label: "Active Repeaters" },
+        { value: fmt(mesh.activeLast24h), label: "Active Today" },
+        { value: fmt(mesh.historyEdges), label: "Observed Links" },
       ]
     : [
-        { value: "5", label: "Gulf states", caption: "TX · LA · MS · AL · FL" },
-        { value: "1,600 mi", label: "Of coastline", caption: "Brownsville → Apalachicola" },
-        { value: "32", label: "Max mesh hops", caption: "Via Meshcore pathing" },
-        { value: "100%", label: "Open source", caption: "Hardware, firmware, docs" },
+        { value: "5", label: "Gulf States" },
+        { value: "1,600+", label: "Miles of Coastline" },
+        { value: "32", label: "Max Mesh Hops" },
+        { value: "100%", label: "Open Source" },
       ];
 
   return (
-    <>
-      {/* HERO ------------------------------------------------------------
-          Copy on the left, the live map on the right, as on the original
-          site. The stats it produces sit in a band directly underneath. */}
-      <section className="container pb-16">
-        <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
-          <div className="lg:col-span-5">
-            <p className="eyebrow">
-              <span className="relative flex h-1.5 w-1.5" aria-hidden>
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-500 opacity-50" />
-                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-600 dark:bg-gulf-400" />
-              </span>
-              {mesh.ok ? `${fmt(mesh.totalMapped)} nodes live` : "Live on the bayou"}
-              <span aria-hidden>·</span>
-              Expanding the Gulf
-            </p>
-
-            <h1 className="mt-5 font-display text-display-xl font-semibold text-balance text-ink-900 dark:text-white">
-              Comms that hold
-              <br />
-              when the <span className="gradient-text">coast does not</span>.
+    <div className="space-y-24 pb-24 sm:space-y-32">
+      {/* HERO SECTION ---------------------------------------------------- */}
+      <section className="container">
+        <div className="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
+          <div className="lg:col-span-6">
+            <h1 className="font-display text-display-xl font-semibold tracking-tight text-balance text-ink-900 dark:text-white">
+              Off-grid communications for the Gulf Coast.
             </h1>
 
             <p className="mt-6 max-w-xl text-pretty text-lg leading-relaxed text-ink-600 dark:text-ink-300">
-              Gulf Coast Mesh is a volunteer-built, non-profit communications fabric anchored in Louisiana, growing
-              across the US Gulf Coast. Open hardware. Decentralized routing. Real neighbors on the other end.
+              Gulf Coast Mesh is a free, decentralized wireless network built and run by volunteers.
+              Send messages and stay connected across Texas, Louisiana, Mississippi, Alabama, and Florida — with
+              no cellular towers, no internet, and no monthly fees.
             </p>
 
             <div className="mt-8 flex flex-wrap items-center gap-3">
+              <Link href="/setup" className="btn-primary">
+                Get Started
+                <ArrowRight className="h-4 w-4" aria-hidden />
+              </Link>
+              <Link href="/meshmap" className="btn-ghost">
+                View Live Map
+              </Link>
               <a
                 href="https://discord.gulfcoastmesh.org"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="btn-primary"
+                className="btn-ghost"
               >
-                Join the Discord
-                <ArrowRight className="h-4 w-4" aria-hidden />
+                Join Discord
               </a>
               <a
                 href="https://www.facebook.com/groups/gulfcoastmesh"
@@ -140,171 +129,184 @@ export default async function HomePage() {
                 rel="noopener noreferrer"
                 className="btn-ghost"
               >
-                Join the Facebook
+                Facebook Group
               </a>
-              <Link
-                href="/meshmap"
-                className="group inline-flex items-center gap-1.5 text-sm font-semibold text-gulf-700 dark:text-gulf-300"
-              >
-                See the live map
-                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
-              </Link>
             </div>
-
-            <p className="mt-6 text-sm text-ink-500 dark:text-ink-400">
-              <span className="font-semibold text-ink-800 dark:text-ink-100">Weekly Monday voice net</span> on Discord.
-              Everyone welcome, including people who have never touched a radio.{" "}
-              <Link href="/meetings" className="font-medium text-gulf-700 underline underline-offset-2 dark:text-gulf-300">
-                See the schedule
-              </Link>
-              .
-            </p>
           </div>
 
-          <div className="lg:col-span-7">
+          <div className="lg:col-span-6">
             <LiveMap
               src="https://explorer.gulfcoastmesh.org/embed-light"
               srcDark="https://explorer.gulfcoastmesh.org/embed-dark"
+              openUrl="https://explorer.gulfcoastmesh.org"
               title="Gulf Coast Mesh Explorer (live)"
-              label="Gulf Coast Explorer"
+              label="Live Network Activity"
               sub={
                 mesh.ok
-                  ? `MeshCore · ${fmt(mesh.totalMapped)} nodes · ${fmt(mesh.activeLast24h)} active in 24h`
-                  : "MeshCore · live packets & nodes"
+                  ? `${fmt(mesh.totalMapped)} nodes · ${fmt(mesh.activeLast24h)} active today`
+                  : "Live nodes and packets"
               }
-              aspect="aspect-[4/3] lg:aspect-[5/4] xl:aspect-[6/5]"
+              aspect="aspect-[4/3] sm:aspect-[16/11]"
             />
           </div>
         </div>
       </section>
 
-      {/* NETWORK STATS ----------------------------------------------------- */}
-      <section id="network" className="container">
-        <dl className="surface grid grid-cols-2 overflow-hidden sm:grid-cols-4">
-          {stats.map((s, i) => (
-            <div
-              key={s.label}
-              className={
-                "px-5 py-6 sm:px-6 " +
-                // Odd cells start the second mobile column; cells 2-3 start
-                // the second mobile row. At sm every cell is in one row.
-                (i % 2 === 1 ? "border-l " : "sm:border-l ") +
-                (i >= 2 ? "border-t sm:border-t-0 " : "") +
-                (i === 0 ? "sm:border-l-0 " : "")
-              }
-              style={{ borderColor: "rgb(var(--line))" }}
-            >
+      {/* STATS BAR ------------------------------------------------------- */}
+      <section className="container">
+        <dl className="surface grid grid-cols-2 divide-y divide-ink-200 sm:grid-cols-4 sm:divide-x sm:divide-y-0 dark:divide-ink-800">
+          {stats.map((s) => (
+            <div key={s.label} className="p-6 text-center sm:text-left">
               <dd className="tabular font-display text-3xl font-semibold text-ink-900 sm:text-4xl dark:text-white">
                 {s.value}
               </dd>
-              <dt className="mt-1 text-sm font-medium text-ink-700 dark:text-ink-200">{s.label}</dt>
-              <p className="mt-0.5 text-xs text-ink-500 dark:text-ink-400">{s.caption}</p>
+              <dt className="mt-1 text-sm font-medium text-ink-600 dark:text-ink-300">{s.label}</dt>
             </div>
           ))}
         </dl>
-
-        <p className="mt-3 text-sm text-ink-500 dark:text-ink-400">
-          Live snapshot, refreshed every 5 minutes.{" "}
-          <Link href="/meshmap" className="font-medium text-gulf-700 underline underline-offset-2 dark:text-gulf-300">
-            Open the full maps
-          </Link>{" "}
-          for the packet analyzer and the Meshtastic view.
-        </p>
       </section>
 
-      {/* WHAT WE DO ------------------------------------------------------- */}
-      <section className="container py-20">
-        <div className="max-w-2xl">
-          <p className="eyebrow">What we do</p>
-          <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
-            Rooftops, towers, and front porches, all on the same mesh.
+      {/* HOW IT WORKS ---------------------------------------------------- */}
+      <section className="container">
+        <div className="max-w-xl">
+          <h2 className="font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+            How it works
           </h2>
+          <p className="mt-3 text-pretty text-ink-600 dark:text-ink-300">
+            A reliable, neighborhood-powered radio network that continues operating when traditional infrastructure fails.
+          </p>
         </div>
 
         <div className="mt-10 grid gap-6 md:grid-cols-3">
-          {work.map((w) => (
-            <div key={w.title}>
-              <w.icon className="h-5 w-5 text-gulf-700 dark:text-gulf-300" aria-hidden />
-              <h3 className="mt-4 font-display text-lg font-semibold text-ink-900 dark:text-white">{w.title}</h3>
-              <p className="mt-2 text-sm leading-relaxed text-ink-600 dark:text-ink-300">{w.body}</p>
+          {pillars.map((p) => (
+            <div key={p.title} className="surface p-7">
+              <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gulf-500/10 text-gulf-700 dark:text-gulf-300">
+                <p.icon className="h-5 w-5" aria-hidden />
+              </div>
+              <h3 className="mt-5 font-display text-lg font-semibold text-ink-900 dark:text-white">
+                {p.title}
+              </h3>
+              <p className="mt-2.5 text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+                {p.description}
+              </p>
             </div>
           ))}
         </div>
       </section>
 
-      {/* GET STARTED ------------------------------------------------------ */}
+      {/* HARDWARE TIERS -------------------------------------------------- */}
       <section
         className="border-y py-20"
         style={{ borderColor: "rgb(var(--line))", background: "rgb(var(--bg-sunken))" }}
       >
         <div className="container">
-          <div className="max-w-2xl">
-            <p className="eyebrow">Get started</p>
-            <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
-              From a box-fresh radio to the coast-wide net in three steps.
+          <div className="max-w-xl">
+            <h2 className="font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+              Get started at your own pace
             </h2>
+            <p className="mt-3 text-pretty text-ink-600 dark:text-ink-300">
+              Choose the setup that fits your needs — from a personal handheld carry to a rooftop solar repeater.
+            </p>
           </div>
 
-          <ol className="mt-10 grid gap-5 lg:grid-cols-3">
-            {steps.map((s) => (
-              <li key={s.n} className="tile flex h-full flex-col">
-                <div className="flex items-center gap-3">
-                  <s.icon className="h-5 w-5 text-gulf-700 dark:text-gulf-300" aria-hidden />
-                  <span className="font-mono text-xs font-semibold text-ink-400 dark:text-ink-500">{s.n}</span>
+          <div className="mt-10 grid gap-6 md:grid-cols-3">
+            {hardwareTiers.map((tier) => (
+              <div key={tier.title} className="surface flex flex-col p-7">
+                <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gulf-500/10 text-gulf-700 dark:text-gulf-300">
+                  <tier.icon className="h-5 w-5" aria-hidden />
                 </div>
-                <h3 className="mt-4 font-display text-lg font-semibold text-ink-900 dark:text-white">{s.title}</h3>
-                <p className="mt-2 flex-1 text-sm leading-relaxed text-ink-600 dark:text-ink-300">{s.body}</p>
-                <Link
-                  href={s.href}
-                  className="group mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-gulf-700 dark:text-gulf-300"
-                >
-                  {s.cta}
-                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
-                </Link>
-              </li>
+                <h3 className="mt-5 font-display text-xl font-semibold text-ink-900 dark:text-white">
+                  {tier.title}
+                </h3>
+                <p className="mt-2.5 flex-1 text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+                  {tier.description}
+                </p>
+                <div className="mt-6 pt-5 border-t" style={{ borderColor: "rgb(var(--line))" }}>
+                  <Link
+                    href={tier.href}
+                    className="group inline-flex items-center gap-1.5 text-sm font-semibold text-gulf-700 dark:text-gulf-300"
+                  >
+                    {tier.cta}
+                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
+                  </Link>
+                </div>
+              </div>
             ))}
-          </ol>
+          </div>
         </div>
       </section>
 
-      {/* COVERAGE --------------------------------------------------------- */}
-      <section className="container py-20">
-        <div className="grid gap-10 lg:grid-cols-[1fr_1.3fr] lg:gap-16">
+      {/* COMMUNITY SPOTLIGHT --------------------------------------------- */}
+      <section className="container">
+        <div className="surface p-8 sm:p-12 text-center max-w-3xl mx-auto">
+          <h2 className="font-display text-2xl font-semibold text-ink-900 sm:text-3xl dark:text-white">
+            Weekly Monday Voice Net · 8:00 PM CST
+          </h2>
+          <p className="mt-4 text-pretty leading-relaxed text-ink-600 dark:text-ink-300">
+            Curious about mesh radio or need help with your first device? Join our weekly Discord voice call.
+            Volunteers and beginners gather every Monday to test links, answer questions, and welcome new operators.
+          </p>
+          <div className="mt-8 flex flex-wrap justify-center items-center gap-3">
+            <a
+              href="https://discord.gulfcoastmesh.org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-primary"
+            >
+              Join the Discord Net
+            </a>
+            <a
+              href="https://www.facebook.com/groups/gulfcoastmesh"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-ghost"
+            >
+              Facebook Group
+            </a>
+            <Link href="/meetings" className="btn-ghost">
+              Meeting Schedule
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* REGIONAL COVERAGE ----------------------------------------------- */}
+      <section className="container">
+        <div className="grid gap-10 lg:grid-cols-[1fr_1.3fr] lg:gap-16 items-start">
           <div>
-            <p className="eyebrow">Coverage</p>
-            <h2 className="mt-3 font-display text-display-lg font-semibold text-ink-900 dark:text-white">
-              Anchored in Louisiana, growing the whole Gulf.
+            <h2 className="font-display text-display-lg font-semibold text-ink-900 dark:text-white">
+              Growing across the Gulf Coast
             </h2>
-            <p className="mt-4 max-w-md text-sm leading-relaxed text-ink-600 dark:text-ink-300">
-              Today the live network is concentrated across Louisiana. The mission is bigger: neighbors helping
-              neighbors from Corpus Christi to Panama City. If you are elsewhere on the Gulf, come build with us.
+            <p className="mt-4 text-pretty text-sm leading-relaxed text-ink-600 dark:text-ink-300">
+              The network is actively expanding from South Texas to the Florida Panhandle.
+              If you have a rooftop or tall site and want to help cover your town, connect with us on Discord.
             </p>
+            <div className="mt-6">
+              <Link href="/meshmap" className="btn-ghost inline-flex items-center gap-1.5">
+                Explore Regional Map &rarr;
+              </Link>
+            </div>
           </div>
 
-          <ul className="surface divide-y" style={{ borderColor: "rgb(var(--line))" }}>
+          <ul className="surface divide-y divide-ink-200 overflow-hidden dark:divide-ink-800">
             {regions.map((r) => {
               const count = mesh.byState[r.code] ?? 0;
               const live = count > 0 || r.forceLive === true;
               return (
                 <li
                   key={r.code}
-                  className="flex items-center gap-4 px-5 py-4"
-                  style={{ borderColor: "rgb(var(--line))" }}
+                  className="flex items-center gap-4 px-6 py-4"
                 >
-                  <span className="w-7 shrink-0 font-mono text-xs font-bold text-ink-500 dark:text-ink-400">
+                  <span className="font-mono text-xs font-bold text-ink-400 dark:text-ink-500 w-6">
                     {r.code}
                   </span>
                   <div className="min-w-0 flex-1">
                     <p className="text-sm font-semibold text-ink-900 dark:text-white">{r.name}</p>
                     <p className="truncate text-xs text-ink-500 dark:text-ink-400">{r.cities}</p>
                   </div>
-                  {live ? (
-                    <span className="tabular shrink-0 font-mono text-xs font-semibold text-gulf-700 dark:text-gulf-300">
-                      {count > 0 ? `${fmt(count)} live` : "Live"}
-                    </span>
-                  ) : (
-                    <span className="shrink-0 font-mono text-xs text-ink-400 dark:text-ink-500">Planned</span>
-                  )}
+                  <span className="tabular font-mono text-xs font-medium text-ink-600 dark:text-ink-300">
+                    {live ? (count > 0 ? `${fmt(count)} nodes` : "Active") : "Expanding"}
+                  </span>
                 </li>
               );
             })}
@@ -312,28 +314,29 @@ export default async function HomePage() {
         </div>
       </section>
 
-      {/* GET INVOLVED ----------------------------------------------------- */}
+      {/* CLOSING CALL-TO-ACTION ------------------------------------------ */}
       <section
-        className="relative overflow-hidden border-t py-20"
+        className="border-t py-20 text-center"
         style={{ borderColor: "rgb(var(--line))", background: "rgb(var(--bg-sunken))" }}
       >
-        <div className="pointer-events-none absolute inset-0 grid-tech" aria-hidden />
-        <div className="container relative max-w-3xl text-center">
+        <div className="container max-w-2xl">
           <h2 className="font-display text-display-lg font-semibold text-ink-900 dark:text-white">
-            No radio required to get involved.
+            Ready to get connected?
           </h2>
-          <p className="mt-4 text-pretty leading-relaxed text-ink-600 dark:text-ink-300">
-            Come to the Monday net, ask questions, lend a rooftop, or help us write the docs. The network grows one
-            neighbor at a time.
+          <p className="mt-4 text-pretty text-base leading-relaxed text-ink-600 dark:text-ink-300">
+            No radio license or technical background required. We’re here to help you get on the air.
           </p>
           <div className="mt-8 flex flex-wrap justify-center gap-3">
+            <Link href="/setup" className="btn-primary">
+              Set Up Your Radio
+            </Link>
             <a
               href="https://discord.gulfcoastmesh.org"
               target="_blank"
               rel="noopener noreferrer"
-              className="btn-primary"
+              className="btn-ghost"
             >
-              Join the Discord
+              Join Discord
             </a>
             <a
               href="https://www.facebook.com/groups/gulfcoastmesh"
@@ -341,14 +344,11 @@ export default async function HomePage() {
               rel="noopener noreferrer"
               className="btn-ghost"
             >
-              Join the Facebook group
+              Facebook Group
             </a>
-            <Link href="/emailsignup" className="btn-ghost">
-              Get the newsletter
-            </Link>
           </div>
         </div>
       </section>
-    </>
+    </div>
   );
 }
diff --git a/app/setup/page.tsx b/app/setup/page.tsx
index 903f853..6e9f43f 100644
--- a/app/setup/page.tsx
+++ b/app/setup/page.tsx
@@ -17,7 +17,6 @@ import {
   Maximize2,
   Terminal as TerminalIcon,
   X,
-  Sparkles,
   Copy,
   Check,
   ArrowUpRight,
@@ -199,7 +198,6 @@ function SetupWizard() {
   const [showTerminal, setShowTerminal] = useState(false);
   const [terminalLogs, setTerminalLogs] = useState<string[]>([]);
   const terminalLogsRef = useRef<string[]>([]);
-  const pendingTerminalLogsRef = useRef<string[]>([]);
   const terminalFlushScheduledRef = useRef<boolean>(false);
   const terminalEndRef = useRef<HTMLDivElement>(null);
   const showTerminalRef = useRef(false);
@@ -265,10 +263,14 @@ function SetupWizard() {
 
   useEffect(() => {
     if (step === 'client_select_device' && clientFirmware.versions.length === 0 && !clientFirmware.loading) {
-      void loadFirmwareVersions('client');
+      queueMicrotask(() => {
+        void loadFirmwareVersions('client');
+      });
     }
     if (step === 'repeater_select_device' && repeaterFirmware.versions.length === 0 && !repeaterFirmware.loading) {
-      void loadFirmwareVersions('repeater');
+      queueMicrotask(() => {
+        void loadFirmwareVersions('repeater');
+      });
     }
   }, [step, clientFirmware.loading, clientFirmware.versions.length, repeaterFirmware.loading, repeaterFirmware.versions.length]);
 
@@ -1683,35 +1685,13 @@ function SetupWizard() {
   const renderIntro = () => (
     <div className="space-y-8">
       <div className="space-y-3 text-center">
-        <span className="eyebrow mx-auto">
-          <Sparkles className="h-3.5 w-3.5" aria-hidden />
-          Setup wizard
-        </span>
         <h1 className="font-display text-3xl font-semibold tracking-tight text-balance text-ink-900 sm:text-4xl dark:text-white">
-          Get a node on the <span className="gradient-text">Gulf Coast mesh</span>.
+          Get a node on the Gulf Coast mesh.
         </h1>
         <p className="mx-auto max-w-md text-pretty text-sm leading-relaxed text-ink-600 dark:text-ink-300">
           Plug in over USB, flash MeshCore, and join the network — right from your browser. Pick what you&apos;re building today.
         </p>
       </div>
-      {(browserKind === 'firefox' || browserKind === 'safari' || browserKind === 'ios') && (
-        <div
-          role="note"
-          className="mx-auto flex max-w-xl items-start gap-3 rounded-lg border border-sand-400/40 bg-sand-400/10 p-4 text-left"
-        >
-          <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sand-700 dark:text-sand-300" aria-hidden />
-          <div>
-            <h3 className="font-display text-sm font-semibold text-ink-900 dark:text-white">
-              Chromium-based browser required
-            </h3>
-            <p className="mt-1 text-xs leading-relaxed text-ink-600 dark:text-ink-300">
-              The setup wizard uses the Web Serial API to talk to your radio over USB, which only works in
-              Chromium-based browsers — Chrome, Edge, Brave, Arc, Vivaldi, or Opera. Firefox and Safari (including
-              all iOS browsers) can&apos;t flash from the web yet.
-            </p>
-          </div>
-        </div>
-      )}
       <div className="grid gap-4 md:grid-cols-2">
         <button
           type="button"
diff --git a/components/live-map.tsx b/components/live-map.tsx
index a1b08c1..a9f42e8 100644
--- a/components/live-map.tsx
+++ b/components/live-map.tsx
@@ -21,6 +21,8 @@ type LiveMapProps = {
   sub?: string;
   /** Tailwind aspect-ratio classes for the frame, e.g. "aspect-[4/3] lg:aspect-[16/11]". */
   aspect?: string;
+  /** Optional custom URL for the "Open ↗" button. If not specified, falls back to `resolvedSrc`. */
+  openUrl?: string;
   /** Whether to render a "Open ↗" link to the source URL. Defaults to true. */
   showOpenLink?: boolean;
   /** Drop the card chrome (border, padding, header) and render only the
@@ -34,6 +36,7 @@ type LiveMapProps = {
 export function LiveMap({
   src,
   srcDark,
+  openUrl,
   title,
   label,
   sub,
@@ -47,6 +50,7 @@ export function LiveMap({
   // Wait until after hydration so we don't SSR embed-light then swap to
   // embed-dark (that tears down Leaflet mid-tile-load → _map is null).
   const resolvedSrc = theme === "dark" && srcDark ? srcDark : src;
+  const targetOpenUrl = openUrl ?? resolvedSrc;
 
   const [loaded, setLoaded] = useState(false);
   const [errored, setErrored] = useState(false);
@@ -110,7 +114,7 @@ export function LiveMap({
           <p className="font-display text-sm font-semibold text-ink-900 dark:text-white">
             Couldn’t load the live map
           </p>
-          <a href={resolvedSrc} target="_blank" rel="noopener noreferrer" className="btn-primary">
+          <a href={targetOpenUrl} target="_blank" rel="noopener noreferrer" className="btn-primary">
             Open {label}
             <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
           </a>
@@ -130,17 +134,14 @@ export function LiveMap({
       >
         <div className="min-w-0">
           <p className="flex items-center gap-2 text-sm font-semibold text-ink-900 dark:text-white">
-            <span className="relative flex h-1.5 w-1.5 shrink-0" aria-hidden>
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-500 opacity-40" />
-              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-600 dark:bg-gulf-400" />
-            </span>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden />
             {label}
           </p>
           {sub ? <p className="mt-0.5 text-xs text-ink-500 dark:text-ink-400">{sub}</p> : null}
         </div>
         {showOpenLink ? (
           <a
-            href={resolvedSrc}
+            href={targetOpenUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="group inline-flex shrink-0 items-center gap-1 text-xs font-semibold text-gulf-700 dark:text-gulf-300"
diff --git a/package-lock.json b/package-lock.json
index 9105f46..7cf52c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
+        "@types/js-yaml": "^4.0.9",
         "@types/node": "^22.10.0",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
@@ -1423,6 +1424,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
diff --git a/package.json b/package.json
index b698b11..ec7c143 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

From 7ead8bf4f92f678c910985a2947c5c43c8e92492 Mon Sep 17 00:00:00 2001
From: Cloud Hayes <Cloud@gproconnect.com>
Date: Sat, 5 Sep 2026 15:57:04 -0500
Subject: [PATCH 5/6] updates background

---
 .gitignore                   |   1 +
 app/api/mesh-replay/route.ts | 169 +++++++++++
 app/globals.css              |  30 ++
 app/layout.tsx               |   4 +-
 app/page.tsx                 |  15 +
 components/background.tsx    | 571 +++++++++++++++++++++++++++++++++++
 components/site-footer.tsx   |  26 ++
 eslint.config.mjs            |   2 +-
 proxy.ts                     |   2 +
 tsconfig.json                |   3 +-
 10 files changed, 820 insertions(+), 3 deletions(-)
 create mode 100644 app/api/mesh-replay/route.ts
 create mode 100644 components/background.tsx

diff --git a/.gitignore b/.gitignore
index a98349f..7068201 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ next-env.d.ts
 # misc
 .DS_Store
 *.pem
+/LNSITE/
 
 # debug
 npm-debug.log*
diff --git a/app/api/mesh-replay/route.ts b/app/api/mesh-replay/route.ts
new file mode 100644
index 0000000..d38805b
--- /dev/null
+++ b/app/api/mesh-replay/route.ts
@@ -0,0 +1,169 @@
+import { NextResponse } from "next/server";
+
+type AnalyzerPacket = {
+  payload_type?: unknown;
+  timestamp?: unknown;
+  first_seen?: unknown;
+};
+
+type ReplayEvent = {
+  offsetMs: number;
+  payloadType: number;
+};
+
+type ReplayPayload = {
+  durationMs: number;
+  events: ReplayEvent[];
+};
+
+const ANALYZER_URL =
+  process.env.ANALYZER_API_URL || "https://analyzer.gulfcoastmesh.org";
+const WINDOW_MS = 5 * 60 * 1000;
+const REPLAY_DURATION_MS = 20 * 1000;
+const MAX_REPLAY_EVENTS = 500;
+const CACHE_DURATION_MS = 5 * 60 * 1000;
+
+let cachedReplay: { expiresAt: number; payload: ReplayPayload } | null = null;
+
+const asTimestamp = (value: unknown): number | null => {
+  if (typeof value !== "string") return null;
+  const timestamp = Date.parse(value);
+  return Number.isFinite(timestamp) ? timestamp : null;
+};
+
+const busiestWindow = (timestamps: number[]): [number, number] | null => {
+  if (timestamps.length === 0) return null;
+
+  let left = 0;
+  let bestLeft = 0;
+  let bestRight = 0;
+
+  for (let right = 0; right < timestamps.length; right += 1) {
+    while (timestamps[right] - timestamps[left] > WINDOW_MS) left += 1;
+    if (right - left > bestRight - bestLeft) {
+      bestLeft = left;
+      bestRight = right;
+    }
+  }
+
+  return [timestamps[bestLeft], timestamps[bestLeft] + WINDOW_MS];
+};
+
+const sampleEvents = (events: ReplayEvent[]): ReplayEvent[] => {
+  if (events.length <= MAX_REPLAY_EVENTS) return events;
+
+  return Array.from({ length: MAX_REPLAY_EVENTS }, (_, index) => {
+    const sourceIndex = Math.floor(
+      (index * (events.length - 1)) / (MAX_REPLAY_EVENTS - 1)
+    );
+    return events[sourceIndex];
+  });
+};
+
+const loadReplay = async (): Promise<ReplayPayload> => {
+  const now = Date.now();
+  const since = new Date(now - 24 * 60 * 60 * 1000).toISOString();
+  const timestampsUrl = new URL("/api/packets/timestamps", ANALYZER_URL);
+  timestampsUrl.searchParams.set("since", since);
+
+  const timestampsResponse = await fetch(timestampsUrl, {
+    cache: "no-store",
+    signal: AbortSignal.timeout(10000),
+  });
+  if (!timestampsResponse.ok) {
+    throw new Error(
+      `Analyzer timestamps returned ${timestampsResponse.status}`
+    );
+  }
+
+  const rawTimestamps: unknown = await timestampsResponse.json();
+  if (!Array.isArray(rawTimestamps)) throw new Error("Invalid timestamp list");
+
+  const timestamps = rawTimestamps
+    .map(asTimestamp)
+    .filter((timestamp): timestamp is number => timestamp !== null)
+    .sort((first, second) => first - second);
+  const window = busiestWindow(timestamps);
+  if (!window) return { durationMs: REPLAY_DURATION_MS, events: [] };
+
+  const packetsUrl = new URL("/api/packets", ANALYZER_URL);
+  packetsUrl.searchParams.set("since", new Date(window[0]).toISOString());
+  packetsUrl.searchParams.set("until", new Date(window[1]).toISOString());
+  packetsUrl.searchParams.set("limit", "10000");
+  packetsUrl.searchParams.set("order", "asc");
+
+  const packetsResponse = await fetch(packetsUrl, {
+    cache: "no-store",
+    signal: AbortSignal.timeout(10000),
+  });
+  if (!packetsResponse.ok) {
+    throw new Error(`Analyzer packets returned ${packetsResponse.status}`);
+  }
+
+  const rawPackets: unknown = await packetsResponse.json();
+  if (
+    typeof rawPackets !== "object" ||
+    rawPackets === null ||
+    !Array.isArray((rawPackets as { packets?: unknown }).packets)
+  ) {
+    throw new Error("Invalid packet list");
+  }
+
+  const packets = (rawPackets as { packets: AnalyzerPacket[] }).packets;
+  const events = packets
+    .map((packet): { timestamp: number; payloadType: number } | null => {
+      const timestamp = asTimestamp(packet.timestamp ?? packet.first_seen);
+      const payloadType =
+        typeof packet.payload_type === "number"
+          ? packet.payload_type
+          : Number.parseInt(String(packet.payload_type), 10);
+      if (timestamp === null || !Number.isFinite(payloadType)) return null;
+      return { timestamp, payloadType };
+    })
+    .filter(
+      (event): event is { timestamp: number; payloadType: number } =>
+        event !== null
+    )
+    .sort((first, second) => first.timestamp - second.timestamp);
+
+  if (events.length === 0) {
+    return { durationMs: REPLAY_DURATION_MS, events: [] };
+  }
+
+  const sourceStart = events[0].timestamp;
+  const sourceDuration = Math.max(
+    events[events.length - 1].timestamp - sourceStart,
+    1
+  );
+  const replayEvents = events.map((event) => ({
+    offsetMs: Math.round(
+      ((event.timestamp - sourceStart) / sourceDuration) * REPLAY_DURATION_MS
+    ),
+    payloadType: event.payloadType,
+  }));
+
+  return {
+    durationMs: REPLAY_DURATION_MS,
+    events: sampleEvents(replayEvents),
+  };
+};
+
+export async function GET() {
+  try {
+    if (cachedReplay && cachedReplay.expiresAt > Date.now()) {
+      return NextResponse.json(cachedReplay.payload);
+    }
+
+    const payload = await loadReplay();
+    cachedReplay = {
+      expiresAt: Date.now() + CACHE_DURATION_MS,
+      payload,
+    };
+    return NextResponse.json(payload);
+  } catch {
+    return NextResponse.json(
+      { durationMs: REPLAY_DURATION_MS, events: [] },
+      { status: 200 }
+    );
+  }
+}
diff --git a/app/globals.css b/app/globals.css
index 308b1b7..33673aa 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -310,6 +310,36 @@
   }
 }
 
+/* ---- Live Mesh Network Background Canvas -------------------------------- */
+.mesh-background {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mesh-background__canvas,
+.mesh-background__scrim {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mesh-background__scrim {
+  background: rgba(255, 255, 255, 0.45);
+}
+
+html.dark .mesh-background__scrim {
+  background: rgba(11, 15, 25, 0.25);
+}
+
+@media (prefers-reduced-motion: reduce), print {
+  .mesh-background {
+    display: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/app/layout.tsx b/app/layout.tsx
index 45d38a2..270db36 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { headers } from "next/headers";
 import { Inter, JetBrains_Mono, Space_Grotesk } from "next/font/google";
 import Script from "next/script";
 import "./globals.css";
+import { Background } from "@/components/background";
 import { SiteHeader } from "@/components/site-header";
 import { SiteFooter } from "@/components/site-footer";
 import { AnalyticsScript } from "@/components/analytics-script";
@@ -90,13 +91,14 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
       <body
         className={`${sans.variable} ${display.variable} ${mono.variable} bg-canvas min-h-screen font-sans antialiased`}
       >
+        <Background />
         <a
           href="#main"
           className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-ink-900 focus:shadow-lift dark:focus:bg-ink-800 dark:focus:text-white"
         >
           Skip to content
         </a>
-        <div className="flex min-h-screen flex-col">
+        <div className="relative z-10 flex min-h-screen flex-col">
           <SiteHeader />
           <main id="main" className="relative flex-1 pt-8 sm:pt-12">
             <div className="relative">{children}</div>
diff --git a/app/page.tsx b/app/page.tsx
index aac0aab..fd2ac84 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -148,6 +148,21 @@ export default async function HomePage() {
               }
               aspect="aspect-[4/3] sm:aspect-[16/11]"
             />
+            <p className="mt-2.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-1 text-[11px] text-ink-500 dark:text-ink-400">
+              <span className="inline-flex items-center gap-1.5 font-medium">
+                <span className="relative flex h-1.5 w-1.5">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-400 opacity-75" />
+                  <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-gulf-500" />
+                </span>
+                Background lines show live mesh traffic
+              </span>
+              <span className="inline-flex items-center gap-2.5 text-[10px] text-ink-400 dark:text-ink-500">
+                <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-[#0d9488] dark:bg-[#00f5d4]" />Ads</span>
+                <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-[#2563eb] dark:bg-[#38bdf8]" />Messages</span>
+                <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-[#7c3aed] dark:bg-[#c084fc]" />Routing</span>
+                <span className="inline-flex items-center gap-1"><span className="h-1.5 w-1.5 rounded-full bg-[#d97706] dark:bg-[#fbbf24]" />Control</span>
+              </span>
+            </p>
           </div>
         </div>
       </section>
diff --git a/components/background.tsx b/components/background.tsx
new file mode 100644
index 0000000..8ae936b
--- /dev/null
+++ b/components/background.tsx
@@ -0,0 +1,571 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export type PacketCategory = "advert" | "message" | "route" | "control";
+
+type CoreScopeMessage = { type?: unknown; data?: unknown };
+type CoreScopePacket = { payload_type?: unknown; packet?: unknown };
+type Point = { x: number; y: number };
+type Trail = {
+  category: PacketCategory;
+  start: Point;
+  control: Point;
+  end: Point;
+  bornAt: number;
+  duration: number;
+  intensity: number;
+};
+type Anchor = Point & { phase: number; radius: number };
+type ReplayEvent = { offsetMs: number; payloadType: number };
+
+const DEFAULT_ANALYZER_URL = "wss://analyzer.gulfcoastmesh.org";
+const DESKTOP_TRAIL_LIMIT = 28;
+const MOBILE_TRAIL_LIMIT = 16;
+const IDLE_REPLAY_DELAY_MS = 0;
+
+export const TRAFFIC_COLORS: Record<"light" | "dark", Record<PacketCategory, string>> = {
+  light: {
+    advert: "#0d9488", // Gulf Coast Mesh teal
+    message: "#2563eb", // Comms blue
+    route: "#7c3aed", // Routing violet
+    control: "#d97706", // Telemetry amber
+  },
+  dark: {
+    advert: "#00f5d4", // Electric neon cyan-teal
+    message: "#38bdf8", // Vivid electric sky blue
+    route: "#c084fc", // Radiant electric violet
+    control: "#fbbf24", // Vibrant luminous amber-gold
+  },
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+const packetCategory = (message: CoreScopeMessage): PacketCategory | null => {
+  if (message.type !== "packet" || !isRecord(message.data)) return null;
+
+  const data = message.data as CoreScopePacket;
+  let payloadType = data.payload_type;
+  if (payloadType === undefined && isRecord(data.packet)) {
+    payloadType = data.packet.payload_type;
+  }
+
+  const parsedType =
+    typeof payloadType === "number"
+      ? payloadType
+      : typeof payloadType === "string"
+        ? Number.parseInt(payloadType, 10)
+        : Number.NaN;
+
+  if (parsedType === 4) return "advert";
+  if ([2, 5, 6].includes(parsedType)) return "message";
+  if ([8, 9].includes(parsedType)) return "route";
+  return "control";
+};
+
+const payloadCategory = (payloadType: number): PacketCategory => {
+  if (payloadType === 4) return "advert";
+  if ([2, 5, 6].includes(payloadType)) return "message";
+  if ([8, 9].includes(payloadType)) return "route";
+  return "control";
+};
+
+const randomEdgePoint = (side: number): Point => {
+  switch (side) {
+    case 0:
+      return { x: -0.04, y: Math.random() };
+    case 1:
+      return { x: 1.04, y: Math.random() };
+    case 2:
+      return { x: Math.random(), y: -0.04 };
+    default:
+      return { x: Math.random(), y: 1.04 };
+  }
+};
+
+const createTrail = (category: PacketCategory, now: number): Trail => {
+  const startSide = Math.floor(Math.random() * 4);
+  let endSide = Math.floor(Math.random() * 4);
+  if (endSide === startSide) endSide = (endSide + 2) % 4;
+
+  return {
+    category,
+    start: randomEdgePoint(startSide),
+    control: {
+      x: 0.25 + Math.random() * 0.5,
+      y: 0.2 + Math.random() * 0.6,
+    },
+    end: randomEdgePoint(endSide),
+    bornAt: now,
+    duration: 2600 + Math.random() * 1200,
+    intensity: 1,
+  };
+};
+
+const pointOnCurve = (trail: Trail, position: number): Point => {
+  const inverse = 1 - position;
+  return {
+    x:
+      inverse * inverse * trail.start.x +
+      2 * inverse * position * trail.control.x +
+      position * position * trail.end.x,
+    y:
+      inverse * inverse * trail.start.y +
+      2 * inverse * position * trail.control.y +
+      position * position * trail.end.y,
+  };
+};
+
+const easeOutCubic = (value: number) => 1 - Math.pow(1 - value, 3);
+
+export function Background() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const anchors: Anchor[] = Array.from({ length: 8 }, () => ({
+      x: 0.08 + Math.random() * 0.84,
+      y: 0.08 + Math.random() * 0.84,
+      phase: Math.random() * Math.PI * 2,
+      radius: 0.8 + Math.random() * 1.2,
+    }));
+    let trails: Trail[] = [];
+    let animationFrame = 0;
+    let socket: WebSocket | null = null;
+    let reconnectTimer: number | null = null;
+    let reconnectAttempt = 0;
+    let idleReplayTimer: number | null = null;
+    let replayAbortController: AbortController | null = null;
+    let replayEvents: ReplayEvent[] = [];
+    let replayDuration = 0;
+    let replayActive = false;
+    let replayStartedAt = 0;
+    let replayIndex = 0;
+    let replayLoadPromise: Promise<boolean> | null = null;
+    let demoTimer: number | null = null;
+    let isDark = document.documentElement.classList.contains("dark");
+    let isStopped = false;
+    let shouldConnect = !reducedMotion.matches && !document.hidden;
+    let lastFrameAt = 0;
+    let lastLivePacketAt = performance.now();
+
+    const resize = () => {
+      const ratio = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.floor(window.innerWidth * ratio);
+      canvas.height = Math.floor(window.innerHeight * ratio);
+      canvas.style.width = `${window.innerWidth}px`;
+      canvas.style.height = `${window.innerHeight}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    };
+
+    const addTrail = (category: PacketCategory) => {
+      const limit =
+        window.innerWidth < 640 ? MOBILE_TRAIL_LIMIT : DESKTOP_TRAIL_LIMIT;
+
+      if (trails.length >= limit) {
+        const existing = [...trails]
+          .reverse()
+          .find((trail) => trail.category === category);
+        if (existing) {
+          existing.intensity = Math.min(1.8, existing.intensity + 0.16);
+          existing.duration = Math.min(2800, existing.duration + 80);
+          return;
+        }
+        trails.shift();
+      }
+
+      trails.push(createTrail(category, performance.now()));
+    };
+
+    const draw = (now: number) => {
+      if (isStopped || reducedMotion.matches) return;
+
+      animationFrame = window.requestAnimationFrame(draw);
+      const minimumFrameDelay = trails.length > 0 ? 16 : 80;
+      if (now - lastFrameAt < minimumFrameDelay) return;
+      lastFrameAt = now;
+
+      if (replayActive && replayEvents.length > 0 && replayDuration > 0) {
+        let elapsed = now - replayStartedAt;
+        if (elapsed >= replayDuration) {
+          replayStartedAt +=
+            Math.floor(elapsed / replayDuration) * replayDuration;
+          replayIndex = 0;
+          elapsed = now - replayStartedAt;
+        }
+        while (
+          replayIndex < replayEvents.length &&
+          replayEvents[replayIndex].offsetMs <= elapsed
+        ) {
+          addTrail(payloadCategory(replayEvents[replayIndex].payloadType));
+          replayIndex += 1;
+        }
+      }
+
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      context.clearRect(0, 0, width, height);
+      const theme = isDark ? "dark" : "light";
+
+      // Subtle drifting anchor dots (faint mesh nodes in the background)
+      context.fillStyle = isDark
+        ? "rgba(148, 163, 184, 0.28)"
+        : "rgba(51, 65, 85, 0.16)";
+      for (const anchor of anchors) {
+        const driftX = Math.sin(now / 12000 + anchor.phase) * 3;
+        const driftY = Math.cos(now / 15000 + anchor.phase) * 3;
+        context.beginPath();
+        context.arc(
+          anchor.x * width + driftX,
+          anchor.y * height + driftY,
+          anchor.radius,
+          0,
+          Math.PI * 2
+        );
+        context.fill();
+      }
+
+      // Render active packet trails
+      trails = trails.filter((trail) => now - trail.bornAt < trail.duration);
+      for (const trail of trails) {
+        const lifetime = Math.min((now - trail.bornAt) / trail.duration, 1);
+        const head = easeOutCubic(lifetime);
+        const tail = Math.max(0, head - 0.28);
+        const fade = Math.pow(1 - lifetime, 1.25);
+        const steps = 18;
+
+        context.beginPath();
+        for (let index = 0; index <= steps; index += 1) {
+          const position = tail + ((head - tail) * index) / steps;
+          const point = pointOnCurve(trail, position);
+          const x = point.x * width;
+          const y = point.y * height;
+          if (index === 0) context.moveTo(x, y);
+          else context.lineTo(x, y);
+        }
+
+        context.globalAlpha =
+          (isDark
+            ? Math.min(0.94, 0.76 * trail.intensity)
+            : Math.min(0.78, 0.5 * trail.intensity)) * fade;
+        context.strokeStyle = TRAFFIC_COLORS[theme][trail.category];
+        context.lineWidth = isDark
+          ? Math.min(3.4, 2.0 * trail.intensity)
+          : Math.min(3.2, 1.8 * trail.intensity);
+        context.lineCap = "round";
+        context.lineJoin = "round";
+        context.shadowColor = TRAFFIC_COLORS[theme][trail.category];
+        context.shadowBlur = isDark ? 16 : 6;
+        context.stroke();
+
+        const headPoint = pointOnCurve(trail, head);
+        context.globalAlpha =
+          (isDark
+            ? Math.min(1, 0.95 * trail.intensity)
+            : Math.min(0.85, 0.58 * trail.intensity)) * fade;
+        context.shadowBlur = isDark ? 18 : 8;
+        context.beginPath();
+        context.arc(
+          headPoint.x * width,
+          headPoint.y * height,
+          isDark ? 2.8 : 2.4,
+          0,
+          Math.PI * 2
+        );
+        context.fillStyle = TRAFFIC_COLORS[theme][trail.category];
+        context.fill();
+
+        // High-energy photon core in dark mode for extra brilliance
+        if (isDark) {
+          context.shadowBlur = 4;
+          context.shadowColor = "#ffffff";
+          context.beginPath();
+          context.arc(
+            headPoint.x * width,
+            headPoint.y * height,
+            1.2,
+            0,
+            Math.PI * 2
+          );
+          context.fillStyle = "#ffffff";
+          context.globalAlpha = Math.min(0.95, 0.9 * trail.intensity) * fade;
+          context.fill();
+        }
+      }
+
+      context.globalAlpha = 1;
+      context.shadowBlur = 0;
+    };
+
+    const deactivateReplay = () => {
+      replayActive = false;
+      replayStartedAt = 0;
+      replayIndex = 0;
+    };
+
+    const activateReplay = () => {
+      if (replayEvents.length === 0 || replayDuration <= 0) return false;
+      replayActive = true;
+      replayStartedAt = performance.now();
+      replayIndex = 0;
+      return true;
+    };
+
+    const loadReplayBuffer = (): Promise<boolean> => {
+      if (replayEvents.length > 0 && replayDuration > 0) {
+        return Promise.resolve(true);
+      }
+      if (replayLoadPromise) return replayLoadPromise;
+      if (isStopped) return Promise.resolve(false);
+
+      replayAbortController?.abort();
+      const controller = new AbortController();
+      replayAbortController = controller;
+
+      const loadPromiseRef: { current?: Promise<boolean> } = {};
+      const loadPromise = (async () => {
+        try {
+          const response = await fetch("/api/mesh-replay", {
+            cache: "no-store",
+            signal: controller.signal,
+          });
+          if (!response.ok) throw new Error("Replay unavailable");
+          const payload: unknown = await response.json();
+          if (!isRecord(payload) || !Array.isArray(payload.events))
+            return false;
+
+          const duration = Number(payload.durationMs);
+          const events = payload.events.filter(
+            (event): event is ReplayEvent =>
+              isRecord(event) &&
+              Number.isFinite(event.offsetMs) &&
+              Number.isFinite(event.payloadType)
+          );
+          if (
+            events.length === 0 ||
+            !Number.isFinite(duration) ||
+            duration <= 0
+          ) {
+            return false;
+          }
+
+          replayEvents = events;
+          replayDuration = duration;
+          return true;
+        } catch {
+          return false;
+        } finally {
+          if (replayAbortController === controller) {
+            replayAbortController = null;
+          }
+          if (replayLoadPromise === loadPromiseRef.current) replayLoadPromise = null;
+        }
+      })();
+
+      loadPromiseRef.current = loadPromise;
+      replayLoadPromise = loadPromise;
+      return loadPromise;
+    };
+
+    const scheduleIdleReplay = () => {
+      if (idleReplayTimer !== null) window.clearTimeout(idleReplayTimer);
+      const idleFor = performance.now() - lastLivePacketAt;
+      const delay = Math.max(0, IDLE_REPLAY_DELAY_MS - idleFor);
+      idleReplayTimer = window.setTimeout(() => {
+        idleReplayTimer = null;
+        void beginIdleReplay();
+      }, delay);
+    };
+
+    const beginIdleReplay = async () => {
+      if (isStopped || reducedMotion.matches || document.hidden) return;
+
+      const replayAvailable = await loadReplayBuffer();
+      if (isStopped || reducedMotion.matches || document.hidden) return;
+
+      const idleFor = performance.now() - lastLivePacketAt;
+      if (idleFor < IDLE_REPLAY_DELAY_MS) {
+        scheduleIdleReplay();
+        return;
+      }
+
+      if (!replayAvailable || !activateReplay()) {
+        idleReplayTimer = window.setTimeout(beginIdleReplay, 10000);
+      }
+    };
+
+    const scheduleReconnect = () => {
+      if (!shouldConnect || isStopped || reconnectTimer !== null) return;
+      const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempt));
+      reconnectAttempt += 1;
+      reconnectTimer = window.setTimeout(
+        () => {
+          reconnectTimer = null;
+          connect();
+        },
+        delay + Math.random() * 350
+      );
+    };
+
+    const connect = () => {
+      if (
+        !shouldConnect ||
+        isStopped ||
+        socket?.readyState === WebSocket.CONNECTING ||
+        socket?.readyState === WebSocket.OPEN
+      ) {
+        return;
+      }
+      const analyzerUrl =
+        process.env.NEXT_PUBLIC_ANALYZER_WS_URL || DEFAULT_ANALYZER_URL;
+
+      let nextSocket: WebSocket;
+      try {
+        nextSocket = new WebSocket(analyzerUrl);
+        socket = nextSocket;
+      } catch {
+        scheduleReconnect();
+        return;
+      }
+
+      nextSocket.addEventListener("open", () => {
+        reconnectAttempt = 0;
+      });
+      nextSocket.addEventListener("message", (event) => {
+        if (typeof event.data !== "string") return;
+        try {
+          const category = packetCategory(JSON.parse(event.data));
+          if (category) {
+            lastLivePacketAt = performance.now();
+            deactivateReplay();
+            scheduleIdleReplay();
+            addTrail(category);
+          }
+        } catch {
+          // Ignore non-packet messages
+        }
+      });
+      nextSocket.addEventListener("close", () => {
+        if (socket === nextSocket) socket = null;
+        scheduleReconnect();
+      });
+      nextSocket.addEventListener("error", () => nextSocket.close());
+    };
+
+    const stopLiveActivity = () => {
+      if (reconnectTimer !== null) {
+        window.clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+      const activeSocket = socket;
+      socket = null;
+      activeSocket?.close();
+      if (idleReplayTimer !== null) {
+        window.clearTimeout(idleReplayTimer);
+        idleReplayTimer = null;
+      }
+      replayAbortController?.abort();
+      replayAbortController = null;
+      replayLoadPromise = null;
+      deactivateReplay();
+      trails = [];
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+    };
+
+    const handleMotionPreference = () => {
+      if (reducedMotion.matches) {
+        shouldConnect = false;
+        stopLiveActivity();
+        window.cancelAnimationFrame(animationFrame);
+        animationFrame = 0;
+      } else {
+        shouldConnect = !document.hidden;
+        lastLivePacketAt = performance.now();
+        connect();
+        void loadReplayBuffer();
+        scheduleIdleReplay();
+        animationFrame = window.requestAnimationFrame(draw);
+      }
+    };
+
+    const handleVisibility = () => {
+      shouldConnect = !document.hidden && !reducedMotion.matches;
+      if (!shouldConnect) {
+        stopLiveActivity();
+      } else {
+        lastLivePacketAt = performance.now();
+        connect();
+        void loadReplayBuffer();
+        scheduleIdleReplay();
+      }
+    };
+
+    const themeObserver = new MutationObserver(() => {
+      isDark = document.documentElement.classList.contains("dark");
+    });
+
+    resize();
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+    window.addEventListener("resize", resize);
+    document.addEventListener("visibilitychange", handleVisibility);
+    reducedMotion.addEventListener("change", handleMotionPreference);
+
+    if (!reducedMotion.matches) {
+      void loadReplayBuffer();
+      connect();
+      scheduleIdleReplay();
+      animationFrame = window.requestAnimationFrame(draw);
+
+      const isLocalhost =
+        typeof window !== "undefined" &&
+        ["localhost", "127.0.0.1"].includes(window.location.hostname);
+      const isDemo =
+        typeof window !== "undefined" &&
+        new URLSearchParams(window.location.search).has("mesh-demo");
+
+      if (isLocalhost && isDemo) {
+        const categories: PacketCategory[] = [
+          "advert",
+          "message",
+          "route",
+          "control",
+        ];
+        let categoryIndex = 0;
+        addTrail(categories[categoryIndex]);
+        demoTimer = window.setInterval(() => {
+          categoryIndex = (categoryIndex + 1) % categories.length;
+          addTrail(categories[categoryIndex]);
+        }, 450);
+      }
+    }
+
+    return () => {
+      isStopped = true;
+      shouldConnect = false;
+      if (demoTimer !== null) window.clearInterval(demoTimer);
+      stopLiveActivity();
+      window.cancelAnimationFrame(animationFrame);
+      themeObserver.disconnect();
+      window.removeEventListener("resize", resize);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      reducedMotion.removeEventListener("change", handleMotionPreference);
+    };
+  }, []);
+
+  return (
+    <div className="mesh-background" aria-hidden="true">
+      <canvas ref={canvasRef} className="mesh-background__canvas" />
+      <div className="mesh-background__scrim" />
+    </div>
+  );
+}
+
+export default Background;
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index b6468a3..d4a72b7 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -146,6 +146,32 @@ export function SiteFooter() {
           </p>
         </div>
 
+        <div className="mt-10 flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 text-xs" style={{ borderColor: "rgb(var(--line))", background: "rgb(var(--bg-elevated) / 0.7)" }}>
+          <div className="flex items-center gap-2.5">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-gulf-400 opacity-75" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-gulf-500" />
+            </span>
+            <span className="font-medium text-ink-700 dark:text-ink-200">
+              Live Background Network Traffic
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-ink-500 dark:text-ink-400">
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "#0d9488" }} /> Advertisements
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "#2563eb" }} /> Messages
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "#7c3aed" }} /> Routing
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "#d97706" }} /> Telemetry & Control
+            </span>
+          </div>
+        </div>
+
         <p className="mt-8 text-xs text-ink-500 dark:text-ink-400">
           © {new Date().getFullYear()} Gulf Coast Mesh Community
         </p>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8030884..514a06c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -3,7 +3,7 @@ import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
 import nextTypescript from "eslint-config-next/typescript";
 
 const config = [
-  { ignores: [".next/**", "node_modules/**", "out/**", "next-env.d.ts"] },
+  { ignores: [".next/**", "node_modules/**", "out/**", "next-env.d.ts", "LNSITE/**"] },
   ...next,
   ...nextCoreWebVitals,
   ...nextTypescript,
diff --git a/proxy.ts b/proxy.ts
index dcc479c..39e48bf 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -37,6 +37,8 @@ function buildCsp(nonce: string): string {
 
   const connectSrc = [
     "connect-src 'self'",
+    "https://analyzer.gulfcoastmesh.org",
+    "wss://analyzer.gulfcoastmesh.org",
     "https://in.getclicky.com",
     "https://lists.gulfcoastmesh.org",
     "https://explorer.gulfcoastmesh.org",
diff --git a/tsconfig.json b/tsconfig.json
index 803331c..e00ea93 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -36,6 +36,7 @@
     ".next/dev/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "LNSITE"
   ]
 }

From bcd1d0374c7cd2b710ae1160177930effced7f21 Mon Sep 17 00:00:00 2001
From: MrSharky01 <168514094+MrSharky01@users.noreply.github.com>
Date: Sun, 6 Sep 2026 09:42:21 -0400
Subject: [PATCH 6/6] chore: bump deps to close 8 npm audit vulnerabilities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

next 16.2.6 -> 16.3.4, sharp, postcss, browserslist, nanoid, brace-expansion,
babel — all within existing package.json semver ranges, no code changes.
---
 package-lock.json | 647 ++++++++++++++++++++++++----------------------
 1 file changed, 345 insertions(+), 302 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7cf52c0..b1f939f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,13 +59,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -74,9 +74,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
-      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -84,21 +84,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -115,14 +115,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -132,14 +132,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -149,9 +149,9 @@
       }
     },
     "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -159,29 +159,29 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -191,9 +191,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -201,9 +201,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -211,9 +211,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -221,27 +221,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
-      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
-      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.29.0"
+        "@babel/types": "^7.29.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -251,33 +251,33 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -285,14 +285,14 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -311,9 +311,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -575,9 +575,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz",
+      "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==",
       "cpu": [
         "arm64"
       ],
@@ -587,19 +587,19 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+        "@img/sharp-libvips-darwin-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
+      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
       "cpu": [
         "x64"
       ],
@@ -609,19 +609,38 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+        "@img/sharp-libvips-darwin-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
+      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz",
+      "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==",
       "cpu": [
         "arm64"
       ],
@@ -635,9 +654,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
+      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
       "cpu": [
         "x64"
       ],
@@ -651,9 +670,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
+      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
       "cpu": [
         "arm"
       ],
@@ -670,9 +689,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
+      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
       "cpu": [
         "arm64"
       ],
@@ -689,9 +708,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
+      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
       "cpu": [
         "ppc64"
       ],
@@ -708,9 +727,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
+      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
       "cpu": [
         "riscv64"
       ],
@@ -727,9 +746,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
+      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
       "cpu": [
         "s390x"
       ],
@@ -746,9 +765,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
+      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
       "cpu": [
         "x64"
       ],
@@ -765,9 +784,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
+      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
       "cpu": [
         "arm64"
       ],
@@ -784,9 +803,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
+      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
       "cpu": [
         "x64"
       ],
@@ -803,9 +822,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
+      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
       "cpu": [
         "arm"
       ],
@@ -818,19 +837,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+        "@img/sharp-libvips-linux-arm": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
+      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
       "cpu": [
         "arm64"
       ],
@@ -843,19 +862,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+        "@img/sharp-libvips-linux-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
+      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
       "cpu": [
         "ppc64"
       ],
@@ -868,19 +887,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+        "@img/sharp-libvips-linux-ppc64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
+      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
       "cpu": [
         "riscv64"
       ],
@@ -893,19 +912,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+        "@img/sharp-libvips-linux-riscv64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
+      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
       "cpu": [
         "s390x"
       ],
@@ -918,19 +937,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "@img/sharp-libvips-linux-s390x": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
+      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
       "cpu": [
         "x64"
       ],
@@ -943,19 +962,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "@img/sharp-libvips-linux-x64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
+      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
       "cpu": [
         "arm64"
       ],
@@ -968,19 +987,19 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
+      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
       "cpu": [
         "x64"
       ],
@@ -993,38 +1012,54 @@
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz",
+      "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
+      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
       "cpu": [
         "wasm32"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
+        "@img/sharp-wasm32": "0.35.4"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
+      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
       "cpu": [
         "arm64"
       ],
@@ -1034,16 +1069,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
+      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
       "cpu": [
         "ia32"
       ],
@@ -1053,16 +1088,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
+      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
       "cpu": [
         "x64"
       ],
@@ -1072,7 +1107,7 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
@@ -1138,9 +1173,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.6.tgz",
-      "integrity": "sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.4.tgz",
+      "integrity": "sha512-cjWZnUUa6jZq2kFaNe/ZyJdZonOZ/QoN0Zka2nz/FLOrfx14pQuM9c5RaSVkWMqgdt4ksgPAMWPyHSs/CyV48Q==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1154,9 +1189,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.6.tgz",
-      "integrity": "sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.4.tgz",
+      "integrity": "sha512-iBr3I5LZNk5/bgl5//iTgD2tcym14MX0Xo7fD//u9dYAEgGzza1y9oywluPtf74YnOswVdH1908aK9xVz7zQTw==",
       "cpu": [
         "arm64"
       ],
@@ -1170,9 +1205,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.6.tgz",
-      "integrity": "sha512-v/YLBHIY132Ced3puBJ7YJKw1lqsCrgcNo2aRJlCEyQrrCeRJlvGlnmxhPxNQI3KE3N1DN5r9TPNPvka3nq5RQ==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.4.tgz",
+      "integrity": "sha512-2dpiSyl2Jw/NrBPaU2MAKGSa+2MR82pJIn4Sm5Rjr+gxAeuh0z158Su3Z2O8zn7UNNq+ej4bToed6RcRN/Lydg==",
       "cpu": [
         "x64"
       ],
@@ -1186,9 +1221,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.6.tgz",
-      "integrity": "sha512-RPOvqlYBbcQjkz9VQQDZ2T2bARIjXZV1KFlt+V2Mr6SW/e4I9fcKsaA0hdyf2FHoTlsV2xnBd5Y912rP/1Ce6w==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.4.tgz",
+      "integrity": "sha512-+t+U8HZT+fApePCS5h89CSH3datz29MkzyfCn+6fpsZBG/oiEOhINcb9rtkv6sdpToLGFn2e6146NzaKCXkqrA==",
       "cpu": [
         "arm64"
       ],
@@ -1205,9 +1240,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.6.tgz",
-      "integrity": "sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.4.tgz",
+      "integrity": "sha512-mx03GNs1ocQA5JQ4FxDMmIsNkdrZh8cuezKCrId28e5/gIPU/l7Kcy2+vmCCzdjnnmXJy+iOAu+7K0QppO6Urg==",
       "cpu": [
         "arm64"
       ],
@@ -1224,9 +1259,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.6.tgz",
-      "integrity": "sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.4.tgz",
+      "integrity": "sha512-YIhGY6fSMfha52bnVxnzc9zaVBzJg+cqQTOD8tXIBSx4fuv0pVMxQTE0PaS59YhnMOiYiG09IMwxJAf/CFm/Dw==",
       "cpu": [
         "x64"
       ],
@@ -1243,9 +1278,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.6.tgz",
-      "integrity": "sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.4.tgz",
+      "integrity": "sha512-+eaaX6axpDb0yF1GCpiERe6njplvdC+nks/fKfcHu3XPGRrald8P3/X7yv7QLdjA51knnxwl9pxdIJsg+w1L+Q==",
       "cpu": [
         "x64"
       ],
@@ -1262,9 +1297,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.6.tgz",
-      "integrity": "sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.4.tgz",
+      "integrity": "sha512-0jcXW7Xs/uzICrmgV3MhDYDeRy++1CqnpDIerlPIqYO4bhzB4WNbX/aRnQclustsAyTkFKB0z6rbcjmNg5tR8A==",
       "cpu": [
         "arm64"
       ],
@@ -1278,9 +1313,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.6.tgz",
-      "integrity": "sha512-F0+4i0h9J6C4eE3EAPWsoCk7UW/dbzOjyzxY0qnDUOYFu6FFmdZ6l97/XdV3/Nz3VYyO7UWjyEJUXkGqcoXfMA==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.4.tgz",
+      "integrity": "sha512-vvBzwu1pYQCp92maZCFCIw/XgOTMR5tur9GjakwIo2cmwRTMKajRZZDS9+e4KsUZWKu1E007WUeAFXRRjZeuzw==",
       "cpu": [
         "x64"
       ],
@@ -1355,9 +1390,9 @@
       "license": "MIT"
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.8.0"
@@ -1695,16 +1730,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": "20 || >=22"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
@@ -2461,9 +2496,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.29",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.29.tgz",
-      "integrity": "sha512-Asa2krT+XTPZINCS+2QcyS8WTkObE77RwkydwF7h6DmnKqbvlalz93m/dnphUyCa6SWSP51VgtEUf2FN+gelFQ==",
+      "version": "2.11.21",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.21.tgz",
+      "integrity": "sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -2485,9 +2520,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2508,9 +2543,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
-      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "version": "4.28.9",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.9.tgz",
+      "integrity": "sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==",
       "dev": true,
       "funding": [
         {
@@ -2528,11 +2563,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.12",
-        "caniuse-lite": "^1.0.30001782",
-        "electron-to-chromium": "^1.5.328",
-        "node-releases": "^2.0.36",
-        "update-browserslist-db": "^1.2.3"
+        "baseline-browser-mapping": "^2.11.20",
+        "caniuse-lite": "^1.0.30001810",
+        "electron-to-chromium": "^1.5.420",
+        "node-releases": "^2.0.54",
+        "update-browserslist-db": "^1.3.2"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2611,9 +2646,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001792",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001792.tgz",
-      "integrity": "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==",
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "funding": [
         {
           "type": "opencollective",
@@ -3029,9 +3064,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.356",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.356.tgz",
-      "integrity": "sha512-9NgFd7m5t5MCJ5rUSjJITUXAH9mEGlrlofnMf4YEr+pz6JlP7cWmTAH+JFmbPnaSW8koVTkuW7pacORWAnA5Yw==",
+      "version": "1.5.422",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.422.tgz",
+      "integrity": "sha512-UvA/32XqrLDdZSn7Jllo1AYNcWji/G0d5M0GTViE7KoGBiMunw3a34Sb2KO4ZZyrSEhqsxFoVhWWJshdyfKqJA==",
       "dev": true,
       "license": "ISC"
     },
@@ -5992,9 +6027,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.12",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
-      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
@@ -6033,16 +6068,16 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.2.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.2.6.tgz",
-      "integrity": "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw==",
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.3.4.tgz",
+      "integrity": "sha512-/Ztf6CeRH+ejEXUrYtqI4gkS66eFIHuSwqi60RgcpWKodxFZx2/dqVCMKBwILfAHXQ+F1b1vAudgj3mnxqtoIA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.2.6",
-        "@swc/helpers": "0.5.15",
+        "@next/env": "16.3.4",
+        "@swc/helpers": "0.5.23",
         "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
-        "postcss": "8.4.31",
+        "postcss": "8.5.23",
         "styled-jsx": "5.1.6"
       },
       "bin": {
@@ -6052,15 +6087,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.2.6",
-        "@next/swc-darwin-x64": "16.2.6",
-        "@next/swc-linux-arm64-gnu": "16.2.6",
-        "@next/swc-linux-arm64-musl": "16.2.6",
-        "@next/swc-linux-x64-gnu": "16.2.6",
-        "@next/swc-linux-x64-musl": "16.2.6",
-        "@next/swc-win32-arm64-msvc": "16.2.6",
-        "@next/swc-win32-x64-msvc": "16.2.6",
-        "sharp": "^0.34.5"
+        "@next/swc-darwin-arm64": "16.3.4",
+        "@next/swc-darwin-x64": "16.3.4",
+        "@next/swc-linux-arm64-gnu": "16.3.4",
+        "@next/swc-linux-arm64-musl": "16.3.4",
+        "@next/swc-linux-x64-gnu": "16.3.4",
+        "@next/swc-linux-x64-musl": "16.3.4",
+        "@next/swc-win32-arm64-msvc": "16.3.4",
+        "@next/swc-win32-x64-msvc": "16.3.4",
+        "sharp": "^0.35.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -6105,11 +6140,14 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.44",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.44.tgz",
-      "integrity": "sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==",
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -6435,9 +6473,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
       "funding": [
         {
           "type": "opencollective",
@@ -6454,7 +6492,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -6593,9 +6631,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -7154,54 +7192,59 @@
       "license": "MIT"
     },
     "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.4.tgz",
+      "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@img/colour": "^1.0.0",
+        "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
+        "semver": "^7.8.5"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
+        "@img/sharp-darwin-arm64": "0.35.4",
+        "@img/sharp-darwin-x64": "0.35.4",
+        "@img/sharp-freebsd-wasm32": "0.35.4",
+        "@img/sharp-libvips-darwin-arm64": "1.3.3",
+        "@img/sharp-libvips-darwin-x64": "1.3.3",
+        "@img/sharp-libvips-linux-arm": "1.3.3",
+        "@img/sharp-libvips-linux-arm64": "1.3.3",
+        "@img/sharp-libvips-linux-ppc64": "1.3.3",
+        "@img/sharp-libvips-linux-riscv64": "1.3.3",
+        "@img/sharp-libvips-linux-s390x": "1.3.3",
+        "@img/sharp-libvips-linux-x64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
+        "@img/sharp-linux-arm": "0.35.4",
+        "@img/sharp-linux-arm64": "0.35.4",
+        "@img/sharp-linux-ppc64": "0.35.4",
+        "@img/sharp-linux-riscv64": "0.35.4",
+        "@img/sharp-linux-s390x": "0.35.4",
+        "@img/sharp-linux-x64": "0.35.4",
+        "@img/sharp-linuxmusl-arm64": "0.35.4",
+        "@img/sharp-linuxmusl-x64": "0.35.4",
+        "@img/sharp-webcontainers-wasm32": "0.35.4",
+        "@img/sharp-win32-arm64": "0.35.4",
+        "@img/sharp-win32-ia32": "0.35.4",
+        "@img/sharp-win32-x64": "0.35.4"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
       "license": "ISC",
       "optional": true,
       "bin": {
@@ -8092,9 +8135,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
       "dev": true,
       "funding": [
         {
