From f83c5eb4f4f995bff4f7f0265cb078cea5770a86 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Wed, 2 Sep 2026 17:50:49 +0300
Subject: [PATCH] feat(ui): rebuild Subscription on subturtle-ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the four standalone pricing cards with the design's tablist + detail
panel: a current-plan usage strip, one tab per tier, and the selected tier's
price, CTA and features in a single panel. All `st-` tokens, no raw hex and no
`dark:` variants, so the screen reads correctly under both themes.

No new components or icons were needed — StSwitch, StBadge, StButton, StCard,
StSkeleton, StEmptyState, StModal and solar:check-circle-bold all already ship.

Notable decisions, and where they depart from the prototype:

- The usage strip serves every tier, so StarterUsageCard (used only here) is
  deleted and the paid "This month" block folds into the same four meters.
- `bg-st-sunken` for the detail panel's left rail, not the design's `--ink-50`:
  the ink ramp inverts in dark, where ink-50 lands within one channel step of
  --surface-card and the rail disappears.
- Meter fill stays rose at rest as drawn, but keeps the amber/red cap warning
  Council 004 specced — the prototype's all-zero demo never shows it.
- An unlimited allowance renders an empty accent track; a full bar would read as
  "at your cap". A free tier never reads Unlimited (FREE_CAPS fallback), and a
  Reader with no voice budget keeps the "Upgrade to Learner" upsell instead of a
  dead 0 / 0.
- The ribbon uses Stripe's `badge` metadata, falling back to the i18n string.
- Manage/change/downgrade CTAs are preserved; goToPortal no longer branches on
  trialing (the off-ramp's own "continue" calls it, which would have recursed),
  manageSubscription owns that.
- The strip waits on isSubscriptionFetching so its defaults never render as a
  real answer, and dead `isLoading` state is dropped.

theme-tokens.css and CLAUDE.md carried a note saying the design system's
subturtle-theme.css supersedes ui/'s dark layer wholesale. Per the screen
handoff that note predates the theme PR; ui/'s is the one that ships (RGB
channels for Tailwind, the .theme-switching rule, measured contrast). Corrected
in both places — comments only, no palette change.

The e2e spec asserted against the old card layout and VoiceMeter sub-line; its
assertions are updated to the new structure. 8/8 pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                                     |    5 +-
 frontend/components/StarterUsageCard.vue      |   75 -
 .../components/subscription/CheckoutPanel.vue |  284 ++--
 frontend/locales/en.json                      |   25 +-
 frontend/pages/settings/subscription.vue      | 1259 +++++++++--------
 .../tests/e2e/specs/subscription-ui.spec.ts   |   60 +-
 ui/src/styles/theme-tokens.css                |   39 +-
 7 files changed, 890 insertions(+), 857 deletions(-)
 delete mode 100644 frontend/components/StarterUsageCard.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index ca5c7eaf..ea4d64d6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -181,8 +181,9 @@ promoted to `dev` in batches. While it is in progress:
   writing the `.dark` class and `plugins/theme.client.ts` mirrors the preference into
   pilotui's store, so the two never disagree, but they are not styled to match and will not
   be until each screen migrates.
-  ⚠️ `ui/src/styles/theme-tokens.css` still holds the EARLIER handoff's palette. The design
-  system's own `subturtle-theme.css` supersedes it wholesale — see the banner in that file.
+  `ui/src/styles/theme-tokens.css` is the dark layer that ships. The design system carries
+  its own `subturtle-theme.css`, but that is a reference for values only — it writes hex
+  where Tailwind needs RGB channels — so diff the two rather than swapping the file in.
 - `subturtle-ui` is a `link:../ui` dependency whose `dist/` is not committed, so the
   frontend's `postinstall` builds it. Any context that installs the frontend needs `ui/`
   present — the Dockerfile copies it in.
diff --git a/frontend/components/StarterUsageCard.vue b/frontend/components/StarterUsageCard.vue
deleted file mode 100644
index b80021a2..00000000
--- a/frontend/components/StarterUsageCard.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <!-- Council 004 Surface 2 (Starter state): free users get a usage card mirroring
-         the paid active-plan card, showing their freemium caps this window. -->
-    <Card v-if="isFreemium" class="w-full rounded-lg border border-gray-100 shadow-sm dark:border-gray-700">
-        <div class="flex flex-col gap-4">
-            <div>
-                <h2 class="text-xl font-bold text-gray-900 dark:text-white-light">{{ t('subscription.starter-usage.title') }}</h2>
-                <p class="mt-1 text-sm text-gray-600">{{ t('subscription.pricing.starter-price') }}</p>
-            </div>
-
-            <div class="border-t border-gray-100 pt-4 dark:border-gray-700">
-                <h3 class="mb-3 text-sm font-semibold text-gray-900 dark:text-white-light">{{ t('subscription.this-month.header') }}</h3>
-                <div class="space-y-3">
-                    <div v-for="row in rows" :key="row.label">
-                        <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-300">{{ row.label }}</span>
-                            <span class="text-gray-500">{{ row.used }} / {{ row.total }}</span>
-                        </div>
-                        <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-                            <div class="h-full rounded-full transition-all duration-500" :class="row.color" :style="{ width: `${row.pct}%` }"></div>
-                        </div>
-                    </div>
-                </div>
-                <p v-if="renewsOn" class="mt-3 text-xs text-gray-400">{{ t('subscription.voice-meter.resets', { date: renewsOn }) }}</p>
-            </div>
-        </div>
-    </Card>
-</template>
-
-<script setup lang="ts">
-    import { computed } from 'vue';
-    import { Card } from 'pilotui/elements';
-    import { useProfileStore } from '~/stores/profile';
-
-    // Free-tier caps (mirror server/src/config.ts) — fallbacks only if a legacy
-    // free_credit doc predates a field; fresh allocations carry all four.
-    const FALLBACK = { saveWords: 200, textChats: 5, liveSessions: 3, voice: 5 };
-
-    const { t } = useI18n();
-    const profileStore = useProfileStore();
-
-    const isFreemium = computed(() => profileStore.isFreemium);
-    const free = computed(() => profileStore.freemiumAllocation as any);
-
-    // A used/total meter row with the shared teal -> amber (80%) -> red (100%) colours.
-    function meter(used: number | undefined, total: number) {
-        const u = used ?? 0;
-        const pct = total > 0 ? Math.min(100, Math.round((u / total) * 100)) : 0;
-        const color = pct >= 100 ? 'bg-red-500' : pct >= 80 ? 'bg-amber-500' : 'bg-teal-500';
-        return { used: u, total, pct, color };
-    }
-
-    const rows = computed(() => {
-        const f = free.value || {};
-        return [
-            { label: t('subscription.starter-usage.saved-phrases'), ...meter(f.allowed_save_words_used, f.allowed_save_words ?? FALLBACK.saveWords) },
-            { label: t('subscription.starter-usage.text-chats'), ...meter(f.allowed_text_chats_used, f.allowed_text_chats ?? FALLBACK.textChats) },
-            {
-                label: t('subscription.starter-usage.live-sessions'),
-                ...meter(f.allowed_lived_sessions_used, f.allowed_lived_sessions ?? FALLBACK.liveSessions),
-            },
-            { label: t('subscription.starter-usage.voice'), ...meter(f.voice_minutes_used, f.voice_minutes_total ?? FALLBACK.voice) },
-        ];
-    });
-
-    const renewsOn = computed(() => {
-        const d = free.value?.end_date;
-        if (!d) return '';
-        try {
-            return new Date(d).toLocaleDateString(undefined, { day: 'numeric', month: 'long' });
-        } catch {
-            return '';
-        }
-    });
-</script>
diff --git a/frontend/components/subscription/CheckoutPanel.vue b/frontend/components/subscription/CheckoutPanel.vue
index 92d5d63a..b42456c0 100644
--- a/frontend/components/subscription/CheckoutPanel.vue
+++ b/frontend/components/subscription/CheckoutPanel.vue
@@ -1,158 +1,150 @@
 <template>
-    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="$emit('close')">
-        <div class="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-white p-6 shadow-xl dark:bg-[#0e1726]">
-            <div class="mb-4 flex items-center justify-between">
-                <h3 class="text-lg font-bold text-gray-900 dark:text-white-light">{{ t('subscription.checkout.title', { plan: planName }) }}</h3>
-                <button type="button" class="text-gray-400 hover:text-gray-600" @click="$emit('close')">
-                    <Icon name="IconX" class="h-5 w-5" />
-                </button>
-            </div>
-
-            <div v-if="loading" class="py-10 text-center text-gray-500">{{ t('subscription.checkout.loading') }}</div>
-
-            <div v-else-if="error" class="rounded-lg bg-red-100 p-4 text-sm text-red-700">{{ error }}</div>
-
-            <div v-else>
-                <!-- Localized price (EUR for EU visitors via Adaptive Pricing) -->
-                <p class="mb-4 text-2xl font-bold text-gray-900 dark:text-white-light">
-                    {{ localizedTotal }}
-                    <span class="text-sm font-medium text-gray-500">/ {{ cadence === 'annual' ? t('subscription.pricing.year') : t('subscription.pricing.month') }}</span>
-                </p>
-
-                <!-- Stripe Currency Selector Element (required when localizing prices) -->
-                <div ref="currencyElRef" class="mb-4"></div>
-                <!-- Stripe Payment Element -->
-                <div ref="paymentElRef" class="mb-4"></div>
-
-                <Button block color="primary" :loading="paying" :label="t('subscription.checkout.pay')" @click="pay" />
-                <p v-if="payError" class="mt-2 text-center text-sm text-red-600">{{ payError }}</p>
-            </div>
+    <StModal :title="t('subscription.checkout.title', { plan: planName })" @close="$emit('close')">
+        <div v-if="loading" class="py-10 text-center text-st-sm font-semibold text-st-muted">{{ t('subscription.checkout.loading') }}</div>
+
+        <p v-else-if="error" class="rounded-st-md bg-st-danger-soft px-4 py-3 text-st-sm font-semibold text-st-red-600">{{ error }}</p>
+
+        <div v-else>
+            <!-- Localized price (EUR for EU visitors via Adaptive Pricing) -->
+            <p class="mb-4 font-st-display text-st-xl font-black tracking-st-tight text-st-strong">
+                {{ localizedTotal }}
+                <span class="text-st-sm font-bold text-st-muted"
+                    >/ {{ cadence === 'annual' ? t('subscription.pricing.year') : t('subscription.pricing.month') }}</span
+                >
+            </p>
+
+            <!-- Stripe Currency Selector Element (required when localizing prices) -->
+            <div ref="currencyElRef" class="mb-4"></div>
+            <!-- Stripe Payment Element -->
+            <div ref="paymentElRef" class="mb-4"></div>
+
+            <StButton block color="primary" size="lg" :disabled="paying" @click="pay">{{ t('subscription.checkout.pay') }}</StButton>
+            <p v-if="payError" class="mt-2 text-center text-st-sm font-semibold text-st-red-600">{{ payError }}</p>
         </div>
