IN-APP UPGRADE SCREEN: Usage Limit Reached

TRIGGER MOMENT:
   When user hits 80% of free tier limit (monthly API calls)
   Not at 100% (feels like punishment)
   Not at 50% (too early, weak motivation)
   Optimal: 80% → User feels friction but still has runway

## SCREEN DESIGN

Layout: Modal, centered, 500px wide (no dismiss button—fully modal)

### HEADER (Emotional resonance, not pushy)
   Headline: "You're close to the limit"
   Subheading: "Upgrade for unlimited access + 2 premium features"
   Visual: Simple icon (progress bar approaching 100%, not angry/red)
   Tone: Empathetic ("You hit a real need"), not shame ("You need more")

### FEATURE UNLOCK SECTION (Concrete value)
   Layout: 3-item grid
   
   Feature 1: Scheduled Reports
      Copy: "Auto-send weekly summaries to your team"
      Icon: Calendar + checkmark
      Implied benefit: Saves 2 hours/week manual reporting
   
   Feature 2: Advanced Filtering
      Copy: "Query by 20+ dimensions (currently 5)"
      Icon: Funnel
      Implied benefit: Faster analysis, more insights
   
   Feature 3: Priority Support
      Copy: "Email response within 2 hours (currently 24h)"
      Icon: Headset
      Implied benefit: Faster problem resolution

### PRICING SECTION (Transparent, no tricks)
   Layout: Two pricing tiers displayed (not three to avoid middle-option trap)
   
   TIER 1: "CREATOR"
      Price: $19/month
      What's included:
         • 50K API calls/month (currently 10K free)
         • Scheduled reports
         • Email support (24h)
      CTA button: "Upgrade to Creator"
      Color: Outlined (secondary button style)
   
   TIER 2: "PROFESSIONAL" (Recommended, subtle highlight)
      Price: $79/month
      What's included:
         • Unlimited API calls
         • All Creator features +
         • Advanced filtering
         • Priority support (2h)
         • Webhooks
         • API documentation
      CTA button: "Start Professional Trial" (filled, primary color)
      Ribbon: "Most popular" (understated, small text above price)
      Color: Slight gray background (visual lift without being loud)
   
   Trust line: "30-day money-back guarantee. No credit card needed for trial."

### FRICTION REDUCTION
   Annual billing toggle (top-right):
      Monthly: $79/month → Yearly: $79 × 10/year (2 months free)
      Copy: "Save $190/year"
      Psychological trigger: "2 months free" sounds better than "17% off"
   
   CTA copy nuance:
      NOT: "Buy now"
      NOT: "Upgrade"
      YES: "Start free trial" or "Try Professional" (less commitment anxiety)
   
   Post-click: No form (auto-charge credit card already on file from signup)
      If new card needed → Micro-form (3 fields: name, card, zip)

### SECONDARY PATH (Prevent loss of free user)
   If user tries to close (click outside modal or back button):
      Counter-offer appears:
      "Wait, you can keep using free tier."
      "But here's what you'd unlock: [3-line benefit list]"
      Two buttons: "Close" (dismiss) | "See plan" (reopen pricing)
      Tone: Gentle, not aggressive

## COPY PSYCHOLOGY

What NOT to say:
   ✗ "Unlock premium features"
   ✗ "Upgrade to Professional"
   ✗ "Unlimited everything"
   ✗ "Join thousands of happy customers" (generic, untrustworthy)

What TO say:
   ✓ "You're close to the limit" (validates user's real pain)
   ✓ "Scheduled reports save 2 hours/week" (specific time benefit)
   ✓ "30-day money-back guarantee" (removes risk)
   ✓ "Try free for 30 days" (commitment-light entry point)
   ✓ "Includes 50K API calls" (concrete, measurable)

## VISUAL DESIGN

Color palette:
   Primary CTA: Brand blue (same color as main app)
   Secondary CTA: Light gray background (dismiss action, low visual weight)
   Highlight: Brand color only on "Recommended" tier (single accent point)
   Text: Dark gray on white (high contrast, readable)

Typography:
   Headline: Sans-serif bold 28px (commanding but not aggressive)
   Tier name: Bold 18px
   Feature list: Regular 14px, line-height 1.6
   Price: Bold 32px (big enough to anchor value)
   Legal fine print: 12px gray (required, downplayed)

Spacing:
   Modal padding: 40px (breathable)
   Feature grid gap: 24px
   Pricing tier gap: 16px
   Section spacing: 32px (visual hierarchy)
   Button height: 48px (thumb-friendly, generous)

## MOBILE VARIANT (Vertical layout)
   Modal now full-width (margin: 12px)
   Pricing tiers stack vertically (not side-by-side)
   Feature grid becomes single column
   All buttons: Full width
   All text: Font size +2px (mobile readability)

## ANALYTICS & ITERATION
   Track:
      • View rate: % of users who see upgrade modal
      • CTA click rate: % who click either pricing button
      • Conversion rate: % who actually upgrade within 24h
      • Dismiss rate: % who close without upgrading
   
   Benchmark targets:
      • Click rate: 25-35% (good conversion funnel starts here)
      • Conversion: 5-8% of modal views → paid subscribers
      • Dismiss rate: 60-70% acceptable (not everyone upgrades immediately)
   
   A/B test variation #2 (if conversion <5%):
      • Change headline: "You're running out of API calls—here's why upgrade" (shame angle, test if it works)
      • Swap tier order: Professional on left, Creator on right (test visual dominance)
      • Test 3-tier pricing (Creator / Professional / Enterprise) vs 2-tier

## TRAP TO AVOID
   • DON'T: Show upgrade modal on every pageload (annoying, users dismiss immediately)
   • DON'T: Use countdown timer (fake urgency kills trust)
   • DON'T: Highlight 3 tiers (paradox of choice, users freeze)
   • DON'T: Auto-hide the "free tier alternative" message (users who dismiss deserve an off-ramp)
   • DON'T: Charge before trial (violates "no credit card" promise)

## NEXT STEP
   Deploy to 20% of free tier users (A/B with old modal)
   Measure conversion for 2 weeks
   If >5% conversion: Roll out 100%
   If <5%: Test 2-3 copy / design variants