From 243eb0e59bbf74f1ef72009f4e46c45f295f3572 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Wed, 27 May 2026 05:34:02 +0000
Subject: [PATCH] site: home pricing cards go edge-to-edge (gap-px shared
 border, no ring per card)

User confirmed the old pricing they meant is the 1d5a75d edge-to-edge
grid: cards share borders, no individual rounded ring on each card,
the whole grid sits inside one rounded ring with overflow-hidden.

This commit takes the layout from 1d5a75d:
- grid uses gap-px on a [color:var(--border)] background to render the
  internal separators as 1px lines instead of card gaps.
- Whole grid wrapped in a single ring-1 rounded-[10px] overflow-hidden
  container so the four cards read as one block.
- Each card is bare bg-white p-7, no rounded corners, no individual ring,
  no shadow.
- Plan name uses the 14px uppercase tracking-[0.12em] eyebrow style,
  not the 16px bold heading style.
- Featured card keeps the Most popular pill, brand-color name, and
  brand-filled CTA, but drops the ring-2 scale-[1.02] and the
  sweep/bloom decorations (they only made sense on a separated card).

Switcher and price animation are still the d256ba4 motion.dev versions
restored in the previous commit, so the switcher works and the price
fades on toggle.
---
 site/src/pages/index.astro | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index e69478c2..2c83c0a0 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -770,27 +770,18 @@ const plans = [
           </div>
         </div>
 
-        <div class="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 items-stretch">
+        <!-- Edge-to-edge grid: cards share borders via gap-px, no per-card ring.
+             The whole grid sits inside a single rounded ring. -->
+        <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-[color:var(--border)] ring-1 ring-[color:var(--border)] rounded-[10px] overflow-hidden">
           {plans.map((p, idx) => (
-            <div class={`pricing-card relative flex flex-col rounded-[18px] bg-white p-7 overflow-hidden ${
-              p.highlight ? 'ring-2 ring-[color:var(--brand)] lg:scale-[1.02] z-10' : 'ring-1 ring-[color:var(--border)]'
-            }`} style={p.highlight ? 'box-shadow: var(--shadow-xl);' : 'box-shadow: var(--shadow-sm);'} data-card-idx={idx}>
-
-              {/* Continuously sweeping gradient ring on the featured card */}
-              {p.highlight && (
-                <div class="absolute inset-0 pointer-events-none rounded-[18px] overflow-hidden" aria-hidden="true">
-                  <div class="absolute -top-20 -right-16 w-[260px] h-[260px] rounded-full" style="background: radial-gradient(circle, rgba(125,211,252,0.55) 0%, transparent 70%); filter: blur(34px);"></div>
-                  <div class="pricing-sweep absolute inset-0 rounded-[18px]"></div>
-                </div>
-              )}
-
+            <div class="pricing-card relative flex flex-col bg-white p-7" data-card-idx={idx}>
               <div class="relative flex flex-col h-full">
                 {p.highlight && (
                   <span class="absolute -top-2 right-0 inline-flex items-center h-6 px-2.5 rounded-full text-[10px] font-semibold uppercase tracking-[0.10em] bg-[color:var(--brand)] text-white shadow-[0_4px_12px_-2px_rgba(2,132,199,0.55)]">
                     Most popular
                   </span>
                 )}
-                <h3 class={`text-[16px] font-semibold ${p.highlight ? 'text-[color:var(--brand)]' : 'text-heading'}`}>{p.name}</h3>
+                <h3 class={`text-[14px] font-semibold uppercase tracking-[0.12em] ${p.highlight ? 'text-[color:var(--brand)]' : 'text-heading'}`}>{p.name}</h3>
                 <p class="mt-1.5 text-[12.5px] text-muted-foreground leading-snug min-h-[40px]">{p.summary}</p>
 
                 <div class="mt-6 flex items-baseline gap-1.5">