-    </div>
+    </StModal>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { loadStripe } from '@stripe/stripe-js';
-import { Button, Icon } from 'pilotui/elements';
-import { functionProvider } from '@modular-rest/client';
-import { useProfileStore } from '~/stores/profile';
-import type { Cadence, TierId } from '~/types/tiers';
-
-const props = defineProps<{ tierId: TierId; cadence: Cadence; planName: string }>();
-const emit = defineEmits<{ (e: 'close'): void; (e: 'success'): void }>();
-
-const { t } = useI18n();
-const config = useRuntimeConfig();
-const profileStore = useProfileStore();
-
-const loading = ref(true);
-const paying = ref(false);
-const error = ref('');
-const payError = ref('');
-const localizedTotal = ref('');
-const currencyElRef = ref<HTMLElement | null>(null);
-const paymentElRef = ref<HTMLElement | null>(null);
-
-// The Checkout Elements SDK + its actions (loosely typed — glue code).
-let sdk: any = null;
-let actions: any = null;
-
-const cadence = computed(() => props.cadence);
-
-// Re-read the localized total whenever the SDK state changes (e.g. the customer
-// switches currency in the Currency Selector).
-function refreshTotal() {
-    try {
-        const session = actions?.getSession?.();
-        // Show the recurring per-period localized price (e.g. "€13.19"). The
-        // session "total" is the amount due TODAY, which is 0 during a free trial,
-        // so prefer the line item's unitAmount.
-        const li = session?.lineItems?.[0];
-        localizedTotal.value =
-            li?.unitAmount?.amount || session?.total?.total?.amount || '';
-    } catch {
-        /* ignore */
+    import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
+    import { loadStripe } from '@stripe/stripe-js';
+    import { StButton, StModal } from 'subturtle-ui';
+    import { functionProvider } from '@modular-rest/client';
+    import { useProfileStore } from '~/stores/profile';
+    import type { Cadence, TierId } from '~/types/tiers';
+
+    const props = defineProps<{ tierId: TierId; cadence: Cadence; planName: string }>();
+    const emit = defineEmits<{ (e: 'close'): void; (e: 'success'): void }>();
+
+    const { t } = useI18n();
+    const config = useRuntimeConfig();
+    const profileStore = useProfileStore();
+
+    const loading = ref(true);
+    const paying = ref(false);
+    const error = ref('');
+    const payError = ref('');
+    const localizedTotal = ref('');
+    const currencyElRef = ref<HTMLElement | null>(null);
+    const paymentElRef = ref<HTMLElement | null>(null);
+
+    // The Checkout Elements SDK + its actions (loosely typed — glue code).
+    let sdk: any = null;
+    let actions: any = null;
+
+    const cadence = computed(() => props.cadence);
+
+    // Re-read the localized total whenever the SDK state changes (e.g. the customer
+    // switches currency in the Currency Selector).
+    function refreshTotal() {
+        try {
+            const session = actions?.getSession?.();
+            // Show the recurring per-period localized price (e.g. "€13.19"). The
+            // session "total" is the amount due TODAY, which is 0 during a free trial,
+            // so prefer the line item's unitAmount.
+            const li = session?.lineItems?.[0];
+            localizedTotal.value = li?.unitAmount?.amount || session?.total?.total?.amount || '';
+        } catch {
+            /* ignore */
+        }
     }
-}
 
-onMounted(async () => {
-    try {
-        const pk = config.public.STRIPE_PUBLISHABLE_KEY as string | undefined;
-        if (!pk) {
-            throw new Error(t('subscription.checkout.no-key'));
+    onMounted(async () => {
+        try {
+            const pk = config.public.STRIPE_PUBLISHABLE_KEY as string | undefined;
+            if (!pk) {
+                throw new Error(t('subscription.checkout.no-key'));
+            }
+
+            // 1. Server creates a ui_mode:'custom' session with Adaptive Pricing -> clientSecret.
+            const { clientSecret } = await functionProvider.run<{ clientSecret: string; sessionId: string }>({
+                name: 'createCustomCheckoutSession',
+                args: {
+                    tierId: props.tierId,
+                    cadence: props.cadence,
+                    userId: profileStore.authUser?.id,
+                    successUrl: `${window.location.origin}/#/payment-success`,
+                },
+            });
+
+            // 2. Initialize the Checkout Elements SDK; mark the integration adaptive-ready.
+            const stripe = await loadStripe(pk);
+            if (!stripe) throw new Error(t('subscription.checkout.no-key'));
+            sdk = (stripe as any).initCheckoutElementsSdk({
+                clientSecret,
+                adaptivePricing: { allowed: true },
+            });
+
+            const res = await sdk.loadActions();
+            if (res.type !== 'success') {
+                throw new Error(res.error?.message || t('subscription.checkout.load-failed'));
+            }
+            actions = res.actions;
+
+            // Reveal the form BEFORE mounting so the Stripe Element containers exist in
+            // the DOM — they live in the `v-else` block gated on `loading`, so mounting
+            // into a not-yet-rendered ref throws "Make sure to call mount() with a valid
+            // DOM element or selector".
+            loading.value = false;
+            await nextTick();
+
+            // 3. Show the localized amount + mount the currency selector and payment form.
+            refreshTotal();
+            sdk.on('change', refreshTotal);
+            sdk.createCurrencySelectorElement().mount(currencyElRef.value as HTMLElement);
+            sdk.createPaymentElement().mount(paymentElRef.value as HTMLElement);
+        } catch (e: any) {
+            error.value = e?.message || t('subscription.checkout.load-failed');
+            loading.value = false;
         }
-
-        // 1. Server creates a ui_mode:'custom' session with Adaptive Pricing -> clientSecret.
-        const { clientSecret } = await functionProvider.run<{ clientSecret: string; sessionId: string }>({
-            name: 'createCustomCheckoutSession',
-            args: {
-                tierId: props.tierId,
-                cadence: props.cadence,
-                userId: profileStore.authUser?.id,
-                successUrl: `${window.location.origin}/#/payment-success`,
-            },
-        });
-
-        // 2. Initialize the Checkout Elements SDK; mark the integration adaptive-ready.
-        const stripe = await loadStripe(pk);
-        if (!stripe) throw new Error(t('subscription.checkout.no-key'));
-        sdk = (stripe as any).initCheckoutElementsSdk({
-            clientSecret,
-            adaptivePricing: { allowed: true },
-        });
-
-        const res = await sdk.loadActions();
-        if (res.type !== 'success') {
-            throw new Error(res.error?.message || t('subscription.checkout.load-failed'));
+    });
+
+    onBeforeUnmount(() => {
+        try {
+            sdk?.getPaymentElement?.()?.unmount?.();
+            sdk?.getCurrencySelectorElement?.()?.unmount?.();
+        } catch {
+            /* ignore */
         }
-        actions = res.actions;
-
-        // Reveal the form BEFORE mounting so the Stripe Element containers exist in
-        // the DOM — they live in the `v-else` block gated on `loading`, so mounting
-        // into a not-yet-rendered ref throws "Make sure to call mount() with a valid
-        // DOM element or selector".
-        loading.value = false;
-        await nextTick();
-
-        // 3. Show the localized amount + mount the currency selector and payment form.
-        refreshTotal();
-        sdk.on('change', refreshTotal);
-        sdk.createCurrencySelectorElement().mount(currencyElRef.value as HTMLElement);
-        sdk.createPaymentElement().mount(paymentElRef.value as HTMLElement);
-    } catch (e: any) {
-        error.value = e?.message || t('subscription.checkout.load-failed');
-        loading.value = false;
-    }
-});
-
-onBeforeUnmount(() => {
-    try {
-        sdk?.getPaymentElement?.()?.unmount?.();
-        sdk?.getCurrencySelectorElement?.()?.unmount?.();
-    } catch {
-        /* ignore */
-    }
-});
-
-async function pay() {
-    paying.value = true;
-    payError.value = '';
-    try {
-        // The Checkout Session already carries `return_url` (set server-side in
-        // createCustomCheckoutSession), so confirm() must NOT pass `returnUrl` too —
-        // Stripe rejects providing both. Redirect-based methods use the session's url.
-        const result = await actions.confirm();
-        // Non-redirect payment methods (e.g. card without 3DS) resolve here.
-        if (result?.type === 'error') {
-            payError.value = result.error?.message || t('subscription.checkout.pay-failed');
-        } else {
-            emit('success');
+    });
+
+    async function pay() {
+        paying.value = true;
+        payError.value = '';
+        try {
+            // The Checkout Session already carries `return_url` (set server-side in
+            // createCustomCheckoutSession), so confirm() must NOT pass `returnUrl` too —
+            // Stripe rejects providing both. Redirect-based methods use the session's url.
+            const result = await actions.confirm();
+            // Non-redirect payment methods (e.g. card without 3DS) resolve here.
+            if (result?.type === 'error') {
+                payError.value = result.error?.message || t('subscription.checkout.pay-failed');
+            } else {
+                emit('success');
+            }
+        } catch (e: any) {
+            payError.value = e?.message || t('subscription.checkout.pay-failed');
+        } finally {
+            paying.value = false;
         }
-    } catch (e: any) {
-        payError.value = e?.message || t('subscription.checkout.pay-failed');
-    } finally {
-        paying.value = false;
     }
-}
 </script>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 3772431b..463eec87 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -204,6 +204,7 @@
     "subscription": {
         "title": "Subscription",
         "subscription-plans": "Subscription Plans",
+        "overline": "Membership",
         "plans-price-details": "Plans & Price Details",
         "invoice-date": "Invoice Date:",
         "due-date": "Due Date:",
@@ -268,7 +269,16 @@
             "continue-free": "Continue with Free",
             "loading": "Loading plans…",
             "error": "Plans are temporarily unavailable due to a payment system issue. Please check back soon.",
-            "empty": "No plans available right now."
+            "empty": "No plans available right now.",
+            "popular": "Popular",
+            "current": "Current",
+            "trial": "Trial",
+            "canceling": "Canceling",
+            "billed-yearly": "Billed yearly. Save 20%.",
+            "billed-monthly": "Billed monthly.",
+            "footnote": "Stripe shows your local currency at checkout. Switch or cancel any time.",
+            "error-title": "Plans unavailable",
+            "empty-title": "No plans yet"
         },
         "checkout": {
             "title": "Subscribe to {plan}",
@@ -360,7 +370,6 @@
             "ai-usage": "AI translations & explanations: {n} used"
         },
         "starter-usage": {
-            "title": "Free plan",
             "saved-phrases": "Saved phrases",
             "text-chats": "Text chats",
             "live-sessions": "Live sessions",
@@ -424,19 +433,19 @@
         "no-account-cta": "Just sign in and you will get a new account.",
         "chrome-extension": "Chrome extension",
         "waiting": {
-            "label": "Waiting for Google\u2026",
+            "label": "Waiting for Google…",
             "hint": "A Google window should have opened. Nothing there?",
             "retry": "Open it again"
         },
         "returning": {
-            "title": "Signing you in\u2026",
+            "title": "Signing you in…",
             "subtitle": "Taking you to your dashboard."
         },
         "notice": {
             "expired": "Your session ended, so we brought you here. Nothing you saved was lost.",
             "failed": {
                 "title": "That didn't go through",
-                "message": "The Google window closed before you finished. Nothing was saved \u2014 try once more."
+                "message": "The Google window closed before you finished. Nothing was saved — try once more."
             }
         },
         "preview": {
@@ -450,14 +459,14 @@
             "start-review": "Start review",
             "time-left": "3 min left",
             "session-title": "Live session",
-            "session-body": "Say this week's phrases out loud with Coach. Money Heist \u2014 s1e4.",
+            "session-body": "Say this week's phrases out loud with Coach. Money Heist — s1e4.",
             "start-session": "Start session",
             "resting-title": "Resting",
             "resting-body": "Levels 4 and 5 are asleep. Their next cards land on Thursday.",
             "optional": "Optional practice",
             "phrase-1": "Je n'en reviens pas",
             "phrase-1-translation": "I can't believe it",
-            "phrase-2": "\u00c7a vaut le coup",
+            "phrase-2": "Ça vaut le coup",
             "phrase-2-translation": "It's worth it"
         }
     },
@@ -736,7 +745,7 @@
         "light": "Light",
         "dark": "Dark",
         "system": "System",
-        "resolved": "{mode} \u00b7 {resolved}",
+        "resolved": "{mode} · {resolved}",
         "aria": "Theme: {current}. Switch to {next}."
     }
 }
diff --git a/frontend/pages/settings/subscription.vue b/frontend/pages/settings/subscription.vue
index c46a1b90..21cca56a 100644
--- a/frontend/pages/settings/subscription.vue
+++ b/frontend/pages/settings/subscription.vue
@@ -1,636 +1,729 @@
 <template>
-    <div class="relative min-h-screen">
-        <!-- Decorative Background Elements -->
-        <div
-            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-        <div
-            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-
-        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
-            <PageHeader :title="t('subscription.subscription-plans')" overline="MEMBERSHIP" />
-
-            <div class="flex flex-col gap-8">
-                <!-- Active Plan Card -->
-                <Card v-if="activeSubscriptionData" class="w-full rounded-lg border border-gray-100 shadow-sm">
-                    <div class="flex flex-col gap-4">
-                        <div class="flex flex-wrap items-center justify-between gap-4">
-                            <div>
-                                <h2 class="text-xl font-bold text-gray-900">{{ activePlanName }}</h2>
-                                <p class="mt-1 text-sm text-gray-600">
-                                    <span v-if="isCanceling">{{ t('subscription.canceling', { date:
-                                        formatDate(activeSubscriptionData.end_date) }) }}</span>
-                                    <span v-else-if="isTrialing">{{ t('subscription.trial-active', { days:
-                                        activeSubscriptionData.remaining_days ?? 0 }) }}</span>
-                                    <span v-else>{{ t('subscription.started-at') }} {{
-                                        formatDate(activeSubscriptionData.start_date) }}</span>
-                                </p>
-                            </div>
-                            <Button v-if="isTrialing" color="primary" size="md"
-                                :label="t('subscription.manage-subscription')" @click="showCancelOffRamp = true" />
-                            <Button v-else color="primary" size="md"
-                                :label="t('subscription.manage-subscription')" @click="goToPortal" />
+    <div class="flex flex-col gap-[22px]">
+        <StPageHeader :title="t('subscription.subscription-plans')" :overline="t('subscription.overline')">
+            <template v-if="showPlans" #actions>
+                <StSwitch v-model="isAnnual" :label="t('subscription.pricing.annual-toggle')" />
+            </template>
+        </StPageHeader>
+
+        <!-- Loading: skeletons in the shape of the strip / tabs / detail panel, so the
+             layout doesn't jump when the plans land. -->
+        <template v-if="isLoadingPlans">
+            <StSkeleton class="h-[88px]" />
+            <div class="grid grid-cols-2 gap-[10px] md:grid-cols-4">
+                <StSkeleton v-for="n in 4" :key="n" class="h-[70px]" />
+            </div>
+            <StSkeleton class="h-[300px]" />
+        </template>
+
+        <StCard v-else-if="plansError" padding="none">
+            <StEmptyState
+                icon="solar:danger-triangle-bold"
+                color="neutral"
+                :title="t('subscription.pricing.error-title')"
+                :description="t('subscription.pricing.error')"
+            />
+        </StCard>
+
+        <StCard v-else-if="!paidPlans.length" padding="none">
+            <StEmptyState icon="solar:crown-bold" :title="t('subscription.pricing.empty-title')" :description="t('subscription.pricing.empty')" />
+        </StCard>
+
+        <template v-else>
+            <!-- The plan is not known until getSubscriptionDetails lands, and the strip's
+                 defaults (Starter, no allowances) would otherwise render as a real answer
+                 for a moment. -->
+            <StSkeleton v-if="isSubscriptionFetching" class="h-[88px]" />
+
+            <!-- Current plan + this period's usage. One strip for every tier: the free
+                 caps and the paid allowances read from different stores but render the
+                 same, so there is no separate Starter card any more. -->
+            <div
+                v-else
+                class="flex flex-wrap items-center justify-between gap-6 rounded-st-lg border border-st-line bg-st-card px-[22px] py-[15px] shadow-st-sm"
+            >
+                <div>
+                    <div class="flex items-center gap-[9px]">
+                        <span class="text-st-sm font-extrabold text-st-strong">{{ currentPlanName }}</span>
+                        <StBadge :color="statusBadge.color">{{ statusBadge.label }}</StBadge>
+                    </div>
+                    <p class="mt-1 text-st-xs font-bold text-st-faint">{{ currentPlanNote }}</p>
+                </div>
+
+                <div class="flex flex-wrap items-center gap-[22px]">
+                    <div v-for="meter in usageMeters" :key="meter.label" class="min-w-[112px]">
+                        <div class="mb-1.5 flex items-baseline justify-between gap-[10px]">
+                            <span class="text-st-xs font-bold text-st-body">{{ meter.label }}</span>
+                            <button
+                                v-if="meter.upsell"
+                                type="button"
+                                class="st-focus-ring rounded-st-sm text-st-xs font-bold text-st-link hover:underline"
+                                @click="selectUpgradeTier"
+                            >
+                                {{ meter.value }}
+                            </button>
+                            <span v-else class="text-st-xs font-bold" :class="meter.unlimited ? 'text-st-jade-700' : 'text-st-faint'">{{ meter.value }}</span>
                         </div>
-                        <div class="flex items-center gap-4">
-                            <div v-if="!isTrialing"
-                                class="flex h-8 items-center gap-2 whitespace-nowrap rounded-full bg-gray-600 px-3 py-1.5 text-sm font-medium text-white">
-                                <Icon name="IconClock" class="h-4 w-4" />
-                                <span>{{ t('billing.days-left') }}: {{ activeSubscriptionData.remaining_days ?? 0 }}</span>
-                            </div>
-                            <Progress :value="activeSubscriptionData.usage_percentage ?? 0" :max="100" size="md"
-                                color="primary" />
+                        <!-- An unlimited allowance gets an empty accent-tinted track rather
+                             than a filled one: a full bar reads as "you are at your cap",
+                             which is the opposite of what unlimited means. The upsell row has
+                             no budget to plot at all. -->
+                        <div class="h-[6px] overflow-hidden rounded-st-pill" :class="meter.unlimited || meter.upsell ? 'bg-st-accent-soft' : 'bg-st-ink-150'">
+                            <div
+                                v-if="!meter.unlimited && !meter.upsell"
+                                class="h-full rounded-st-pill transition-all duration-500"
+                                :class="meter.fill"
+                                :style="{ width: `${meter.pct}%` }"
+                            />
                         </div>
+                    </div>
 
-                        <!-- This month: voice balance + renewal (Council 004 Surface 2).
-                             S17 adds the Reader text-chat counter inside this section. -->
-                        <div class="border-t border-gray-100 pt-4 dark:border-gray-700">
-                            <h3 class="mb-3 text-sm font-semibold text-gray-900 dark:text-white-light">
-                                {{ t('subscription.this-month.header') }}
-                            </h3>
-                            <!-- What this plan includes this month: saved phrases, text chats,
-                                 and live sessions — "Unlimited" on most paid tiers, or the limit
-                                 (e.g. Reader's 60 text chats). Voice keeps its own meter below. -->
-                            <div class="mb-3 space-y-2.5">
-                                <div v-for="row in planRows" :key="row.label"
-                                    class="flex items-center justify-between text-sm">
-                                    <span class="text-gray-600 dark:text-gray-300">{{ row.label }}</span>
-                                    <button v-if="row.upsell" type="button" class="font-medium text-primary hover:underline"
-                                        @click="goToChangePlan">{{ row.value }}</button>
-                                    <span v-else class="font-medium text-gray-900 dark:text-gray-100">{{ row.value }}</span>
-                                </div>
-                            </div>
-                            <VoiceMeter v-if="!voiceLockedForReader" size="md" @topup="goToTopUps" />
-                            <p v-if="renewsOn" class="mt-3 text-xs text-gray-400">
-                                {{ t('subscription.voice-meter.resets', { date: renewsOn }) }}
-                            </p>
-                        </div>
+                    <StButton v-if="showTopUp" variant="ghost" color="primary" size="sm" @click="goToTopUps">
+                        {{ t('subscription.voice-meter.top-up') }}
+                    </StButton>
+                </div>
+            </div>
+
+            <!-- Plan picker. A tablist rather than four standalone cards: the detail panel
+                 below is the selected tab's panel. -->
+            <div role="tablist" :aria-label="t('subscription.subscription-plans')" class="grid grid-cols-[repeat(auto-fit,minmax(170px,1fr))] gap-[10px]">
+                <button
+                    v-for="plan in plans"
+                    :id="`plan-tab-${plan.id}`"
+                    :key="plan.id"
+                    type="button"
+                    role="tab"
+                    :aria-selected="plan.id === selectedId"
+                    :aria-controls="`plan-panel-${plan.id}`"
+                    class="st-focus-ring flex cursor-pointer flex-col items-start gap-[5px] rounded-st-lg px-4 py-[14px] text-left transition-all duration-200"
+                    :class="
+                        plan.id === selectedId
+                            ? 'border-2 border-st-primary bg-st-card shadow-st-md'
+                            : 'border-[1.5px] border-st-ink-200 bg-transparent hover:border-st-ink-300'
+                    "
+                    @click="selectedId = plan.id"
+                >
+                    <span
+                        class="flex flex-wrap items-center gap-[7px] text-st-md font-black"
+                        :class="plan.id === selectedId ? 'text-st-strong' : 'text-st-muted'"
+                    >
+                        {{ plan.name }}
+                        <!-- Ribbon text comes from Stripe metadata (e.g. "Most popular"); the
+                             i18n string is only the fallback for a highlighted tier with none. -->
+                        <StBadge v-if="plan.badge || plan.highlight" color="primary" solid>
+                            {{ plan.badge || t('subscription.pricing.popular') }}
+                        </StBadge>
+                        <StBadge v-else-if="plan.id === currentTierId">{{ t('subscription.pricing.current') }}</StBadge>
+                    </span>
+                    <span class="text-st-xs font-bold" :class="plan.id === selectedId ? 'text-st-muted' : 'text-st-faint'">{{ pricePeriod(plan) }}</span>
+                </button>
+            </div>
+
+            <!-- Selected plan: price + CTA on a sunken rail, features alongside. -->
+            <div
+                v-if="selectedPlan"
+                :id="`plan-panel-${selectedPlan.id}`"
+                role="tabpanel"
+                :aria-labelledby="`plan-tab-${selectedPlan.id}`"
+                class="grid grid-cols-1 overflow-hidden rounded-st-xl border border-st-line bg-st-card shadow-st-md md:grid-cols-[minmax(280px,330px)_minmax(0,1fr)]"
+            >
+                <!-- `bg-st-sunken`, not the design's --ink-50: the ink ramp inverts in dark,
+                     where ink-50 lands within one channel step of --surface-card and the rail
+                     disappears. --surface-sunken is the token that keeps the role in both. -->
+                <div class="flex flex-col gap-4 bg-st-sunken p-7">
+                    <div>
+                        <h2 class="font-st-display text-st-xl font-black tracking-st-tight text-st-strong">{{ selectedPlan.name }}</h2>
+                        <p class="mt-[7px] text-st-sm font-semibold leading-normal text-st-muted [text-wrap:pretty]">{{ selectedPlan.tagline }}</p>
                     </div>
-                </Card>
-
-                <!-- Starter (free) usage card — mirrors the paid active-plan card. -->
-                <StarterUsageCard />
-
-                <!-- AI usage — internal metering (Dev Only) -->
-                <Card v-if="config.public.isNotProduction" class="w-full rounded-lg border border-gray-100 shadow-sm">
-                    <template v-if="activeSubscriptionData">
-                        <h2 class="text-xl font-bold text-gray-900">AI usage — internal metering (dev only)</h2>
-                        <div class="my-6 overflow-x-auto">
-                            <table class="w-full table-auto border-collapse">
-                                <thead>
-                                    <tr class="border-b border-gray-200">
-                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{
-                                            t('subscription.metric') }}</th>
-                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Internal units
-                                        </th>
-                                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">USD</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr class="border-b border-gray-200">
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.total') }}</td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{
-                                            activeSubscriptionData.total_credits }}</td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{
-                                            activeSubscriptionData.total_credit_in_usd }}</td>
-                                    </tr>
-                                    <tr class="border-b border-gray-200">
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.available') }}
-                                        </td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{
-                                            activeSubscriptionData.available_credit }}</td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">${{
-                                            activeSubscriptionData.available_credit_in_usd }}</td>
-                                    </tr>
-                                    <tr>
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.used') }}</td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">{{
-                                            activeSubscriptionData.credits_used }}</td>
-                                        <td class="px-4 py-2 text-sm text-gray-700">${{
-                                            activeSubscriptionData.used_credit_in_usd }}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
+
+                    <div v-if="selectedPlan.isPaid && isProbingCurrency" class="flex flex-col gap-2">
+                        <StSkeleton class="h-9 w-32" />
+                        <StSkeleton class="h-3 w-24" />
+                    </div>
+                    <template v-else>
+                        <div class="flex items-baseline gap-[5px]">
+                            <span class="font-st-display text-st-3xl font-black tracking-[-0.04em] text-st-strong">{{ price(selectedPlan) }}</span>
+                            <span v-if="selectedPlan.isPaid" class="text-st-sm font-bold text-st-muted">/ {{ periodLabel }}</span>
                         </div>
