From 326148e575edc369505b5d0829d96bea359ccead Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Thu, 26 Feb 2026 23:57:21 +0100
Subject: [PATCH 1/5] fix(pricing-table): add wrapper to fix header vertical
 alignment

---
 src/runtime/components/PricingTable.vue       |  108 +-
 src/theme/pricing-table.ts                    |    5 +-
 .../PricingTable-vue.spec.ts.snap             | 2290 +++++++++--------
 .../__snapshots__/PricingTable.spec.ts.snap   | 2290 +++++++++--------
 4 files changed, 2516 insertions(+), 2177 deletions(-)

diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index a223acaab9..31170977da 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -149,80 +149,82 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
 
 <template>
   <DefineTierTemplate v-slot="{ tier }">
-    <slot :name="(tier.id as keyof PricingTableSlots<T>)" :tier="(tier as T)">
-      <slot name="tier" :tier="(tier as T)">
-        <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: uiProp?.tierTitleWrapper })">
-          <div data-slot="tierTitle" :class="ui.tierTitle({ class: uiProp?.tierTitle })">
-            <slot :name="(`${tier.id}-title` as keyof PricingTableSlots<T>)" :tier="tier">
-              <slot name="tier-title" :tier="(tier as T)">
-                {{ tier.title }}
+    <div data-slot="tierWrapper" :class="ui.tierWrapper({ class: uiProp?.tierWrapper })">
+      <slot :name="(tier.id as keyof PricingTableSlots<T>)" :tier="(tier as T)">
+        <slot name="tier" :tier="(tier as T)">
+          <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: uiProp?.tierTitleWrapper })">
+            <div data-slot="tierTitle" :class="ui.tierTitle({ class: uiProp?.tierTitle })">
+              <slot :name="(`${tier.id}-title` as keyof PricingTableSlots<T>)" :tier="tier">
+                <slot name="tier-title" :tier="(tier as T)">
+                  {{ tier.title }}
+                </slot>
               </slot>
-            </slot>
-          </div>
-
-          <slot :name="(`${tier.id}-badge` as keyof PricingTableSlots<T>)" :tier="tier">
-            <slot name="tier-badge" :tier="(tier as T)">
-              <UBadge
-                v-if="tier.badge"
-                color="primary"
-                variant="subtle"
-                v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
-                data-slot="tierBadge"
-                :class="ui.tierBadge({ class: uiProp?.tierBadge })"
-              />
-            </slot>
-          </slot>
-        </div>
-
-        <div v-if="tier.description || !!slots['tier-description'] || !!slots[(`${tier.id}-description` as keyof PricingTableSlots<T>)]" data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
-          <slot :name="(`${tier.id}-description` as keyof PricingTableSlots<T>)" :tier="tier">
-            <slot name="tier-description" :tier="(tier as T)">
-              {{ tier.description }}
-            </slot>
-          </slot>
-        </div>
+            </div>
 
-        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-price'] || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)]" data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
-          <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
-            <slot :name="(`${tier.id}-discount` as keyof PricingTableSlots<T>)" :tier="tier">
-              <slot name="tier-discount" :tier="(tier as T)">
-                {{ tier.price }}
+            <slot :name="(`${tier.id}-badge` as keyof PricingTableSlots<T>)" :tier="tier">
+              <slot name="tier-badge" :tier="(tier as T)">
+                <UBadge
+                  v-if="tier.badge"
+                  color="primary"
+                  variant="subtle"
+                  v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
+                  data-slot="tierBadge"
+                  :class="ui.tierBadge({ class: uiProp?.tierBadge })"
+                />
               </slot>
             </slot>
           </div>
 
-          <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: uiProp?.tierPrice })">
-            <slot :name="(`${tier.id}-price` as keyof PricingTableSlots<T>)" :tier="tier">
-              <slot name="tier-price" :tier="(tier as T)">
-                {{ tier.discount || tier.price }}
+          <div v-if="tier.description || !!slots['tier-description'] || !!slots[(`${tier.id}-description` as keyof PricingTableSlots<T>)]" data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
+            <slot :name="(`${tier.id}-description` as keyof PricingTableSlots<T>)" :tier="tier">
+              <slot name="tier-description" :tier="(tier as T)">
+                {{ tier.description }}
               </slot>
             </slot>
           </div>
 
