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">