diff --git a/.env.example b/.env.example
index 52900f5..79bc536 100644
--- a/.env.example
+++ b/.env.example
@@ -45,10 +45,12 @@ SQUARE_WEBHOOK_NOTIFICATION_URL=
 # Frontend (public — safe for the browser). Square Web Payments SDK:
 # VITE_SQUARE_APPLICATION_ID — client-side application ID (sandbox IDs start with "sandbox-")
 # VITE_SQUARE_LOCATION_ID    — Square location ID
-# VITE_SQUARE_ENVIRONMENT    — 'sandbox' | 'production' (optional; derived from the app ID prefix when omitted)
+# VITE_SQUARE_ENVIRONMENT    — 'mock' | 'sandbox' | 'production'. Local dev: 'mock' renders the
+#                              frontend's built-in mock card form (tokens only; pairs with
+#                              SQUARE_ENVIRONMENT=mock above). NEVER set 'mock' in production.
 VITE_SQUARE_APPLICATION_ID=
 VITE_SQUARE_LOCATION_ID=
-VITE_SQUARE_ENVIRONMENT=
+VITE_SQUARE_ENVIRONMENT=mock
 
 # Test Database (separate from main DB)
 # Used by testutils/testdb for running tests without corrupting dev data
diff --git a/frontend/src/lib/components/admin/ApprovalModal.svelte b/frontend/src/lib/components/admin/ApprovalModal.svelte
index 2353936..737600b 100644
--- a/frontend/src/lib/components/admin/ApprovalModal.svelte
+++ b/frontend/src/lib/components/admin/ApprovalModal.svelte
@@ -335,7 +335,9 @@
 				onApproved();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to confirm: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to confirm: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch {
 			toast.error('Network error confirming booking', { id: loadingToast });
@@ -363,7 +365,9 @@
 				onApproved();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to decline: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to decline: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch {
 			toast.error('Network error declining booking', { id: loadingToast });
diff --git a/frontend/src/lib/components/admin/ServicesManagement.svelte b/frontend/src/lib/components/admin/ServicesManagement.svelte
index fe5e84f..7eb28ca 100644
--- a/frontend/src/lib/components/admin/ServicesManagement.svelte
+++ b/frontend/src/lib/components/admin/ServicesManagement.svelte
@@ -279,7 +279,9 @@
 				toast.error(`Validation error: ${extractErrorMessage(errorText)}`, { id: loadingToast });
 			} else {
 				const errorText = await response.text();
-				toast.error(`Failed to create service: ${extractErrorMessage(errorText)}`, { id: loadingToast });
+				toast.error(`Failed to create service: ${extractErrorMessage(errorText)}`, {
+					id: loadingToast
+				});
 			}
 		} catch (err) {
 			console.error('Error creating service:', err);
diff --git a/frontend/src/lib/components/admin/TimeBlockers.svelte b/frontend/src/lib/components/admin/TimeBlockers.svelte
index 2550bdf..eb1a849 100644
--- a/frontend/src/lib/components/admin/TimeBlockers.svelte
+++ b/frontend/src/lib/components/admin/TimeBlockers.svelte
@@ -448,7 +448,9 @@
 				await fetchBlockers();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to create: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to create: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch (err) {
 			console.error('Error creating time blocker:', err);
@@ -475,7 +477,9 @@
 				await fetchBlockers();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to delete: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to delete: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch (err) {
 			console.error('Error deleting time blocker:', err);
@@ -872,7 +876,12 @@
 								? ''
 								: 's'} with this slot
 						</span>
-						<Button variant="outline" size="sm" class="h-6 text-xs ml-auto" onclick={checkOverlappingBookings}>
+						<Button
+							variant="outline"
+							size="sm"
+							class="h-6 text-xs ml-auto"
+							onclick={checkOverlappingBookings}
+						>
 							Refresh
 						</Button>
 					</div>
diff --git a/frontend/src/lib/components/layout/ContactCard.svelte b/frontend/src/lib/components/layout/ContactCard.svelte
index 74be7da..58a73ad 100644
--- a/frontend/src/lib/components/layout/ContactCard.svelte
+++ b/frontend/src/lib/components/layout/ContactCard.svelte
@@ -23,16 +23,14 @@
 
 	type AvailabilityState = 'sleeping' | 'with_client' | 'busy' | 'prepping' | 'available';
 
-	const STATUS_MAP: Record<
-		AvailabilityState,
-		{ label: string; color: 'green' | 'amber' | 'red' }
-	> = {
-		sleeping: { label: 'Unable to take calls right now', color: 'red' },
-		with_client: { label: 'With a client', color: 'red' },
-		busy: { label: 'Busy', color: 'amber' },
-		prepping: { label: 'Prepping for a client', color: 'amber' },
-		available: { label: 'Available to contact', color: 'green' }
-	};
+	const STATUS_MAP: Record<AvailabilityState, { label: string; color: 'green' | 'amber' | 'red' }> =
+		{
+			sleeping: { label: 'Unable to take calls right now', color: 'red' },
+			with_client: { label: 'With a client', color: 'red' },
+			busy: { label: 'Busy', color: 'amber' },
+			prepping: { label: 'Prepping for a client', color: 'amber' },
+			available: { label: 'Available to contact', color: 'green' }
+		};
 
 	let availabilityState = $state<AvailabilityState | null>(null);
 
@@ -59,9 +57,7 @@
 		}
 	}
 
