From 3e56d0ea122c926d5e29d0e45bfd17f4741005ff Mon Sep 17 00:00:00 2001
From: x <x@xdeMacBook-Air.local>
Date: Thu, 6 Aug 2026 20:46:26 +0800
Subject: [PATCH] =?UTF-8?q?AIT-590:=20Pricing=20page=20residual=20carnival?=
 =?UTF-8?q?=20pink=20chrome=20=E2=86=92=20gallery=20copper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map residual carnival radial wash, eyebrows, gradient bar/badge, link
hovers, and promise pills on app/pricing/page.tsx onto gallery copper
board tokens (--brand / --grad / rgba(196,165,116,…)). Product honesty
and closed checkout path untouched.

Smoke-lock product-proof + generate-360-cta against carnival pink/cyan
RGB and require copper chrome tokens.

Closes AIT-590

Co-authored-by: multica-agent <github@multica.ai>
---
 app/pricing/page.tsx               | 16 ++++++++--------
 scripts/generate-360-cta-smoke.mjs | 25 +++++++++++++++++++++++++
 scripts/product-proof-smoke.mjs    | 23 +++++++++++++++++++++++
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index c195dafa..249dae6d 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -89,7 +89,7 @@ export default function PricingPage() {
       data-pricing-content-pad="mobile-generate-bar"
     >
       <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-80 bg-[radial-gradient(48%_80%_at_50%_0%,rgba(177,78,255,0.28),transparent_70%),radial-gradient(36%_60%_at_80%_10%,rgba(255,78,205,0.16),transparent_65%)]"
+        className="pointer-events-none absolute inset-x-0 top-0 h-80 bg-[radial-gradient(48%_80%_at_50%_0%,rgba(196,165,116,0.18),transparent_70%),radial-gradient(36%_60%_at_80%_10%,rgba(196,165,116,0.1),transparent_65%)]"
         aria-hidden
       />
       <script
@@ -98,7 +98,7 @@ export default function PricingPage() {
       />
       <div className="relative mx-auto max-w-6xl">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-[10px] font-black uppercase tracking-[0.2em] text-[#FF4ECD]">
+          <p className="text-[10px] font-black uppercase tracking-[0.2em] text-[var(--brand)]">
             Founding Studio · private beta
           </p>
           <h1 className="mt-3 font-display text-[clamp(3rem,7vw,6.5rem)] font-black leading-[0.88] tracking-[-0.07em]">
@@ -118,7 +118,7 @@ export default function PricingPage() {
           data-pricing-state="closed-beta"
         >
           <div
-            className="absolute inset-x-0 top-0 h-1 bg-[linear-gradient(90deg,#B14EFF,#FF4ECD,#00D9FF)]"
+            className="absolute inset-x-0 top-0 h-1 [background:var(--grad)]"
             aria-hidden
           />
           <div className="grid gap-8 lg:grid-cols-[0.86fr_1.14fr] lg:items-start">
@@ -127,7 +127,7 @@ export default function PricingPage() {
                 <h2 className="text-2xl font-black tracking-[-0.04em] sm:text-3xl">
                   Founding Studio
                 </h2>
-                <span className="rounded-full bg-[linear-gradient(135deg,#B14EFF,#FF4ECD)] px-2.5 py-1 text-[9px] font-black uppercase tracking-[0.13em] text-white">
+                <span className="rounded-full px-2.5 py-1 text-[9px] font-black uppercase tracking-[0.13em] text-[var(--primary-foreground)] [background:var(--grad)]">
                   Closed beta
                 </span>
               </div>
@@ -153,13 +153,13 @@ export default function PricingPage() {
               </div>
               <Link
                 href="/contact?source=pricing-private-beta"
-                className="mt-4 inline-block text-xs font-bold text-white/58 underline decoration-white/20 underline-offset-4 hover:text-[#00D9FF]"
+                className="mt-4 inline-block text-xs font-bold text-white/58 underline decoration-white/20 underline-offset-4 hover:text-[var(--brand)]"
               >
                 Request private beta access
               </Link>
               <Link
                 href={PRICING_PREVIEW_HREF}
-                className="mt-4 inline-block text-xs font-bold text-white/58 underline decoration-white/20 underline-offset-4 hover:text-[#00D9FF]"
+                className="mt-4 inline-block text-xs font-bold text-white/58 underline decoration-white/20 underline-offset-4 hover:text-[var(--brand)]"
               >
                 Preview one Pikbo Lab Moment
               </Link>
@@ -167,7 +167,7 @@ export default function PricingPage() {
 
             <div className="overflow-hidden rounded-[1.4rem] border border-white/12">
               <div className="border-b border-white/12 bg-white/[0.045] px-4 py-3">
-                <p className="text-[9px] font-black uppercase tracking-[0.17em] text-[#00D9FF]">
+                <p className="text-[9px] font-black uppercase tracking-[0.17em] text-[var(--brand)]">
                   The product promise
                 </p>
               </div>
@@ -184,7 +184,7 @@ export default function PricingPage() {
                       {note}
                     </p>
                   </div>
-                  <span className="self-center rounded-full border border-[#FF4ECD]/35 bg-[#FF4ECD]/10 px-2.5 py-1 text-[10px] font-black text-[#FF4ECD]">
+                  <span className="self-center rounded-full border border-[var(--brand)]/35 bg-[var(--brand)]/10 px-2.5 py-1 text-[10px] font-black text-[var(--brand)]">
                     {value}
                   </span>
                 </div>
diff --git a/scripts/generate-360-cta-smoke.mjs b/scripts/generate-360-cta-smoke.mjs
index f7671b40..08b4573e 100644
--- a/scripts/generate-360-cta-smoke.mjs
+++ b/scripts/generate-360-cta-smoke.mjs
@@ -771,4 +771,29 @@ assert.match(
   "Explore page eyebrows/CTAs/path accents use --brand copper"
 );
 
+// AIT-590: Pricing page residual carnival pink chrome → gallery-calm copper
+{
+  const pricingPageCopper = read("app/pricing/page.tsx");
+  assert.doesNotMatch(
+    pricingPageCopper,
+    /#B14EFF|#FF4ECD|#00D9FF|255\s*,\s*78\s*,\s*205|177\s*,\s*78\s*,\s*255|0\s*,\s*217\s*,\s*255/i,
+    "app/pricing/page.tsx must not hard-code carnival pink/cyan RGB"
+  );
+  assert.match(
+    pricingPageCopper,
+    /var\(--brand\)/,
+    "Pricing page eyebrows/pills/link hovers use --brand copper"
+  );
+  assert.match(
+    pricingPageCopper,
+    /var\(--grad\)/,
+    "Pricing page bar/badge use --grad copper board gradient"
+  );
+  assert.match(
+    pricingPageCopper,
+    /rgba\(196\s*,\s*165\s*,\s*116/,
+    "Pricing page radial wash 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 2e9776aa..7aaedf13 100644
--- a/scripts/product-proof-smoke.mjs
+++ b/scripts/product-proof-smoke.mjs
@@ -299,6 +299,29 @@ assert(
   );
 }
 
+// AIT-590: Pricing page residual carnival pink chrome → gallery-calm copper
+{
+  const pricingPage = read("app/pricing/page.tsx");
+  const carnival =
+    /#B14EFF|#FF4ECD|#00D9FF|255\s*,\s*78\s*,\s*205|177\s*,\s*78\s*,\s*255|0\s*,\s*217\s*,\s*255/i;
+  assert(
+    !carnival.test(pricingPage),
+    "app/pricing/page.tsx must not hard-code carnival pink/cyan RGB"
+  );
+  assert(
+    pricingPage.includes("var(--brand)") &&
+      pricingPage.includes("var(--grad)") &&
+      /rgba\(196\s*,\s*165\s*,\s*116/.test(pricingPage),
+    "Pricing page chrome uses --brand / --grad + copper rgba(196,165,116)"
+  );
+  assert(
+    pricingPage.includes("data-pricing-state") &&
+      pricingPage.includes("founding_studio") &&
+      pricingPage.includes("PricingCheckoutButton"),
+    "Pricing product honesty + closed checkout path intact"
+  );
+}
+
 console.log(
   `product-proof smoke passed: ${proofSlugs.length} proof recipes, static concepts, 1/2 autoplay budget`
 );