From 5f6b47d4455b8e5e5701ed512b2d42fd46031cdf Mon Sep 17 00:00:00 2001
From: ponzischeme89 <mattcohen0@gmail.com>
Date: Sat, 2 May 2026 08:53:36 +1200
Subject: [PATCH] Cleanup pricing page tables, introstrip, css changes

---
 package.json                                 |  2 +-
 src/lib/components/BookingSection.svelte     |  3 +-
 src/lib/components/IntroStrip.svelte         | 32 +++++++++++---------
 src/lib/components/PricingPage.svelte        | 12 ++++++--
 src/lib/components/ServiceLandingPage.svelte | 17 ++++++++---
 src/lib/styles/forms.css                     | 15 ++++-----
 src/lib/styles/layout.css                    |  1 +
 src/lib/styles/responsive.css                |  9 +-----
 src/lib/styles/sections.css                  |  2 ++
 9 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index c56103c..f95877f 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev --host 10.0.0.73",
+    "dev": "vite dev --host 10.0.0.124",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
diff --git a/src/lib/components/BookingSection.svelte b/src/lib/components/BookingSection.svelte
index 435e034..733aa39 100644
--- a/src/lib/components/BookingSection.svelte
+++ b/src/lib/components/BookingSection.svelte
@@ -150,8 +150,7 @@
 
     <div class="booking-header">
       <h2 class="booking-title">
-        <span class="booking-title-plain">{headingParts.plain}</span>
-        <span class="booking-title-highlight">{headingParts.highlight}</span>
+        <span class="booking-title-plain">{headingParts.plain}</span>{' '}<span class="booking-title-highlight">{headingParts.highlight}</span>
       </h2>
 
       <div class="booking-stepper" aria-label="Booking form steps">
diff --git a/src/lib/components/IntroStrip.svelte b/src/lib/components/IntroStrip.svelte
index 8f6fa4b..8547d56 100644
--- a/src/lib/components/IntroStrip.svelte
+++ b/src/lib/components/IntroStrip.svelte
@@ -8,24 +8,26 @@
 </script>
 
 <div id="intro">
-  <div class="intro-trust-badge">
-    <div class="intro-trust-mark" aria-hidden="true">
-      <Icon name="fab fa-google" />
-    </div>
+  <div class="intro-inner">
+    <div class="intro-trust-badge">
+      <div class="intro-trust-mark" aria-hidden="true">
+        <Icon name="fab fa-google" />
+      </div>
 
-    <div class="intro-trust-copy">
-      <p>{intro.text}</p>
+      <div class="intro-trust-copy">
+        <p>{intro.text}</p>
 
