fix(chrome): replace 2 platform emoji + 1 en-dash with on-brand tokens

PRODUCT.md anti-references call out the SaaS-template / emoji-in-chrome
register: the reference products (Linear, Stripe, Things 3) don't put
platform emoji in product chrome. Three small drift spots:

- Balance saved-cards link used a 💳 emoji as the leading icon.
  Replaced with a new CreditCardIcon added to the barrel (Heroicons-
  style stroke, matches the chevron / chat / wallet siblings).

- Subscription paused-info banner used a ⏸️ emoji. Replaced with a
  new PauseIcon added to the barrel. Same 24×24 stroke, currentColor,
  preserves the urgent-400 tint via inline style.

- Balance payment-method min/max range used a literal en-dash ('–')
  in source. PRODUCT.md's anti-em-dash rule covers the en-dash by
  the same logic. Switched to a translated 'to' connector
  (t('common.rangeTo', 'to')) so other locales can translate freely.

src/components/icons/index.tsx

@@ -701,3 +701,36 @@ export const ArrowPathIcon = ({ className }: IconProps) => (
     />
   </svg>
 );
+
+export const PauseIcon = ({ className, style }: IconProps & { style?: React.CSSProperties }) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    style={style}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+);
+
+export const CreditCardIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+    />
+  </svg>
+);