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/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>;
+}