-	let contactStatus = $derived(
-		availabilityState ? STATUS_MAP[availabilityState] : null
-	);
+	let contactStatus = $derived(availabilityState ? STATUS_MAP[availabilityState] : null);
 </script>
 
 <div class="mx-auto h-full max-w-sm">
@@ -91,8 +87,8 @@
 					class="font-medium"
 					class:text-green-700={contactStatus.color === 'green'}
 					class:text-amber-700={contactStatus.color === 'amber'}
-					class:text-red-700={contactStatus.color === 'red'}
-				>{contactStatus.label}</span>
+					class:text-red-700={contactStatus.color === 'red'}>{contactStatus.label}</span
+				>
 			</div>
 		{/if}
 
diff --git a/frontend/src/lib/components/layout/PortfolioCarousel.svelte b/frontend/src/lib/components/layout/PortfolioCarousel.svelte
index 6ec473e..b986c14 100644
--- a/frontend/src/lib/components/layout/PortfolioCarousel.svelte
+++ b/frontend/src/lib/components/layout/PortfolioCarousel.svelte
@@ -38,7 +38,9 @@
 
 <section class="w-full overflow-hidden py-16">
 	<div class="mx-auto max-w-6xl px-6">
-		<h2 class="mb-12 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Portfolio</h2>
+		<h2 class="mb-12 text-center font-['Playfair_Display'] text-2xl font-semibold">
+			Our Portfolio
+		</h2>
 	</div>
 
 	<div class="relative w-full overflow-hidden">
