Marketing landing: full WorkClaw-structure clone with ship-crew copy

Rebuilt the public landing to mirror WorkClaw's complete section layout
(verified against tools/wc-capture/out/shots/marketing.png), with original
"clawmates crew on a ship" copy and captured WorkClaw art wired as
swappable placeholders.

Sections (top to bottom): sticky pill nav (dark Get-started CTA) · hero
(dual CTA + trust row + crew banner) · crew strip · positioning headline +
four trait badges · One-click setup (periwinkle panel) · Works where you do
· Always on watch (dark panel) · Your work, your way (3 skill tiles) ·
Safety built into the hull (security columns) · FAQ on the blue field · Build
your AI crew CTA on the dotted field · dark footer.

- No SOC 2 / compliance claims (p7-marketing enforces this); honesty kept by
  replacing WorkClaw's customer-logo marquee with our own crew strip.
- A11y: AA contrast fixes — text-xl coral CTAs (large-text bar), darker
  coral-strong accent on periwinkle, deeper FAQ blue for white text.
- New tokens: marketing-blue, marketing-coral-strong.
- visual.spec marketing test scrolls + waits for lazy art before the shot;
  regenerated the marketing baseline. (Deepest <img> — the security art —
  renders for users but is blank only in Playwright's full-page capture.)
- Vendored the captured WorkClaw asset bundle under public/images/.

Built, typechecked, linted, p7-marketing + @visual green, deployed via
Compose and verified live on :3000.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/marketing/Faq.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown } from "lucide-react";
+import { Minus, Plus } from "lucide-react";
 import { useState } from "react";
 
 const FAQS: { q: string; a: string }[] = [
@@ -26,37 +26,44 @@ const FAQS: { q: string; a: string }[] = [
   },
 ];
 
-/** FAQ accordion (measured): one open at a time, chevron rotates. */
+/** FAQ accordion on WorkClaw's solid-blue field: one open at a time, the
+ *  "+" toggles to "–", white rounded rows. */
 export function Faq() {
   const [open, setOpen] = useState<number | null>(0);
   return (
-    <section id="faq" className="mx-auto w-[min(760px,92%)] py-16">
-      <h2 className="text-center text-[clamp(30px,5vw,48px)] font-extrabold tracking-[-1.5px]">
-        Questions, <span className="text-marketing-coral">answered</span>.
+    <section
+      id="faq"
+      className="w-full bg-marketing-blue px-4 py-[80px] sm:py-[112px]"
+    >
+      <h2 className="text-center text-[clamp(30px,5vw,48px)] font-extrabold tracking-[-1.5px] text-marketing-ink">
+        Questions, <span className="text-white">answered</span>.
       </h2>
-      <div className="flex flex-col gap-3 pt-10">
+      <div className="mx-auto flex w-[min(880px,94%)] flex-col gap-4 pt-12">
         {FAQS.map((item, i) => (
-          <div
-            key={item.q}
-            className="rounded-2xl border border-marketing-border bg-white"
-          >
+          <div key={item.q} className="rounded-2xl bg-white shadow-sm">
             <button
               type="button"
               aria-expanded={open === i}
               onClick={() => setOpen(open === i ? null : i)}
-              className="flex w-full items-center justify-between gap-4 px-6 py-4 text-left text-base font-semibold"
+              className="flex w-full items-center justify-between gap-4 px-7 py-5 text-left text-lg font-bold text-marketing-ink"
             >
               {item.q}
-              <ChevronDown
-                aria-hidden
-                size={18}
-                className={`shrink-0 text-marketing-slate transition-transform duration-(--duration-normal) ease-app ${
-                  open === i ? "rotate-180" : ""
-                }`}
-              />
+              {open === i ? (
+                <Minus
+                  aria-hidden
+                  size={20}
+                  className="shrink-0 text-marketing-slate"
+                />
+              ) : (
+                <Plus
+                  aria-hidden
+                  size={20}
+                  className="shrink-0 text-marketing-slate"
+                />
+              )}
             </button>
             {open === i && (
-              <p className="px-6 pb-5 text-sm leading-relaxed text-marketing-slate">
+              <p className="px-7 pb-6 text-sm leading-relaxed text-marketing-slate">
                 {item.a}
               </p>
             )}