4.2.1 final fixes

MOBILEPOLISH.md

@@ -1,5 +1,101 @@
 # Mobile Polish — Conversion & Comfort Audit Tracker
 
+## New Rescan Items — Mobile Conversion Opportunities
+
+Fresh opportunities from a second mobile-first pass over the main site.
+These are intentionally only the new items, kept separate from the
+existing audit below.
+
+### High — conversion strategy and flow
+
+- [ ] **Hero CTA hierarchy still prioritises browsing over booking**
+  - Files: `src/lib/content/homepage.ts:37-39`, `src/lib/components/HeroSection.svelte`
+  - Current: the yellow primary CTA is `Explore our services →`, while
+    `Book a Meet & Greet` is secondary.
+  - Why: on mobile, high-intent users should be able to choose the next
+    step immediately. Making the exploratory path more visually dominant
+    adds friction before the user reaches the lead form.
+  - Opportunity: test flipping the hierarchy on mobile so booking
+    becomes the primary CTA and service exploration becomes secondary.
+
+- [ ] **Homepage social proof appears too late in the scroll**
+  - File: `src/routes/+page.svelte:143-147`
+  - Current order: `Services -> Values -> Testimonials -> Booking`.
+  - Why: testimonials are one of the strongest conversion levers, but
+    on mobile they arrive after several large sections. Users are asked
+    to keep scrolling before seeing the strongest emotional proof.
+  - Opportunity: move testimonials above values on the homepage, or
+    surface one featured review snippet earlier in the page.
+
+- [ ] **Hero still relies on the next section for trust**
+  - Files: `src/lib/content/homepage.ts:43-49`, `src/lib/components/HeroSection.svelte`,
+    `src/lib/components/IntroStrip.svelte`
+  - Current: the hero presents the headline and CTAs, but the review
+    proof sits in the intro strip below.
+  - Why: on mobile, the hero needs to answer both "what is this?" and
+    "can I trust them?" before the user scrolls away. Separating those
+    two jobs weakens the first decision moment.
+  - Opportunity: add a compact review/trust chip directly under the
+    hero subtitle or near the hero CTAs on mobile.
+
+- [ ] **Booking flow asks for dog details before it captures the lead**
+  - File: `src/lib/components/BookingSection.svelte:298-441`
+  - Current: step 1 asks for dog name, location, message, and services;
+    contact details are only requested in step 2.
+  - Why: this is a higher-friction sequence on mobile. Users often feel
+    more comfortable giving owner details first, then expanding into pet
+    specifics once they have mentally committed.
+  - Opportunity: test reversing the step order so step 1 captures name,
+    email, and phone first, then dog details second.
+
+### Medium — mobile persuasion and CTA timing
+
+- [ ] **Sticky mobile CTA appears on a fixed pixel threshold rather than page context**
+  - File: `src/lib/components/MobileBookBar.svelte:26-37`
+  - Current: visibility is driven by `SHOW_AFTER_PX = 480` and
+    `HIDE_BELOW_PX = 120`.
+  - Why: a fixed threshold will feel early on some phones and late on
+    others. It also ignores whether the hero or booking section is
+    actually in view.
+  - Opportunity: switch to an `IntersectionObserver` tied to the hero or
+    booking section so the bar appears based on user context rather than
+    raw scroll position.
+
+- [ ] **Testimonials section pushes users off-site before finishing the proof story**
+  - File: `src/lib/components/TestimonialsSection.svelte:128-134`
+  - Current: the Instagram CTA appears near the top of the testimonials
+    section, before the user has fully consumed the review content.
+  - Why: on mobile, sending users to Instagram this early interrupts the
+    conversion journey and competes with the booking path.
+  - Opportunity: demote the Instagram CTA below the carousel, or replace
+    it with a tighter trust-oriented proof CTA higher up.
+
+- [ ] **Mobile pricing pages lose the consultative "not sure?" nudge**
+  - File: `src/lib/components/PricingPage.svelte:12-19`
+  - Current: the meet-and-greet reminder prompt is gated behind
+    `min-width: 769px`, so desktop gets a tailored nudge and mobile
+    does not.
+  - Why: mobile users are more likely to feel overwhelmed by stacked
+    pricing cards, not less. Removing the consultative reassurance on
+    the smallest screens is directionally backwards for conversion.
+  - Opportunity: add an inline mobile prompt after the first pricing
+    section that says, in effect, "Not sure which option fits? Book a
+    free Meet & Greet and we’ll help you choose."
+
+### Medium — stacked-page CTA noise
+
+- [ ] **Stacked pricing/service cards repeat the same CTA too many times**
+  - Files: `src/lib/components/PricingPage.svelte:141-159`,
+    `src/lib/components/ServiceLandingPage.svelte:94-112`
+  - Current: when cards collapse to one column on mobile, each card
+    keeps a full "Book a Meet & Greet" button.
+  - Why: the repetition turns persuasive choice architecture into visual
+    noise. Instead of helping the user decide, the page starts feeling
+    like a stack of repeated asks.
+  - Opportunity: treat this as a shared mobile pattern across pricing
+    and service pages. Keep one strong CTA per section, let the popular
+    card carry the primary action, and demote the rest.
+
 Findings from a focused mobile-experience review (≤768px, with extra
 attention to 375px small-phones). Desktop is considered done. Each item
 records the where, why, and the concrete change.