+                        <span class="text-st-xs font-bold text-st-faint">{{ priceNote(selectedPlan) }}</span>
                     </template>
 
-                    <!-- Profile Reset Section -->
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <h3 class="text-lg font-medium text-gray-900">Profile Reset</h3>
-                            <p class="mt-1 text-sm text-gray-500">Clear all subscription and freemium data for testing
-                                purposes. This action cannot be undone.</p>
-                        </div>
-                        <Button @click="handleProfileReset" color="danger" :loading="isResetLoading" class="ml-4">Reset
-                            Profile</Button>
+                    <div class="mt-auto flex flex-col gap-[9px]">
+                        <StButton :variant="cta.variant" :color="cta.color" size="lg" block :disabled="cta.disabled || isOpeningChangePlan" @click="cta.action">
+                            {{ cta.label }}
+                        </StButton>
+                        <span v-if="cta.note" class="text-center text-st-xs font-bold leading-[1.4] text-st-faint">{{ cta.note }}</span>
                     </div>
-                </Card>
-
-                <!-- Billing cadence toggle (GBP base; Stripe localizes at checkout) -->
-                <div class="flex items-center justify-center">
-                    <SwitchBall id="cadence-toggle" v-model="isAnnual" color="primary"
-                        :label="t('subscription.pricing.annual-toggle')" sublabel="" />
                 </div>
 
