Refine pricing plans UI with interactive selection and improved clarity

  - Add interactive plan selection: clicking moves highlight badge between plans
  - Dynamic badge text: "Current Plan", "Upgrade Now", or "Downgrade Now"
  - Rename plans: Free→Demo, keep Max (briefly was Team)
  - Update descriptions: Pro for "serious creators", Max for "teams and high volume API"
  - Replace "projects" with "tasks" throughout
  - Add team collaboration features to Max plan
  - Move overage protection from footer to individual plan features
  - Format prices with commas for better readability
  - Remove redundant "Available Plans" heading

Author: jeffdyer

src/components/payments/PricingPlans.tsx

@@ -27,7 +27,7 @@ const plans = [
   {
     id: 'pro',
     name: 'Pro',
-    description: 'Great for serious developers',
+    description: 'Great for serious creators',
     monthlyPrice: 50,
     annualPrice: 500,
     units: 50000,
@@ -45,8 +45,8 @@ const plans = [
   },
   {
     id: 'teams',
-    name: 'Team',
-    description: 'For professional developers and teams',
+    name: 'Max',
+    description: 'For teams and high volume API calls',
     monthlyPrice: 500,
     annualPrice: 5000,
     units: 1000000,
@@ -56,11 +56,12 @@ const plans = [
       'Access to all languages',
       'Priority support',
       'Private and public tasks',
+      'Team collaboration features',
       'Advanced IDE features',
       'API access',
       'Automatic overage protection'
     ],
-    cta: 'Go Team'
+    cta: 'Go Max'
   }
 ];
 
@@ -156,7 +157,7 @@ export default function PricingPlans({ userId }: PricingPlansProps) {
               </div>
 
               <div className="mb-6">
-                <span className="text-4xl font-bold text-gray-900">${price}</span>
+                <span className="text-4xl font-bold text-gray-900">${price.toLocaleString()}</span>
                 {plan.id !== 'free' && (
                   <span className="text-gray-500 ml-1">
                     /{billingInterval === 'monthly' ? 'mo' : 'yr'}