diff --git a/frontend/src/lib/components/payments/MockCardForm.svelte b/frontend/src/lib/components/payments/MockCardForm.svelte
new file mode 100644
index 0000000..95f0067
--- /dev/null
+++ b/frontend/src/lib/components/payments/MockCardForm.svelte
@@ -0,0 +1,253 @@
+<!-- DEV-ONLY mock card form — enabled only by VITE_SQUARE_ENVIRONMENT === 'mock'
+     (never in production). The PAN lives only in local component state; only a
+     cnon: token is ever returned. -->
+<script lang="ts">
+	import CardBrandIcon from './CardBrandIcon.svelte';
+
+	// Deterministic token mapping the backend dev mock (square_dev.go
+	// detectCardInfo) resolves back to the brand/last4 the user typed.
+	const MOCK_TOKENS: Record<string, string> = {
+		'4242': 'cnon:test-card',
+		'4111': 'cnon:visa',
+		'5555': 'cnon:mastercard',
+		'3782': 'cnon:amex'
+	};
+
+	let {
+		disabled = false,
+		onReady = () => {}
+	}: { disabled?: boolean; onReady?: (ready: boolean) => void } = $props();
+
+	let cardNumber = $state('');
+	let expiry = $state('');
+	let cvc = $state('');
+	let cardholderName = $state('');
+
+	let cardNumberTouched = $state(false);
+	let expiryTouched = $state(false);
+	let cvcTouched = $state(false);
+
+	// Per-instance ids so two mounted forms never collide on the same id. Pure
+	// SPA (no SSR/hydration), so a random id cannot mismatch.
+	const cardNumberId = `mock-card-number-${crypto.randomUUID()}`;
+	const expiryId = `mock-card-exp-${crypto.randomUUID()}`;
+	const cvcId = `mock-card-cvc-${crypto.randomUUID()}`;
+	const nameId = `mock-card-name-${crypto.randomUUID()}`;
+
+	const inputClasses =
+		'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20';
+
+	const digits = $derived(cardNumber.replace(/\D/g, ''));
+
+	const detectedBrand = $derived.by(() => {
+		if (digits.startsWith('4')) return 'VISA';
+		if (digits.startsWith('34') || digits.startsWith('37')) return 'AMERICAN_EXPRESS';
+		if (digits.length >= 2) {
+			const two = Number(digits.slice(0, 2));
+			if (two >= 51 && two <= 55) return 'MASTERCARD';
+		}
+		if (digits.length >= 4) {
+			const four = Number(digits.slice(0, 4));
+			if (four >= 2221 && four <= 2720) return 'MASTERCARD';
+		}
+		return '';
+	});
+
+	function formatNumber(raw: string): string {
+		const isAmex = raw.startsWith('34') || raw.startsWith('37');
+		const d = raw.replace(/\D/g, '').slice(0, isAmex ? 15 : 16);
+		if (isAmex) {
+			if (d.length <= 4) return d;
+			if (d.length <= 10) return `${d.slice(0, 4)} ${d.slice(4)}`;
+			return `${d.slice(0, 4)} ${d.slice(4, 10)} ${d.slice(10)}`;
+		}
+		return d.replace(/(.{4})/g, '$1 ').trim();
+	}
+
+	function luhnValid(value: string): boolean {
+		let sum = 0;
+		let double = false;
+		for (let i = value.length - 1; i >= 0; i--) {
+			let digit = value.charCodeAt(i) - 48;
+			if (double) {
+				digit *= 2;
+				if (digit > 9) digit -= 9;
+			}
+			sum += digit;
+			double = !double;
+		}
+		return sum % 10 === 0;
+	}
+
+	const numberLuhnValid = $derived(digits.length >= 12 && luhnValid(digits));
+
+	const expiryDigits = $derived(expiry.replace(/\D/g, ''));
+	const expiryMonth = $derived(Number(expiryDigits.slice(0, 2)));
+	const expiryYear = $derived(Number(expiryDigits.slice(2)));
+	const expiryValid = $derived.by(() => {
+		if (expiryDigits.length !== 4) return false;
+		if (expiryMonth < 1 || expiryMonth > 12) return false;
+		const now = new Date();
+		const currentYear = now.getFullYear() % 100;
+		const currentMonth = now.getMonth() + 1;
+		if (expiryYear < currentYear) return false;
+		if (expiryYear === currentYear && expiryMonth < currentMonth) return false;
+		return true;
+	});
+
+	const cvcValid = $derived(cvc.length === (detectedBrand === 'AMERICAN_EXPRESS' ? 4 : 3));
+
+	// Mirrors the real form's onReady(ready && !disabled).
+	const complete = $derived(numberLuhnValid && expiryValid && cvcValid && !disabled);
+
+	$effect(() => {
+		onReady(complete);
+	});
+
+	const cardNumberError = $derived.by(() => {
+		if (!cardNumberTouched) return '';
+		if (digits.length === 0) return 'Card number is required';
+		if (digits.length < 12) return 'Card number is too short';
+		if (!luhnValid(digits)) return 'Card number is invalid';
+		return '';
+	});
+
+	const expiryError = $derived.by(() => {
+		if (!expiryTouched) return '';
+		if (expiryDigits.length === 0) return 'Expiry date is required';
+		if (expiryDigits.length < 4) return 'Enter a valid expiry date';
+		if (expiryMonth < 1 || expiryMonth > 12) return 'Invalid month';
+		return expiryValid ? '' : 'Card has expired';
+	});
+
+	const cvcError = $derived.by(() => {
+		if (!cvcTouched) return '';
+		if (cvc.length === 0) return 'Security code is required';
+		const expected = detectedBrand === 'AMERICAN_EXPRESS' ? 4 : 3;
+		return cvc.length === expected ? '' : `Security code must be ${expected} digits`;
+	});
+
+	let lastExpiry = '';
+
+	function onCardNumberInput(e: Event) {
+		const raw = (e.currentTarget as HTMLInputElement).value;
+		cardNumber = formatNumber(raw);
+		cardNumberTouched = true;
+	}
+
+	function onExpiryInput(e: Event) {
+		const raw = (e.currentTarget as HTMLInputElement).value;
+		const deleting = raw.length < lastExpiry.length;
+		lastExpiry = raw;
+		const d = raw.replace(/\D/g, '').slice(0, 4);
+		expiry =
+			d.length <= 1
+				? d
+				: d.length === 2
+					? deleting
+						? d
+						: `${d}/`
+					: `${d.slice(0, 2)}/${d.slice(2)}`;
+		expiryTouched = true;
+	}
+
+	function onCvcInput(e: Event) {
+		const raw = (e.currentTarget as HTMLInputElement).value;
+		cvc = raw.replace(/\D/g, '').slice(0, detectedBrand === 'AMERICAN_EXPRESS' ? 4 : 3);
+		cvcTouched = true;
+	}
+
+	/** Tokenizes the entered card into a deterministic cnon: token the backend dev mock accepts. */
+	export async function tokenize(): Promise<string> {
+		if (!complete) {
+			throw new Error('Card details are incomplete');
+		}
+		const token = MOCK_TOKENS[digits.slice(0, 4)] ?? 'cnon:test-card';
+		return Promise.resolve(token);
+	}
+</script>
+
+<div class="space-y-3">
+	<div>
+		<label for={cardNumberId} class="mb-1 block text-sm text-gray-600">Card number</label>
+		<div class="relative">
+			<input
+				id={cardNumberId}
+				type="text"
+				value={cardNumber}
+				oninput={(e) => onCardNumberInput(e)}
+				placeholder="1234 5678 9012 3456"
+				inputmode="numeric"
+				autocomplete="cc-number"
+				{disabled}
+				class="{inputClasses} pr-14"
+				aria-invalid={cardNumberError !== ''}
+				aria-describedby={cardNumberError ? `${cardNumberId}-error` : undefined}
+			/>
+			{#if detectedBrand !== ''}
+				<div class="absolute inset-y-0 right-2 flex items-center">
+					<CardBrandIcon brand={detectedBrand} />
+				</div>
+			{/if}
+		</div>
+		{#if cardNumberError}
+			<p id={`${cardNumberId}-error`} class="mt-1 text-xs text-red-500">{cardNumberError}</p>
+		{/if}
+	</div>
+
+	<div class="grid grid-cols-2 gap-2">
+		<div>
+			<label for={expiryId} class="mb-1 block text-sm text-gray-600">Expiry</label>
+			<input
+				id={expiryId}
+				type="text"
+				value={expiry}
+				oninput={(e) => onExpiryInput(e)}
+				placeholder="MM/YY"
+				inputmode="numeric"
+				autocomplete="cc-exp"
+				{disabled}
+				class={inputClasses}
+				aria-invalid={expiryError !== ''}
+				aria-describedby={expiryError ? `${expiryId}-error` : undefined}
+			/>
+			{#if expiryError}
+				<p id={`${expiryId}-error`} class="mt-1 text-xs text-red-500">{expiryError}</p>
+			{/if}
+		</div>
+		<div>
+			<label for={cvcId} class="mb-1 block text-sm text-gray-600">CVC</label>
+			<input
+				id={cvcId}
+				type="text"
+				value={cvc}
+				oninput={(e) => onCvcInput(e)}
+				placeholder="123"
+				inputmode="numeric"
+				autocomplete="cc-csc"
+				{disabled}
+				class={inputClasses}
+				aria-invalid={cvcError !== ''}
+				aria-describedby={cvcError ? `${cvcId}-error` : undefined}
+			/>
+			{#if cvcError}
+				<p id={`${cvcId}-error`} class="mt-1 text-xs text-red-500">{cvcError}</p>
+			{/if}
+		</div>
+	</div>
+
+	<div>
+		<label for={nameId} class="mb-1 block text-sm text-gray-600">
+			Name on card <span class="text-gray-400">(optional)</span>
+		</label>
+		<input
+			id={nameId}
+			type="text"
+			bind:value={cardholderName}
+			placeholder="Jane Doe"
+			autocomplete="cc-name"
+			{disabled}
+			class={inputClasses}
+		/>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/payments/SquareCardInput.svelte b/frontend/src/lib/components/payments/SquareCardInput.svelte
index 4fff33d..b3c11e0 100644
--- a/frontend/src/lib/components/payments/SquareCardInput.svelte
+++ b/frontend/src/lib/components/payments/SquareCardInput.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import CardEntryUnavailable from './CardEntryUnavailable.svelte';
-	import { getSquarePayments, isSquareConfigured } from '$lib/square/square';
+	import type MockCardForm from './MockCardForm.svelte';
+	import { getSquarePayments, isSquareConfigured, isSquareMock } from '$lib/square/square';
 
 	interface Props {
 		/** Disable the form while a payment is processing. */
@@ -14,6 +15,7 @@
 
 	let containerEl = $state<HTMLDivElement | null>(null);
 	let cardInstance: unknown | null = null;
+	let mockForm = $state<MockCardForm | null>(null);
 	let ready = $state(false);
 	let initError = $state<string | null>(null);
 
@@ -23,6 +25,10 @@
 	let uniqueId = $state(`square-card-${crypto.randomUUID()}`);
 
 	async function init() {
+		if (isSquareMock()) {
+			// Local dev mock: no SDK load, no iframe. MockCardForm handles everything.
+			return;
+		}
 		if (!isSquareConfigured()) {
 			initError = 'not_configured';
 			return;
@@ -62,11 +68,19 @@
 	});
 
 	$effect(() => {
-		onReady(ready && !disabled);
+		if (!isSquareMock()) {
+			onReady(ready && !disabled);
+		}
 	});
 
 	/** Tokenizes the entered card. Returns the cnon:xxx nonce, throws with a user-facing message. */
 	export async function tokenize(): Promise<string> {
+		if (isSquareMock()) {
+			if (!mockForm) {
+				throw new Error('Card form is not ready — please wait a moment and try again');
+			}
+			return mockForm.tokenize();
+		}
 		const card = cardInstance as {
 			tokenize: () => Promise<{
 				status: string;
@@ -90,7 +104,13 @@
 	}
 </script>
 
-{#if initError === 'not_configured'}
+{#if isSquareMock()}
+	{#await import('./MockCardForm.svelte')}
+		<div class="flex h-9 items-center text-sm text-gray-400">Loading card form...</div>
+	{:then { default: MockCardFormCtor }}
+		<MockCardFormCtor bind:this={mockForm} {disabled} {onReady} />
+	{/await}
+{:else if initError === 'not_configured'}
 	<CardEntryUnavailable />
 {:else if initError === 'init_failed'}
 	<CardEntryUnavailable
diff --git a/frontend/src/lib/components/today/TodayCalendar.svelte b/frontend/src/lib/components/today/TodayCalendar.svelte
index e6744c7..7d36676 100644
--- a/frontend/src/lib/components/today/TodayCalendar.svelte
+++ b/frontend/src/lib/components/today/TodayCalendar.svelte
@@ -523,7 +523,9 @@
 				await fetchTodayBlockersData();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to create: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to create: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch (err) {
 			console.error('Error creating time blocker:', err);
@@ -547,7 +549,9 @@
 				await fetchTodayBlockersData();
 			} else {
 				const text = await response.text();
-				toast.error('Failed to delete: ' + sanitizeText(extractErrorMessage(text)), { id: loadingToast });
+				toast.error('Failed to delete: ' + sanitizeText(extractErrorMessage(text)), {
+					id: loadingToast
+				});
 			}
 		} catch (err) {
 			console.error('Error deleting time blocker:', err);
diff --git a/frontend/src/lib/square/square.ts b/frontend/src/lib/square/square.ts
index aad0ea1..0a5483d 100644
--- a/frontend/src/lib/square/square.ts
+++ b/frontend/src/lib/square/square.ts
@@ -1,20 +1,33 @@
 // Env vars (frontend build-time, public — safe for the browser):
 //   VITE_SQUARE_APPLICATION_ID  Square Web Payments application ID (client-side public)
 //   VITE_SQUARE_LOCATION_ID     Square location ID
-//   VITE_SQUARE_ENVIRONMENT     'sandbox' | 'production' (optional; auto-derived from
-//                               the application ID prefix when omitted)
+//   VITE_SQUARE_ENVIRONMENT     'sandbox' | 'production' | 'mock' (optional;
+//                               auto-derived from the application ID prefix when
+//                               omitted). 'mock' is LOCAL-DEV ONLY: it renders a
+//                               token-only mock card form (never a real Square.js
+//                               iframe). It is additionally gated on the dev build
+//                               (import.meta.env.DEV), so it can never activate in
+//                               a production bundle even if the var is mis-set.
 
 const APP_ID = (import.meta.env.VITE_SQUARE_APPLICATION_ID as string | undefined) ?? '';
 const LOCATION_ID = (import.meta.env.VITE_SQUARE_LOCATION_ID as string | undefined) ?? '';
+const SQUARE_ENV = (import.meta.env.VITE_SQUARE_ENVIRONMENT as string | undefined) ?? '';
 
 export interface SquareConfig {
 	appId: string;
 	locationId: string;
 }
 
-/** True when both Square application + location IDs are configured at build time. */
+/** True when the frontend runs in local-dev mock mode: VITE_SQUARE_ENVIRONMENT === 'mock'
+ * AND the dev build (import.meta.env.DEV). The DEV gate makes the mock structurally
+ * impossible in any production bundle — even if the env var is mis-set at build time. */
+export function isSquareMock(): boolean {
+	return SQUARE_ENV === 'mock' && import.meta.env.DEV;
+}
+
+/** True when a card form can be shown: real Square credentials OR local-dev mock mode. */
 export function isSquareConfigured(): boolean {
-	return APP_ID !== '' && LOCATION_ID !== '';
+	return isSquareMock() || (APP_ID !== '' && LOCATION_ID !== '');
 }
 
 export function getSquareConfig(): SquareConfig | null {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 11ad8af..0ca2881 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -12,8 +12,8 @@
 
 	let hideFooter = $derived(
 		$page.url.pathname === '/admin/schedule' ||
-		$page.url.pathname === '/account' ||
-		$page.url.searchParams.get('format') === 'pdf'
+			$page.url.pathname === '/account' ||
+			$page.url.searchParams.get('format') === 'pdf'
 	);
 
 	// Default to 'top-center' (mobile-first approach)
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 456a1ee..f938edf 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -135,33 +135,33 @@
 
 <section class="bg-gray-50">
 	<div class="mx-auto max-w-4xl px-6 py-16">
-	<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Services</h2>
-	<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
-		<div class="rounded-lg border p-6">
-			<h3 class="mb-2 text-lg font-semibold">Hands</h3>
-			<p class="text-gray-600">
-				Gel polish, nail art, and natural nail care — finished with a soothing hand massage.
-			</p>
+		<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Services</h2>
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
+			<div class="rounded-lg border p-6">
+				<h3 class="mb-2 text-lg font-semibold">Hands</h3>
+				<p class="text-gray-600">
+					Gel polish, nail art, and natural nail care — finished with a soothing hand massage.
+				</p>
+			</div>
+			<div class="rounded-lg border p-6">
+				<h3 class="mb-2 text-lg font-semibold">Feet</h3>
+				<p class="text-gray-600">
+					Luxurious pedicures with exfoliation, cuticle care, and a long-lasting polish finish.
+				</p>
+			</div>
+			<div class="rounded-lg border p-6">
+				<h3 class="mb-2 text-lg font-semibold">Brows</h3>
+				<p class="text-gray-600">
+					Expert shaping, tinting, and lamination for brows that frame your face perfectly.
+				</p>
+			</div>
+			<div class="rounded-lg border p-6">
+				<h3 class="mb-2 text-lg font-semibold">Wax</h3>
+				<p class="text-gray-600">
+					Gentle waxing for face, body, and brows — smooth results with minimal discomfort.
+				</p>
+			</div>
 		</div>
-		<div class="rounded-lg border p-6">
-			<h3 class="mb-2 text-lg font-semibold">Feet</h3>
-			<p class="text-gray-600">
-				Luxurious pedicures with exfoliation, cuticle care, and a long-lasting polish finish.
-			</p>
-		</div>
-		<div class="rounded-lg border p-6">
-			<h3 class="mb-2 text-lg font-semibold">Brows</h3>
-			<p class="text-gray-600">
-				Expert shaping, tinting, and lamination for brows that frame your face perfectly.
-			</p>
-		</div>
-		<div class="rounded-lg border p-6">
-			<h3 class="mb-2 text-lg font-semibold">Wax</h3>
-			<p class="text-gray-600">
-				Gentle waxing for face, body, and brows — smooth results with minimal discomfort.
-			</p>
-		</div>
-	</div>
 	</div>
 </section>
 
@@ -169,8 +169,8 @@
 
 <section class="bg-gray-50">
 	<div class="mx-auto max-w-4xl px-6 py-16">
-	<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Opening Hours</h2>
-	<BusinessHours />
+		<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Opening Hours</h2>
+		<BusinessHours />
 	</div>
 </section>
 
@@ -178,5 +178,3 @@
 	<h2 class="mb-4 font-['Playfair_Display'] text-2xl font-semibold">Ready to Treat Yourself?</h2>
 	<Button href={resolve('/prices')} class="px-6 py-3 text-lg">View Price List</Button>
 </section>
-
-
diff --git a/frontend/src/routes/admin/schedule/+page.svelte b/frontend/src/routes/admin/schedule/+page.svelte
index bd8be22..051fc85 100644
--- a/frontend/src/routes/admin/schedule/+page.svelte
+++ b/frontend/src/routes/admin/schedule/+page.svelte
@@ -766,7 +766,11 @@
 		{/if}
 	</div>
 
-	<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId ?? ''} onChanged={() => fetchWeekData()} />
+	<BookingModal
+		bind:open={showBookingModal}
+		bookingId={selectedBookingId ?? ''}
+		onChanged={() => fetchWeekData()}
+	/>
 {/if}
 
 <style>
diff --git a/obsidian/Crussell/Feature Catalog.md b/obsidian/Crussell/Feature Catalog.md
index 3be681a..d5ffc01 100644
--- a/obsidian/Crussell/Feature Catalog.md	
+++ b/obsidian/Crussell/Feature Catalog.md	
@@ -163,7 +163,7 @@ Multi-method payment system accepting Square (card terminal & online), cash, gif
 **Related:** [[Booking System|1. Booking System]] (deposits), [[Gift Cards|4. Gift Cards]] (pay by gift card), [[Admin Dashboard|5. Admin Dashboard]] (till purchases)
 
 ### 2.1 Online Card Payment (Square — saved cards or new cards via Web Payments SDK)
-**What it does:** Customers pay online with a card. Saved-card payments work via Square tokenized card IDs (`ccof:`); new-card payments are tokenized client-side through the Square Web Payments SDK into `cnon:` nonces and accepted by the backend everywhere. The backend rejects raw PANs (PCI-DSS parity, mirrored by the dev mock). Local dev without Square credentials (`VITE_SQUARE_APPLICATION_ID`/`VITE_SQUARE_LOCATION_ID`) keeps new-card entry gated behind a `CardEntryUnavailable` notice. Used for deposits, full payments, balance payments, and tips.
+**What it does:** Customers pay online with a card. Saved-card payments work via Square tokenized card IDs (`ccof:`); new-card payments are tokenized client-side through the Square Web Payments SDK into `cnon:` nonces and accepted by the backend everywhere. The backend rejects raw PANs (PCI-DSS parity, mirrored by the dev mock). Local dev can opt into the built-in frontend mock (`VITE_SQUARE_ENVIRONMENT=mock`), which renders a plain HTML card form and mints the same `cnon:` tokens the backend dev mock accepts — a full as-if-live walkthrough with zero credentials; without credentials or mock mode, new-card entry is gated behind a `CardEntryUnavailable` notice. Used for deposits, full payments, balance payments, and tips.
 
 **Layman summary:** "Pay online with your card — just like any online shop."
 
@@ -191,7 +191,7 @@ Multi-method payment system accepting Square (card terminal & online), cash, gif
 **Related:** [[Gift Cards|4. Gift Cards]], [[VAT Calculation|2.10 VAT Calculation]]
 
 ### 2.5 Saved Cards
-**What it does:** Customers can save their card details for faster checkout next time. Cards are tokenized via Square (`ccof:` card IDs; the full PAN exists only in Square's vault — our DB stores only the reference + brand/last4/fingerprint). The dev mock mirrors this (raw PANs rejected). Soft-deleted with 7-year UK retention. The "Add Card" flow posts a `card_token` (a Web Payments SDK `cnon:` nonce) to `CreatePaymentMethodFromToken`, which calls `CreateCardOnFile`. When frontend Square credentials are unset (local dev), add-card shows the `CardEntryUnavailable` notice.
+**What it does:** Customers can save their card details for faster checkout next time. Cards are tokenized via Square (`ccof:` card IDs; the full PAN exists only in Square's vault — our DB stores only the reference + brand/last4/fingerprint). The dev mock mirrors this (raw PANs rejected). Soft-deleted with 7-year UK retention. The "Add Card" flow posts a `card_token` (a Web Payments SDK `cnon:` nonce) to `CreatePaymentMethodFromToken`, which calls `CreateCardOnFile`. When frontend Square credentials are unset and mock mode is off (local dev), add-card shows the `CardEntryUnavailable` notice; with `VITE_SQUARE_ENVIRONMENT=mock` it uses the frontend mock form instead (saved mock cards appear as `ccof:mock_*` rows in the dev DB).
 
 **Layman summary:** "Save your card for next time — one-click payment."
 
diff --git a/obsidian/Crussell/plans/p11-square-web-payments-sdk.md b/obsidian/Crussell/plans/p11-square-web-payments-sdk.md
index 961787f..3fbb391 100644
--- a/obsidian/Crussell/plans/p11-square-web-payments-sdk.md
+++ b/obsidian/Crussell/plans/p11-square-web-payments-sdk.md
@@ -16,7 +16,7 @@ New-card entry is **tokenized via the Square Web Payments SDK** (`cnon:` nonces)
 ## Current State (verified August 2026)
 
 ### Frontend — new-card entry is TOKENIZED (no raw PANs anywhere):
-All 8 flows now render `SquareCardInput` (`frontend/src/lib/components/payments/SquareCardInput.svelte`), which loads the Square Web Payments SDK (`frontend/src/lib/square/square.ts`, env-gated on `VITE_SQUARE_APPLICATION_ID`/`VITE_SQUARE_LOCATION_ID`) and tokenizes the entered card into a `cnon:xxx` nonce sent as `new_card_token`. The tokenized form is the only card-entry path — there is no raw-PAN fallback. When the SDK env vars are not configured (e.g. local dev), flows keep the `CardEntryUnavailable` notice.
+All 8 flows now render `SquareCardInput` (`frontend/src/lib/components/payments/SquareCardInput.svelte`), which loads the Square Web Payments SDK (`frontend/src/lib/square/square.ts`, env-gated on `VITE_SQUARE_APPLICATION_ID`/`VITE_SQUARE_LOCATION_ID`) and tokenizes the entered card into a `cnon:xxx` nonce sent as `new_card_token`. The tokenized form is the only card-entry path — there is no raw-PAN fallback. Local dev can opt into the built-in frontend mock (`VITE_SQUARE_ENVIRONMENT=mock`): `SquareCardInput` renders a plain HTML card form (`MockCardForm.svelte`) and `tokenize()` returns the deterministic `cnon:` tokens the backend dev mock (`SQUARE_ENVIRONMENT=mock`) accepts, so all 8 flows run end-to-end with zero credentials. When neither the SDK env vars nor mock mode are configured, flows keep the `CardEntryUnavailable` notice. Note: in mock mode the response's brand/last4 always reflects the token's canonical test card (e.g. `4242 4242 4242 4242` → VISA 4242, `4111 1111 1111 1111` → VISA 1111) — an arbitrarily typed card that is Luhn-valid but not one of the four canonical numbers still maps to `cnon:test-card` (VISA 4242), so its displayed last4 is the canonical one, not the typed digits. Cosmetic and dev-only.
 
 1. `frontend/src/routes/tip/+page.svelte` — tip; saved-card list + `card_id`, SquareCardInput for new card
 2. `frontend/src/routes/pay-tip/[id]/+page.svelte` — tip; same pattern
@@ -105,7 +105,7 @@ All 8 flows render `SquareCardInput` and send the resulting `cnon:xxx` as `new_c
 - **Square iframe requires HTTPS** — localhost is exempt, but any non-local dev URL needs TLS.
 - **Tokenization is one-shot** — a `cnon:` nonce is single-use. Implemented per the plan: each flow caches the token after the first `tokenize()` and **reuses it on retry** (the backend idempotency key dedups), so a retry does not re-tokenize or double-charge.
 - **PCI-DSS parity preserved** — the backend rejects raw PANs by design; the tokenized form never falls back to sending PAN/CVC to our server.
-- **`CardEntryUnavailable` stays as the offline/dev fallback** — when no `VITE_SQUARE_*` credentials are configured, flows keep the gated notice rather than breaking.
+- **`CardEntryUnavailable` stays as the fallback** — when neither the `VITE_SQUARE_*` credentials nor dev mock mode (`VITE_SQUARE_ENVIRONMENT=mock`) are configured, flows keep the gated notice rather than breaking. The dev mock is local-only and token-only; `VITE_SQUARE_ENVIRONMENT=mock` must never be set in a deployed (non-local) build.
 
 ---
 
@@ -115,7 +115,7 @@ All 8 flows render `SquareCardInput` and send the resulting `cnon:xxx` as `new_c
 - [x] Square Web Payments SDK loads (sandbox + prod URLs, env-gated)
 - [x] `SquareCardInput` tokenizes cards → `cnon:xxx`
 - [x] All 8 flows re-enabled to send nonces, not PANs (tip ×3, booking payment, deposit, Buy a Gift Card, account Add Card, admin till `online_square`)
-- [x] `CardEntryUnavailable` kept only as the no-credentials fallback
+- [x] `CardEntryUnavailable` kept only as the no-credentials/no-mock fallback (local dev opts into the built-in frontend mock via `VITE_SQUARE_ENVIRONMENT=mock`)
 - [x] Backend nonce paths verified unchanged (Step 4/5 done)
 - [x] Frontend checks pass: svelte-check 0 errors, eslint 0 errors, build succeeds
 - [x] Docs updated (README, Gap Backlog, Feature Catalog, Technical Manual)