-                <!-- Pricing Cards (Starter / Reader / Learner / Coach) — paid tiers built
-                     live from Stripe, free Starter from code. While loading, show skeleton
-                     cards (not a spinner) so the layout is stable; if Stripe can't provide
-                     plans, show a calm notice. -->
-                <div v-if="isLoadingPlans" class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
-                    <Card v-for="n in 4" :key="n"
-                        class="relative flex h-full w-full flex-col rounded-lg border border-[#e0e6ed] shadow-none dark:border-[#1b2e4b]">
-                        <div class="flex flex-grow flex-col p-5">
-                            <div class="h-6 w-28 animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></div>
-                            <div class="mt-2 h-4 w-44 animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></div>
-                            <div class="mt-4 h-8 w-28 animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></div>
-                            <ul class="my-6 flex-grow space-y-3">
-                                <li v-for="i in 4" :key="i"
-                                    class="h-4 w-full animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></li>
-                            </ul>
-                            <div class="mt-auto h-10 w-full animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></div>
+                <div class="px-[30px] py-7">
+                    <h3 class="mb-[18px] text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">{{ t('subscription.features') }}</h3>
+                    <div class="grid grid-cols-[repeat(auto-fit,minmax(min(230px,100%),1fr))] gap-x-[26px] gap-y-[13px]">
+                        <div
+                            v-for="feature in selectedPlan.featureLabels"
+                            :key="feature"
+                            class="flex items-start gap-[10px] text-st-md font-semibold text-st-body"
+                        >
+                            <StIcon name="solar:check-circle-bold" :size="19" class="mt-0.5 flex-none text-st-accent" />
+                            <span>{{ feature }}</span>
                         </div>
-                    </Card>
-                </div>
-                <div v-else-if="plansError"
-                    class="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center text-amber-700 dark:border-amber-900/40 dark:bg-amber-900/10 dark:text-amber-400">
-                    {{ t('subscription.pricing.error') }}
-                </div>
-                <div v-else-if="!paidPlans.length" class="py-12 text-center text-gray-500">
-                    {{ t('subscription.pricing.empty') }}
-                </div>
-                <div v-else class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
-                    <Card v-for="plan in plans" :key="plan.id"
-                        class="relative flex h-full w-full flex-col rounded-lg border shadow-none transition-all duration-300"
-                        :class="plan.highlight
-                            ? 'border-primary ring-1 ring-primary/30'
-                            : 'border-[#e0e6ed] dark:border-[#1b2e4b]'">
-                        <!-- Ribbon badge (e.g. "Most popular") — text from Stripe metadata -->
-                        <span v-if="plan.badge"
-                            class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-primary px-3 py-1 text-xs font-semibold text-white">
-                            {{ plan.badge }}
-                        </span>
-
-                        <div class="flex flex-grow flex-col p-5">
-                            <!-- Name + tagline -->
-                            <h3 class="text-xl font-bold text-gray-900 dark:text-white-light">{{ plan.name }}</h3>
-                            <p class="mt-1 min-h-[2.5rem] text-sm text-gray-500">{{ plan.tagline }}</p>
-
-                            <!-- Price line. Paid: skeleton while the local currency is probed
-                                 (Adaptive Pricing) so the GBP base doesn't flash, then the
-                                 localized price. Free Starter: always "Free". -->
-                            <div class="mt-4 min-h-[3.5rem]">
-                                <template v-if="plan.isPaid && isProbingCurrency">
-                                    <div class="h-8 w-28 animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]"></div>
-                                    <div v-if="isAnnual"
-                                        class="mt-1.5 h-3 w-24 animate-pulse rounded bg-gray-200 dark:bg-[#1b2e4b]">
-                                    </div>
-                                </template>
-                                <template v-else-if="plan.isPaid">
-                                    <p class="text-2xl font-bold text-gray-900 dark:text-white-light">
-                                        {{ formatAmount(plan, cadence) }}
-                                        <span class="text-sm font-medium text-gray-500">
-                                            / {{ isAnnual ? t('subscription.pricing.year') :
-                                                t('subscription.pricing.month') }}
-                                        </span>
-                                    </p>
-                                    <p v-if="isAnnual" class="text-xs text-gray-400">
-                                        {{ t('subscription.pricing.or-monthly', { price: formatAmount(plan, 'monthly') })
-                                        }}
-                                    </p>
-                                </template>
-                                <template v-else>
-                                    <p class="text-2xl font-bold text-gray-900 dark:text-white-light">
-                                        {{ t('subscription.pricing.free') }}
-                                    </p>
-                                    <p class="text-xs text-gray-400">{{ t('subscription.pricing.starter-price') }}</p>
-                                </template>
-                            </div>
-
-                            <!-- Feature list -->
-                            <ul class="my-6 flex-grow space-y-3">
-                                <li v-for="feature in plan.featureLabels" :key="feature"
-                                    class="flex items-start text-sm">
-                                    <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
-                                    <span class="text-gray-700 dark:text-white-dark">{{ feature }}</span>
-                                </li>
-                            </ul>
-
-                            <!-- CTA -->
-                            <div class="mt-auto">
-                                <!-- Free Starter: current-level indicator for free users,
-                                     "Downgrade to Free" for users on a paid tier. -->
-                                <template v-if="plan.id === 'starter'">
-                                    <div v-if="isFreemium"
-                                        class="rounded-md bg-gray-100 py-2.5 text-center text-sm font-medium text-gray-500 dark:bg-[#1b2e4b] dark:text-white-dark">
-                                        {{ t('subscription.pricing.current-plan') }}
-                                    </div>
-                                    <Button v-else block outline color="primary"
-                                        :label="t('subscription.pricing.downgrade-free')" @click="downgradeToFree" />
-                                </template>
-
-                                <!-- Already on this paid plan -->
-                                <Button v-else-if="activePlanId === plan.id" block color="primary"
-                                    :label="t('subscription.manage-subscription')" @click="goToPortal" />
-
-                                <!-- On a DIFFERENT paid plan: deep-link to the portal's plan picker to
-                                     switch (Stripe handles proration). Starting a checkout here would
-                                     stack a second subscription — Council 004 has no in-app stacking. -->
-                                <Button v-else-if="!isFreemium" block outline color="primary"
-                                    :loading="isOpeningChangePlan"
-                                    :label="t('subscription.pricing.change-plan')" @click="goToChangePlan" />
-
-                                <!-- Trial CTA — shown for any tier with a free trial (days from Stripe) -->
-                                <template v-else-if="plan.trialDays > 0">
-                                    <Button block color="primary" :loading="isLoading"
-                                        :label="t('subscription.pricing.trial-cta', { days: plan.trialDays })"
-                                        @click="initiateCheckout(plan.id)" />
-                                    <p class="mt-2 text-center text-xs text-gray-400">
-                                        {{ t('subscription.pricing.trial-subline', { days: plan.trialDays }) }}
-                                    </p>
-                                </template>
-
-                                <!-- Reader / Coach -->
-                                <Button v-else block outline color="primary" :loading="isLoading"
-                                    :label="t('subscription.pricing.choose-plan', { name: plan.name })"
-                                    @click="initiateCheckout(plan.id)" />
-                            </div>
-                        </div>
-                    </Card>
+                    </div>
                 </div>
+            </div>
 
