@carrierllc/mcp 0.2.19 → 0.3.0

package/templates/storefront/src/app/globals.css

@@ -1,99 +1,89 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
 @theme {
-  /* Brand palette — overridden per white-label via CSS vars */
-  --color-brand-bg: var(--brand-bg);
-  --color-brand-accent: var(--brand-accent);
-  --color-brand-accent-dark: var(--brand-accent-dark);
-  --color-brand-accent-light: var(--brand-accent-light);
-  --color-brand-text: var(--brand-text);
-  --color-brand-text-secondary: var(--brand-text-secondary);
+  --color-leaf-50: #F0FDF4;
+  --color-leaf-500: #22C55E;
+  --color-leaf-600: #16A34A;
+  --color-leaf-700: #15803D;
 
-  /* Map mango-* → brand flame so ported component classNames keep working */
-  --color-mango-50: #fff4ef;
-  --color-mango-100: #ffe0d0;
-  --color-mango-200: #ffbfa0;
-  --color-mango-300: #ff9970;
-  --color-mango-400: #ff7d4d;
-  --color-mango-500: var(--brand-accent);
-  --color-mango-600: var(--brand-accent-dark);
-  --color-mango-700: #b33a17;
-  --color-mango-800: #8a2d12;
-  --color-mango-900: #5e1e0c;
-  --color-mango-950: #3a1107;
+  --color-sand-50: #FAFAF7;
+  --color-sand-100: #F4F2EC;
+  --color-sand-200: #E8E4D8;
+  --color-sand-400: #A8A28E;
+  --color-sand-500: #78725F;
+  --color-sand-600: #5C5644;
+  --color-sand-700: #3F3B30;
+  --color-sand-800: #2C291F;
+  --color-sand-900: #1A1812;
+  --color-sand-950: #0F0E0A;
 
-  /* Neutral slate */
-  --color-slate-950: #080C16;
+  --font-sans: var(--font-geist-sans, "Geist", "Inter", system-ui, sans-serif);
+  --font-display: var(--font-geist-sans, "Geist", system-ui, sans-serif);
+  --font-mono: var(--font-geist-mono, ui-monospace, monospace);
 
-  /* Fonts */
-  --font-sans: var(--font-geist-sans, system-ui, sans-serif);
-  --font-mono: var(--font-geist-mono, monospace);
-
-  /* Radii */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-2xl: 28px;
   --radius-full: 9999px;
 }
 
-/* ── Brand CSS variables (dark-first default) ─────────────────────────────── */
-:root {
-  --brand-bg: #080C16;
-  --brand-accent: #FF6B35;
-  --brand-accent-dark: #D9461C;
-  --brand-accent-light: #FFB088;
-  --brand-text: #F5F1EA;
-  --brand-text-secondary: #C9CCD6;
-}
+@layer base {
+  :root {
+    color-scheme: light;
+    --brand-accent: #FF6B35;
+    --brand-accent-dark: #D9461C;
+    --brand-accent-light: #FFB088;
+  }
 
-[data-theme="light"] {
-  --brand-bg: #FAFAF8;
-  --brand-text: #0F1117;
-  --brand-text-secondary: #6B7280;
-}
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
 
-/* ── Base reset ───────────────────────────────────────────────────────────── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+  * { box-sizing: border-box; }
 
-html {
-  scroll-behavior: smooth;
-  -webkit-text-size-adjust: 100%;
-}
+  html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--color-sand-50);
+    scrollbar-gutter: stable;
+  }
 
-body {
-  background-color: var(--brand-bg);
-  color: var(--brand-text);
-  font-family: var(--font-sans);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  body {
+    background-color: var(--color-sand-50);
+    color: var(--color-sand-900);
+    font-family: var(--font-sans);
+    text-rendering: optimizeLegibility;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
 
-/* ── Selection ───────────────────────────────────────────────────────────── */
-::selection {
-  background-color: color-mix(in srgb, var(--brand-accent) 30%, transparent);
-  color: var(--brand-text);
-}
+  html[data-theme="dark"] {
+    background-color: var(--color-sand-950);
+  }
 
-/* ── Scrollbar ───────────────────────────────────────────────────────────── */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--brand-accent) 40%, transparent);
-  border-radius: 3px;
+  html[data-theme="dark"] body {
+    background-color: var(--color-sand-950);
+    color: var(--color-sand-50);
+  }
+
+  ::selection {
+    background-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--brand-accent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }

package/templates/storefront/src/app/help/page.tsx

@@ -1,24 +1,29 @@
-export const metadata = { title: "Help" };
+import { HowItWorks } from "@/components/landing/HowItWorks";
+import brand from "@/brand.config";
 