-          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
-            <slot :name="(`${tier.id}-billing` as keyof PricingTableSlots<T>)" :tier="tier">
-              <slot name="tier-billing" :tier="(tier as T)">
+          <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-price'] || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)]" data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
+            <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
+              <slot :name="(`${tier.id}-discount` as keyof PricingTableSlots<T>)" :tier="tier">
+                <slot name="tier-discount" :tier="(tier as T)">
+                  {{ tier.price }}
+                </slot>
+              </slot>
+            </div>
+
+            <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: uiProp?.tierPrice })">
+              <slot :name="(`${tier.id}-price` as keyof PricingTableSlots<T>)" :tier="tier">
+                <slot name="tier-price" :tier="(tier as T)">
+                  {{ tier.discount || tier.price }}
+                </slot>
+              </slot>
+            </div>
+
+            <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
+              <slot :name="(`${tier.id}-billing` as keyof PricingTableSlots<T>)" :tier="tier">
+                <slot name="tier-billing" :tier="(tier as T)">
                 <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
                   {{ tier.billingPeriod || '&nbsp;' }}
                 </span>
 
-                <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
+                  <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
                   {{ tier.billingCycle }}
                 </span>
+                </slot>
               </slot>
-            </slot>
+            </div>
           </div>
-        </div>
 
-        <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: uiProp?.tierButton })">
-          <slot :name="(`${tier.id}-button` as keyof PricingTableSlots<T>)" :tier="tier">
-            <slot name="tier-button" :tier="(tier as T)">
-              <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
+          <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: uiProp?.tierButton })">
+            <slot :name="(`${tier.id}-button` as keyof PricingTableSlots<T>)" :tier="tier">
+              <slot name="tier-button" :tier="(tier as T)">
+                <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
+              </slot>
             </slot>
-          </slot>
-        </div>
+          </div>
+        </slot>
       </slot>
-    </slot>
+    </div>
   </DefineTierTemplate>
 
   <DefineFeatureTemplate v-slot="{ feature, tier }">
