Add Stripe checkout/portal integration and align subscription types with API

- Add Stripe Checkout session and Customer Portal API calls and mutation hooks
- Add success/cancel redirect pages for Stripe Checkout flow
- Update subscription status component with upgrade buttons, manage subscription, and trial badge
- Align subscription types (limits, feature benefits, upgrade triggers) with current API response shape
- Update demo provider data to match new type contracts
- Rename "Premium" tier references to "Pro" throughout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/subscription/cancel/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { XCircle } from "lucide-react";
+
+export default function SubscriptionCancelPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4">
+      <div className="rounded-full bg-muted p-4 mb-4">
+        <XCircle className="size-10 text-muted-foreground" />
+      </div>
+      <h2 className="text-lg font-semibold">Checkout cancelled</h2>
+      <p className="mt-2 text-muted-foreground text-center max-w-md">
+        Your subscription checkout was cancelled. No charges were made. You can
+        try again anytime from the settings page.
+      </p>
+      <Button asChild className="mt-6">
+        <Link href="/app/settings/subscription">Back to Settings</Link>
+      </Button>
+    </div>
+  );
+}

src/app/subscription/success/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { CheckCircle } from "lucide-react";
+
+export default function SubscriptionSuccessPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4">
+      <div className="rounded-full bg-green-100 p-4 mb-4 dark:bg-green-900/30">
+        <CheckCircle className="size-10 text-green-600 dark:text-green-400" />
+      </div>
+      <h2 className="text-lg font-semibold">Thank you!</h2>
+      <p className="mt-2 text-muted-foreground text-center max-w-md">
+        Your Pro subscription is now active. Enjoy unlimited access to all
+        Casera features.
+      </p>
+      <Button asChild className="mt-6">
+        <Link href="/app/settings/subscription">Back to Settings</Link>
+      </Button>
+    </div>
+  );
+}