Content Rewrite

src/lib/components/PricingPage.svelte

@@ -12,6 +12,26 @@
   const scrollDepthThreshold = 0.65;
   const desktopPromptMediaQuery = '(min-width: 769px)';
 
+  function numericPrice(price: string) {
+    const value = Number(price.replace(/[^0-9.]/g, ''));
+    return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY;
+  }
+
+  function decoratePlans<T extends { price: string }>(plans: T[]) {
+    const sorted = [...plans]
+      .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) }))
+      .sort((a, b) => a.value - b.value || a.index - b.index);
+
+    const cheapestIndex = sorted[0]?.index ?? -1;
+    const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order]));
+
+    return plans.map((plan, index) => ({
+      ...plan,
+      isPopular: index === cheapestIndex,
+      mobileOrder: mobileOrder.get(index) ?? index
+    }));
+  }
+
   let showMeetGreetPrompt = false;
   let dismissMeetGreetPrompt = false;
   let bookingInView = false;
@@ -147,9 +167,13 @@
         </div>
 
         <div class:pricing-plan-grid-three={section.plans.length === 3} class="pricing-plan-grid">
-          {#each section.plans as plan}
-            <article class:pricing-plan-popular={plan.popular} class="pricing-plan-card">
-              {#if plan.popular}
+          {#each decoratePlans(section.plans) as plan}
+            <article
+              class:pricing-plan-popular={plan.isPopular}
+              class="pricing-plan-card"
+              style={`--mobile-order:${plan.mobileOrder};`}
+            >
+              {#if plan.isPopular}
                 <span class="pricing-plan-ribbon">Popular</span>
               {/if}
 
@@ -226,7 +250,7 @@
   }
 
   .pricing-page-hero {
-    background: var(--green);
+    background: var(--gw-green);
     padding: 56px 0 64px;
     text-align: center;
   }
@@ -320,7 +344,7 @@
     height: 56px;
     margin-bottom: 16px;
     border-radius: 16px;
-    background: var(--green);
+    background: var(--gw-green);
     color: #fff;
     font-size: 22px;
   }
@@ -469,7 +493,7 @@
     padding: 6px 10px;
     border-radius: 999px;
     background: rgba(33, 48, 33, 0.08);
-    color: var(--green);
+    color: var(--gw-green);
     font-family: var(--font-head);
     font-size: 12px;
     letter-spacing: 0.04em;
@@ -635,7 +659,7 @@
     }
 
     .pricing-plan-popular {
-      order: -1;
+      order: var(--mobile-order, 0);
     }
 
     .pricing-plan-card {
@@ -672,7 +696,7 @@
       align-items: center;
       gap: 8px;
       margin-bottom: 10px;
-      color: var(--green);
+      color: var(--gw-green);
       font-family: var(--font-head);
       font-size: 12px;
       font-weight: 700;