From 7e50faa43f68cd896b298056deac0f390b708fb0 Mon Sep 17 00:00:00 2001
From: x <x@xdeMacBook-Air.local>
Date: Thu, 6 Aug 2026 21:16:19 +0800
Subject: [PATCH] =?UTF-8?q?AIT-611:=20LandingHowItWorks=20residual=20lime?=
 =?UTF-8?q?=20=E2=86=92=20gallery=20copper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map step-number chrome off hard-coded competitor lime glow onto
gallery copper board tokens (--brand fill + rgba(196,165,116) glow).
Smoke-lock LandingHowItWorks in generate-360 / product-proof.

Closes AIT-611

Co-authored-by: multica-agent <github@multica.ai>
---
 components/LandingHowItWorks.tsx   |  2 +-
 scripts/generate-360-cta-smoke.mjs | 18 ++++++++++++++++++
 scripts/product-proof-smoke.mjs    | 15 +++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/components/LandingHowItWorks.tsx b/components/LandingHowItWorks.tsx
index 5ad97ca3..3d18645d 100644
--- a/components/LandingHowItWorks.tsx
+++ b/components/LandingHowItWorks.tsx
@@ -70,7 +70,7 @@ export function LandingHowItWorks({
             key={s.n}
             className="rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.05] to-black/40 p-4 shadow-[0_16px_40px_-28px_rgba(0,0,0,0.9)] sm:p-5"
           >
-            <span className="grid h-8 w-8 place-items-center rounded-full bg-[var(--mint)] text-sm font-black text-black shadow-[0_0_16px_rgba(200,255,61,0.3)]">
+            <span className="grid h-8 w-8 place-items-center rounded-full bg-[var(--brand)] text-sm font-black text-[var(--primary-foreground)] shadow-[0_0_16px_rgba(196,165,116,0.3)]">
               {s.n}
             </span>
             <h3 className="mt-3 font-semibold text-white">{s.t}</h3>
diff --git a/scripts/generate-360-cta-smoke.mjs b/scripts/generate-360-cta-smoke.mjs
index a1f03e47..1d921c2c 100644
--- a/scripts/generate-360-cta-smoke.mjs
+++ b/scripts/generate-360-cta-smoke.mjs
@@ -821,4 +821,22 @@ assert.match(
   "Explore page eyebrows/CTAs/path accents use --brand copper"
 );
 
+// AIT-611: LandingHowItWorks residual competitor lime → gallery-calm copper
+const landingHowItWorksSrc = read("components/LandingHowItWorks.tsx");
+assert.doesNotMatch(
+  landingHowItWorksSrc,
+  /#c8ff3d|c8ff3d|200\s*,\s*255\s*,\s*61/i,
+  "LandingHowItWorks must not hard-code competitor lime (#c8ff3d / rgba 200,255,61)"
+);
+assert.match(
+  landingHowItWorksSrc,
+  /var\(--brand\)/,
+  "LandingHowItWorks step-number chrome uses --brand copper fill"
+);
+assert.match(
+  landingHowItWorksSrc,
+  /rgba\(196\s*,\s*165\s*,\s*116/,
+  "LandingHowItWorks step-number glow uses copper board rgba(196,165,116)"
+);
+
 console.log("generate-360-cta-smoke: ok");
diff --git a/scripts/product-proof-smoke.mjs b/scripts/product-proof-smoke.mjs
index eaeb106e..d8a8b72a 100644
--- a/scripts/product-proof-smoke.mjs
+++ b/scripts/product-proof-smoke.mjs
@@ -307,6 +307,21 @@ assert(
   );
 }
 
+// AIT-611: LandingHowItWorks residual competitor lime → gallery-calm copper
+{
+  const lime = /#c8ff3d|c8ff3d|200\s*,\s*255\s*,\s*61/i;
+  const landingHow = read("components/LandingHowItWorks.tsx");
+  assert(
+    !lime.test(landingHow),
+    "LandingHowItWorks must not hard-code competitor lime (#c8ff3d / rgba 200,255,61)"
+  );
+  assert(
+    landingHow.includes("var(--brand)") &&
+      /rgba\(196\s*,\s*165\s*,\s*116/.test(landingHow),
+    "LandingHowItWorks step chrome uses --brand + copper glow"
+  );
+}
+
 console.log(
   `product-proof smoke passed: ${proofSlugs.length} proof recipes, static concepts, 1/2 autoplay budget`
 );