-const STEPS = [
-  { title: "1. Choose your plan", body: "Browse plans by region or data size and select one that suits your trip." },
-  { title: "2. Create an account", body: "Sign up for free to manage your eSIMs in one place." },
-  { title: "3. Complete checkout", body: "Pay securely. You will receive a QR code by email within seconds." },
-  { title: "4. Scan & connect", body: "Open Settings on your device, scan the QR code, and you are online." },
-];
+export const metadata = { title: "Help" };
 
 export default function HelpPage() {
   return (
-    <div className="mx-auto max-w-3xl px-4 py-24">
-      <h1 className="text-3xl font-bold text-white mb-4">How it works</h1>
-      <p className="text-white/50 mb-12">Get connected in under 5 minutes.</p>
-      <div className="grid gap-6">
-        {STEPS.map((step) => (
-          <div key={step.title} className="rounded-2xl border border-white/10 bg-white/5 p-6">
-            <h2 className="font-semibold text-white mb-2">{step.title}</h2>
-            <p className="text-sm text-white/60">{step.body}</p>
-          </div>
-        ))}
+    <div className="pb-16">
+      <div className="mx-auto max-w-3xl px-4 py-16">
+        <h1 className="text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+          Help
+        </h1>
+        <p className="mt-2 text-sand-600 dark:text-sand-400">
+          Get connected in under five minutes. Humans on WhatsApp, 24/7.
+        </p>
+      </div>
+      <HowItWorks />
+      <div className="mx-auto max-w-3xl px-4 pt-10 text-sm text-sand-600 dark:text-sand-400">
+        Need a human?{" "}
+        <a href={`mailto:${brand.supportEmail}`} className="font-medium" style={{ color: "var(--brand-accent)" }}>
+          {brand.supportEmail}
+        </a>
+        {" · "}
+        <a href="/contact" className="font-medium" style={{ color: "var(--brand-accent)" }}>
+          All channels
+        </a>
       </div>
     </div>
   );

package/templates/storefront/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
 import { Providers } from "@/components/Providers";
 import { ThemeScript } from "@/components/theme/theme-script";
+import { BrandStyles } from "@/components/theme/BrandStyles";
 import { StorefrontNav } from "@/components/nav/StorefrontNav";
 import { StorefrontFooter } from "@/components/footer/StorefrontFooter";
 import brand from "@/brand.config";
@@ -12,7 +13,7 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: {
-    default: brand.name,
+    default: `${brand.name} — ${brand.tagline}`,
     template: `%s — ${brand.name}`,
   },
   description: brand.tagline,
@@ -30,24 +31,34 @@ export const metadata: Metadata = {
 
 export const viewport: Viewport = {
   themeColor: brand.colors.accent,
-  colorScheme: "dark light",
+  colorScheme: "light dark",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"
-      data-theme="dark"
+      data-theme="light"
       className={`${GeistSans.variable} ${GeistMono.variable}`}
       suppressHydrationWarning
     >
       <head>
         <ThemeScript />
+        <BrandStyles />
       </head>
       <body>
         <Providers>
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-20 focus:z-[100] focus:rounded-lg focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white"
+            style={{ background: "var(--brand-accent)" }}
+          >
+            Skip to main content
+          </a>
           <StorefrontNav />
-          <main className="pt-16 min-h-screen">{children}</main>
+          <main id="main-content" className="pt-16">
+            {children}
+          </main>
           <StorefrontFooter />
         </Providers>
       </body>

package/templates/storefront/src/app/page.tsx

@@ -1,4 +1,6 @@
 import { HeroSection } from "@/components/landing/HeroSection";
+import { HowItWorks } from "@/components/landing/HowItWorks";
+import { FinalCTA } from "@/components/landing/FinalCTA";
 import { FaqSection } from "@/components/faq/FaqSection";
 import { fetchTemplates } from "@/vendor/carrier/client";
 import { PlanCard } from "@/components/landing/PlanCard";
@@ -11,21 +13,28 @@ export default async function HomePage() {
     <>
       <HeroSection />
 
-      <section className="py-24 bg-[var(--brand-bg)]">
-        <div className="mx-auto max-w-6xl px-4">
-          <h2 className="text-3xl font-bold text-white text-center mb-4">Popular plans</h2>
-          <p className="text-center text-white/50 mb-12">
-            Instant activation. No contracts. Cancel anytime.
+      <section className="px-4 py-20">
+        <div className="mx-auto max-w-6xl">
+          <p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-sand-500">
+            Plans
           </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <h2 className="mt-2 text-center text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+            Popular plans
+          </h2>
+          <p className="mx-auto mt-3 max-w-lg text-center text-sand-600 dark:text-sand-400">
+            Instant activation. No contracts. Price next to the limit.
+          </p>
+          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
             {featured.map((plan, i) => (
-              <PlanCard key={plan.id} plan={plan} featured={i === 1} />
+              <PlanCard key={plan.id} plan={plan} featured={i === 1} href={`/checkout/${plan.id}`} />
             ))}
           </div>
         </div>
       </section>
 
+      <HowItWorks />
       <FaqSection />
+      <FinalCTA />
     </>
   );
 }

package/templates/storefront/src/app/shop/ShopClient.tsx

@@ -15,9 +15,13 @@ export function ShopClient({ plans }: { plans: SkuTemplate[] }) {
 
   return (
     <div className="mx-auto max-w-6xl px-4 py-16">
-      <h1 className="text-4xl font-bold text-white mb-2">Choose your plan</h1>
-      <p className="text-white/50 mb-12">Instant activation. No contracts.</p>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <h1 className="text-4xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+        Choose your plan
+      </h1>
+      <p className="mt-2 mb-12 text-sand-600 dark:text-sand-400">
+        Instant activation. No contracts. Price next to the limit.
+      </p>
+      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
         {plans.map((plan, i) => (
           <PlanCard key={plan.id} plan={plan} featured={i === 1} onSelect={handleSelect} />
         ))}

package/templates/storefront/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -16,7 +16,7 @@ export default async function SignInPage({ searchParams }: Props) {
   return (
     <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
       <SignIn
-        redirectUrl={redirectUrl}
+        fallbackRedirectUrl={redirectUrl}
         signUpUrl="/sign-up"
       />
     </div>

package/templates/storefront/src/app/sign-up/[[...sign-up]]/StorefrontSignUpClient.tsx

@@ -10,7 +10,7 @@
  *   useClerk()   → { setActive }
  */
 import { useState, FormEvent } from "react";
-import { useSignUp } from "@clerk/nextjs/legacy";
+import { useSignUp } from "@clerk/nextjs";
 import { useClerk } from "@clerk/nextjs";
 import { useSearchParams, useRouter } from "next/navigation";
 import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
@@ -82,14 +82,14 @@ export function StorefrontSignUpClient() {
   }
 
   return (
-    <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+    <div className="w-full max-w-sm rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
       {step === "credentials" && (
         <>
-          <h1 className="text-xl font-bold text-white mb-1">Create account</h1>
-          <p className="text-xs text-white/40 mb-6">Email and password — no phone required.</p>
+          <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Create account</h1>
+          <p className="text-xs text-sand-500 mb-6">Email and password — no phone required.</p>
           <form onSubmit={handleCredentials} className="space-y-4">
             <div>
-              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-email">
+              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-email">
                 Email address
               </label>
               <input
@@ -99,12 +99,12 @@ export function StorefrontSignUpClient() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                 placeholder="you@example.com"
               />
             </div>
             <div>
-              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-password">
+              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-password">
                 Password
               </label>
               <input
@@ -115,7 +115,7 @@ export function StorefrontSignUpClient() {
                 minLength={8}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                 placeholder="Min. 8 characters"
               />
             </div>
@@ -132,7 +132,7 @@ export function StorefrontSignUpClient() {
               {loading ? "Creating account…" : "Continue"}
             </button>
           </form>
-          <p className="mt-4 text-center text-xs text-white/30">
+          <p className="mt-4 text-center text-xs text-sand-400">
             Already have an account?{" "}
             <a href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
               Sign in
@@ -143,13 +143,13 @@ export function StorefrontSignUpClient() {
 
       {step === "verify" && (
         <>
-          <h1 className="text-xl font-bold text-white mb-1">Check your email</h1>
-          <p className="text-xs text-white/40 mb-6">
-            We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+          <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Check your email</h1>
+          <p className="text-xs text-sand-500 mb-6">
+            We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
           </p>
           <form onSubmit={handleVerify} className="space-y-4">
             <div>
-              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-code">
+              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-code">
                 Verification code
               </label>
               <input
@@ -161,7 +161,7 @@ export function StorefrontSignUpClient() {
                 maxLength={6}
                 value={code}
                 onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
-                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                 placeholder="000000"
               />
             </div>
@@ -181,7 +181,7 @@ export function StorefrontSignUpClient() {
           <button
             type="button"
             onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
-            className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+            className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
           >
             ← Back
           </button>
@@ -191,7 +191,7 @@ export function StorefrontSignUpClient() {
       {step === "complete" && (
         <div className="text-center space-y-3 py-4">
           <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-          <p className="text-sm text-white/60">Setting up your account…</p>
+          <p className="text-sm text-sand-600 dark:text-sand-400">Setting up your account…</p>
         </div>
       )}
     </div>

package/templates/storefront/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -17,7 +17,7 @@ export default function SignUpPage() {
         fallback={
           <div className="text-center space-y-3">
             <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-            <p className="text-sm text-white/60">Loading…</p>
+            <p className="text-sm text-sand-600 dark:text-sand-400">Loading…</p>
           </div>
         }
       >

package/templates/storefront/src/brand.config.ts

@@ -11,12 +11,12 @@ const brand = {
   supportEmail: "support@carrier.llc",
   supportWhatsapp: "+17864604829",
   colors: {
-    bg: "#080C16",
+    bg: "#FAFAF7",
     accent: "#FF6B35",
     accentDark: "#D9461C",
     accentLight: "#FFB088",
-    text: "#F5F1EA",
-    textSecondary: "#C9CCD6",
+    text: "#1A1812",
+    textSecondary: "#5C5644",
   },
   social: {
     x: "@carrier_llc",

package/templates/storefront/src/components/faq/FaqSection.tsx

@@ -3,45 +3,41 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/vendor/ui/cn";
+import brand from "@/brand.config";
 
 const FAQS = [
   {
     q: "What is an eSIM?",
-    a: "An eSIM (embedded SIM) is a digital SIM that lets you activate a mobile plan without a physical SIM card. You scan a QR code and your device is connected instantly.",
+    a: "An eSIM is a digital SIM. You scan a QR code — no plastic card, no store visit. Your phone is online in about 30 seconds.",
   },
   {
     q: "Which devices are compatible?",
-    a: "Most modern smartphones, tablets, and smartwatches support eSIM — including iPhone XS and later, Samsung Galaxy S21+, Google Pixel 3a+, and many more.",
+    a: "iPhone XS and later, recent Google Pixels, Samsung Galaxy S21 and newer, and most modern iPads. If your phone can add a cellular plan in Settings, you are set.",
   },
   {
-    q: "How quickly does the eSIM activate?",
-    a: "Activation is immediate after purchase. You will receive a QR code by email within seconds. Scan it in your device settings and you are connected.",
+    q: "How fast is activation?",
+    a: "The QR code arrives by email as soon as payment clears. Scan it before you fly or after you land.",
   },
   {
-    q: "What happens when my data runs out?",
-    a: "You will receive a notification when you are running low. You can purchase a top-up or a new plan from the dashboard at any time.",
+    q: "What happens when data runs low?",
+    a: "You get a warning, then you can top up or buy another plan from the dashboard. We do not cut you off without telling you.",
   },
   {
-    q: "Can I use my eSIM in multiple countries?",
-    a: "Yes — regional plans cover multiple countries. Check the plan details for the exact coverage area before purchasing.",
+    q: "Can I use one plan in several countries?",
+    a: "Regional and nomad plans cover more than one country. The card lists coverage before you pay.",
   },
 ];
 
 function FaqItem({ q, a }: { q: string; a: string }) {
   const [open, setOpen] = useState(false);
   return (
-    <div className="border-b border-white/10">
+    <div className="border-b border-sand-200 dark:border-sand-800">
       <button
-        className="flex w-full items-center justify-between py-4 text-left text-white hover:text-[var(--brand-accent)] transition-colors"
+        className="flex w-full items-center justify-between py-4 text-left text-sand-900 transition-colors hover:text-[var(--brand-accent)] dark:text-sand-50"
         onClick={() => setOpen((o) => !o)}
       >
         <span className="font-medium">{q}</span>
-        <span
-          className={cn(
-            "ml-4 shrink-0 text-[var(--brand-accent)] transition-transform",
-            open && "rotate-45",
-          )}
-        >
+        <span className={cn("ml-4 shrink-0 text-[var(--brand-accent)] transition-transform", open && "rotate-45")}>
           +
         </span>
       </button>
@@ -54,7 +50,7 @@ function FaqItem({ q, a }: { q: string; a: string }) {
             transition={{ duration: 0.2 }}
             className="overflow-hidden"
           >
-            <p className="pb-4 text-sm text-white/60">{a}</p>
+            <p className="pb-4 text-sm leading-relaxed text-sand-600 dark:text-sand-400">{a}</p>
           </motion.div>
         )}
       </AnimatePresence>
@@ -64,16 +60,17 @@ function FaqItem({ q, a }: { q: string; a: string }) {
 
 export function FaqSection() {
   return (
-    <section className="py-24 bg-[var(--brand-bg)]">
-      <div className="mx-auto max-w-2xl px-4">
-        <h2 className="text-3xl font-bold text-white text-center mb-12">
-          Frequently asked questions
+    <section className="px-4 py-20">
+      <div className="mx-auto max-w-2xl">
+        <h2 className="mb-10 text-center text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+          Questions, answered
         </h2>
-        <div>
-          {FAQS.map((faq) => (
-            <FaqItem key={faq.q} q={faq.q} a={faq.a} />
-          ))}
-        </div>
+        {FAQS.map((faq) => (
+          <FaqItem key={faq.q} q={faq.q} a={faq.a} />
+        ))}
+        <p className="mt-8 text-center text-sm text-sand-500">
+          Still stuck? WhatsApp {brand.name} — real humans, 24/7.
+        </p>
       </div>
     </section>
   );