Cleanup pricing page tables, introstrip, css changes

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

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

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>

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;
     }

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 {

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 {

src/lib/styles/layout.css

@@ -6,6 +6,7 @@ header {
 nav,
 .mobile-menu,
 .hero-inner,
+.intro-inner,
 .promise-inner,
 .services-inner,
 .values-inner,

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 {

src/lib/styles/sections.css

@@ -377,6 +377,8 @@ footer {
 
 .footer-logo {
   display: block;
+  height: 22px;
+  width: auto;
   margin-bottom: 20px;
 }