chore(billing): tighten usage-based billing copy

First pass of copy rewrites over the usage-based billing surfaces added in
the cutover stack (#3485, #3487, #3488).

- Announcement modal: shorter description; reframe the models bullet around
  open-source vs frontier; "$X/mo" and split "Adjust it any time…" sentences.
- Usage-limit / model-gate modal: rewrite the model-gate body (now two
  paragraphs) and trim the free-tier org-limit body.
- Plan & usage page: tighten the free and subscribed plan-card blurbs.

Renders the model-gate body's paragraph break via whitespace-pre-line.

Generated-By: PostHog Code
Task-Id: 8dff0a32-c536-4b09-b5a1-087e800b4600

Author: adboio

packages/core/src/billing/usageLimitContent.test.ts

@@ -9,7 +9,7 @@ describe("usageLimitContent", () => {
       subscribed: false,
     });
     expect(content.title).toBe("Unlock premium models");
-    expect(content.description).toContain("This model isn't");
+    expect(content.description).toContain("open-source model");
     expect(content.actionLabel).toBe("Add payment method");
   });
 

packages/core/src/billing/usageLimitContent.ts

@@ -18,7 +18,7 @@ export function usageLimitContent(args: {
     return {
       title: "Unlock premium models",
       description:
-        "This model isn't included in the free tier. Add a payment method to your organization to unlock all models — you only pay for what you use. You can keep working now by switching to an included model.",
+        "To use this model, add a payment method to your account. Your first $20 of usage is on us each month - you only pay for what you use beyond that.\n\nOr, you can keep working now by switching to an open-source model.",
       actionLabel: "Add payment method",
       dismissLabel: "Not now",
     };
@@ -30,7 +30,7 @@ export function usageLimitContent(args: {
         title: "Free usage used up",
         description: `Your organization has used up its included PostHog Code usage.${
           resetLabel ? ` ${resetLabel}.` : ""
-        } Add a payment method to keep going — you only pay for what you use.`,
+        } Add a payment method to keep going.`,
         actionLabel: "Add payment method",
         dismissLabel: "Not now",
       };

packages/ui/src/features/billing/UsageBillingAnnouncementModal.tsx

@@ -68,8 +68,7 @@ export function UsageBillingAnnouncementModal() {
           </Flex>
           <Dialog.Description>
             <Text className="text-sm">
-              Seat-based plans are gone — PostHog Code is now usage-based. You
-              only pay for what you use.
+              Seat-based plans are gone. PostHog Code is now usage-based.
             </Text>
           </Dialog.Description>
           <Flex direction="column" gap="2" className="text-sm">
@@ -78,19 +77,20 @@ export function UsageBillingAnnouncementModal() {
               is included.
             </Text>
             <Text color="gray">
-              • Premium models need a payment method; an open model stays free.
+              • Open-source models are always available. Access frontier models
+              by adding a payment method.
             </Text>
             <Text color="gray">
               {spendLimitUsd != null ? (
                 <>
                   • Your organization's spend limit is{" "}
-                  <Text weight="medium">{`${formatUsdAmount(spendLimitUsd)}/month`}</Text>{" "}
-                  — adjust it any time in billing settings.
+                  <Text weight="medium">{`${formatUsdAmount(spendLimitUsd)}/mo`}</Text>
+                  . Adjust it any time in billing settings.
                 </>
               ) : (
                 <>
-                  • A default <Text weight="medium">$50/month</Text> spend limit
-                  applies — adjust it any time in billing settings.
+                  • A default spend limit of <Text weight="medium">$50/mo</Text>{" "}
+                  applies. Adjust it any time in billing settings.
                 </>
               )}
             </Text>

packages/ui/src/features/billing/UsageLimitModal.tsx

@@ -57,7 +57,7 @@ export function UsageLimitModal() {
             <Dialog.Title className="mb-0">{content.title}</Dialog.Title>
           </Flex>
           <Dialog.Description>
-            <Text color="gray" className="text-sm">
+            <Text color="gray" className="whitespace-pre-line text-sm">
               {content.description}
             </Text>
           </Dialog.Description>

packages/ui/src/features/settings/sections/PlanUsageSettings.tsx

@@ -131,8 +131,8 @@ export function PlanUsageSettings() {
                 </Text>
                 <Text className="text-(--gray-11) text-sm">
                   {freeTier
-                    ? "Your organization's first $20 of usage each month is included, with access to open models. Add a payment method to unlock premium models — you only pay for what you use."
-                    : "Your organization pays for PostHog Code usage at cost — no seats, no subscriptions. The first $20 each month is included."}
+                    ? "Your org's first $20 of usage each month is included, with access to open models. Add a payment method to unlock premium models, and only pay for what you use."
+                    : "Your organization pays for PostHog Code usage at cost. The first $20 each month is included."}
                 </Text>
               </Flex>
               {subscribed && (