diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index 87c845eb76..57611368e1 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -150,80 +150,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 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)">
-                <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
-                  {{ tier.billingPeriod || '&nbsp;' }}
-                </span>
+          <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)">
+                  {{ 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>
 
-                <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
-                  {{ tier.billingCycle }}
-                </span>
+            <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 })">
+                    {{ 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..be719b1492 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,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 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',
@@ -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 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 36b129bcf7..ffe74ebfdf 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -2,58 +2,64 @@
 
 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -279,58 +291,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -556,58 +580,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -833,58 +869,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -1110,14 +1158,20 @@ 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">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 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 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 align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">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="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">
           <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="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">
           <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="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">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1297,55 +1357,61 @@ 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">
-          <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 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>
+            <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 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 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>
+            <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 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 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>
+            <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 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>
+          </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="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>
+        <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 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>
       <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="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>
+        <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 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>
       <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="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>
+        <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 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>
+      </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">
@@ -1568,58 +1640,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -1845,49 +1929,55 @@ 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">
-          <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 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-->
+            </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 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 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>
+            </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 md:mt-auto md:pt-6">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 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-->
+            </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 md:mt-auto md:pt-6">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="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-->
+        </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 md:mt-auto md:pt-6">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="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>
+        </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 md:mt-auto md:pt-6">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="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-->
+        </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 md:mt-auto md:pt-6">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">
@@ -2104,58 +2200,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -2381,58 +2489,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 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="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-->
-        </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 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>
+      </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">
@@ -2658,58 +2778,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -2935,58 +3067,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
-            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -3212,58 +3356,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
-            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -3489,58 +3645,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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..af9666c2dd 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -2,58 +2,64 @@
 
 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -279,58 +291,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -556,58 +580,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -833,58 +869,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -1110,14 +1158,20 @@ 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">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 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 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 align-top h-full">
+          <div data-slot="tierWrapper" class="flex flex-col md:h-full">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="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">
           <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="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">
           <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="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">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
@@ -1297,55 +1357,61 @@ 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">
-          <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 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>
+            <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 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 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>
+            <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 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 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>
+            <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 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>
+          </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="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>
+        <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 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>
       <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="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>
+        <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 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>
       <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="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>
+        <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 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>
+      </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">
@@ -1568,58 +1640,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -1845,49 +1929,55 @@ 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">
-          <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 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-->
+            </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 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 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>
+            </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 md:mt-auto md:pt-6">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 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-->
+            </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 md:mt-auto md:pt-6">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="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-->
+        </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 md:mt-auto md:pt-6">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="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>
+        </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 md:mt-auto md:pt-6">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="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-->
+        </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 md:mt-auto md:pt-6">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">
@@ -2104,58 +2200,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
-        </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 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>
+      </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">
@@ -2381,58 +2489,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
-      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 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="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-->
-        </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 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>
+      </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">
@@ -2658,58 +2778,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -2935,58 +3067,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
-            </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 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>
+          </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="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-->
+        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -3212,58 +3356,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
-            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">
@@ -3489,58 +3645,64 @@ 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">
-          <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 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-->
-            </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 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 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>
+            </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 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 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-->
+            </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 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>
+          </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="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-->
-        </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 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>
       <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="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>
+        </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 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>
       <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="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-->
+        </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 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>
+      </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">