From 9139b0d8e64346262f1888f2493ea45a22dc209a Mon Sep 17 00:00:00 2001
From: Gremlin <gremlin[bot]@users.noreply.github.com>
Date: Thu, 5 Nov 2026 14:40:56 +0000
Subject: [PATCH] site(pricing): keep the ring line out of the "Most popular"
 marker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#8480 swapped the plan card's CSS ring for <SpectrumRing />, which is
placed last among the card's children so it paints over decorative
layers — including the marker straddling the card's top edge, so the
1px spectrum line crossed straight through the badge. Give the marker
z-10, the same treatment as the straddling badges on comparison-cards,
so it masks the ring again.

Co-Authored-By: Gremlin <gremlin[bot]@users.noreply.github.com>
---
 apps/site/src/components/sections/pricing-plans.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/site/src/components/sections/pricing-plans.tsx b/apps/site/src/components/sections/pricing-plans.tsx
index a641f95997..368e5ef4fd 100644
--- a/apps/site/src/components/sections/pricing-plans.tsx
+++ b/apps/site/src/components/sections/pricing-plans.tsx
@@ -148,7 +148,9 @@ export function PricingPlans() {
             )}
           >
             {plan.popular && (
-              <Marker className="absolute -top-3 left-1/2 -translate-x-1/2">Most popular</Marker>
+              <Marker className="absolute -top-3 left-1/2 z-10 -translate-x-1/2">
+                Most popular
+              </Marker>
             )}
             <p className="text-sm font-semibold text-foreground">{plan.name}</p>
             <p className="mt-4 font-heading text-4xl font-medium tracking-tight text-foreground">