4.2.1 polish

src/lib/components/ServiceLandingPage.svelte

@@ -113,6 +113,18 @@
         {/each}
       </div>
 
+      {#if pageContent.pricing.scarcityNote}
+        <p class="service-plan-scarcity">
+          <Icon name="fas fa-clock" />
+          {pageContent.pricing.scarcityNote}
+        </p>
+      {/if}
+
+      <p class="service-plan-reassurance">
+        <Icon name="fas fa-shield-heart" />
+        Every booking starts with a free, no-obligation Meet &amp; Greet.
+      </p>
+
       {#if pageContent.pricing.extras?.length}
         <div class="service-extras">
           <div class="service-extras-heading">Extras</div>
@@ -554,6 +566,42 @@
     font-family: var(--font-head);
   }
 
+  .service-plan-reassurance,
+  .service-plan-scarcity {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: fit-content;
+    margin: 24px auto 0;
+    padding: 8px 16px;
+    border-radius: 999px;
+    background: rgba(33, 48, 33, 0.06);
+    color: var(--green);
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .service-plan-scarcity {
+    background: rgba(255, 209, 0, 0.18);
+    color: #5a4500;
+  }
+
+  .service-plan-reassurance + .service-plan-reassurance,
+  .service-plan-scarcity + .service-plan-reassurance {
+    margin-top: 12px;
+  }
+
+  :global(.service-plan-reassurance .icon) {
+    color: var(--yellow);
+    font-size: 14px;
+  }
+
+  :global(.service-plan-scarcity .icon) {
+    color: #b88800;
+    font-size: 14px;
+  }
+
   .service-extras {
     margin-top: 30px;
     border-radius: 28px;