feat: gate full prediction by ai_predictions feature flag

Add a prediction box above filter results on the homepage.
Server returns the full payload only when PlanFeatures::can(
'ai_predictions') — currently plus and pro. Other tiers and
guests get a trimmed {fuel_type, predicted_direction,
tier_locked: true} response so the gate is enforced server-side.

Frontend renders a compact one-liner with the national trend
direction for trimmed responses, full card for unlocked.

Hide the Pro plan card from the pricing section (pro plan
disabled in DB pending real Stripe price ids), and only show
the bottom signup CTA when the visitor is a guest.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

resources/js/views/Home.vue

@@ -36,6 +36,13 @@
             <section v-if="searchAttempted" id="searchAttempted" class="px-6">
             <div class="max-w-7xl mx-auto space-y-6">
 
+                <!-- Prediction box (sits above filter results) -->
+                <PredictionCard
+                    :is-paid-tier="showFullPrediction"
+                    :loading="predictionLoading"
+                    :prediction="prediction"
+                />
+
                 <!-- Post-search filter bar -->
 				<PostSearchFilters
 					v-model:brand-filter="brandFilter"
@@ -201,7 +208,7 @@
                     </div>
                 </div>
 
-                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
                     <!-- Free -->
                     <div class="bg-white border border-zinc-300 p-8 rounded-3xl flex flex-col h-full">
                         <div class="mb-8">
@@ -253,23 +260,6 @@
                         </ul>
                         <a :href="ctaHref('plus')" class="w-full py-3 px-4 bg-accent text-white rounded-xl text-center font-bold shadow-lg hover:bg-primary-dark transition-all">{{ ctaLabel('plus') }}</a>
                     </div>
-
-                    <!-- Pro -->
-                    <div class="bg-zinc-800 border border-zinc-800 p-8 rounded-3xl flex flex-col h-full text-white">
-                        <div class="mb-8">
-                            <h4 class="text-xl font-bold font-display mb-2">Pro</h4>
-                            <div class="flex items-baseline gap-1">
-                                <span class="text-4xl font-black">{{ PRICES[cadence].pro }}</span>
-                                <span class="text-zinc-400 text-sm">{{ PRICE_SUFFIX[cadence] }}</span>
-                            </div>
-                        </div>
-                        <ul class="space-y-4 mb-8 flex-1">
-                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:sparkles"></iconify-icon> AI Price Predictions</li>
-                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> Multi-Vehicle Fleet</li>
-                            <li class="text-sm flex gap-2"><iconify-icon class="text-accent" icon="lucide:check"></iconify-icon> Exportable Price History</li>
-                        </ul>
-                        <a :href="ctaHref('pro')" class="w-full py-3 px-4 bg-white text-zinc-800 rounded-xl text-center font-bold hover:bg-zinc-100 transition-colors">{{ ctaLabel('pro') }}</a>
-                    </div>
                 </div>
             </div>
         </section>
@@ -316,13 +306,12 @@
         </section>
 
         <!-- CTA -->
-        <section class="py-12 md:py-24 px-6 bg-accent text-white text-center">
+        <section class="py-12 md:py-24 px-6 bg-accent text-white text-center" v-if="!isAuthenticated">
             <div class="max-w-3xl mx-auto space-y-8">
                 <h2 class="text-4xl md:text-5xl font-black font-display leading-tight">Ready to outsmart the pumps?</h2>
                 <p class="text-xl text-white/80">Sign up for free today and never pay over the odds for fuel again.</p>
                 <div class="flex flex-col sm:flex-row gap-4 justify-center">
                     <a class="bg-white text-accent px-10 py-4 rounded-xl text-lg font-black shadow-2xl hover:bg-zinc-100 transition-all" href="/register">Create Free Account</a>
-                    <a class="bg-transparent border-2 border-white/30 text-white px-10 py-4 rounded-xl text-lg font-bold hover:bg-white/10 transition-all" href="#">Watch Demo Video</a>
                 </div>
             </div>
         </section>
@@ -394,7 +383,9 @@ import { useAuth } from '../composables/useAuth.js'
 import { useStations } from '../composables/useStations.js'
 import api from '../axios.js'
 import PostSearchFilters from '../components/PostSearchFilters.vue'
+import PredictionCard from '../components/PredictionCard.vue'
 import StationList from '../components/StationList.vue'
+import { usePrediction } from '../composables/usePrediction.js'
 
 const LeafletMap = defineAsyncComponent(() => import('../components/LeafletMap.vue'))
 import LandingNav from '../components/landing/LandingNav.vue'
@@ -404,6 +395,8 @@ import HeroSearch from '../components/landing/HeroSearch.vue'
 import StatsRow from '../components/landing/StatsRow.vue'
 
 const { isAuthenticated, userTier } = useAuth()
+const { prediction, loading: predictionLoading, fetch: fetchPrediction } = usePrediction()
+const showFullPrediction = computed(() => Boolean(prediction.value) && !prediction.value.tier_locked)
 
 const liveStats = ref({ stationCount: null, latestPriceAt: null })
 
@@ -564,6 +557,9 @@ async function runSearch(params) {
     radiusMiles.value = params.radius ?? radiusMiles.value
     searchAttempted.value = true
     await search(params)
+    const lat = meta.value?.lat ?? params.lat ?? null
+    const lng = meta.value?.lng ?? params.lng ?? null
+    fetchPrediction(lat && lng ? { lat, lng } : {})
 }
 
 async function onSearch(params) {