feat(frontend): refine prices page layout and card styling

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/routes/prices/+page.svelte

@@ -57,16 +57,16 @@
 	});
 </script>
 
-<div class="mx-auto max-w-4xl space-y-6 p-4 md:p-6">
+<div class="mx-auto max-w-4xl space-y-8 p-4 md:p-6">
-	<div>
+	<div class="text-center">
-		<h1 class="text-2xl font-bold md:text-3xl">Our Prices</h1>
+		<h1 class="font-['Playfair_Display'] text-4xl font-bold">Our Prices</h1>
-		<p class="text-gray-600">Professional beauty treatments with transparent pricing</p>
+		<p class="mt-2 text-gray-600">Professional beauty treatments with transparent pricing</p>
 	</div>
 
 	{#if servicesLoading}
 		<div class="space-y-4">
 			{#each Array(5) as _, i (i)}
-				<Card.Root>
+				<Card.Root class="shadow-sm">
 					<Card.Content>
 						<div class="flex items-start justify-between">
 							<div class="flex-1 space-y-2">
@@ -84,7 +84,7 @@
 			{/each}
 		</div>
 	{:else if services.length === 0}
-		<Card.Root>
+		<Card.Root class="shadow-sm">
 			<Card.Content>
 				<div class="py-12 text-center">
 					<div class="mb-4 text-lg text-gray-600">No services available at the moment.</div>
@@ -95,7 +95,7 @@
 	{:else}
 		<div class="space-y-4">
 			{#each services as service (service.id)}
-				<Card.Root class="transition-colors hover:bg-fuchsia-50">
+				<Card.Root class="shadow-sm transition-all duration-200 hover:shadow-md">
 					<Card.Content>
 						<div class="flex items-start justify-between gap-4">
 							<div class="min-w-0 flex-1">
@@ -156,7 +156,7 @@
 			{/each}
 		</div>
 
-		<Card.Root class="border-dashed border-gray-300 bg-gray-50">
+		<Card.Root class="border-dashed border-gray-200 bg-gray-50/50 shadow-sm">
 			<Card.Content class="p-6 text-center">
 				<p class="text-sm text-gray-600">
 					Need something different? Select the closest service and add a note, or contact us for a bespoke treatment.
@@ -167,9 +167,9 @@
 			</Card.Content>
 		</Card.Root>
 
-		<Card.Root class="border-amber-200 bg-amber-50">
+		<Card.Root class="border-gray-200 bg-gray-50/80 shadow-sm">
 			<Card.Header>
-				<Card.Title class="flex items-center gap-2 text-amber-800">
+				<Card.Title class="flex items-center gap-2 text-gray-700">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -186,7 +186,7 @@
 				</Card.Title>
 			</Card.Header>
 			<Card.Content>
-				<ul class="space-y-2 text-sm text-amber-900">
+				<ul class="space-y-2 text-sm text-gray-600">
 					<li>
 						<span class="font-medium">Prices and durations</span> are estimates and may vary based on
 						individual requirements
@@ -209,7 +209,7 @@
 			</Card.Content>
 		</Card.Root>
 
-		<Card.Root class="bg-gradient-to-br from-primary/5 to-secondary/30">
+		<Card.Root class="bg-gradient-to-br from-primary/5 to-secondary/30 shadow-sm">
 			<Card.Content class="p-6 text-center md:p-8">
 				<h2 class="mb-4 text-lg font-semibold text-primary md:text-xl">Ready to Book?</h2>
 				<div class="flex flex-col gap-3 md:flex-row md:justify-center md:gap-4">