-                <!-- Payment Status Messages -->
-                <div v-if="error" class="rounded-lg bg-red-100 p-4 text-red-700">
-                    {{ error }}
+            <p class="text-st-xs font-semibold text-st-faint">{{ t('subscription.pricing.footnote') }}</p>
+        </template>
+
+        <p v-if="error" class="rounded-st-md bg-st-danger-soft px-4 py-3 text-st-sm font-semibold text-st-red-600">{{ error }}</p>
+
+        <!-- Internal metering + profile reset. Dev builds only. -->
+        <StCard v-if="config.public.isNotProduction" padding="lg" class="flex flex-col gap-6">
+            <template v-if="activeSubscriptionData">
+                <h2 class="font-st-display text-st-lg font-black tracking-st-tight text-st-strong">AI usage — internal metering (dev only)</h2>
+                <div class="overflow-x-auto">
+                    <table class="w-full table-auto border-collapse text-st-sm">
+                        <thead>
+                            <tr class="border-b border-st-line">
+                                <th class="px-4 py-2 text-left font-bold text-st-body">{{ t('subscription.metric') }}</th>
+                                <th class="px-4 py-2 text-left font-bold text-st-body">Internal units</th>
+                                <th class="px-4 py-2 text-left font-bold text-st-body">USD</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="row in devCreditRows" :key="row.label" class="border-b border-st-line last:border-0">
+                                <td class="px-4 py-2 font-semibold text-st-muted">{{ row.label }}</td>
+                                <td class="px-4 py-2 font-semibold text-st-muted">{{ row.units }}</td>
+                                <td class="px-4 py-2 font-semibold text-st-muted">{{ row.usd }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-
-                <!-- Cancel-trial off-ramp interstitial (shown before the Stripe portal) -->
-                <LimitationModal v-model="showCancelOffRamp" :modal-title="t('subscription.cancel-offramp.title')"
-                    :main-message="t('subscription.cancel-offramp.message')"
-                    :sub-message="t('subscription.cancel-offramp.sub-message')" icon-name="IconLockDots"
-                    :primary-button-label="t('subscription.cancel-offramp.stay')"
-                    :secondary-button-label="t('subscription.cancel-offramp.continue')"
-                    :auto-redirect-on-upgrade="false" @secondary="goToPortal" />
-
-                <!-- Embedded Custom Checkout (localized price via Adaptive Pricing) -->
-                <CheckoutPanel v-if="showCheckout && checkoutTier" :tier-id="checkoutTier" :cadence="cadence"
-                    :plan-name="checkoutPlanName" @close="showCheckout = false" @success="onCheckoutSuccess" />
+            </template>
+
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h3 class="text-st-md font-black text-st-strong">Profile Reset</h3>
+                    <p class="mt-1 text-st-sm font-semibold text-st-muted">
+                        Clear all subscription and freemium data for testing purposes. This action cannot be undone.
+                    </p>
+                </div>
+                <StButton color="danger" :disabled="isResetLoading" @click="handleProfileReset">Reset Profile</StButton>
             </div>
-        </div>
+        </StCard>
+
+        <!-- Cancel-trial off-ramp interstitial (shown before the Stripe portal). Still
+             pilotui: LimitationModal is shared with the layout's global tier-limit modal,
+             so it migrates with that surface, not with this screen. -->
+        <LimitationModal
+            v-model="showCancelOffRamp"
+            :modal-title="t('subscription.cancel-offramp.title')"
+            :main-message="t('subscription.cancel-offramp.message')"
+            :sub-message="t('subscription.cancel-offramp.sub-message')"
+            icon-name="IconLockDots"
+            :primary-button-label="t('subscription.cancel-offramp.stay')"
+            :secondary-button-label="t('subscription.cancel-offramp.continue')"
+            :auto-redirect-on-upgrade="false"
+            @secondary="goToPortal"
+        />
+
+        <!-- Embedded Custom Checkout (localized price via Adaptive Pricing) -->
+        <CheckoutPanel
+            v-if="showCheckout && checkoutTier"
+            :tier-id="checkoutTier"
+            :cadence="cadence"
+            :plan-name="checkoutPlanName"
+            @close="showCheckout = false"
+            @success="onCheckoutSuccess"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
-import { Card, Button, Progress, Icon } from 'pilotui/elements';
-import { SwitchBall } from 'pilotui/form';
-import PageHeader from '~/components/common/PageHeader.vue';
-import LimitationModal from '~/components/freemium_alerts/LimitationModal.vue';
-import CheckoutPanel from '~/components/subscription/CheckoutPanel.vue';
-import VoiceMeter from '~/components/VoiceMeter.vue';
-import { useVoiceBalance } from '~/composables/useVoiceBalance';
-import StarterUsageCard from '~/components/StarterUsageCard.vue';
-
-import { ref, computed } from 'vue';
-import { loadStripe } from '@stripe/stripe-js';
-import { functionProvider } from '@modular-rest/client';
-import type { PublicTierPlan, Cadence, TierId } from '~/types/tiers';
-import { useProfileStore } from '~/stores/profile';
-import { analytic } from '~/plugins/mixpanel';
-import { ANALYTICS_EVENTS } from '~/constants/analyticsEvents';
-
-const { t } = useI18n();
-const route = useRoute();
-const config = useRuntimeConfig();
-const profileStore = useProfileStore();
-
-definePageMeta({
-    layout: 'default',
-    title: () => t('subscription.subscription-plans'),
-    // @ts-ignore
-    middleware: ['auth'],
-});
-
-const isLoading = ref(false);
-const isResetLoading = ref(false);
-const isLoadingPlans = ref(false);
-const error = ref('');
-const plansError = ref(false);
-const plans = ref<PublicTierPlan[]>([]);
-
-const isAnnual = ref(false);
-const cadence = computed<Cadence>(() => (isAnnual.value ? 'annual' : 'monthly'));
-const showCancelOffRamp = ref(false);
-
-// Council 004: three paid cards (Reader / Learner / Coach) come from the backend;
-// Starter is the "Continue with Free" link below them.
-const paidPlans = computed(() => plans.value.filter((p) => p.isPaid));
-
-const activeSubscriptionData = computed(() => profileStore.activeSubscription);
-const isFreemium = computed(() => profileStore.isFreemium);
-const activePlanId = computed<TierId | undefined>(() => activeSubscriptionData.value?.tier);
-const isTrialing = computed(() => activeSubscriptionData.value?.status === 'trialing');
-const isCanceling = computed(() => !!activeSubscriptionData.value?.cancel_at_period_end);
-const activePlanName = computed(() => activeSubscriptionData.value?.label || t('subscription.title'));
-
-// Voice balance — Reader has no voice budget, so voice live sessions are a Learner+
-// feature; we merge them into one upsell row and hide the meter when it's empty.
-const { tier: voiceTier, used: voiceUsed, topUps: voiceTopUps } = useVoiceBalance();
-
-// A Reader who has never used voice and bought no top-ups has no voice budget at all —
-// "Live sessions: Unlimited" + "Voice: 0 min" would be misleading. In that case we
-// collapse both into a single "Live session → Upgrade to Learner" upsell and hide the
-// (all-zero) VoiceMeter. A topped-up Reader (or Learner / Coach) sees the real rows.
-const voiceLockedForReader = computed(() => voiceTier.value === 'reader' && voiceUsed.value === 0 && voiceTopUps.value.length === 0);
-
-// What the active (paid) plan includes this month: saved phrases, text chats, and
-// live sessions. getSubscriptionDetails carries top-level allowed_* caps + their
-// *_used counters (the same fields the free StarterUsageCard reads); a null/absent
-// cap means unlimited (e.g. Reader's saved phrases, or a Learner's text chats),
-// otherwise show used / limit (e.g. Reader's "23 / 60" text chats).
-const planRows = computed(() => {
-    const sub = activeSubscriptionData.value as any;
-    const unlimited = t('subscription.this-month.unlimited');
-    const cap = (limit: number | null | undefined, used: number | undefined) => (limit == null ? unlimited : `${used ?? 0} / ${limit}`);
-    const rows: Array<{ label: string; value: string; upsell?: boolean }> = [
-        { label: t('subscription.starter-usage.saved-phrases'), value: cap(sub?.allowed_save_words, sub?.allowed_save_words_used) },
-        { label: t('subscription.starter-usage.text-chats'), value: cap(sub?.allowed_text_chats, sub?.allowed_text_chats_used) },
-    ];
-    if (voiceLockedForReader.value) {
-        rows.push({ label: t('subscription.this-month.live-session'), value: t('subscription.this-month.upgrade-learner'), upsell: true });
-    } else {
-        rows.push({ label: t('subscription.starter-usage.live-sessions'), value: cap(sub?.allowed_lived_sessions, sub?.allowed_lived_sessions_used) });
+    import { ref, computed } from 'vue';
+    import { loadStripe } from '@stripe/stripe-js';
+    import { functionProvider } from '@modular-rest/client';
+    import { StBadge, StButton, StCard, StEmptyState, StIcon, StSkeleton, StSwitch } from 'subturtle-ui';
+    import StPageHeader from '~/components/common/StPageHeader.vue';
+    import LimitationModal from '~/components/freemium_alerts/LimitationModal.vue';
+    import CheckoutPanel from '~/components/subscription/CheckoutPanel.vue';
+    import { useVoiceBalance } from '~/composables/useVoiceBalance';
+    import type { PublicTierPlan, Cadence, TierId } from '~/types/tiers';
+    import { useProfileStore } from '~/stores/profile';
+    import { analytic } from '~/plugins/mixpanel';
+    import { ANALYTICS_EVENTS } from '~/constants/analyticsEvents';
+
+    const { t } = useI18n();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const profileStore = useProfileStore();
+
+    definePageMeta({
+        layout: 'default',
+        title: () => t('subscription.subscription-plans'),
+        // @ts-ignore
+        middleware: ['auth'],
+    });
+
+    const isResetLoading = ref(false);
+    const isLoadingPlans = ref(false);
+    const error = ref('');
+    const plansError = ref(false);
+    const plans = ref<PublicTierPlan[]>([]);
+
+    const isAnnual = ref(false);
+    const cadence = computed<Cadence>(() => (isAnnual.value ? 'annual' : 'monthly'));
+    const showCancelOffRamp = ref(false);
+
+    // Council 004: the paid tiers (Reader / Learner / Coach) come from the backend;
+    // Starter is the free tier the picker also lists.
+    const paidPlans = computed(() => plans.value.filter((p) => p.isPaid));
+    const showPlans = computed(() => !isLoadingPlans.value && !plansError.value && paidPlans.value.length > 0);
+
+    const activeSubscriptionData = computed(() => profileStore.activeSubscription);
+    const isFreemium = computed(() => profileStore.isFreemium);
+    const isSubscriptionFetching = computed(() => profileStore.isSubscriptionFetching);
+    const isTrialing = computed(() => activeSubscriptionData.value?.status === 'trialing');
+    const isCanceling = computed(() => !!activeSubscriptionData.value?.cancel_at_period_end);
+
+    // The tier the user is on right now — 'starter' covers both a free account and one
+    // whose paid subscription has lapsed.
+    const currentTierId = computed<TierId>(() => (isFreemium.value ? 'starter' : (activeSubscriptionData.value?.tier as TierId) ?? 'starter'));
+    const currentPlanName = computed(() => {
+        if (!isFreemium.value && activeSubscriptionData.value?.label) return activeSubscriptionData.value.label;
+        return plans.value.find((p) => p.id === currentTierId.value)?.name ?? t('subscription.pricing.free-plan');
+    });
+
+    const { base: voiceBase, used: voiceUsed, topUps: voiceTopUps, topUpRemaining: voiceTopUpRemaining } = useVoiceBalance();
+
+    // Reader grants no voice minutes, so an untouched Reader has no voice budget at all.
+    // "0 / 0" is a dead end, so that one meter becomes the upsell instead (Council 004).
+    const voiceLocked = computed(() => !isFreemium.value && voiceBase.value === 0 && voiceTopUpRemaining.value === 0);
+
+    /* ---- Plan picker ------------------------------------------------------ */
+
+    // Chosen once the plans land: an explicit ?suggest= (the tier-limit modal deep-links
+    // with it) beats the highlighted tier, which beats the plan the user is already on.
+    // Highlighted-over-current is the design's own default and the point of the screen —
+    // opening a free user on Starter would show them what they already have.
+    const selectedId = ref<TierId | null>(null);
+    const selectedPlan = computed(() => plans.value.find((p) => p.id === selectedId.value) ?? plans.value[0] ?? null);
+
+    function pickInitialPlan() {
+        const suggested = route.query.suggest as TierId | undefined;
+        const has = (id?: string | null) => !!id && plans.value.some((p) => p.id === id);
+        if (has(suggested)) selectedId.value = suggested!;
+        else selectedId.value = (plans.value.find((p) => p.highlight)?.id ?? (has(currentTierId.value) ? currentTierId.value : plans.value[0]?.id)) as TierId;
+    }
+
+    const periodLabel = computed(() => (isAnnual.value ? t('subscription.pricing.year') : t('subscription.pricing.month')));
+
+    function price(plan: PublicTierPlan): string {
+        return plan.isPaid ? formatAmount(plan, cadence.value) : t('subscription.pricing.free');
+    }
+
+    function pricePeriod(plan: PublicTierPlan): string {
+        return plan.isPaid ? `${formatAmount(plan, cadence.value)} / ${periodLabel.value}` : t('subscription.pricing.free');
     }
-    return rows;
-});
-
-// "Resets on 12 June." — the active period's end (Council 004 Surface 2).
-const renewsOn = computed(() => {
-    const d = activeSubscriptionData.value?.end_date;
-    if (!d) return '';
-    try {
-        return new Date(d).toLocaleDateString(undefined, { day: 'numeric', month: 'long' });
-    } catch {
-        return '';
+
+    function priceNote(plan: PublicTierPlan): string {
+        if (!plan.isPaid) return t('subscription.pricing.starter-price');
+        return isAnnual.value ? t('subscription.pricing.billed-yearly') : t('subscription.pricing.billed-monthly');
     }
-});
-
-// "Top up minutes" from the voice meter → the /settings/billing top-ups section (S14).
-function goToTopUps() {
-    navigateTo('/settings/billing');
-}
-
-// Embedded Custom Checkout panel state (replaces the hosted redirect). The panel
-// shows the localized price (EUR for EU visitors) via Stripe Adaptive Pricing.
-const showCheckout = ref(false);
-const checkoutTier = ref<TierId | null>(null);
-const checkoutPlanName = ref('');
-
-// Adaptive Pricing: probe the visitor's local currency + GBP conversion rate once
-// (via one Stripe session), then display the cards in that currency. Falls back
-// to the GBP base when unavailable / not localized.
-const localCurrency = ref<string | null>(null);
-const fxRate = ref<number | null>(null);
-
-// True only while the local currency is being probed over the network (cache
-// miss). Drives the price skeleton so the GBP base price doesn't flash before
-// the localized one arrives. Stays false for cache hits and when there is no
-// publishable key — those resolve to a price synchronously, no skeleton needed.
-const isProbingCurrency = ref(false);
-
-// Display the price in the visitor's local currency (e.g. EUR) when Adaptive
-// Pricing localizes it; otherwise the GBP base price.
-function formatAmount(plan: PublicTierPlan, cad: Cadence): string {
-    const gbp = plan.pricing?.[cad]?.gbp;
-    if (gbp == null) return '';
-    if (localCurrency.value && fxRate.value) {
+
+    /* ---- Current plan strip ----------------------------------------------- */
+
+    const statusBadge = computed<{ label: string; color: 'neutral' | 'primary' | 'warning' }>(() => {
+        if (isCanceling.value) return { label: t('subscription.pricing.canceling'), color: 'warning' };
+        if (isTrialing.value) return { label: t('subscription.pricing.trial'), color: 'primary' };
+        return { label: t('subscription.pricing.current'), color: 'neutral' };
+    });
+
+    // "Resets on 12 June." — the active period's end, for free and paid alike.
+    const resetsOn = computed(() => {
+        const d = isFreemium.value ? (profileStore.freemiumAllocation as any)?.end_date : activeSubscriptionData.value?.end_date;
+        if (!d) return '';
         try {
-            return new Intl.NumberFormat(undefined, {
-                style: 'currency',
-                currency: localCurrency.value,
-            }).format(gbp * fxRate.value);
+            return t('subscription.voice-meter.resets', { date: new Date(d).toLocaleDateString(undefined, { day: 'numeric', month: 'long' }) });
         } catch {
-            /* unknown currency code — fall through to GBP */
+            return '';
         }
-    }
-    return `£${gbp.toFixed(2)}`;
-}
-
-function formatDate(d: string | Date | undefined): string {
-    return d ? new Date(d).toLocaleDateString() : '';
-}
-
-async function fetchPlans() {
-    isLoadingPlans.value = true;
-    plansError.value = false;
-    try {
-        plans.value = await functionProvider.run<PublicTierPlan[]>({
-            name: 'getSubscriptionPlans',
-            args: {},
+    });
+
+    // One tiny line under the plan name: what the plan is (or what is about to happen to
+    // it), then when the allowances reset.
+    const currentPlanNote = computed(() => {
+        let status: string;
+        if (isFreemium.value) status = t('subscription.pricing.starter-price');
+        else if (isCanceling.value) status = t('subscription.canceling', { date: formatDate(activeSubscriptionData.value?.end_date) });
+        else if (isTrialing.value) status = t('subscription.trial-active', { days: activeSubscriptionData.value?.remaining_days ?? 0 });
+        else status = `${t('subscription.started-at')} ${formatDate(activeSubscriptionData.value?.start_date)}`;
+        return [status, isCanceling.value ? '' : resetsOn.value].filter(Boolean).join(' ');
+    });
+
+    // Free-tier caps (mirror server/src/config.ts). Only a fallback: a legacy free_credit
+    // doc can predate a field, and on the free tier a missing cap must never render as
+    // "Unlimited" — that would promise something the tier does not give.
+    const FREE_CAPS = { saveWords: 200, textChats: 5, liveSessions: 3, voice: 5 };
+
+    /**
+     * The four allowances this period, in the same shape for every tier. On a paid plan a
+     * null/absent cap genuinely means unlimited (e.g. a Learner's text chats); on the free
+     * plan it falls back to the known cap instead.
+     */
+    const usageMeters = computed(() => {
+        const free = isFreemium.value;
+        const src: any = (free ? profileStore.freemiumAllocation : activeSubscriptionData.value) ?? {};
+        const cap = (value: number | null | undefined, fallback: number) => (free ? value ?? fallback : value);
+        const rows = [
+            {
+                label: t('subscription.starter-usage.saved-phrases'),
+                limit: cap(src.allowed_save_words, FREE_CAPS.saveWords),
+                used: src.allowed_save_words_used,
+            },
+            { label: t('subscription.starter-usage.text-chats'), limit: cap(src.allowed_text_chats, FREE_CAPS.textChats), used: src.allowed_text_chats_used },
+            {
+                label: t('subscription.starter-usage.live-sessions'),
+                limit: cap(src.allowed_lived_sessions, FREE_CAPS.liveSessions),
+                used: src.allowed_lived_sessions_used,
+            },
+            // Top-up packs are spendable now, so they belong in the voice total rather
+            // than in a separate line the strip has no room for.
+            {
+                label: t('subscription.starter-usage.voice'),
+                limit: cap(voiceBase.value + voiceTopUpRemaining.value, FREE_CAPS.voice),
+                used: voiceUsed.value,
+                upsell: voiceLocked.value,
+            },
+        ];
+
+        return rows.map((row) => {
+            const unlimited = row.limit == null;
+            const used = row.used ?? 0;
+            const limit = row.limit ?? 0;
+            const pct = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0;
+            // Rose is the design's resting fill; the amber/red steps are the cap warning
+            // Council 004 specced, which the prototype's all-zero demo never shows.
+            const fill = pct >= 100 ? 'bg-st-danger' : pct >= 80 ? 'bg-st-warning' : 'bg-st-primary';
+            const value = row.upsell ? t('subscription.this-month.upgrade-learner') : unlimited ? t('subscription.this-month.unlimited') : `${used} / ${limit}`;
+            return { label: row.label, unlimited, upsell: !!row.upsell, pct, fill, value };
         });
-    } catch (err) {
-        plansError.value = true;
-        console.error('Failed to load subscription plans:', err);
-    } finally {
-        isLoadingPlans.value = false;
+    });
+
+    // The voice meter's own top-up entry point (it used to live inside VoiceMeter, which
+    // this screen no longer renders). Paid tiers only — Starter cannot buy minutes.
+    const showTopUp = computed(() => !isFreemium.value && (voiceBase.value > 0 || voiceTopUps.value.length > 0));
+
+    function goToTopUps() {
+        navigateTo('/settings/billing');
     }
-}
-
-// Probe the visitor's local currency + conversion rate via one Stripe Checkout
-// Elements session (the only client-side way Stripe exposes the localized amount).
-// Cached per browser session so it costs one session, not one per page load.
-async function probeLocalCurrency() {
-    const pk = config.public.STRIPE_PUBLISHABLE_KEY as string | undefined;
-    if (!pk) return;
-    // Paid users can't open a new checkout (the backend blocks stacking), so this
-    // probe — which works by creating a checkout session — would just fail for them.
-    // They change plans via the portal; the cards show the GBP base price.
-    if (!isFreemium.value) return;
-    try {
-        const cached = sessionStorage.getItem('subturtle.localPricing');
-        if (cached) {
-            const c = JSON.parse(cached);
-            if (c.currency && c.fxRate) {
-                localCurrency.value = c.currency;
-                fxRate.value = c.fxRate;
-                return;
+
+    // The voice upsell selects the tier that actually grants voice rather than leaving
+    // the page, so the user lands on its price and features in the panel below.
+    function selectUpgradeTier() {
+        const target = plans.value.find((p) => p.id === 'learner') ?? plans.value.find((p) => p.highlight);
+        if (target) selectedId.value = target.id;
+    }
+
+    /* ---- The one CTA ------------------------------------------------------ */
+
+    type Cta = { label: string; variant: 'solid' | 'outline'; color: 'primary' | 'neutral'; disabled?: boolean; note?: string; action: () => void };
+
+    const cta = computed<Cta>(() => {
+        const plan = selectedPlan.value;
+        if (!plan) return { label: '', variant: 'outline', color: 'neutral', disabled: true, action: () => {} };
+
+        // The plan they are already on. Free has nothing to manage; a paid plan opens the portal.
+        if (plan.id === currentTierId.value) {
+            return isFreemium.value
+                ? { label: t('subscription.pricing.current-plan'), variant: 'outline', color: 'neutral', disabled: true, action: () => {} }
+                : { label: t('subscription.manage-subscription'), variant: 'outline', color: 'neutral', action: manageSubscription };
+        }
+
+        // A paid user looking at Starter: cancelling is what reverts them to free.
+        if (!plan.isPaid) return { label: t('subscription.pricing.downgrade-free'), variant: 'outline', color: 'primary', action: downgradeToFree };
+
+        // Already paying for a different tier — switch in the portal, where Stripe prorates.
+        // Starting a checkout here would stack a second subscription.
+        if (!isFreemium.value) return { label: t('subscription.pricing.change-plan'), variant: 'outline', color: 'primary', action: goToChangePlan };
+
+        const variant = plan.highlight ? 'solid' : 'outline';
+        if (plan.trialDays > 0) {
+            return {
+                label: t('subscription.pricing.trial-cta', { days: plan.trialDays }),
+                variant,
+                color: 'primary',
+                note: t('subscription.pricing.trial-subline', { days: plan.trialDays }),
+                action: () => initiateCheckout(plan.id),
+            };
+        }
+        return { label: t('subscription.pricing.choose-plan', { name: plan.name }), variant, color: 'primary', action: () => initiateCheckout(plan.id) };
+    });
+
+    /* ---- Dev-only metering ------------------------------------------------ */
+
+    const devCreditRows = computed(() => {
+        const s: any = activeSubscriptionData.value;
+        if (!s) return [];
+        return [
+            { label: t('subscription.total'), units: s.total_credits, usd: s.total_credit_in_usd },
+            { label: t('subscription.available'), units: s.available_credit, usd: `$${s.available_credit_in_usd}` },
+            { label: t('subscription.used'), units: s.credits_used, usd: `$${s.used_credit_in_usd}` },
+        ];
+    });
+
+    /* ---- Checkout + pricing (unchanged behaviour) ------------------------- */
+
+    const showCheckout = ref(false);
+    const checkoutTier = ref<TierId | null>(null);
+    const checkoutPlanName = ref('');
+
+    // Adaptive Pricing: probe the visitor's local currency + GBP conversion rate once
+    // (via one Stripe session), then display the prices in that currency. Falls back
+    // to the GBP base when unavailable / not localized.
+    const localCurrency = ref<string | null>(null);
+    const fxRate = ref<number | null>(null);
+
+    // True only while the local currency is being probed over the network (cache
+    // miss). Drives the price skeleton so the GBP base price doesn't flash before
+    // the localized one arrives. Stays false for cache hits and when there is no
+    // publishable key — those resolve to a price synchronously, no skeleton needed.
+    const isProbingCurrency = ref(false);
+
+    // Display the price in the visitor's local currency (e.g. EUR) when Adaptive
+    // Pricing localizes it; otherwise the GBP base price.
+    function formatAmount(plan: PublicTierPlan, cad: Cadence): string {
+        const gbp = plan.pricing?.[cad]?.gbp;
+        if (gbp == null) return '';
+        if (localCurrency.value && fxRate.value) {
+            try {
+                return new Intl.NumberFormat(undefined, {
+                    style: 'currency',
+                    currency: localCurrency.value,
+                }).format(gbp * fxRate.value);
+            } catch {
+                /* unknown currency code — fall through to GBP */
             }
         }
-    } catch {
-        /* ignore */
+        return `£${gbp.toFixed(2)}`;
     }
-    const probe = paidPlans.value.find((p) => p.id === 'reader') || paidPlans.value[0];
-    const gbp = probe?.pricing?.monthly?.gbp;
-    if (!probe || gbp == null) return;
-    isProbingCurrency.value = true;
-    try {
-        const { clientSecret } = await functionProvider.run<{ clientSecret: string }>({
-            name: 'createCustomCheckoutSession',
-            args: {
-                tierId: probe.id,
-                cadence: 'monthly',
-                userId: profileStore.authUser?.id,
-                successUrl: `${window.location.origin}/#/payment-success`,
-            },
-        });
-        const stripe = await loadStripe(pk);
-        if (!stripe) return;
-        const sdk = (stripe as any).initCheckoutElementsSdk({ clientSecret, adaptivePricing: { allowed: true } });
-        const res = await sdk.loadActions();
-        if (res.type !== 'success') return;
-        const session = res.actions.getSession();
-        // Only localize when Stripe actually presents a non-GBP currency.
-        if (!session.currency || session.currency === 'gbp') return;
-        // Prefer Stripe's TRUE conversion rate (currencyOptions[].currencyConversion.fxRate)
-        // so every card matches checkout exactly; deriving a rate from one tier's
-        // already-rounded amount drifts by a cent. Fall back to that derivation.
-        const opt = (session.currencyOptions || []).find((o: any) => o?.currencyConversion?.fxRate);
-        const minor = session?.lineItems?.[0]?.unitAmount?.minorUnitsAmount;
-        const rate = opt
-            ? parseFloat(opt.currencyConversion.fxRate)
-            : minor
-            ? minor / (gbp * 100)
-            : null;
-        if (!rate) return;
-        localCurrency.value = session.currency;
-        fxRate.value = rate;
+
+    function formatDate(d: string | Date | undefined): string {
+        return d ? new Date(d).toLocaleDateString() : '';
+    }
+
+    async function fetchPlans() {
+        isLoadingPlans.value = true;
+        plansError.value = false;
+        try {
+            plans.value = await functionProvider.run<PublicTierPlan[]>({
+                name: 'getSubscriptionPlans',
+                args: {},
+            });
+            pickInitialPlan();
+        } catch (err) {
+            plansError.value = true;
+            console.error('Failed to load subscription plans:', err);
+        } finally {
+            isLoadingPlans.value = false;
+        }
+    }
+
+    // Probe the visitor's local currency + conversion rate via one Stripe Checkout
+    // Elements session (the only client-side way Stripe exposes the localized amount).
+    // Cached per browser session so it costs one session, not one per page load.
+    async function probeLocalCurrency() {
+        const pk = config.public.STRIPE_PUBLISHABLE_KEY as string | undefined;
+        if (!pk) return;
+        // Paid users can't open a new checkout (the backend blocks stacking), so this
+        // probe — which works by creating a checkout session — would just fail for them.
+        // They change plans via the portal; the prices show the GBP base.
+        if (!isFreemium.value) return;
         try {
-            sessionStorage.setItem('subturtle.localPricing', JSON.stringify({ currency: session.currency, fxRate: rate }));
+            const cached = sessionStorage.getItem('subturtle.localPricing');
+            if (cached) {
+                const c = JSON.parse(cached);
+                if (c.currency && c.fxRate) {
+                    localCurrency.value = c.currency;
+                    fxRate.value = c.fxRate;
+                    return;
+                }
+            }
         } catch {
             /* ignore */
         }
-    } catch (err) {
-        console.error('Local pricing probe failed (showing GBP):', err);
-    } finally {
-        isProbingCurrency.value = false;
+        const probe = paidPlans.value.find((p) => p.id === 'reader') || paidPlans.value[0];
+        const gbp = probe?.pricing?.monthly?.gbp;
+        if (!probe || gbp == null) return;
+        isProbingCurrency.value = true;
+        try {
+            const { clientSecret } = await functionProvider.run<{ clientSecret: string }>({
+                name: 'createCustomCheckoutSession',
+                args: {
+                    tierId: probe.id,
+                    cadence: 'monthly',
+                    userId: profileStore.authUser?.id,
+                    successUrl: `${window.location.origin}/#/payment-success`,
+                },
+            });
+            const stripe = await loadStripe(pk);
+            if (!stripe) return;
+            const sdk = (stripe as any).initCheckoutElementsSdk({ clientSecret, adaptivePricing: { allowed: true } });
+            const res = await sdk.loadActions();
+            if (res.type !== 'success') return;
+            const session = res.actions.getSession();
+            // Only localize when Stripe actually presents a non-GBP currency.
+            if (!session.currency || session.currency === 'gbp') return;
+            // Prefer Stripe's TRUE conversion rate (currencyOptions[].currencyConversion.fxRate)
+            // so every price matches checkout exactly; deriving a rate from one tier's
+            // already-rounded amount drifts by a cent. Fall back to that derivation.
+            const opt = (session.currencyOptions || []).find((o: any) => o?.currencyConversion?.fxRate);
+            const minor = session?.lineItems?.[0]?.unitAmount?.minorUnitsAmount;
+            const rate = opt ? parseFloat(opt.currencyConversion.fxRate) : minor ? minor / (gbp * 100) : null;
+            if (!rate) return;
+            localCurrency.value = session.currency;
+            fxRate.value = rate;
+            try {
+                sessionStorage.setItem('subturtle.localPricing', JSON.stringify({ currency: session.currency, fxRate: rate }));
+            } catch {
+                /* ignore */
+            }
+        } catch (err) {
+            console.error('Local pricing probe failed (showing GBP):', err);
+        } finally {
+            isProbingCurrency.value = false;
+        }
     }
-}
-
-onMounted(async () => {
-    // Trial-to-paid funnel entry. The auto page-view can't carry attribution, so
-    // fire an explicit event with the surface the user arrived from (?from=...);
-    // default to 'settings' for direct/nav visits. Analytics is best-effort: when
-    // Mixpanel is not initialised (e.g. no token in CI/e2e), track() can throw —
-    // it must never abort the mount and block the plan cards from loading.
-    try {
-        analytic.track(ANALYTICS_EVENTS.PRICING_PAGE_VIEWED, {
-            from_surface: (route.query.from as string) || 'settings',
+
+    onMounted(async () => {
+        // Trial-to-paid funnel entry. The auto page-view can't carry attribution, so
+        // fire an explicit event with the surface the user arrived from (?from=...);
+        // default to 'settings' for direct/nav visits. Analytics is best-effort: when
+        // Mixpanel is not initialised (e.g. no token in CI/e2e), track() can throw —
+        // it must never abort the mount and block the plans from loading.
+        try {
+            analytic.track(ANALYTICS_EVENTS.PRICING_PAGE_VIEWED, {
+                from_surface: (route.query.from as string) || 'settings',
+            });
+        } catch (e) {
+            console.error('Failed to track pricing-page_viewed:', e);
+        }
+        await fetchPlans();
+        probeLocalCurrency();
+        // Returning from a portal plan change (?plan_changed=1): the
+        // customer.subscription.updated webhook is async, so refetch a few times to
+        // surface the new plan without a manual reload.
+        if (route.query.plan_changed) pollForPlanChange();
+    });
+
+    async function pollForPlanChange() {
+        for (let i = 0; i < 6; i++) {
+            try {
+                await profileStore.fetchSubscription();
+            } catch {
+                /* ignore */
+            }
+            if (i < 5) await new Promise((resolve) => setTimeout(resolve, 1500));
+        }
+    }
+
+    // Open the embedded Custom Checkout panel for a paid tier at the selected cadence.
+    // The localized price (e.g. EUR) is shown in-panel via Stripe Adaptive Pricing —
+    // no redirect.
+    function initiateCheckout(tierId: TierId) {
+        const plan = paidPlans.value.find((p) => p.id === tierId);
+        checkoutTier.value = tierId;
+        checkoutPlanName.value = plan?.name || '';
+        error.value = '';
+        analytic.track(ANALYTICS_EVENTS.CHECKOUT_OPENED, {
+            tier: tierId,
+            cadence: cadence.value,
+            currency: localCurrency.value || 'GBP',
         });
-    } catch (e) {
-        console.error('Failed to track pricing-page_viewed:', e);
+        showCheckout.value = true;
     }
-    await fetchPlans();
-    probeLocalCurrency();
-    // Returning from a portal plan change (?plan_changed=1): the
-    // customer.subscription.updated webhook is async, so refetch a few times to
-    // surface the new plan without a manual reload.
-    if (route.query.plan_changed) pollForPlanChange();
-});
-
-async function pollForPlanChange() {
-    for (let i = 0; i < 6; i++) {
+
+    // After a successful in-panel payment: refresh the subscription and land on the
+    // success page (the webhook grants entitlements from metadata server-side).
+    async function onCheckoutSuccess() {
+        showCheckout.value = false;
         try {
             await profileStore.fetchSubscription();
         } catch {
             /* ignore */
         }
-        if (i < 5) await new Promise((resolve) => setTimeout(resolve, 1500));
+        window.location.href = `${window.location.origin}/#/payment-success`;
     }
-}
-
-// Open the embedded Custom Checkout panel for a paid tier at the selected cadence.
-// The localized price (e.g. EUR) is shown in-panel via Stripe Adaptive Pricing —
-// no redirect.
-function initiateCheckout(tierId: TierId) {
-    const plan = paidPlans.value.find((p) => p.id === tierId);
-    checkoutTier.value = tierId;
-    checkoutPlanName.value = plan?.name || '';
-    error.value = '';
-    analytic.track(ANALYTICS_EVENTS.CHECKOUT_OPENED, {
-        tier: tierId,
-        cadence: cadence.value,
-        currency: localCurrency.value || 'GBP',
-    });
-    showCheckout.value = true;
-}
-
-// After a successful in-panel payment: refresh the subscription and land on the
-// success page (the webhook grants entitlements from metadata server-side).
-async function onCheckoutSuccess() {
-    showCheckout.value = false;
-    try {
-        await profileStore.fetchSubscription();
-    } catch {
-        /* ignore */
+
+    // Hands the user to Stripe's hosted billing portal — payment method, invoices,
+    // and cancellation all live there rather than being reimplemented in-app. The
+    // off-ramp interstitial's "continue" calls THIS, so it must never re-open the
+    // interstitial; `manageSubscription` owns that branch.
+    function goToPortal() {
+        const url = activeSubscriptionData.value?.portal_url;
+        if (url) window.location.href = url;
     }
-    window.location.href = `${window.location.origin}/#/payment-success`;
-}
-
-// Hands the user to Stripe's hosted billing portal — payment method, invoices,
-// and cancellation all live there rather than being reimplemented in-app.
-// Reached directly by "Manage Subscription" for active subs, and via the
-// cancel-trial off-ramp interstitial for trialing subs.
-function goToPortal() {
-    const url = activeSubscriptionData.value?.portal_url;
-    if (url) window.location.href = url;
-}
-
-// "Change plan": deep-link straight to the portal's plan picker (Stripe
-// flow_data.subscription_update) so the user lands on the tier selection rather
-// than the portal home. Falls back to the portal home if the deep link fails.
-const isOpeningChangePlan = ref(false);
-async function goToChangePlan() {
-    isOpeningChangePlan.value = true;
-    try {
-        const { url } = await functionProvider.run<{ url: string }>({
-            name: 'createPortalUpdateSession',
-            args: { userId: profileStore.authUser?.id },
-        });
-        if (url) {
-            window.location.href = url;
-            return;
-        }
-        goToPortal();
-    } catch {
-        goToPortal();
-    } finally {
-        isOpeningChangePlan.value = false;
+
+    // Trialing users get the retention interstitial before the portal; everyone else
+    // goes straight there.
+    function manageSubscription() {
+        if (isTrialing.value) showCancelOffRamp.value = true;
+        else goToPortal();
     }
-}
-
-// "Downgrade to Free" on the Starter card. Reuse the existing cancel flow: the
-// off-ramp interstitial for trialing users, the Stripe billing portal for active
-// paid users (where the cancellation that reverts them to Starter is confirmed).
-function downgradeToFree() {
-    if (isTrialing.value) {
-        showCancelOffRamp.value = true;
-    } else {
-        goToPortal();
+
+    // "Change plan": deep-link straight to the portal's plan picker (Stripe
+    // flow_data.subscription_update) so the user lands on the tier selection rather
+    // than the portal home. Falls back to the portal home if the deep link fails.
+    const isOpeningChangePlan = ref(false);
+    async function goToChangePlan() {
+        isOpeningChangePlan.value = true;
+        try {
+            const { url } = await functionProvider.run<{ url: string }>({
+                name: 'createPortalUpdateSession',
+                args: { userId: profileStore.authUser?.id },
+            });
+            if (url) {
+                window.location.href = url;
+                return;
+            }
+            goToPortal();
+        } catch {
+            goToPortal();
+        } finally {
+            isOpeningChangePlan.value = false;
+        }
     }
-}
 
-async function handleProfileReset() {
-    if (!confirm('Are you sure you want to reset your profile? This will clear all subscription and freemium data and cannot be undone.')) {
-        return;
+    // "Downgrade to Free": reuse the existing cancel flow — the off-ramp interstitial
+    // for trialing users, the Stripe billing portal for active paid users (where the
+    // cancellation that reverts them to Starter is confirmed).
+    function downgradeToFree() {
+        manageSubscription();
     }
 
-    isResetLoading.value = true;
-    error.value = '';
+    async function handleProfileReset() {
+        if (!confirm('Are you sure you want to reset your profile? This will clear all subscription and freemium data and cannot be undone.')) {
+            return;
+        }
 
-    try {
-        await functionProvider.run({
-            name: 'clearSubscriptionAndFreemium',
-            args: {
-                userId: profileStore.authUser?.id,
-            },
-        });
+        isResetLoading.value = true;
+        error.value = '';
+
+        try {
+            await functionProvider.run({
+                name: 'clearSubscriptionAndFreemium',
+                args: {
+                    userId: profileStore.authUser?.id,
+                },
+            });
 
-        await profileStore.fetchSubscription();
-        alert('Profile reset successfully! All subscription and freemium data has been cleared.');
-        window.location.reload();
-    } catch (err: any) {
-        error.value = err.message || 'Failed to reset profile';
-        console.error('Profile reset error:', err);
-    } finally {
-        isResetLoading.value = false;
+            await profileStore.fetchSubscription();
+            alert('Profile reset successfully! All subscription and freemium data has been cleared.');
+            window.location.reload();
+        } catch (err: any) {
+            error.value = err.message || 'Failed to reset profile';
+            console.error('Profile reset error:', err);
+        } finally {
+            isResetLoading.value = false;
+        }
     }
-}
 </script>
diff --git a/frontend/tests/e2e/specs/subscription-ui.spec.ts b/frontend/tests/e2e/specs/subscription-ui.spec.ts
index 0250ab14..15be2507 100644
--- a/frontend/tests/e2e/specs/subscription-ui.spec.ts
+++ b/frontend/tests/e2e/specs/subscription-ui.spec.ts
@@ -254,26 +254,35 @@ test.describe('Subscription UI — free/Starter surfaces (§7)', () => {
         await expect(page.getByText('Upgrade to unlock')).not.toBeVisible();
     });
 
-    test('/settings/subscription renders four plan cards with GBP base prices', async ({ page }) => {
+    // The redesign replaced the four standalone pricing cards with a tablist + a detail
+    // panel for the selected tier, so each tier is a tab and only one plan's full detail
+    // is on screen at a time. The page opens on the highlighted tier (Learner).
+    test('/settings/subscription renders all four tiers as tabs with GBP base prices', async ({ page }) => {
         await page.goto('/#/settings/subscription');
 
-        // All four tiers render as cards.
-        await expect(page.getByRole('heading', { name: 'Starter', exact: true })).toBeVisible();
-        await expect(page.getByRole('heading', { name: 'Reader', exact: true })).toBeVisible();
-        await expect(page.getByRole('heading', { name: 'Learner', exact: true })).toBeVisible();
-        await expect(page.getByRole('heading', { name: 'Coach', exact: true })).toBeVisible();
+        // All four tiers render as tabs.
+        await expect(page.getByRole('tab', { name: /^Starter/ })).toBeVisible();
+        await expect(page.getByRole('tab', { name: /^Reader/ })).toBeVisible();
+        await expect(page.getByRole('tab', { name: /^Learner/ })).toBeVisible();
+        await expect(page.getByRole('tab', { name: /^Coach/ })).toBeVisible();
 
-        // Starter is the free user's current level (not a "Downgrade" CTA).
-        await expect(page.getByText('Current plan')).toBeVisible();
+        // Starter is the free user's current level, marked on its tab.
+        await expect(page.getByRole('tab', { name: /^Starter/ })).toContainText('Current');
 
-        // Learner is the highlighted tier: "Most popular" ribbon + 3-day trial CTA.
+        // Learner is the highlighted tier, so it is selected on arrival: "Most popular"
+        // ribbon (from Stripe metadata) + its 3-day trial CTA in the detail panel.
         await expect(page.getByText('Most popular')).toBeVisible();
-        await expect(page.getByText('Start 3-day free trial')).toBeVisible();
+        await expect(page.getByRole('tab', { name: /^Learner/ })).toHaveAttribute('aria-selected', 'true');
+        await expect(page.getByRole('button', { name: 'Start 3-day free trial' })).toBeVisible();
 
         // GBP base prices (Adaptive Pricing probe disabled → £ fallback).
-        await expect(page.getByText('£4.49')).toBeVisible();
-        await expect(page.getByText('£10.99')).toBeVisible();
-        await expect(page.getByText('£24.99')).toBeVisible();
+        await expect(page.getByText('£4.49 / month')).toBeVisible();
+        await expect(page.getByText('£10.99 / month')).toBeVisible();
+        await expect(page.getByText('£24.99 / month')).toBeVisible();
+
+        // Selecting the tier the user is on swaps the detail panel to the disabled marker.
+        await page.getByRole('tab', { name: /^Starter/ }).click();
+        await expect(page.getByRole('button', { name: 'Current plan' })).toBeDisabled();
     });
 
     test('paid Learner sees the voice meter in the "This month" section', async ({ page }) => {
@@ -290,9 +299,13 @@ test.describe('Subscription UI — free/Starter surfaces (§7)', () => {
 
         await page.goto('/#/settings/subscription');
 
-        await expect(page.getByRole('heading', { name: 'This month' })).toBeVisible();
-        // The meter sub-line (base 90, used 30) — proves VoiceMeter computed the balance.
-        await expect(page.getByText('60 of 90 minutes left this month', { exact: true })).toBeVisible();
+        // The redesign folds voice into the current-plan usage strip as one of four
+        // meters, so the balance reads as used / granted (30 of 90) rather than as the
+        // old VoiceMeter's "60 of 90 minutes left this month" sub-line.
+        await expect(page.getByText('Voice minutes', { exact: true })).toBeVisible();
+        await expect(page.getByText('30 / 90', { exact: true })).toBeVisible();
+        // Paid tiers keep a top-up entry point (it used to live inside VoiceMeter).
+        await expect(page.getByRole('button', { name: 'Top up minutes' })).toBeVisible();
     });
 
     test('paid user sees the voice top-ups section on /settings/billing', async ({ page }) => {
@@ -348,19 +361,24 @@ test.describe('Subscription UI — free/Starter surfaces (§7)', () => {
 
         await page.goto('/#/settings/subscription');
 
-        // The active-plan "This month" card lists each entitlement as a label + used/limit
-        // row; Reader's finite text-chat cap renders as "23 / 60" (saved phrases stay Unlimited).
+        // The usage strip meters each entitlement as a label + used/limit; Reader's finite
+        // text-chat cap renders as "23 / 60", while an absent cap reads "Unlimited".
         await expect(page.getByText('Text chats', { exact: true })).toBeVisible();
         await expect(page.getByText('23 / 60', { exact: true })).toBeVisible();
+        await expect(page.getByText('Unlimited').first()).toBeVisible();
     });
 
-    test('Starter (free) user sees a usage card with the free-tier limits', async ({ page }) => {
-        // Default stub is a free Starter user; the usage card renders for them.
+    test('Starter (free) user sees the usage strip with the free-tier limits', async ({ page }) => {
+        // Default stub is a free Starter user; one strip serves every tier now, so it
+        // names the tier from the plan list ("Starter") rather than a separate free card.
         await page.goto('/#/settings/subscription');
 
-        await expect(page.getByRole('heading', { name: 'Free plan' })).toBeVisible();
+        await expect(page.getByText('Free, forever. No card needed.').first()).toBeVisible();
         await expect(page.getByText('Saved phrases', { exact: true })).toBeVisible();
         await expect(page.getByText('Text chats', { exact: true })).toBeVisible();
         await expect(page.getByText('Live sessions', { exact: true })).toBeVisible();
+        // A free tier never reads "Unlimited" — the caps come through as used / limit.
+        await expect(page.getByText('0 / 200', { exact: true })).toBeVisible();
+        await expect(page.getByText('0 / 3', { exact: true })).toBeVisible();
     });
 });
diff --git a/ui/src/styles/theme-tokens.css b/ui/src/styles/theme-tokens.css
index aec1f2a4..3c13a440 100644
--- a/ui/src/styles/theme-tokens.css
+++ b/ui/src/styles/theme-tokens.css
@@ -1,34 +1,29 @@
 /* ============================================================
    Subturtle — theme layer (dark).
 
-   ⚠️ SUPERSEDED, AND STILL HERE ON PURPOSE.
-
-   The design system now ships `subturtle-theme.css` (its own tokens/dark.css plus three
-   patches), and THAT is the file this one has to be replaced by, wholesale. It was not
-   available when this was written, so the palette below is the earlier profile-menu
-   handoff's. The two genuinely disagree, so do not reconcile them by hand:
-
-     - ramps here invert step-for-step; there they invert around their MID-step, with
-       --rose-500 / --jade-500 keeping their exact brand values
-     - --paper #161219 here, #15111a there; --surface-card #211b28 here, #1e1826 there
-     - --white is NOT re-pointed here, but IS #1e1826 there ("the card neutral")
-
-   That last one reverses the meaning of --white, so the literal-white audit already done
-   in the components (`st-text-on-brand`, see tailwind.config.cjs) is correct for BOTH and
-   should survive the swap. Everything else in this file is placeholder-accurate only.
+   THIS IS THE FILE THAT SHIPS. The design system also carries a dark layer
+   (`subturtle-theme.css`, in the screen handoff); it is a reference for VALUES, not a
+   replacement for this file, and an earlier note here claiming it supersedes this one
+   wholesale predated the theme PR landing. Do not swap the files. Two things only this
+   one has, and both are load-bearing:
+
+     - colours as space-separated RGB channels, so Tailwind can compose
+       `rgb(var(--token) / <alpha-value>)`. The handoff writes hex; shipping that verbatim
+       would emit `rgb(#211b28 / 1)` and silently break every `st-` colour utility in dark.
+     - the `.theme-switching` rule and the `--blob-alpha` / `--surface-topbar` additions.
+
+   Where the two disagree on a value, this file's is the deliberate one and carries its
+   measured contrast in a comment beside it (e.g. --ink-500 is lightened to #9d93a9 for
+   5.9:1 on --surface-card, against the handoff's #8d8496). Diff before changing anything
+   here, and carry a handoff value across only when it is actually better.
 
    Loaded from index.css
    immediately after tokens.css, which is the whole mechanism: this file re-points the
    SAME token names under `html[data-theme='dark']`, so every component already styled with
    var(--surface-card) / var(--text-body) / var(--ink-100) themes itself with no edits.
 
-   ONE DELIBERATE DIFFERENCE FROM THE HANDOFF FILE — and it is not optional. The handoff
-   writes colours as hex; tokens.css stores them as space-separated RGB channels so
-   Tailwind can compose `rgb(var(--token) / <alpha-value>)`. Shipping the hex verbatim
-   would emit `rgb(#211b28 / 1)` and silently break every `st-` colour utility in dark.
-   The VALUES below are the handoff's, converted channel-for-channel; the two tokens
-   tokens.css documents as finished colours (--ring-focus) or as caller-alpha channels
-   (--surface-overlay) keep their documented form.
+   The two tokens tokens.css documents as finished colours (--ring-focus) or as
+   caller-alpha channels (--surface-overlay) keep their documented form.
 
    The handoff's translucent tints (rgba(249,30,90,.18) and friends) cannot survive that
    conversion — a channel token has no room for its own alpha. They are pre-composited