diff --git a/src/theme/pricing-table.ts b/src/theme/pricing-table.ts
index 5667fee26b..77d5ddf03d 100644
--- a/src/theme/pricing-table.ts
+++ b/src/theme/pricing-table.ts
@@ -10,7 +10,8 @@ export default {
     tr: '',
     th: 'py-4 font-normal text-left border-b border-default',
     td: 'px-6 py-4 text-center border-b border-default',
-    tier: 'p-6 text-left font-normal',
+    tier: 'p-6 text-left font-normal h-0',
+    tierWrapper: 'h-full flex flex-col justify-between',
     tierTitleWrapper: 'flex items-center gap-3',
     tierTitle: 'text-lg font-semibold text-highlighted',
     tierDescription: 'text-sm font-normal text-muted mt-1',
@@ -21,7 +22,7 @@ export default {
     tierBilling: 'flex flex-col justify-between min-w-0',
     tierBillingPeriod: 'text-toned truncate text-xs font-medium',
     tierBillingCycle: 'text-muted truncate text-xs font-medium',
-    tierButton: 'mt-6',
+    tierButton: 'mt-6 justify-end',
     tierFeatureIcon: 'size-5 shrink-0',
     section: 'mt-6 flex flex-col gap-2',
     sectionTitle: 'font-semibold text-sm text-highlighted',
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 36b129bcf7..8364ccfe8f 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -7,53 +7,59 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -148,20 +154,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -190,20 +198,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -232,20 +242,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -284,53 +296,59 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -425,20 +443,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -467,20 +487,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -509,20 +531,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -561,53 +585,59 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -702,20 +732,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -744,20 +776,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -786,20 +820,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -838,53 +874,59 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -979,20 +1021,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1021,20 +1065,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1063,20 +1109,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1115,9 +1163,15 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
       </tr>
     </thead>
     <tbody data-slot="tbody" class="">
@@ -1210,7 +1264,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     </tbody>
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1237,7 +1293,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </div>
       </div>
     </li>
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1264,7 +1322,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </div>
       </div>
     </li>
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1302,50 +1362,56 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -1440,19 +1506,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1481,19 +1549,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1522,19 +1592,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1573,53 +1645,59 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -1714,20 +1792,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1756,20 +1836,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1798,20 +1880,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1850,44 +1934,50 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
           </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
           </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
       </tr>
     </thead>
@@ -1982,17 +2072,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2021,17 +2113,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2060,17 +2154,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2109,53 +2205,59 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2250,20 +2352,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2292,20 +2396,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2334,20 +2440,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2386,53 +2494,59 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2527,20 +2641,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2569,20 +2685,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
       </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
-          <!--v-if-->
-        </button></div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2611,20 +2729,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2663,53 +2783,59 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2804,20 +2930,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2846,20 +2974,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2888,20 +3018,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2940,53 +3072,59 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3081,20 +3219,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3123,20 +3263,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3165,20 +3307,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3217,53 +3361,59 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3358,20 +3508,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3400,20 +3552,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3442,20 +3596,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3494,53 +3650,59 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3635,20 +3797,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3677,20 +3841,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3719,20 +3885,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index ab90d7e163..0294347733 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -7,53 +7,59 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -148,20 +154,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -190,20 +198,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -232,20 +242,22 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -284,53 +296,59 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -425,20 +443,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -467,20 +487,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -509,20 +531,22 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -561,53 +585,59 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -702,20 +732,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -744,20 +776,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -786,20 +820,22 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -838,53 +874,59 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -979,20 +1021,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1021,20 +1065,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1063,20 +1109,22 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1115,9 +1163,15 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        </th>
       </tr>
     </thead>
     <tbody data-slot="tbody" class="">
@@ -1210,7 +1264,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     </tbody>
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1237,7 +1293,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </div>
       </div>
     </li>
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1264,7 +1322,9 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </div>
       </div>
     </li>
-    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1302,50 +1362,56 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -1440,19 +1506,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1481,19 +1549,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1522,19 +1592,21 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1573,53 +1645,59 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -1714,20 +1792,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1756,20 +1836,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1798,20 +1880,22 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1850,44 +1934,50 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
           </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
           </div>
-          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
       </tr>
     </thead>
@@ -1982,17 +2072,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2021,17 +2113,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2060,17 +2154,19 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
       </div>
-      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2109,53 +2205,59 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2250,20 +2352,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2292,20 +2396,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2334,20 +2440,22 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2386,53 +2494,59 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2527,20 +2641,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2569,20 +2685,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
       </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
-          <!--v-if-->
-        </button></div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2611,20 +2729,22 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2663,53 +2783,59 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -2804,20 +2930,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2846,20 +2974,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2888,20 +3018,22 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -2940,53 +3072,59 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3081,20 +3219,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3123,20 +3263,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3165,20 +3307,22 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3217,53 +3361,59 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
-            </button></div>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3358,20 +3508,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3400,20 +3552,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3442,20 +3596,22 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3494,53 +3650,59 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-            <!--v-if--></span>
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
-        </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
-          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-            <!--v-if-->
-            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <!--v-if-->
-          </div>
-          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+              <!--v-if--></span>
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+              <!--v-if-->
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+              <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+                <!--v-if-->
+              </button></div>
+          </div>
+        </th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+            <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+              <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+            <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
               <!--v-if-->
-            </button></div>
+              <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+              <!--v-if-->
+            </div>
+            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+                <!--v-if-->
+              </button></div>
+          </div>
         </th>
       </tr>
     </thead>
@@ -3635,20 +3797,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
-        </button></div>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+          <!--v-if-->
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3677,20 +3841,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
-        <!--v-if--></span>
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
+          <!--v-if--></span>
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+          <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -3719,20 +3885,22 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
-        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
-        <!--v-if-->
-        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <!--v-if-->
-      </div>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+          <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+        <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
           <!--v-if-->
-        </button></div>
+          <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <!--v-if-->
+        </div>
+        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
+            <!--v-if-->
+          </button></div>
+      </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">

From ac1ed17267a3edb4b084c243ee54c0ad338eef71 Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Fri, 27 Feb 2026 01:29:49 +0100
Subject: [PATCH 2/5] lint

---
 src/runtime/components/PricingTable.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index 31170977da..4c6b042cf2 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -203,13 +203,13 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
               <slot :name="(`${tier.id}-billing` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-billing" :tier="(tier as T)">
-                <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
-                  {{ tier.billingPeriod || '&nbsp;' }}
-                </span>
+                  <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
+                    {{ tier.billingPeriod || '&nbsp;' }}
+                  </span>
 
                   <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
-                  {{ tier.billingCycle }}
-                </span>
+                    {{ tier.billingCycle }}
+                  </span>
                 </slot>
               </slot>
             </div>

From 21caba672f9fdfd29e6b21a950409f33facbe3bb Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Mon, 20 Apr 2026 18:22:00 +0200
Subject: [PATCH 3/5] fix(princing-table): remove btn justify-end

---
 src/theme/pricing-table.ts                    |   2 +-
 .../PricingTable-vue.spec.ts.snap             | 156 +++++++++---------
 .../__snapshots__/PricingTable.spec.ts.snap   | 156 +++++++++---------
 3 files changed, 157 insertions(+), 157 deletions(-)

diff --git a/src/theme/pricing-table.ts b/src/theme/pricing-table.ts
index 77d5ddf03d..9a08acd6c4 100644
--- a/src/theme/pricing-table.ts
+++ b/src/theme/pricing-table.ts
@@ -22,7 +22,7 @@ export default {
     tierBilling: 'flex flex-col justify-between min-w-0',
     tierBillingPeriod: 'text-toned truncate text-xs font-medium',
     tierBillingCycle: 'text-muted truncate text-xs font-medium',
-    tierButton: 'mt-6 justify-end',
+    tierButton: 'mt-6',
     tierFeatureIcon: 'size-5 shrink-0',
     section: 'mt-6 flex flex-col gap-2',
     sectionTitle: 'font-semibold text-sm text-highlighted',
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 8364ccfe8f..9d302a43bb 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -37,7 +37,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -55,7 +55,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -165,7 +165,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -209,7 +209,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -253,7 +253,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -308,7 +308,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -326,7 +326,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -344,7 +344,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -454,7 +454,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -498,7 +498,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -542,7 +542,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -597,7 +597,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -615,7 +615,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -633,7 +633,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -743,7 +743,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -787,7 +787,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -831,7 +831,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -886,7 +886,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -904,7 +904,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -922,7 +922,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1032,7 +1032,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1076,7 +1076,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1120,7 +1120,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1373,7 +1373,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1390,7 +1390,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1407,7 +1407,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1516,7 +1516,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1559,7 +1559,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1602,7 +1602,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1657,7 +1657,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1675,7 +1675,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1693,7 +1693,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1803,7 +1803,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1847,7 +1847,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1891,7 +1891,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1946,7 +1946,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
         <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
@@ -1961,7 +1961,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
         <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
@@ -1976,7 +1976,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
       </tr>
@@ -2083,7 +2083,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2124,7 +2124,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2165,7 +2165,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2217,7 +2217,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2235,7 +2235,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2253,7 +2253,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2363,7 +2363,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2407,7 +2407,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2451,7 +2451,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2506,7 +2506,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2524,7 +2524,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2542,7 +2542,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2652,7 +2652,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2696,7 +2696,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2740,7 +2740,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2795,7 +2795,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2813,7 +2813,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2831,7 +2831,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2941,7 +2941,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2985,7 +2985,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3029,7 +3029,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3084,7 +3084,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3102,7 +3102,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3120,7 +3120,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3230,7 +3230,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3274,7 +3274,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3318,7 +3318,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3373,7 +3373,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3391,7 +3391,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3409,7 +3409,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3519,7 +3519,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3563,7 +3563,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3607,7 +3607,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3662,7 +3662,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3680,7 +3680,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3698,7 +3698,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3808,7 +3808,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3852,7 +3852,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3896,7 +3896,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index 0294347733..abfc023452 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -37,7 +37,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -55,7 +55,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -165,7 +165,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -209,7 +209,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -253,7 +253,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -308,7 +308,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -326,7 +326,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -344,7 +344,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -454,7 +454,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -498,7 +498,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -542,7 +542,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -597,7 +597,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -615,7 +615,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -633,7 +633,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -743,7 +743,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -787,7 +787,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -831,7 +831,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -886,7 +886,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -904,7 +904,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -922,7 +922,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1032,7 +1032,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1076,7 +1076,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1120,7 +1120,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1373,7 +1373,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1390,7 +1390,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1407,7 +1407,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1516,7 +1516,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1559,7 +1559,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1602,7 +1602,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1657,7 +1657,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1675,7 +1675,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -1693,7 +1693,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1803,7 +1803,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1847,7 +1847,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1891,7 +1891,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1946,7 +1946,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
         <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
@@ -1961,7 +1961,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
         <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
@@ -1976,7 +1976,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
       </tr>
@@ -2083,7 +2083,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2124,7 +2124,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2165,7 +2165,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2217,7 +2217,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2235,7 +2235,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2253,7 +2253,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2363,7 +2363,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2407,7 +2407,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2451,7 +2451,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2506,7 +2506,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2524,7 +2524,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2542,7 +2542,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2652,7 +2652,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2696,7 +2696,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2740,7 +2740,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2795,7 +2795,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2813,7 +2813,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -2831,7 +2831,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2941,7 +2941,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2985,7 +2985,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3029,7 +3029,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3084,7 +3084,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3102,7 +3102,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3120,7 +3120,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3230,7 +3230,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3274,7 +3274,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3318,7 +3318,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3373,7 +3373,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3391,7 +3391,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3409,7 +3409,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3519,7 +3519,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3563,7 +3563,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3607,7 +3607,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3662,7 +3662,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3680,7 +3680,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
@@ -3698,7 +3698,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3808,7 +3808,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3852,7 +3852,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3896,7 +3896,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6 justify-end"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>

From 801e01d40c4a8749b663806143885284a7a94e14 Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Mon, 20 Apr 2026 19:35:08 +0200
Subject: [PATCH 4/5] fix tier wrapper

---
 src/theme/pricing-table.ts                    |   4 +-
 .../PricingTable-vue.spec.ts.snap             | 112 +++++++++---------
 .../__snapshots__/PricingTable.spec.ts.snap   | 112 +++++++++---------
 3 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/theme/pricing-table.ts b/src/theme/pricing-table.ts
index 9a08acd6c4..ea56f7508c 100644
--- a/src/theme/pricing-table.ts
+++ b/src/theme/pricing-table.ts
@@ -1,7 +1,7 @@
 export default {
   slots: {
     root: 'w-full relative',
-    table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
+    table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit',
     list: 'md:hidden flex flex-col gap-6 w-full',
     item: 'p-6 flex flex-col border border-default rounded-lg',
     caption: 'sr-only',
@@ -10,7 +10,7 @@ export default {
     tr: '',
     th: 'py-4 font-normal text-left border-b border-default',
     td: 'px-6 py-4 text-center border-b border-default',
-    tier: 'p-6 text-left font-normal h-0',
+    tier: 'p-6 text-left font-normal h-full',
     tierWrapper: 'h-full flex flex-col justify-between',
     tierTitleWrapper: 'flex items-center gap-3',
     tierTitle: 'text-lg font-semibold text-highlighted',
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 9d302a43bb..92db65a481 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`PricingTable > renders with as correctly 1`] = `
 "<section data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -25,7 +25,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -43,7 +43,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -291,12 +291,12 @@ exports[`PricingTable > renders with as correctly 1`] = `
 
 exports[`PricingTable > renders with caption correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <caption data-slot="caption" class="sr-only">Caption</caption>
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -314,7 +314,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -332,7 +332,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -580,12 +580,12 @@ exports[`PricingTable > renders with caption correctly 1`] = `
 
 exports[`PricingTable > renders with caption slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <caption data-slot="caption" class="sr-only">Caption slot</caption>
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -603,7 +603,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -621,7 +621,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -869,12 +869,12 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
 
 exports[`PricingTable > renders with class correctly 1`] = `
 "<div data-slot="root" class="w-full relative max-w-sm">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -892,7 +892,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -910,7 +910,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1158,18 +1158,18 @@ exports[`PricingTable > renders with class correctly 1`] = `
 
 exports[`PricingTable > renders with tier slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
       </tr>
@@ -1357,12 +1357,12 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
@@ -1379,7 +1379,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
@@ -1396,7 +1396,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
@@ -1640,12 +1640,12 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1663,7 +1663,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1681,7 +1681,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1929,12 +1929,12 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1949,7 +1949,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1964,7 +1964,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2200,12 +2200,12 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2223,7 +2223,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2241,7 +2241,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2489,12 +2489,12 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2512,7 +2512,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2530,7 +2530,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2778,12 +2778,12 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2801,7 +2801,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2819,7 +2819,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3067,12 +3067,12 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3090,7 +3090,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3108,7 +3108,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3356,12 +3356,12 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 
 exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3379,7 +3379,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3397,7 +3397,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3645,12 +3645,12 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 
 exports[`PricingTable > renders with ui correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
+  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table h-fit table-auto">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3668,7 +3668,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3686,7 +3686,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index abfc023452..3d2bbd487d 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`PricingTable > renders with as correctly 1`] = `
 "<section data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -25,7 +25,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -43,7 +43,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -291,12 +291,12 @@ exports[`PricingTable > renders with as correctly 1`] = `
 
 exports[`PricingTable > renders with caption correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <caption data-slot="caption" class="sr-only">Caption</caption>
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -314,7 +314,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -332,7 +332,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -580,12 +580,12 @@ exports[`PricingTable > renders with caption correctly 1`] = `
 
 exports[`PricingTable > renders with caption slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <caption data-slot="caption" class="sr-only">Caption slot</caption>
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -603,7 +603,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -621,7 +621,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -869,12 +869,12 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
 
 exports[`PricingTable > renders with class correctly 1`] = `
 "<div data-slot="root" class="w-full relative max-w-sm">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -892,7 +892,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -910,7 +910,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1158,18 +1158,18 @@ exports[`PricingTable > renders with class correctly 1`] = `
 
 exports[`PricingTable > renders with tier slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
         </th>
       </tr>
@@ -1357,12 +1357,12 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
@@ -1379,7 +1379,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
@@ -1396,7 +1396,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
@@ -1640,12 +1640,12 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1663,7 +1663,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1681,7 +1681,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1929,12 +1929,12 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1949,7 +1949,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1964,7 +1964,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2200,12 +2200,12 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2223,7 +2223,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2241,7 +2241,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2489,12 +2489,12 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2512,7 +2512,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2530,7 +2530,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2778,12 +2778,12 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2801,7 +2801,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2819,7 +2819,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3067,12 +3067,12 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 
 exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3090,7 +3090,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3108,7 +3108,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3356,12 +3356,12 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 
 exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table h-fit">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3379,7 +3379,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3397,7 +3397,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3645,12 +3645,12 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 
 exports[`PricingTable > renders with ui correctly 1`] = `
 "<div data-slot="root" class="w-full relative">
-  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
+  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table h-fit table-auto">
     <!--v-if-->
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3668,7 +3668,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0 bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3686,7 +3686,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-0">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
           <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>

From cd5ac4b51534cd37b586780f9f04f13445b5da30 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 21 Apr 2026 16:31:36 +0200
Subject: [PATCH 5/5] fix(PricingTable): layout and comment out some prices

---
 src/runtime/components/PricingTable.vue       |   4 +-
 src/theme/pricing-table.ts                    |   6 +-
 .../PricingTable-vue.spec.ts.snap             | 408 +++++++++---------
 .../__snapshots__/PricingTable.spec.ts.snap   | 408 +++++++++---------
 4 files changed, 413 insertions(+), 413 deletions(-)

diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index 049b5d2abd..57611368e1 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -176,7 +176,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-if="tier.description || !!slots['tier-description'] || !!slots[(`${tier.id}-description` as keyof PricingTableSlots<T>)]" data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
+          <div data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
             <slot :name="(`${tier.id}-description` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-description" :tier="(tier as T)">
                 {{ tier.description }}
@@ -184,7 +184,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-price'] || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)]" data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
+          <div data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
             <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
               <slot :name="(`${tier.id}-discount` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-discount" :tier="(tier as T)">
diff --git a/src/theme/pricing-table.ts b/src/theme/pricing-table.ts
index ea56f7508c..be719b1492 100644
--- a/src/theme/pricing-table.ts
+++ b/src/theme/pricing-table.ts
@@ -10,8 +10,8 @@ export default {
     tr: '',
     th: 'py-4 font-normal text-left border-b border-default',
     td: 'px-6 py-4 text-center border-b border-default',
-    tier: 'p-6 text-left font-normal h-full',
-    tierWrapper: 'h-full flex flex-col justify-between',
+    tier: 'p-6 text-left font-normal align-top h-full',
+    tierWrapper: 'flex flex-col md:h-full',
     tierTitleWrapper: 'flex items-center gap-3',
     tierTitle: 'text-lg font-semibold text-highlighted',
     tierDescription: 'text-sm font-normal text-muted mt-1',
@@ -22,7 +22,7 @@ export default {
     tierBilling: 'flex flex-col justify-between min-w-0',
     tierBillingPeriod: 'text-toned truncate text-xs font-medium',
     tierBillingCycle: 'text-muted truncate text-xs font-medium',
-    tierButton: 'mt-6',
+    tierButton: 'mt-6 md:mt-auto md:pt-6',
     tierFeatureIcon: 'size-5 shrink-0',
     section: 'mt-6 flex flex-col gap-2',
     sectionTitle: 'font-semibold text-sm text-highlighted',
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index 92db65a481..ffe74ebfdf 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -7,8 +7,8 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -19,14 +19,14 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -37,14 +37,14 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -55,7 +55,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -154,7 +154,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -165,7 +165,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -198,7 +198,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -209,7 +209,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -242,7 +242,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -253,7 +253,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -296,8 +296,8 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -308,14 +308,14 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -326,14 +326,14 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -344,7 +344,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -443,7 +443,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -454,7 +454,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -487,7 +487,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -498,7 +498,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -531,7 +531,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -542,7 +542,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -585,8 +585,8 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -597,14 +597,14 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -615,14 +615,14 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -633,7 +633,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -732,7 +732,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -743,7 +743,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -776,7 +776,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -787,7 +787,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -820,7 +820,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -831,7 +831,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -874,8 +874,8 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -886,14 +886,14 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -904,14 +904,14 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -922,7 +922,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1021,7 +1021,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -1032,7 +1032,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1065,7 +1065,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -1076,7 +1076,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1109,7 +1109,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -1120,7 +1120,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1163,14 +1163,14 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
       </tr>
     </thead>
@@ -1265,7 +1265,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1294,7 +1294,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1323,7 +1323,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1362,8 +1362,8 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
             </div>
@@ -1373,14 +1373,14 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
             </div>
@@ -1390,14 +1390,14 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
             </div>
@@ -1407,7 +1407,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1506,7 +1506,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
         </div>
@@ -1516,7 +1516,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1549,7 +1549,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
         </div>
@@ -1559,7 +1559,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1592,7 +1592,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
         </div>
@@ -1602,7 +1602,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1645,8 +1645,8 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -1657,14 +1657,14 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -1675,14 +1675,14 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -1693,7 +1693,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1792,7 +1792,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -1803,7 +1803,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1836,7 +1836,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -1847,7 +1847,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1880,7 +1880,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -1891,7 +1891,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1934,8 +1934,8 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -1946,11 +1946,11 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -1961,11 +1961,11 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -1976,7 +1976,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
       </tr>
@@ -2072,7 +2072,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2083,7 +2083,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2113,7 +2113,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2124,7 +2124,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2154,7 +2154,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2165,7 +2165,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2205,8 +2205,8 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2217,14 +2217,14 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2235,14 +2235,14 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2253,7 +2253,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2352,7 +2352,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2363,7 +2363,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2396,7 +2396,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2407,7 +2407,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2440,7 +2440,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2451,7 +2451,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2494,8 +2494,8 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2506,14 +2506,14 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2524,14 +2524,14 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2542,7 +2542,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2641,7 +2641,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2652,7 +2652,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2685,7 +2685,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2696,7 +2696,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2729,7 +2729,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2740,7 +2740,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2783,8 +2783,8 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2795,14 +2795,14 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2813,14 +2813,14 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2831,7 +2831,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2930,7 +2930,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2941,7 +2941,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2974,7 +2974,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2985,7 +2985,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3018,7 +3018,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3029,7 +3029,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3072,8 +3072,8 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
@@ -3084,14 +3084,14 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3102,14 +3102,14 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
@@ -3120,7 +3120,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3219,7 +3219,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
           <!--v-if-->
@@ -3230,7 +3230,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3263,7 +3263,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3274,7 +3274,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3307,7 +3307,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
           <!--v-if-->
@@ -3318,7 +3318,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3361,8 +3361,8 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -3373,14 +3373,14 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3391,14 +3391,14 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -3409,7 +3409,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3508,7 +3508,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -3519,7 +3519,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3552,7 +3552,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3563,7 +3563,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3596,7 +3596,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3607,7 +3607,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3650,8 +3650,8 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -3662,14 +3662,14 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3680,14 +3680,14 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -3698,7 +3698,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3797,7 +3797,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -3808,7 +3808,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3841,7 +3841,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3852,7 +3852,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3885,7 +3885,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3896,7 +3896,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index 3d2bbd487d..af9666c2dd 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -7,8 +7,8 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -19,14 +19,14 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -37,14 +37,14 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -55,7 +55,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -154,7 +154,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -165,7 +165,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -198,7 +198,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -209,7 +209,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -242,7 +242,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -253,7 +253,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -296,8 +296,8 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -308,14 +308,14 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -326,14 +326,14 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -344,7 +344,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -443,7 +443,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -454,7 +454,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -487,7 +487,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -498,7 +498,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -531,7 +531,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -542,7 +542,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -585,8 +585,8 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -597,14 +597,14 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -615,14 +615,14 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -633,7 +633,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -732,7 +732,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -743,7 +743,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -776,7 +776,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -787,7 +787,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -820,7 +820,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -831,7 +831,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -874,8 +874,8 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -886,14 +886,14 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -904,14 +904,14 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -922,7 +922,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1021,7 +1021,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -1032,7 +1032,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1065,7 +1065,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -1076,7 +1076,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1109,7 +1109,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -1120,7 +1120,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1163,14 +1163,14 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
       </tr>
     </thead>
@@ -1265,7 +1265,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1294,7 +1294,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1323,7 +1323,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">Tier slot</div>
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         <div data-slot="feature" class="flex items-center justify-between gap-1">
@@ -1362,8 +1362,8 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
             </div>
@@ -1373,14 +1373,14 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
             </div>
@@ -1390,14 +1390,14 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
             </div>
@@ -1407,7 +1407,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1506,7 +1506,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
         </div>
@@ -1516,7 +1516,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1549,7 +1549,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
         </div>
@@ -1559,7 +1559,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1592,7 +1592,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
         </div>
@@ -1602,7 +1602,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1645,8 +1645,8 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -1657,14 +1657,14 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -1675,14 +1675,14 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -1693,7 +1693,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -1792,7 +1792,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -1803,7 +1803,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1836,7 +1836,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -1847,7 +1847,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -1880,7 +1880,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -1891,7 +1891,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -1934,8 +1934,8 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -1946,11 +1946,11 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -1961,11 +1961,11 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -1976,7 +1976,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
       </tr>
@@ -2072,7 +2072,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2083,7 +2083,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2113,7 +2113,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2124,7 +2124,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2154,7 +2154,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2165,7 +2165,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
       </div>
       <div data-slot="section" class="mt-6 flex flex-col gap-2">
         <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
@@ -2205,8 +2205,8 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2217,14 +2217,14 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2235,14 +2235,14 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2253,7 +2253,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2352,7 +2352,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2363,7 +2363,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2396,7 +2396,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2407,7 +2407,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2440,7 +2440,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2451,7 +2451,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2494,8 +2494,8 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2506,14 +2506,14 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2524,14 +2524,14 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2542,7 +2542,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2641,7 +2641,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2652,7 +2652,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2685,7 +2685,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2696,7 +2696,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2729,7 +2729,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -2740,7 +2740,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -2783,8 +2783,8 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -2795,14 +2795,14 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -2813,14 +2813,14 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -2831,7 +2831,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -2930,7 +2930,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -2941,7 +2941,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -2974,7 +2974,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -2985,7 +2985,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3018,7 +3018,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3029,7 +3029,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3072,8 +3072,8 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
@@ -3084,14 +3084,14 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3102,14 +3102,14 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
               <!--v-if-->
@@ -3120,7 +3120,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3219,7 +3219,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
           <!--v-if-->
@@ -3230,7 +3230,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3263,7 +3263,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3274,7 +3274,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3307,7 +3307,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
           <!--v-if-->
@@ -3318,7 +3318,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3361,8 +3361,8 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -3373,14 +3373,14 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3391,14 +3391,14 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -3409,7 +3409,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3508,7 +3508,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -3519,7 +3519,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3552,7 +3552,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3563,7 +3563,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3596,7 +3596,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3607,7 +3607,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>
@@ -3650,8 +3650,8 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
               <!--v-if-->
@@ -3662,14 +3662,14 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
               <!--v-if--></span>
@@ -3680,14 +3680,14 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
               <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Get started</span>
                 <!--v-if-->
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal h-full">
-          <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
               <!--v-if-->
@@ -3698,7 +3698,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
               <!--v-if-->
             </div>
-            <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+            <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                 <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
                 <!--v-if-->
               </button></div>
@@ -3797,7 +3797,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
   </table>
   <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
           <!--v-if-->
@@ -3808,7 +3808,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3841,7 +3841,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
           <!--v-if--></span>
@@ -3852,7 +3852,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
           <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
@@ -3885,7 +3885,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
       </div>
     </li>
     <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
-      <div data-slot="tierWrapper" class="h-full flex flex-col justify-between">
+      <div data-slot="tierWrapper" class="flex flex-col md:h-full">
         <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
           <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
           <!--v-if-->
@@ -3896,7 +3896,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
           <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
           <!--v-if-->
         </div>
-        <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+        <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
             <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
             <!--v-if-->
           </button></div>