fix(site): pricing page mobile above-fold visibility (#7764)

* fix(site): reduce pricing hero size on mobile for above-fold visibility

On mobile, the H1 and hero padding consumed the entire viewport,
pushing all pricing plans below the fold. Reduces heading size,
spacing, and padding at mobile breakpoints so at least one plan
card is visible without scrolling. Desktop layout unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Mike Hartington <mikehartington@gmail.com>

Author: 3 people

apps/site/src/app/pricing/pricing-hero-plans.tsx

@@ -37,9 +37,9 @@ export function PricingHeroPlans({
 
   return (
     <>
-      <section className="relative pt-28 pb-16 px-4">
+      <section className="relative pt-28 pb-8 md:pt-28 md:pb-16 px-4 ">
         <div className="absolute inset-0 bg-[radial-gradient(80%_60%_at_50%_0%,rgba(20,184,166,0.22),transparent_60%)] pointer-events-none" />
-        <div className="relative max-w-[1200px] mx-auto flex flex-col items-center gap-6">
+        <div className="relative max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6">
           <Badge
             color="ppg"
             size="lg"
@@ -51,16 +51,16 @@ export function PricingHeroPlans({
               </>
             }
           />
-          <h1 className="stretch-display m-0 text-center text-foreground-neutral text-5xl md:text-7xl leading-tight font-sans-display [font-variation-settings:'wght'_900]">
+          <h1 className="stretch-display m-0 text-center text-foreground-neutral text-3xl md:text-7xl leading-tight font-sans-display [font-variation-settings:'wght'_900]">
             Scale as You Grow <br /> with Prisma Postgres
           </h1>
-          <p className="m-0 text-center text-xl text-foreground-neutral-weak">
+          <p className="m-0 text-center text-base md:text-xl text-foreground-neutral-weak">
             Operation-based pricing. We only charge for what you use.
           </p>
         </div>
       </section>
 
-      <section className="px-4 py-12">
+      <section className="px-4 py-6 md:py-12">
         <div className="max-w-[1288px] mx-auto">
           <div className="mb-6 flex justify-end">
             <Select value={currency} onValueChange={(value) => onCurrencyChange(value as Symbol)}>