-      <div class="intro-trust-meta">
-        <div class="intro-trust-stars" aria-label="5 star rating">
-          {#each stars as _, index}
-            <Icon name="fas fa-star" className={`intro-star intro-star-${index + 1}`} />
-          {/each}
+        <div class="intro-trust-meta">
+          <div class="intro-trust-stars" aria-label="5 star rating">
+            {#each stars as _, index}
+              <Icon name="fas fa-star" className={`intro-star intro-star-${index + 1}`} />
+            {/each}
+          </div>
+
+          <a href={intro.reviewCta.href} target="_blank" rel="noopener">
+            {intro.reviewCta.label}
+          </a>
         </div>
-
-        <a href={intro.reviewCta.href} target="_blank" rel="noopener">
-          {intro.reviewCta.label}
-        </a>
       </div>
     </div>
   </div>
diff --git a/src/lib/components/PricingPage.svelte b/src/lib/components/PricingPage.svelte
index 1b1efb1..72fa42a 100644
--- a/src/lib/components/PricingPage.svelte
+++ b/src/lib/components/PricingPage.svelte
@@ -180,9 +180,10 @@
 
   .pricing-plan-ribbon {
     position: absolute;
-    top: 18px;
-    right: 18px;
-    padding: 6px 10px;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 6px 12px;
     border-radius: 999px;
     background: var(--yellow);
     color: #000;
@@ -235,6 +236,7 @@
 
   .pricing-plan-cta {
     margin-top: 24px;
+    font-family: var(--font-head);
   }
 
   @media (hover: hover) {
@@ -305,6 +307,10 @@
       gap: 18px;
     }
 
+    .pricing-plan-popular {
+      order: -1;
+    }
+
     .pricing-plan-card {
       padding: 28px 22px;
     }
diff --git a/src/lib/components/ServiceLandingPage.svelte b/src/lib/components/ServiceLandingPage.svelte
index b1cf55a..03dbdae 100644
--- a/src/lib/components/ServiceLandingPage.svelte
+++ b/src/lib/components/ServiceLandingPage.svelte
@@ -253,9 +253,10 @@
 
   .service-plan-ribbon {
     position: absolute;
-    top: 18px;
-    right: 18px;
-    padding: 6px 10px;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 6px 12px;
     border-radius: 999px;
     background: var(--yellow);
     color: #000;
@@ -348,8 +349,10 @@
   }
 
   .service-plan-cta {
-    display: inline-flex;
-    margin-top: 28px;
+    display: flex;
+    width: fit-content;
+    margin: 28px auto 0;
+    font-family: var(--font-head);
   }
 
   .service-extras {
@@ -464,6 +467,10 @@
       gap: 24px;
     }
 
+    .service-plan-popular {
+      order: -1;
+    }
+
     .service-highlight,
     .service-pricing,
     .service-benefits {
diff --git a/src/lib/styles/forms.css b/src/lib/styles/forms.css
index a84f4d4..aca5ff9 100644
--- a/src/lib/styles/forms.css
+++ b/src/lib/styles/forms.css
@@ -8,16 +8,15 @@
 }
 
 .booking-title {
-  display: inline-flex;
-  align-items: baseline;
-  justify-content: center;
-  gap: 14px;
-  margin-bottom: 28px;
+  display: block;
+  text-align: center;
+  margin: 0 0 28px;
   font-family: var(--font-head);
   font-size: 68px;
   font-weight: 800;
-  line-height: 0.96;
+  line-height: 1;
   letter-spacing: -0.04em;
+  text-wrap: balance;
 }
 
 .booking-title-plain {
@@ -333,18 +332,20 @@
 
 .field-error {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 7px;
   margin: 10px 0 0;
   color: #c94040;
   font-size: 13px;
   font-weight: 600;
+  line-height: 1.4;
   animation: fieldErrorIn 0.16s ease;
 }
 
 .field-error .icon {
   font-size: 13px;
   flex-shrink: 0;
+  margin-top: 2px;
 }
 
 @keyframes fieldErrorIn {
diff --git a/src/lib/styles/layout.css b/src/lib/styles/layout.css
index 52fb8c2..7870704 100644
--- a/src/lib/styles/layout.css
+++ b/src/lib/styles/layout.css
@@ -6,6 +6,7 @@ header {
 nav,
 .mobile-menu,
 .hero-inner,
+.intro-inner,
 .promise-inner,
 .services-inner,
 .values-inner,
diff --git a/src/lib/styles/responsive.css b/src/lib/styles/responsive.css
index a884e11..39f193c 100644
--- a/src/lib/styles/responsive.css
+++ b/src/lib/styles/responsive.css
@@ -368,16 +368,9 @@
   }
 
   .booking-title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    width: 100%;
     font-size: 34px;
-    line-height: 0.98;
+    line-height: 1.02;
     margin-bottom: 24px;
-    text-align: center;
   }
 
   .booking-title-highlight::after {
diff --git a/src/lib/styles/sections.css b/src/lib/styles/sections.css
index 1df543a..ae2ffd2 100644
--- a/src/lib/styles/sections.css
+++ b/src/lib/styles/sections.css
@@ -377,6 +377,8 @@ footer {
 
 .footer-logo {
   display: block;
+  height: 22px;
+  width: auto;
   margin-bottom: 20px;
 }