style: convert remaining ad-hoc inline cards to shared SurfaceCard

Introduce components/surface-card.tsx (Card + CardBody) mirroring the
.content-card / SectionCard token set, and use it on the (site) pages that
still hand-rolled card markup: me, search, and verify. This puts every
public page on one of the shared card components (ContentCard, SectionCard,
or SurfaceCard) for consistent radius/shadow/border.

src/app/(site)/verify/page.tsx

@@ -3,6 +3,7 @@ import { CheckCircle2, Clock, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, User } from "@/lib/db";
 
 type Status = "verified" | "already" | "invalid" | "unavailable";
@@ -30,15 +31,7 @@ function StatusCard({
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
-			<div
+			<SurfaceCard className="w-full max-w-md">
-				className="w-full max-w-md overflow-hidden rounded-2xl border"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					backgroundColor: "var(--color-surface)",
-					boxShadow: "var(--shadow-card)",
-				}}
-			>
 				<div
 					className="flex items-center gap-2.5 border-b px-5 py-4"
 					style={{
@@ -81,7 +74,7 @@ function StatusCard({
 					</p>
 					{children}
 				</div>
-			</div>
+			</SurfaceCard>
 		</main>
 	);
 }

src/components/surface-card.tsx

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from "react";
+
+const CARD_BORDER =
+	"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
+
+/**
+ * Public-site surface card. Mirrors the CSS .content-card / SectionCard visual
+ * language (--radius-lg corners, --shadow-card, hairline border) so every page
+ * that opts out of ContentCard still shares one consistent component.
+ */
+export function SurfaceCard({
+	className = "",
+	style,
+	children,
+}: {
+	className?: string;
+	style?: CSSProperties;
+	children: ReactNode;
+}) {
+	return (
+		<div
+			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
+			style={{
+				borderColor: CARD_BORDER,
+				boxShadow: "var(--shadow-card)",
+				...style,
+			}}
+		>
+			{children}
+		</div>
+	);
+}
+
+/** Padded body for a SurfaceCard. Override padding via className. */
+export function SurfaceCardBody({
+	className = "p-5",
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) {
+	return <div className={className}>{children}</div>;
+}